Examples › Handling cell clicks

If you need to know not only which row, but also which column was clicked, pass an onCellClick handler to the DataTable. The handler receives an object with the following properties:

record → the clicked record;
index → the index of the clicked record in the records array;
column → the clicked column’s definition;
columnIndex → the index of the clicked column in display order (which can differ from its position in your columns array when columns are reordered, pinned or grouped);
event → the original React mouse event.

Click on a cell to see it in action:

Name	Street address	City	State
Feest, Bogan and Herzog	21716 Ratke Drive	Stromanport	WY
Cummerata - Kuhlman	6389 Dicki Stream	South Gate	NH
Goyette Inc	8873 Mertz Rapid	Dorthyside	ID
Runte Inc	2996 Ronny Mount	McAllen	MA
Goldner, Rohan and Lehner	632 Broadway Avenue	North Louie	WY
Doyle, Hodkiewicz and O'Connell	576 Joyce Ways	Tyraburgh	KS
Rau - O'Hara	7508 Lansdowne Road	Shieldsborough	MI
Tillman - Jacobi	57918 Gwendolyn Circles	Sheridanport	MI
Connelly, Feest and Hodkiewicz	7057 Stanley Road	Kearaburgh	CA
Shanahan, Robel and Beier	378 Berta Crescent	West Gerry	KS
Kling - McLaughlin	8346 Kertzmann Square	South Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID

No records

Here is the code:

<DataTable
  textSelectionDisabled
  withTableBorder
  columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
  records={companies}
  onCellClick={({ event, record, index, column, columnIndex }) => {
    openModal({
      title: 'Cell click information',
      children: (
        <Stack>
          <Text size="sm">
            You clicked on row[{index}], column[{columnIndex}] with accessor <Code>{column.accessor}</Code>.
            <br />
            The clicked row refers to company <em>{record.name}</em>.
            <br />
            {event.shiftKey && (
              <>
                You pressed the <Code>Shift</Code> key when clicking.
                <br />
              </>
            )}
            {event.ctrlKey && (
              <>
                You pressed the <Code>Ctrl</Code> key when clicking.
                <br />
              </>
            )}
            {event.altKey && (
              <>
                You pressed the <Code>Alt</Code> key when clicking.
                <br />
              </>
            )}
            {event.metaKey && (
              <>
                You pressed the <Code>Meta</Code> key when clicking.
                <br />
              </>
            )}
          </Text>
          <Center>
            <Button fullWidth onClick={() => closeAllModals()}>
              OK
            </Button>
          </Center>
        </Stack>
      ),
    });
  }}
/>

Double-clicks

The onCellDoubleClick handler receives the same arguments. Double-click on a cell to see it in action:

Name	Street address	City	State
Feest, Bogan and Herzog	21716 Ratke Drive	Stromanport	WY
Cummerata - Kuhlman	6389 Dicki Stream	South Gate	NH
Goyette Inc	8873 Mertz Rapid	Dorthyside	ID
Runte Inc	2996 Ronny Mount	McAllen	MA
Goldner, Rohan and Lehner	632 Broadway Avenue	North Louie	WY
Doyle, Hodkiewicz and O'Connell	576 Joyce Ways	Tyraburgh	KS
Rau - O'Hara	7508 Lansdowne Road	Shieldsborough	MI
Tillman - Jacobi	57918 Gwendolyn Circles	Sheridanport	MI
Connelly, Feest and Hodkiewicz	7057 Stanley Road	Kearaburgh	CA
Shanahan, Robel and Beier	378 Berta Crescent	West Gerry	KS
Kling - McLaughlin	8346 Kertzmann Square	South Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID

No records

Here is the code:

<DataTable
  textSelectionDisabled
  withTableBorder
  columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
  records={companies}
  onCellDoubleClick={({ event, record, index, column, columnIndex }) => {
    // process double-click event...
  }}
/>

Similarly, you can use the onCellContextMenu handler to react when the user right-clicks on a cell; call event.preventDefault() if you don’t want the browser’s own context menu to show up. See how you can use it to display a cell context menu with Mantine ContextMenu.

Heads up

Cell events bubble up to the row, so you can combine cell handlers with row handlers such as onRowClick; in that case, the cell handler is called first. Also keep in mind that a double-click is preceded by two regular click events.

When handling cell clicks, you might want to disable text selection.

If you need to combine clickable cells with links, buttons, row action cells or other clickable components inside cells, make sure to intercept the click event on those components and call its .stopPropagation() method.
See this example for more information.

Head over to the next example to discover more features.

Go back

Examples › Handling row clicks

Up next

Examples › Using with Mantine ContextMenu