title: How can I adjust the following implementation of react material-table to customize column width, and to avoid cell wrapping of value?
body: <p>I use material-table, react, and material-ui.</p>
  <p>I've really struggled to get material-table column widths set properly. I've googled a number of stack and git posts (e.g. <a href="https://github.com/mbrn/material-table/issues/291" rel="nofollow noreferrer">one example</a>, <a href="https://stackoverflow.com/questions/62539462/material-table-how-change-width-of-the-columns">another example</a>), all of which have made various suggestions.. none have worked for me.</p>
  <p>Currently I am creating my table as follows (notice all the attempts to set width, max-width, min-width. I've tried many combinations of these).</p>
  <p>I've also tried many combinations of the options parameters in an attempt to customize the table in a fashion consistent with the two questions at the bottom of this post.</p>
  <pre><code>return (
          &lt;div className={classes.root} &gt;
              &lt;MaterialTable
                  data={data}
                  title={title}
                  icons={tableIcons}
                  onSelectionChange={(rows) =&gt; setSelectedRows(rows)}
                  options={{
                      headerStyle: {
                          backgroundColor: &quot;#01579b&quot;,
                          color: &quot;#FFF&quot;
                      },
                      tableLayout: &quot;fixed&quot;,
                      rowStyle: {
                          overflowWrap: 'break-word'
                      },
                      selection: true,
                  }}
                  columns={[
                      {
                          title: &quot;Id&quot;,
                          field: &quot;id&quot;,
                          type: &quot;numeric&quot;,
                          headerStyle: {
                              backgroundColor: &quot;purple&quot;,
                              width: &quot;5%&quot;
                          },
                          cellStyle: {width: &quot;5%&quot;, maxWidth: &quot;5%&quot;, overflow: &quot;hidden&quot;},
                          width: &quot;5%&quot;
                      },
                      {
                          title: &quot;Label&quot;,
                          field: &quot;label&quot;,
                          headerStyle: {
                              backgroundColor: &quot;blue&quot;,
                              width: &quot;75%&quot;
                          },
                          cellStyle: {width: &quot;75%&quot;, maxWidth: &quot;75%&quot;, overflow: &quot;hidden&quot;},
                          width: &quot;75%&quot;
                      },
                      {
                          title: &quot;Time&quot;,
                          field: &quot;time&quot;,
                          type: &quot;string&quot;,
                          headerStyle: {
                              backgroundColor: &quot;red&quot;,
                              width: &quot;20%&quot;
                          },
                          cellStyle: {width: &quot;20%&quot;, maxWidth: &quot;20%&quot;, overflow: &quot;hidden&quot;},
                          width: &quot;20%&quot;
                      }
                  ]}
                  actions={[
                      {
                          icon: () =&gt; &lt;SaveAlt /&gt;,
                          tooltip: &quot;Save User&quot;,
                          onClick: (event, rowData) =&gt; alert(&quot;You saved &quot; + rowData.name)
                      }
                  ]}
                  components={{
                      Action: (props) =&gt; (
                          &lt;Button
                              onClick={(event) =&gt; props.action.onClick(event, props.data)}
                              color=&quot;primary&quot;
                              variant=&quot;text&quot;
                              style={{ textTransform: &quot;none&quot; }}
                              size=&quot;small&quot;
                          &gt;
                              Save
                          &lt;/Button&gt;
                      )
                  }}
  
              /&gt;
          &lt;/div&gt;
      );
  </code></pre>
  <p>where</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
      root: {
          maxWidth: &quot;600px&quot;,
          paddingTop: &quot;2px&quot;
      },
      margin: {
          margin: theme.spacing(1),
      },
      extendedIcon: {
          marginRight: theme.spacing(1),
      },
  }));
  </code></pre>
  <p>My table looks like the following:</p>
  <p><a href="https://i.stack.imgur.com/a2Gbh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a2Gbh.png" alt="enter image description here" /></a></p>
  <p>The following shows the CSS for the &quot;td&quot; element.
  <a href="https://i.stack.imgur.com/ZYgH6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZYgH6.jpg" alt="enter image description here" /></a></p>
  <p>Oddly the width is set to 200px, and nothing I seem to do modifies this. Even when I change the value in the dev tools to something like 40px, this does not change the actual column width.</p>
  <p>I am able to change the header width (in developer tools) for that column and then things look ok, but nothing I do in the code has allowed me to change the header width in this same fashion.</p>
  <p><a href="https://i.stack.imgur.com/VI5Tq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VI5Tq.jpg" alt="enter image description here" /></a></p>
  <p>If I do the following for the ID column, one would think that it would set the width for the header, but it doesnt. It still shows up as 200px.</p>
  <pre><code>{
                          title: &quot;Id&quot;,
                          field: &quot;id&quot;,
                          type: &quot;numeric&quot;,
                          headerStyle: {
                              backgroundColor: &quot;red&quot;,
                              width: &quot;80px&quot;
                          },
                      },
  </code></pre>
  <p><a href="https://i.stack.imgur.com/DwoLz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DwoLz.png" alt="enter image description here" /></a></p>
  <p>Per the suggestion made in one of the comments, I've also tried <a href="https://codesandbox.io/s/material-table-change-width-of-column-kty8g?file=/src/App.js" rel="nofollow noreferrer">this</a> code.. to no avail:</p>
  <pre><code>export default function MyCustomTable(props) {
      const classes = useStyles();
      const tableRef = React.createRef();
  
      const tableColumns = [
          { title: &quot;Lorem ipsum&quot;, field: &quot;lorem&quot;, width: &quot;10%&quot; },
          { title: &quot;Name&quot;, field: &quot;name&quot;, width: &quot;80%&quot; },
          { title: &quot;Custom status&quot;, field: &quot;customStatus&quot;, width: &quot;10%&quot; }
      ];
  
      const tableData = [
          {
              lorem: &quot;lorem&quot;,
              name: &quot;name&quot;,
              customStatus: &quot;customStatus&quot;
          }
      ];
  
      return (
          &lt;div className={classes.root} &gt;
          &lt;MaterialTable
              tableRef={tableRef}
              columns={tableColumns}
              data={tableData}
              title=&quot;Change Column Width Example&quot;
              options={{
                  tableLayout: &quot;fixed&quot;
              }}
          /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/yxWy7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yxWy7.jpg" alt="enter image description here" /></a></p>
  <p>I've also tried to strip out all of my application except for the materialtable.. same styling problem.</p>
  <p><a href="https://i.stack.imgur.com/Ek38W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ek38W.png" alt="enter image description here" /></a></p>
  <p>Two questions:</p>
  <ol>
  <li>How do I make the ID column narrower?</li>
  <li>How do I configure the date so that it does not wrap onto a second row?</li>
  </ol>