NextJS React-Data-Table-Component Styling

Question

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>

Szilágyi István · Accepted Answer · 2022-10-10 11:50:28Z

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.

Collectives™ on Stack Overflow

NextJS React-Data-Table-Component Styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related