Skip to main content

Fixed Columns

Material Table supports fixed columns, both from the left and the right end.

Usage​

import MaterialTable from '@material-table/core';

<MaterialTable
  options={{
    fixedColumns: { left: number, right: number },
  }}
/>;

  • For keeping left columns fixed in the table

    • fixedColumns: { left: number } (value should be a non-zero integer)

  • For keeping right columns fixed in the table

    • fixedColumns: { right: number } (value should be a non-zero integer)

Live Demo​

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor
function LeftFixedColumn() {
  const [data, setData] = useState(EDITABLE_DATA);
  const columns = [
    { field: 'id', title: 'Id', editable: 'never', width: 100 },
    { field: 'firstName', title: 'First Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
  ];
  return (
    <MaterialTable
      data={data}
      columns={columns}
      icons={TABLE_ICONS}
      options={{
        fixedColumns: { left: 1 },
      }}
    />
  );
}
Result
Loading...
Live Editor
function RightFixedColumn() {
  const [data, setData] = useState(EDITABLE_DATA);
  const columns = [
    { field: 'id', title: 'Id', editable: 'never', width: 100 },
    { field: 'firstName', title: 'First Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
    { field: 'lastName', title: 'Last Name', width: 200 },
  ];
  return (
    <MaterialTable
      data={data}
      columns={columns}
      icons={TABLE_ICONS}
      options={{
        fixedColumns: { right: 1 },
      }}
    />
  );
}
Result
Loading...