Event listeners
The data table exposes click handlers for rows and cells so you can react to user interaction.
Event listeners
Click any row
ID | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | ||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | ||
| Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | ||
| Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | ||
| Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | ||
| William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | ||
| Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | ||
| James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | ||
| Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | ||
| Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | ||
| $4,120,536 |
Rows per page
1–10 of 48
Row handlers (onRowClick, onRowDoubleClick) receive { row, table, event }. Cell handlers (onCellClick, onCellDoubleClick) receive { cell, row, table, event }.
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.