Task:
- I need to display a large DataTable in the UI with both horizontal and vertical scrolling capabilities
Issue:
- Unable to enable scrolling on the X axis
- UI cuts off the first half of the table unless zoomed out
- UI becomes unusable
Tried:
- Reviewed and adjusted various properties
- Read and implemented custom styles from the git documentation
- Explored adding extra HTML tags and styles to enable overflowX for scrolling
Details:
- Table has around 50-60 columns
- 200+ rows
- Using React-Data-Table-Component
- Component uses a custom solution with numerous div tags (observed when inspecting the react-data-table-component on the website)
Needs solution:
- Need to enable horizontal scrolling within the table
- Unable to view the left portion 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>