mcpField
T
tanstack-table

tanstack-table

github.com/casper-studiosDevelopment15257 installsUpdated 5d ago
Repository

About tanstack-table

A skill documenting TanStack Table implementation patterns, especially using the `meta` field to pass behavior to cells. It is intended for developers building tables and covers type-safe metadata and column-definition guidance.

Key features

  1. 01Pass behavior through table meta
  2. 02Extend TableMeta for type safety
  3. 03Hoist column definitions
  4. 04Consult implementation documentation

Use cases

  1. 01Add edit and delete actions to cells
  2. 02Avoid closure-driven column re-renders
  3. 03Define type-safe table metadata

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/casper-studios/casper-marketplace --skill tanstack-table

After installing, type/tanstack-tablein Claude Code to confirm it loaded.

Bundled filesreferences/column-definitions.mdreferences/meta-field.md

Details

From the project README

Documentation

Use context7 for the latest documentation. Use deepwiki to ask questions about the library's implementation.

TanStack Table Patterns

This skill covers TanStack Table library patterns with the meta field for passing behavior to cells.

Core Pattern: Hoisted Columns with Meta

// 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>;
}

Why Meta Over Closures?

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
});

References

Comments

Markdown supported