Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From stack-patterns
Builds TanStack Table components using hoisted columns and meta fields for cell callbacks instead of closures to avoid re-renders. Use for data tables with sorting and inline editing.
npx claudepluginhub casper-studios/casper-marketplace --plugin stack-patternsHow this skill is triggered — by the user, by Claude, or both
Slash command
/stack-patterns:tanstack-tableThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use `context7` for the latest documentation. Use `deepwiki` to ask questions about the library's implementation.
Implements TanStack Table v8 headless UI for tables and datagrids with sorting, filtering, pagination, grouping, expanding, column resizing/ordering, row selection in React, Vue, Solid, Svelte, Qwik, Angular, Lit.
Provides code patterns, quick references, and examples for TanStack libraries including React Query for data fetching/mutations, TanStack Router for file-based routing, TanStack Table, and Zod validation in React/TypeScript apps.
Guides building/reviewing SaaS data tables with alignment rules, pagination vs infinite scroll, DataTable/IndexTable patterns, column defaults, bulk actions, sorting, filtering, row selection, and responsive table-to-card.
Share bugs, ideas, or general feedback.
Use context7 for the latest documentation. Use deepwiki to ask questions about the library's implementation.
TanStack/table/tanstack/tableThis skill covers TanStack Table library patterns with the meta field for passing behavior to cells.
// 1. Extend TableMeta for type safety
declare module '@tanstack/react-table' {
interface TableMeta<TData extends RowData> {
onEdit?: (id: string) => void;
onDelete?: (id: string) => void;
}
}
// 2. Hoist column definitions outside component
const columnHelper = createColumnHelper<Job>();
const columns = [
columnHelper.accessor('name', {
header: 'Name',
cell: info => info.getValue(),
}),
columnHelper.display({
id: 'actions',
cell: ({ row, table }) => (
<Button onClick={() => table.options.meta?.onEdit?.(row.original.id)}>Edit</Button>
),
}),
];
// 3. Pass callbacks via meta
function DataTable({ data, onEdit, onDelete }: Props) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
meta: { onEdit, onDelete },
});
return <Table>...</Table>;
}
Closures in column definitions cause re-renders:
// Bad - new column array every render
const columns = useMemo(() => [
{
cell: ({ row }) => (
<Button onClick={() => onEdit(row.original.id)}>Edit</Button>
),
},
], [onEdit]); // Invalidates when onEdit changes
// Good - stable columns, dynamic meta
const columns = [...]; // Hoisted, never changes
const table = useReactTable({
meta: { onEdit }, // Only meta changes
});