CODEWITHSUNDEEP
reactjsresponsive-designmaterial-uimaterial-table
Shadow Walker
Shadow Walker

Reputation: 1199

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

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),
        }}
      />

Upvotes: 9

Views: 35037

Answers (5)

Mahesh Ahire
Mahesh Ahire

Reputation: 71

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

Thanks!

Upvotes: 0

Ali Toshmatov
Ali Toshmatov

Reputation: 121

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

Upvotes: 0

Shaafy
Shaafy

Reputation: 79

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'
}

Upvotes: 0

user14138839
user14138839

Reputation:

@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.

Upvotes: 3

Darsh Shah
Darsh Shah

Reputation: 381

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

Upvotes: 3

Related Questions