Examples › Handling row clicks

Click on a row to see it in action:

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA

No records

Provide a handler called onRowClick to the DataTable component, like so:

<DataTable
  withBorder
  columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
  records={companies}
  onRowClick={(company, rowIndex, event) => {
    openModal({
      title: 'Company information',
      children: (
        <Stack>
          <Text size="sm">
            You clicked on row[{rowIndex}], referring to company <em>{company.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>
      ),
    });
  }}
/>

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 click event on those components and invoke its .stopPropagation() method.
See this example for more information.

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

Go back

Examples › Records selection

Up next

Examples › Handling cell clicks