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.

First name	Last name	Department	Company	City	State	Address	Mission statement
Jerald	Howell	Industrial	Runte Inc	McAllen	MA	2996 Ronny Mount	Engage synergistic infrastructures.
Kathleen	Ruecker	Computers	Shanahan, Robel and Beier	West Gerry	KS	378 Berta Crescent	Synthesize customized portals.
Erica	Volkman	Toys	Goyette Inc	Dorthyside	ID	8873 Mertz Rapid	Productize front-end web services.
Clifford	Oberbrunner	Automotive	Rau - O'Hara	Shieldsborough	MI	7508 Lansdowne Road	Innovate real-time applications.
Alison	Kling	Jewelery	Goyette Inc	Dorthyside	ID	8873 Mertz Rapid	Productize front-end web services.

No records

return (
  <DataTable
    pinLastColumn // 👈 make sure the last column is always visible
    // other table props...
  />
);

Using with column grouping

Here is an example of how you can pin the last column when using column grouping. Notice how the last group contains only one column, and how we are using an absolutely positioned custom title component to create the illusion that the Actions text is centered vertically:

Name		Workplace information			Workplace location
First name	Last name	Company	Department	Mission statement	City	State	Address	Actions
Jerald	Howell	Runte Inc	Industrial	Engage synergistic infrastructures.	McAllen	MA	2996 Ronny Mount
Kathleen	Ruecker	Shanahan, Robel and Beier	Computers	Synthesize customized portals.	West Gerry	KS	378 Berta Crescent
Erica	Volkman	Goyette Inc	Toys	Productize front-end web services.	Dorthyside	ID	8873 Mertz Rapid
Clifford	Oberbrunner	Rau - O'Hara	Automotive	Innovate real-time applications.	Shieldsborough	MI	7508 Lansdowne Road
Alison	Kling	Goyette Inc	Jewelery	Productize front-end web services.	Dorthyside	ID	8873 Mertz Rapid

No records

return (
  <DataTable
    withTableBorder
    withColumnBorders
    pinLastColumn
    groups={[
      // other column groups...
      // 👇 this group has only one column, so it will be pinned to the right side of the table
      {
        id: 'actions',
        title: '', // 👈 empty title
        style: { borderBottomColor: 'transparent' }, // 👈 hide the group bottom border
        columns: [
          {
            accessor: 'actions',
            title: (
              // 👇 use an absolutely positioned custom title component
              //    to center the title vertically
              <Text inherit pos="absolute" mt={-28} ml={12}>
                Actions
              </Text>
            ),
            render: (employee) => (
              <Group gap={4} wrap="nowrap">
                <ActionIcon
                  size="sm"
                  variant="subtle"
                  color="green"
                  onClick={() => showModal({ employee, action: 'view' })}
                >
                  <IconEye size={16} />
                </ActionIcon>
                <ActionIcon
                  size="sm"
                  variant="subtle"
                  color="blue"
                  onClick={() => showModal({ employee, action: 'edit' })}
                >
                  <IconEdit size={16} />
                </ActionIcon>
                <ActionIcon
                  size="sm"
                  variant="subtle"
                  color="red"
                  onClick={() => showModal({ employee, action: 'delete' })}
                >
                  <IconTrash size={16} />
                </ActionIcon>
              </Group>
            ),
          },
        ],
      },
    ]}
    // other table props...
  />
);