title: How do I make React js Material-UI table responsive as well as make it have equal column spacing?
body: <p>I'm using <strong>MaterialTable</strong> from <a href="https://material-ui.com/components/tables/" rel="noreferrer">material-ui</a> but there are two problems I'm having.</p>
  <p><strong>1.</strong> How do I make my columns equally spaced since, after the first two columns, there is a huge &amp; unnecessary space to the 3rd column.</p>
  <p><strong>2.</strong> This particular table is not responsive, how do I make it responsive?</p>
  <pre><code>&lt;MaterialTable
          title=&quot;All Surveys&quot;
          columns={this.state.columns}
          data={this.state.data}
          options={{
            actionsColumnIndex: -1,
            exportButton: true,
            draggable: true,
          }}
          editable={{
            onRowAdd: (newData) =&gt; this.addNew(newData),
            onRowUpdate: (newData, oldData) =&gt; this.update(newData, oldData),
            onRowDelete: (oldData) =&gt; this.delete(oldData),
          }}
        /&gt;
  </code></pre>
  <ul>
  <li><p>From the image below, you can see the unnecessary space between 2nd and 3rd row
  <a href="https://i.stack.imgur.com/Sjeum.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Sjeum.png" alt="enter image description here" /></a></p>
  </li>
  <li><p>From the image below, you can see the see that the table isn't responsive on mobile size
  <a href="https://i.stack.imgur.com/I8KVO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/I8KVO.png" alt="enter image description here" /></a></p>
  </li>
  </ul>