Event listeners
The data table exposes click handlers for rows and cells so you can react to user interaction.
Event listenersonRowClick / onCellClick (and double-click) handlers.
Row handlers (onRowClick, onRowDoubleClick) receive { row, table, event }. Cell handlers (onCellClick, onCellDoubleClick) receive { cell, row, table, event }.
tsx
import { useState } from "react"
import { DataTable, useDataTable } from "@/components/ui/data-table"
const [lastClickedId, setLastClickedId] = useState<string | null>(null)
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
onRowClick: ({ row }) => {
setLastClickedId(row.id)
},
})
return <DataTable table={table} />
Access the full context
Because each handler receives the table instance and the original event,
you can read selection state, call other table APIs, or stop propagation
directly inside your handler.