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

Solution 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

Solution 2

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