Examples › Pinning the last column

You may have noticed that when you are using row selection and the table needs to scroll horizontally, the checkbox column is always visible. This is because the checkbox column is pinned to the left side of the table.

In the same way, pinning the last column to the right side of the table could be useful when you have a table with many columns and you want to make sure the last column is always visible, even when the table is scrolled horizontally. For instance, you could use this feature to ensure that the row actions are always visible.

You can achieve this by setting the pinLastColumn DataTable prop to true:

First name	Last name	Department	Company	City	State	Address	Mission statement
Dustin	Sawayn	Industrial	Runolfsdottir - Cummerata	Missouri City	KY	102 Konopelski Greens	Leverage one-to-one methodologies.
Earnest	Heller	Health	Johnston LLC	Hartford	KY	230 Julie Lake	Transition wireless initiatives.
Sheila	Kessler	Automotive	Sipes Inc	Twin Falls	MT	280 Rigoberto Divide	Strategize magnetic vortals.
Brayan	Macejkovic	Baby	Johnston LLC	Hartford	KY	230 Julie Lake	Transition wireless initiatives.
Assunta	Ankunding	Books	Crist and Sons	Attleboro	WV	3387 Blick Turnpike	Revolutionize out-of-the-box infomediaries.

No records

Here is the code:

return (
  <DataTable
    pinLastColumn // 👈 make sure the last column is always visible
    withBorder
    columns={[
      { accessor: 'firstName', noWrap: true },
      { accessor: 'lastName', noWrap: true },
      { accessor: 'department.name', title: 'Department' },
      { accessor: 'department.company.name', title: 'Company', noWrap: true },
      { accessor: 'department.company.city', title: 'City', noWrap: true },
      { accessor: 'department.company.state', title: 'State' },
      { accessor: 'department.company.streetAddress', title: 'Address', noWrap: true },
      { accessor: 'department.company.missionStatement', title: 'Mission statement', noWrap: true },
      {
        accessor: 'actions',
        title: <Box mr={6}>Row actions</Box>,
        textAlignment: 'right',
        render: (employee) => (
          // action cells custom rendering...
        ),
      },
    ]}
    records={records}
  />
);