Force no scroll bar and text no wrap

[jonsveswe]

Hi. I have an example table that I'm trying to do with your table: https://codesandbox.io/s/table-test-p26pph?file=/index.html

The table should have no scroll bars, automatically rezise the columns and the text should not wrap. I have been trying to set different props like muiTableHeadCellProps, muiTableContainerProps, muiTableProps. Any ideas?

Best Regards

[KevinVandy]

Yeah, you can set no wrap in the muiTableBodyCellProps sx or style prop, head cells, footer cells, etc. There should be no vertical scrollbars by default, but you could probably disable horizontal scrolling in the muiTablePaperProps

[jonsveswe]

Hi. I think the issue is that I can't set max-width on the element. Using this:

muiTableBodyCellProps={{
  sx: {
    color: "red",
    maxWidth: "210px",
    minWidth: "100px",
    width: "150px",
   },
}}

will change the color to red but doesn't do anything with the width properties. When I inspect the element in the browser, the class is named ".css-rwsmrb-MuiTableCell-root" and the width properties are always:

min-width: max(180px, 40px);
width: 180px;

max-width is greyed out
max-width: min(180px, fit-content);
with a warning of invalid property value.

The color property has changed to red:
color: red;

Any idea how to set max-width?

[KevinVandy]

Widths on cells are set by MRT. There are size, minSize, and maxSize props you can set on the column instead. Also might want to add table -layout: fixed to the muiTableProps sx prop to tell the browser to respect column widths more.

[jonsveswe]

Although maxSize doesn't seem to change max-width, it seems to be working like I want. Thank you.

[KevinVandy]

The thing with table elements is they will always increase in width to fill empty space. That's just how they work. To make the table smaller, you have to give it or it's container a max width