What is a cleaner way to set table cell's width property to auto?

[dnjsgur0629]

I wanted the width of each column to fit the content not fixed width

By wrapping MaterialReactTable with a Box with max-width: max-content and setting TableCell's width to auto !important via ThemProvider

import React from "react";

import "./styles.css";

import MaterialReactTable from "material-react-table";
import { Box, ThemeProvider } from "@mui/material";
import { createTheme } from "@mui/material/styles";
import styled from "@emotion/styled";

import { mockColumns, mockData } from "./mock";

const theme = createTheme({
  components: {
    MuiTableCell: {
      defaultProps: {
        align: "center"
      },
      styleOverrides: {
        root: {
          borderRight: "1px solid black",
          width: 'auto !important',
          minWidth: 'auto !important'
        }
      }
    }
  }
});

const MaterialReactTableBox = styled(Box)`
  max-width: max-content;
`;

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <MaterialReactTableBox>
        <MaterialReactTable
          columns={mockColumns}
          data={mockData }
          initialState={{ density: "compact" }}
        />
      </MaterialReactTableBox>
    </ThemeProvider>
  );
}

And I got this:

I don't think this is the best way.

Also, this way caused the table to be act up when using the column pinning feature.

...

<MaterialReactTable
          columns={mockColumns}
          data={mockData}
          initialState={{ density: "compact" }}
          enablePinning
          initialState={{
            density: "compact",
            columnPinning: { left: ["name", "firstName"] }
          }}
        />

...

From the description here, I understood that setting width to auto is not possible in general way.
Is my understanding correct? And is there a cleaner way to achieve what I want?

[dnjsgur0629]

I got better results by specifying only size of the pinned columns and setting the size of the remaining columns to 1 (a value smaller than theirs content).

export const mockColumns = [
  {
    accessorKey: "name",
    header: "NAME",
    minSize: 200,
    size: 200,
  },
  {
    accessorKey: "firstName",
    header: "FIRST NAME",
    minSize: 180,
    size: 180,
  },
  {
    accessorKey: "middleName",
    header: "MIDDLE NAME",
    size: 1
  },
  {
    accessorKey: "lastName",
    header: "LAST NAME",
    size: 1
  },
  {
    accessorKey: "salary",
    header: "SALARY",
    size: 1
  },
  {
    accessorKey: "total",
    header: "TOTAL",
    size: 1
  }
];