Examples › Handling cell clicks

Click on a cell to see it in action:

Name
Street address
City
State
Feest, Bogan and Herzog21716 Ratke DriveStromanportWY
Cummerata - Kuhlman6389 Dicki StreamSouth GateNH
Goyette Inc8873 Mertz RapidDorthysideID
Runte Inc2996 Ronny MountMcAllenMA
Goldner, Rohan and Lehner632 Broadway AvenueNorth LouieWY
Doyle, Hodkiewicz and O'Connell576 Joyce WaysTyraburghKS
Rau - O'Hara7508 Lansdowne RoadShieldsboroughMI
Tillman - Jacobi57918 Gwendolyn CirclesSheridanportMI
Connelly, Feest and Hodkiewicz7057 Stanley RoadKearaburghCA
Shanahan, Robel and Beier378 Berta CrescentWest GerryKS

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 Herzog21716 Ratke DriveStromanportWY
Cummerata - Kuhlman6389 Dicki StreamSouth GateNH
Goyette Inc8873 Mertz RapidDorthysideID
Runte Inc2996 Ronny MountMcAllenMA
Goldner, Rohan and Lehner632 Broadway AvenueNorth LouieWY
Doyle, Hodkiewicz and O'Connell576 Joyce WaysTyraburghKS
Rau - O'Hara7508 Lansdowne RoadShieldsboroughMI
Tillman - Jacobi57918 Gwendolyn CirclesSheridanportMI
Connelly, Feest and Hodkiewicz7057 Stanley RoadKearaburghCA
Shanahan, Robel and Beier378 Berta CrescentWest GerryKS

No records

Head over to the next example to discover more features.