How do I make React js Material-UI table responsive as well as make it have equal column spacing?

Question

I'm using MaterialTable from material-ui but there are two problems I'm having.

1. How do I make my columns equally spaced since, after the first two columns, there is a huge & unnecessary space to the 3rd column.

2. This particular table is not responsive, how do I make it responsive?

<MaterialTable
        title="All Surveys"
        columns={this.state.columns}
        data={this.state.data}
        options={{
          actionsColumnIndex: -1,
          exportButton: true,
          draggable: true,
        }}
        editable={{
          onRowAdd: (newData) => this.addNew(newData),
          onRowUpdate: (newData, oldData) => this.update(newData, oldData),
          onRowDelete: (oldData) => this.delete(oldData),
        }}
      />

• From the image below, you can see the unnecessary space between 2nd and 3rd row

• From the image below, you can see the see that the table isn't responsive on mobile size

Shela

Answer 1

You can achieve equal spacing in-between the columns then you should do this:

<Table> uses the table-layout: 'fixed' CSS prop, leading to all columns having the same width, combined with white-space: 'nowrap' on every table cell to handle the overflow.

For achieving a responsive table layout, this might help: here

Acanthous

table-layout: 'fixed' just made it responsive but still i have an issue with overflow in mobile size. I've enclosed the table in a div with css whiteSpace: 'nowrap' but nothing changes. – Shela

For achieving a responsive table layout, this might help here. Columns are aligned with equal spacing in between right? – Acanthous

yes, they are aligned with equal spacing from the 3rd column. The problem is removing the unnecessary space between the 2nd and 3rd column. Kindly advice on how to go about solving this. – Shela

Can you share the CodePen for your project? – Acanthous

i'm using MaterialTable from material-ui link . It has all the code. – Shela

Check this, It might help: here. – Acanthous

Answer 2

@Shadow walker, For setting column width...Try setting a class for each table cell and then set its width. Think if only two columns and set to 100% on each cell width it will justify space evenly or have each take 50%. You can mix this in with also pixel size for other columns (think if 50px on each first two cells, after them the other cells can take a percentage and it justifies after set px width) and then what I did for more responsive feel was hide classes of cells on breakpoints.down('sm') or resize accordingly. Not sure if best way, but after playing around with it last night I am satisfied with how the table responds to different screen sizes and how my columns are spaced.

Whiffler

Answer 3

I did by adding this CSS code to .table class.

Note: it scrolls horizontally and looks somehow good.

.table {
width:'95%',
display:'block',
overflowX:'auto'
}

Ancilla

Answer 4

You can use flex property and set proportional width for every column:

   columns = [{
  headerName: "Name",
field: "name",
flex: 1
},
{
  headerName: "Age",
field: "age",
flex: 1
},]

More information in mui site: https://mui.com/components/data-grid/columns/#fluid-width

Lorsung

Answer 5

You can handle mobile responsive by adjusting min-width for TableContainer which is parent element of Table, if you're using material-ui.

Thanks!

Pamphylia