title: How do i fix the text/data overflow in material-ui?
body: <p>I'm using <strong>MaterialTable</strong> from <a href="https://material-ui.com/components/tables/" rel="nofollow noreferrer">material-ui</a> the problem i'm having is In my mobile size, the data in my table tends to overflow. This is not an issue in the normal desktop mode. How do i fix this.</p>
  <pre><code>&lt;MaterialTable
        className={classes.table}
        title=&quot;Editable Example&quot;
        columns={state.columns}
        data={state.data}
        options={{
          padding: &quot;dense&quot;,
          tableLayout: &quot;fixed&quot;,
          actionsColumnIndex: -1,
          exportButton: true,
        }}
        editable={{
          onRowAdd: (newData) =&gt;
            new Promise((resolve) =&gt; {
              setTimeout(() =&gt; {
                resolve();
                setState((prevState) =&gt; {
                  const data = [...prevState.data];
                  data.push(newData);
                  return { ...prevState, data };
                });
              }, 600);
            }),
          onRowUpdate: (newData, oldData) =&gt;
            new Promise((resolve) =&gt; {
              setTimeout(() =&gt; {
                resolve();
                if (oldData) {
                  setState((prevState) =&gt; {
                    const data = [...prevState.data];
                    data[data.indexOf(oldData)] = newData;
                    return { ...prevState, data };
                  });
                }
              }, 600);
            }),
          onRowDelete: (oldData) =&gt;
            new Promise((resolve) =&gt; {
              setTimeout(() =&gt; {
                resolve();
                setState((prevState) =&gt; {
                  const data = [...prevState.data];
                  data.splice(data.indexOf(oldData), 1);
                  return { ...prevState, data };
                });
              }, 600);
            }),
        }}
      /&gt;
  </code></pre>
  <ul>
  <li>Below is the visual of the problem
  <a href="https://i.stack.imgur.com/gkWA3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gkWA3.png" alt="enter image description here" /></a></li>
  </ul>