Guides
Table Event Listeners Guide
How to add event listeners such as onClicks and onChange events to components in Shadcn Table
You can pretty much add ANY event listener to ANY component in Shadcn Table.
You can do this by passing props to any of the st...Props props. This guide gives a few examples of the most common use cases, but there are limitless possibilities.
Add Event Listeners to any of the shadcn/ui Components
In the customize components docs, we explained how to pass any prop you need to pass to any exposed shadcn/ui component that is in the table. The list of props that you can pass to shadcn/ui components includes any event listener.
Here are a few common examples of some useful event listeners you might want to add to the table, although the possibilities are countless.
Add an onClick to a Table Row
const table = useShadcnTable({
columns,
data,
stTableBodyRowProps: ({ row }) => ({
onClick: (event) => {
console.info(event, row.id);
},
style: {
cursor: 'pointer', //you might want to change the cursor too when adding an onClick
},
}),
});Add an onDoubleClick to a Table Cell
const table = useShadcnTable({
columns,
data,
stTableBodyCellProps: ({ cell }) => ({
onDoubleClick: (event) => {
console.info(event, cell.id);
},
}),
});Add an onBlur to an Edit TextField
//add to every edit text field
const table = useShadcnTable({
columns,
data,
stEditTextFieldProps: ({ cell }) => ({
onBlur: (event) => {
console.info(event, cell.id);
},
}),
});//or add to just edit text fields in a specific column
const columns = [
{
accessorKey: 'name',
header: 'Name',
stEditTextFieldProps: ({ cell }) => ({
onBlur: (event) => {
console.info(event);
},
}),
},
];Add an onChange to an Edit TextField
Warning: Be careful when using onChange, as it can trigger re-renders with every keystroke, which can lead to performance issues
const table = useShadcnTable({
columns,
data,
stEditTextFieldProps: ({ cell }) => ({
onChange: (event) => {
console.info(event, cell.id);
},
}),
});//or add to just edit text fields in a specific column
const columns = [
{
accessorKey: 'name',
header: 'Name',
stEditTextFieldProps: ({ cell }) => ({
onChange: (event) => {
console.info(event);
},
}),
},
];