Niko Table Integration Guide

A skill for building and configuring data tables with Niko Table: structure, filters (search, faceted, advanced), column menus, DnD, and server-side patterns.

At a high level:

• New table: DataTableRoot → ToolbarSection (optional) → DataTable → Header + Body (Skeleton, EmptyBody) → Pagination. Use direct file imports only (no barrel exports).
• Adding filters: Toolbar = DataTableSearchFilter, DataTableFacetedFilter, DataTableFilterMenu. Column headers = DataTableColumnFacetedFilterMenu, DataTableColumnSliderFilterMenu, DataTableColumnDateFilterMenu. Set column meta (variant, options, etc.) and enableColumnFilter: true.
• Row/column DnD: Row DnD needs getRowId, DataTableRowDndProvider outside DataTable; don’t combine row DnD with sorting/filtering. Column DnD is safe with everything.
• Server-side: config.manualPagination (and/or manualSorting/manualFiltering), config.pageCount, pass totalCount to DataTablePagination.
• URL state (nuqs): Wrap app with NuqsAdapter; use useQueryStates with parsers for pagination, sort, filters, search; pass URL-derived state into DataTableRoot and wire onPaginationChange / onSortingChange / onColumnFiltersChange / onGlobalFilterChange to setUrlParams.
• Large lists: Use DataTableVirtualizedBody (from core/structure) instead of DataTableBody for 10k+ rows; same children (Skeleton, EmptyBody). See Virtualization Table example.
• Sidebar: Use DataTableAside (and trigger) for a detail panel next to the table. See Aside Table example.

Your job when using this skill is to figure out where the user is — new table, adding filters/DnD, fixing imports, wiring server-side, URL state (nuqs), row expansion, tree table, or row selection — and give them the right structure, imports, and patterns. If they’re vague (“I want a table”), suggest the minimal template and point to niko-table.com for examples. If they already have a table and want faceted filters or the advanced filter menu, jump to the Filtering section. Stay flexible: some users want copy-paste snippets; others want to understand the two-layer (DataTable* vs Table*) pattern.

Full docs and examples: https://niko-table.com. Registry: https://niko-table.com/r/{name}.json in components.json under registries["@niko-table"].

Quick Reference