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 }, }} /> ); }

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

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 }, }} /> ); }

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