Examples › Pinning the first column

Pinning the first column to the left side of the table could be useful when you have a table with many columns and you want to make sure the first column is always visible, even when the table is scrolled horizontally. For instance, you could use this feature to ensure that row actions placed on the first column are always visible.

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

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

Here is the code:

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

You can also combine this feature with row selection, in which case both the selection checkbox and the first user-provided column will be pinned to the left side of the table:

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

Here is the code:

return (
  <DataTable
    pinFirstColumn // 👈 make sure the first column is always visible
    selectedRecords={selectedRecord}
    onSelectedRecordsChange={setSelectedRecord}
    // other table props...
  />
);

You can use row selection and pin both the first and the last column at the same time:

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

Here is the code:

return (
  <DataTable
    pinFirstColumn // 👈 make sure the first column is always visible
    pinLastColumn // 👈 make sure the last column is always visible
    selectedRecords={selectedRecord}
    onSelectedRecordsChange={setSelectedRecord}
    // other table props...
  />
);

Using with column grouping

Warning!

When using this feature with column grouping, you need to make sure that the first group contains only one column.

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

	Workplace information			Workplace location
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

Here is the code:

return (
  <DataTable
    withTableBorder
    withColumnBorders
    pinFirstColumn
    pinLastColumn
    groups={[
      {
        id: 'name',
        title: '', // 👈 empty title
        style: { borderBottomColor: 'transparent' }, // 👈 hide the bottom border
        columns: [
          {
            accessor: 'name',
            title: (
              // 👇 use an absolutely positioned custom title component
              //    to center the title vertically
              <Text inherit pos="absolute" mt={-28}>
                Name
              </Text>
            ),
            noWrap: true,
            render: ({ firstName, lastName }) => `${firstName} ${lastName}`,
          },
        ],
      },
      // other column groups...
      },
    ]}
    // other table props...
  />
);