A custom feature for @tanstack/*-table that allows conditional rendering based on hovering over a row. e.g. rendering buttons in a cell only for the hovered row.
npm install tanstack-table-hoveringA custom @tanstack/\*-table feature that allows conditional rendering based on hovering over a row. e.g. rendering buttons in a cell only for the hovered row.
``bash`
npm i tanstack-table-hovering
`ts
import type { RowData } from "@tanstack/react-table";
import type {
HoveringOptions,
HoveringRowAPI,
HoveringTableAPI,
HoveringTableState,
} from "tanstack-table-hovering";
declare module "@tanstack/react-table" {
interface TableState extends HoveringTableState {}
interface TableOptionsResolved
extends HoveringOptions {}
interface Table
interface Row
}
`
`tsx
import { useReactTable } from "@tanstack/react-table";
import { HoveringFeature } from 'tanstack-table-hovering';
export interface MyTableProps {
...
}
export function MyTable(props: MyTableProps) {
...
const table = useReactTable({
_features: [HoveringFeature],
...
})
}
`
`tsx`
...
{table.getRowModel().rows.map((row) => (
key={row.id}
onMouseEnter={() => row.toggleHovered()}
onMouseLeave={() => row.toggleHovered()}
>
{row.getVisibleCells().map((cell) => (
{flexRender(cell.column.columnDef.cell, cell.getContext())}
))}
))}
...
`tsx
const columnHelper = createColumnHelper
const defaultColumns = [
columnHelper.accessor("firstName", {
header: "First Name",
}),
columnHelper.display({
id: "actions",
header: "Actions",
cell: ({ row }) => {
if (!row.getIsHovered()) {
return null;
}
return ;
},
}),
];
``