tanstack-table-patternslisted
Install: claude install-skill smicolon/ai-kit
# TanStack Table Patterns
This skill enforces TanStack Table best practices for headless, type-safe data tables.
## Basic Table Setup
```typescript
import {
createColumnHelper,
useReactTable,
getCoreRowModel,
flexRender,
} from '@tanstack/react-table'
import type { Post } from '@/features/posts/types'
const columnHelper = createColumnHelper<Post>()
const columns = [
columnHelper.accessor('title', {
header: 'Title',
cell: (info) => info.getValue(),
}),
columnHelper.accessor('author.name', {
header: 'Author',
cell: (info) => info.getValue(),
}),
columnHelper.accessor('createdAt', {
header: 'Created',
cell: (info) => new Date(info.getValue()).toLocaleDateString(),
}),
columnHelper.display({
id: 'actions',
header: 'Actions',
cell: ({ row }) => <PostActions post={row.original} />,
}),
]
export function PostsTable({ data }: { data: Post[] }) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
})
return (
<table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel(