Examples › Handling row clicks

Click on a row 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 onRowClick to the DataTable component, like so:

<DataTable
  textSelectionDisabled
  withTableBorder
  columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
  records={companies}
  onRowClick={({ record, index, event }) => {
    openModal({
      title: 'Company information',
      children: (
        <Stack>
          <Text size="sm">
            You clicked on row[{index}], referring 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 onRowDoubleClick handler works in a similar way:

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

Double-click on a row 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

If you need more granularity, consider using an onCellClick handler instead.