column-pinning

Column pinning or column "freezing" allows you to pin columns to the left or right side of the table to keep them visible while scrolling horizontally.

Pin Columns

To pin a column, set tableOptions.enableColumnPinning to true and then specify the tableOptions.state.columnPinning.

Left-Pinned Column

<DataTable
  tableOptions={{
    enableColumnPinning: true,
    state: {
      columnPinning: {
        left: ['name'],
      },
    },
  }}

Multiple Left-Pinned Columns

<DataTable
  tableOptions={{
    enableColumnPinning: true,
    state: {
      columnPinning: {
        left: ['name', 'age', 'breed'],
      },
    },
  }}

Right-Pinned Column

You can also pin columns to the right side of the table.

<DataTable
  tableOptions={{
    enableColumnPinning: true,
    state: {
      columnPinning: {
        right: ['nationality'],
      },
    },
  }}

Multiple Right-Pinned Columns

<DataTable
  tableOptions={{
    enableColumnPinning: true,
    state: {
      columnPinning: {
        right:
          ['nationality', 'microchip', 'skills'],
      },
    },
  }}

Multiple Pinned Columns on Both Sides

You can even pin multiple columns on both the left and right sides of the table!

<DataTable
  tableOptions={{
    enableColumnPinning: true,
    state: {
      columnPinning: {
        left: ['name', 'age', 'breed'],
        right:
          ['nationality', 'microchip', 'skills'],
      },
    },
  }}