NextJS React-Data-Table-Component Styling

Task:

• I would like to show a really big DataTable in UI which is horizontally and vertically is scrollable

Issue:

• Cannot set scrolling on X axis
• UI cuts/hides down the first half of the table if not zooming out
• Makes the UI not usaböe

Tried:

• Reading and setting the following properties
• Reading and setting custom styles with the help of git documents
• Reading and setting extra HTML tags like and styles allowing overflowX to make it scrollable

Details:

• Table is roughly 50-60 columns
• 200+ rows
• component: React-Data-Table-Component
• component uses custom solution using a lot of div tags (this is out of the box upon inspecting the react-data-table-component in website)

Needs solution:

• Cannot scroll left and right in table
• Cannot see left part of the table

Example Column:

    {
    name: 'header1',
    id: 'header1',
    maxWidth: 'auto',
    minWidth: 'auto',
    selector: row => row.data1,
    sortable: true,
    compact: true,
},

Example Table:

<div style={{ overflowX: "visible", scrollSnapAlign: "start" }}>
            <DataTable
                columns={DataTableHeaders}
                data={filteredItems}
                pagination
                paginationComponentOptions={paginationComponentOptions}
                selectableRows
                defaultSortField="name"
                subHeader
                subHeaderComponent={subHeaderComponent}
                subHeaderAlign={Alignment.CENTER}
                expandableRows
                expandableRowsComponent={ExpandedComponent}
                dense
                highlightOnHover
                fixedHeader
                persistTableHead
                responsive
                direction={Direction.LTR}
            //customStyles={customStyles}
            //theme="dark"
            //className={styleDataTable.rdt_TableRow}
            />
    </div>

Apparently this issue can be solved by setting fixed % width based on viewable area

        <div style={{ overflowX: "hidden", width: "94vw", alignItems: "flex-start" }}>
            <DataTable
                className={styleDataTable.rdt_TableCol}
                columns={DataTableHeaders}
                data={filteredItems}
                pagination
                paginationComponentOptions={paginationComponentOptions}
                defaultSortField="name"
                subHeader
                subHeaderComponent={subHeaderComponent}
                subHeaderAlign={Alignment.LEFT}
                expandableRows
                expandableRowsComponent={ExpandedComponent}
                dense
                highlightOnHover
                fixedHeader
                persistTableHead
                responsive
                direction={Direction.LTR}
            //customStyles={customStyles}
            //theme="dark"
            //className={styleDataTable.rdt_TableRow}
            />
    </div>

Notice that width: 94vw which will make the table fit on the 94% of the visible area. This way it becomes scrollable from left to right and the data table wont overflow and wont disappear.

Not sure if there is a better solution but for now this works alright.