Build sortable, filterable, paginated React tables with TanStack Table v8.
npx skills add https://github.com/antonyfmunoz/OS --skill tanstack-table-antonyfmunoz
Please help me install this Agent Skill. Skill: tanstack_table Source: https://github.com/antonyfmunoz/OS/tree/main/skills/tools/tanstack_table Command: npx skills add https://github.com/antonyfmunoz/OS --skill tanstack-table-antonyfmunoz
This Skill prevents EOS SaaS teams from reinventing fragile table logic by providing a robust, state-driven way to implement sorting, filtering, pagination, and row selection without UI glitches or re-render loops.
Use the tanstack_table skill to implement a typed Leads table with server-driven pagination/sorting/filtering and virtualized rows, ensuring stable column definitions and getRowId-based row selection.
High-intent search queries and answers about installing and using this skill.
Server-driven pagination and sorting in React Table v8 use manualPagination, manualSorting, and manualFiltering flags to control table state. You wire TanStack Query fetching logic into controlled state, ensuring stable memoization to prevent UI glitches and re-render loops.
TanStack Table row selection loses state during data refreshes without stable row identifiers. You must define getRowId in the table state configuration to map rows to stable IDs, preventing selection loss and ensuring consistent behavior across server-driven pagination updates.
Yes, you can virtualize large datasets with @tanstack/react-table by integrating @tanstack/react-virtual. This combination renders only visible rows, maintaining high performance for large lists while using the headless table state engine to manage core, sorted, and filtered row models.
Faceted filters in a React data table are applied using the getFilteredRowModel pipeline from TanStack Table v8. You configure column definitions with specific filter functions, enabling multi-dimensional filtering that outputs precise row subsets without causing UI glitches.
Prevent re-render loops in TanStack Table by stabilizing data and column references using useMemo. Ensure correct accessorKey versus accessorFn usage and match enabled row models like getSortedRowModel to avoid unstable references that trigger continuous rendering cycles.
lips85Guide React frontend development with Suspense, lazy loading, and TypeScript best practices.
andrelandgrafSynchronize React UI state with URL query parameters using nuqs.
bobmatnycManage asynchronous server state in React with TanStack Query hooks.
mcclowesImplement server-side navigation in Next.js Server Components using Link and redirect().
