To add a horizontal scrollbar in a Material-UI Table to view overflow columns, follow these steps:
<div style={{ width: '100%' }}>
<Table>
// Table content
</Table>
</div>
overflow-x: auto
style to the container element. This will add a horizontal scrollbar to the container if the Table exceeds its width.<div style={{ width: '100%', overflowX: 'auto' }}>
<Table>
// Table content
</Table>
</div>
width
property for each TableColumn component. This will ensure that the Table columns have fixed widths and do not exceed their allocated space.<TableColumn width={100}>Column 1</TableColumn>
<TableColumn width={200}>Column 2</TableColumn>
<TableColumn width={150}>Column 3</TableColumn>
By following these steps, the Material-UI Table will have a horizontal scrollbar that allows users to view overflow columns.
Asked: 2023-06-26 08:29:31 +0000
Seen: 8 times
Last updated: Jun 26 '23