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>