8

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 enter image description here

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

S. Hesam
  • 5,266
  • 3
  • 37
  • 59
Shadow Walker
  • 979
  • 5
  • 27
  • 51

5 Answers5

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

Darsh Shah
  • 351
  • 3
  • 9
  • ``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. – Shadow Walker Jul 02 '20 at 19:37
  • For achieving a responsive table layout, this might help [here](https://stackoverflow.com/questions/51264502/react-js-material-ui-responsive-table). Columns are aligned with equal spacing in between right? – Darsh Shah Jul 03 '20 at 05:47
  • 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. – Shadow Walker Jul 03 '20 at 08:12
  • Can you share the CodePen for your project? – Darsh Shah Jul 03 '20 at 12:28
  • i'm using MaterialTable from material-ui [link](https://material-ui.com/components/tables/) . It has all the code. – Shadow Walker Jul 03 '20 at 12:43
  • Check this, It might help: [here](https://stackoverflow.com/questions/51216285/material-ui-v1-set-table-column-widths). – Darsh Shah Jul 03 '20 at 12:53
1

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

0

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'
}
Shaafy
  • 49
  • 7
0

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

Ali Toshmatov
  • 101
  • 6
0

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

Thanks!

Mahesh Ahire
  • 41
  • 3