Table Patterns
Data tables with sorting, filtering, pagination, and row selection using TanStack Table for structured data display.
What's Included#
- Basic table rendering with TanStack Table column definitions
- Sortable columns with ascending/descending indicators
- Client-side pagination with configurable page sizes
- Global and column-specific filtering with search inputs
- Row selection with checkboxes and bulk action support
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the tables pattern from Bootspring"
- "Apply the Bootspring tables pattern to my project"
Key Considerations#
- Use server-side pagination for large datasets instead of loading all data at once
- Memoize column definitions with useMemo to prevent unnecessary re-renders
- Add skeleton loaders for loading states and meaningful empty-state messages
- Make tables responsive with horizontal scroll or card layouts on mobile
- Persist table state (sort, filters) in URL parameters for shareable views
Related Patterns#
- Data Tables - Advanced server-side tables with inline editing
- URL State - Persist table state in URL
- React Query - Server state management for table data