Revision history [back]

To add a horizontal scrollbar in a Material-UI Table to view overflow columns, follow these steps:

1. Wrap the Table component with a container element with a fixed width. This will ensure that the Table does not exceed the width of the container.

<div style={{ width: '100%' }}>
  <Table>
    // Table content
  </Table>
</div>

1. Add the 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>

1. Specify the 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.