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>

1 Answer

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.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.