Skills
Give your AI assistant deep knowledge of Niko Table components, patterns, and best practices.
Skills give AI assistants like Claude Code project-aware context about Niko Table. When installed, your AI assistant knows how to build tables with the correct structure, imports, and patterns for your project.
For example, you can ask your AI assistant to:
- “Add a data table with search and pagination.”
- “Build a table with faceted filters for category and brand.”
- “Add the advanced filter menu and sort menu to my table.”
- “Implement row drag-and-drop for reordering.”
- “Wire up server-side pagination with totalCount.”
- “Sync table state (filters, sort, pagination) to the URL with nuqs.”
The skill teaches the assistant Niko Table’s composition (direct file paths, no barrel exports), the two-layer pattern (DataTable* vs Table*), and when to use getRowId, config overrides, and related options. Most DataTableRoot config is auto-detected from the components you render.
Install
Section titled “Install”This installs the Niko Table skill from the repo into your project (the CLI discovers the skill in .cursor/skills/niko-table-best-practices/). Once installed, your AI assistant automatically loads it when working with Niko Table or data tables in a shadcn/React project.
Learn more about skills at skills.sh. The skill page (after installs) is at skills.sh/Semkoo/niko-table-registry/niko-table-best-practices.
How to test: In a project with Cursor (or another supported agent), run npx skills add Semkoo/niko-table-registry, then run npx skills list to confirm the skill is installed. Open a new chat and ask e.g. “Add a data table with search and pagination” to confirm the skill is used.
Alternative (manual): Copy the niko-table-best-practices folder to .cursor/skills/ in your project or to ~/.cursor/skills/ for all your projects. The folder must contain at least SKILL.md.
What’s Included
Section titled “What’s Included”The skill provides your AI assistant with the following knowledge:
Table structure
Section titled “Table structure”Composition: DataTableRoot → DataTableToolbarSection (optional) → DataTable → DataTableHeader + DataTableBody (with DataTableSkeleton, DataTableEmptyBody) → DataTablePagination. Direct file paths only (no barrel exports). Optional: wrap in DataTableErrorBoundary for production; use DataTableVirtualizedBody for large lists (10k+ rows); use DataTableAside for a detail sidebar.
Filtering
Section titled “Filtering”Toolbar components: DataTableSearchFilter, DataTableFacetedFilter, DataTableFilterMenu, DataTableClearFilter, DataTableSliderFilter, DataTableDateFilter. Column-level: DataTableColumnFacetedFilterMenu, DataTableColumnSliderFilterMenu, DataTableColumnDateFilterMenu with column meta (variant, options, showCounts) and enableColumnFilter: true.
Config and state
Section titled “Config and state”Most config is auto-detected from the components you use (e.g. DataTablePagination enables pagination). Pass config only when overriding or for manual/server-side (pageCount, manualPagination, etc.). DataTableRoot state and callbacks; when to use getRowId (row DnD, selection, expansion) and totalCount for server-side.
Drag and drop
Section titled “Drag and drop”Row DnD: requires getRowId; DataTableRowDndProvider wraps from outside DataTable; do not combine with sorting/filtering. Column DnD: safe with other features; use DataTableColumnDndProvider, DataTableDraggableHeader, DataTableDragAlongCell.
Pitfalls
Section titled “Pitfalls”No barrel imports; row DnD without stable getRowId; DataTableRowDndProvider must wrap outside the table; do not combine row DnD with sort/filter.
How It Works
Section titled “How It Works”- Triggering — The skill activates when the user talks about data tables, Niko Table, niko-table.com, sortable/filterable tables, faceted or advanced filters, row/column drag-and-drop, server-side pagination, nuqs/URL state, row selection, row expansion, or tree tables — even if they don’t name Niko Table.
- Pattern enforcement — The assistant follows Niko Table rules: DataTableRoot structure, direct imports, toolbar and column filter patterns, and DnD constraints.
- Context-aware help — The assistant infers whether you need a new table, more filters, DnD, server-side wiring, or URL state and responds with the right snippets and links.
- Deep reference — For full API and examples, the skill points to this site and the Installation and Examples docs.
Learn More
Section titled “Learn More”- skills.sh — Niko Table skill — Skill page (appears after installs)
- skills.sh — Browse and install skills for AI agents
- Installation — Configure the registry and install core + add-ons
- Simple Table — Minimal table example
- Faceted Filter Table — Inline and column-level faceted filters
- Advanced Filter Table — Rule-based filter menu
- Row DnD Table — Row drag-and-drop
- Server-Side Table — Server-side pagination and state
- niko-table-best-practices (GitHub) — Full skill source