tanstack-table-hover

A 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.

Installation

``bash
npm i tanstack-table-hovering
`

Usage

$3

`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 extends HoveringTableAPI {}

interface Row extends HoveringRowAPI {}
}
`

$3

`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],
...
})
}
`

$3

`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())}

))}

))}

...
`

$3

`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 Moshe;
},
}),
];
``