Theme

Examples › Handling cell clicks

Click on a cell to see it in action:
Sipes Inc280 Rigoberto DivideTwin FallsMT
Runolfsdottir - Cummerata102 Konopelski GreensMissouri CityKY
Johnston LLC230 Julie LakeHartfordKY
Crist and Sons3387 Blick TurnpikeAttleboroWV
Schmidt and Sons286 Leif LockColliervilleAL
Nicolas Group09622 Marcel PlaceHighlandOR
Kub and Sons8699 Upton FordsEast ProvidenceIN
Jakubowski - Rolfson191 O'Connell GreensSan RafaelMA
Welch - Tremblay31622 Isobel FallOlatheAR
Mueller, Hodkiewicz and Beahan21751 Elisa VillageGrand PrairieWA
No records
Provide a handler called onCellClick to the DataTable component, like so:
<DataTable
withBorder
columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
records={companies}
onCellClick={({ event, record, recordIndex, column, columnIndex }) => {
openModal({
title: 'Cell click information',
children: (
<Stack>
<Text size="sm">
You clicked on row[{recordIndex}], 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 sx={{ width: '100%', maxWidth: 100 }} onClick={() => closeAllModals()}>
OK
</Button>
</Center>
</Stack>
),
});
}}
/>

Mantine DataTable is trusted by

MIT LicenseSponsor the author
Built by Ionut-Cristian Florescu and these awesome people.
Please sponsor the project if you find it useful.
GitHub StarsNPM Downloads