Examples › Handling cell clicks
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
Provide a handler called onCellClick to the DataTable component, like so:
<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 works in a similar way:
<DataTable
textSelectionDisabled
withTableBorder
columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
records={companies}
onCellDoubleClick={({ event, record, index, column, columnIndex }) => {
// process double-click event...
}}
/>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
Heads up
When handling row clicks, you might want to disable text selection.
If you need to combine this behavior with links, buttons, row action cells or any kind of clickable components inside cells, make sure to intercept the
See this example for more information.
click event on those components and invoke its .stopPropagation() method.See this example for more information.
Head over to the next example to discover more features.
