Data tables with sorting, filters and paging
Tables that stay readable: search, filters, selection, sorting, pages and details. Phones get a compact list.
Switch category
Marketing
- Hero17
- Features15
- Logo clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to action11
- FAQ7
- Newsletter12
- Banners9
- Popups and consent7
- Services7
- Use cases6
- Security and trust7
- Changelog and roadmap6
- Launch and waitlist6
- Product tour6
- Press and awards10
- AI features6
- App download5
- Donations and support4
- Problem and solution5
- Objections5
- Calculators10
- Quiz and product finder5
- Free trial5
- Referral and partners10
- Community5
- Open source5
- Manifesto5
- Offer5
- Lead magnet4
- Scroll stories20
- Scroll journeys13
- Scroll effects13
- Scroll reveals and transitions15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error pages5
- Careers7
- Case studies6
- Portfolio6
- Events and webinars6
- Help center6
- Legal pages5
- Documentation4
- Search results5
- Resources and downloads4
- Podcast4
- Editorial15
- Authors and interviews10
- Glossary5
- Recipes5
- Data stories10
- Long reads5
- Surveys and feedback14
- Form states12
- Request forms16
- Applications and sign-ups13
- Address, payment and consent12
App
- Authentication9
- Dashboards6
- Tables6
- Settings5
- AI and chat16
- Calendar5
- Inbox and messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing and usage10
- Developer settings15
- Security and access10
- Import, export and history15
- Automation and builders14
- AI answers18
- AI writing and creation13
- AI setup14
- AI assistants9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms and stays5
- Classes and schedules6
- Medical practice5
- Law firm5
- Salon and spa5
- Automotive5
- Travel5
- Sports club5
- Coworking5
- Museum5
- Cinema5
- School5
- Trades5
- Insurance5
- Banking5
- Personal brand15
- Speakers and media kits10
- Creators15
- Coaching and consulting10
- Artists and musicians15
- Dental practice5
- Veterinary practice5
- Therapy practice5
- Weddings and events5
- Architecture studio5
- Tax advisor5
- Estate agent5
- Florist5
- Winery5
- Daycare5
- Driving school5
- Care services5
- Festival5
Elements
- Buttons20
- Forms and inputs22
- Pickers and selections21
- Special input fields20
- Cards10
- Overlays21
- Navigation elements15
- Menu bars and switchers14
- Data display15
- Progress and states13
- Lists, trees and timelines17
- Charts22
- Comparison charts22
- Statistical charts20
- KPI, live and map charts22
- Text effects15
- Text accents16
- Backgrounds19
- Beams, particles and motion18
- Media19
- Code and JSON8
- Panels and splitters4
Tables that stay readable
A data table is the workhorse of every back office. The six tables here keep real table markup with headers for screen readers, sort and filter on the client, and turn into a compact list on phones instead of scrolling sideways.
Simple shows a short list of records. Search and filter adds a search field and filter chips for larger sets. Selection lets people check rows and act on several at once, with a bar that shows the count. Sortable with pages handles hundreds of rows, Dense fits more on a screen for experts, Expandable rows opens details below a row without leaving the page.
Align numbers right and text left, and keep units in the header instead of every cell. Sort by the column people need most by default. For thousands of rows sort and page on the server, the tables take the current page and the total as props.
Data table
Details
What Data table brings along, read from the registry and the source.
- Area
- App
- Variants
- 6
- Version
- 1.0.0 · since 1.0.0
- File
- components/ui/data-table.tsx
- npm packages
- None
- Languages
- English and German, 23 texts of its own
- Studio
- Adjust in code
- In collections
- App dashboard
- Build with AI
- Over MCP in Claude, Cursor, Copilot and Codex
Props
The DataTableProps interface from components/ui/data-table.tsx, with the comments from the code.
idrequiredstring
Built-in texts
Data table writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.
Show all 23 texts
| Key | English | German |
|---|---|---|
| search | English Search | German Suchen |
| clear | English Clear search | German Suche leeren |
| all | English All | German Alle |
| results | English {n} results | German {n} Treffer |
| result | English 1 result | German 1 Treffer |
| empty | English Nothing matches “{q}”. | German Nichts passt zu „{q}“. |
| emptyHint | English Try another word or reset the filters. | German Versuch ein anderes Wort oder setz die Filter zurück. |
| reset | English Reset filters | German Filter zurücksetzen |
| selectAll | English Select all rows | German Alle Zeilen auswählen |
| selectRow | English Select {name} | German {name} auswählen |
| selected | English {n} selected | German {n} ausgewählt |
| clearSelection | English Clear selection | German Auswahl aufheben |
| sortAsc | English Sort ascending | German Aufsteigend sortieren |
| sortDesc | English Sort descending | German Absteigend sortieren |
| showing | English {from} to {to} of {total} | German {from} bis {to} von {total} |
| prev | English Previous page | German Vorherige Seite |
| next | English Next page | German Nächste Seite |
| page | English Page {n} | German Seite {n} |
| perPage | English Rows per page | German Zeilen je Seite |
| expand | English Show details for {name} | German Details zu {name} zeigen |
| collapse | English Hide details for {name} | German Details zu {name} verbergen |
| total | English Total | German Summe |
| details | English Details | German Details |
Accessibility
Read from the source of the component.
- Data table handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
- Sets aria-checked, aria-controls, aria-current, aria-expanded, aria-label, aria-live and aria-sort, so screen readers announce purpose and state.
- Uses the roles radio, radiogroup and region.
- Announces changes through a live region without moving focus.
- Every field has a label, visible or for screen readers.
- Adds text for screen readers where icons and graphics stand alone.
- The server renders the starting state in full, JavaScript only adds the interaction.
Motion
- Brings animations of its own, calmly timed and without wobble.
- With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.
Frequent questions
How do I install Data table?
With aiw add @ai-website/data-table. The command puts components/ui/data-table.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.
Which variants does Data table have?
6 variants, Simple, Search and filter, Selection, Sortable with pages, Dense and Expandable rows. You pick one with the variant prop, for example variant="search-filter".
Can I translate the texts of Data table?
Yes. Data table carries 23 texts of its own in English and German, such as “Search”, “Clear search” and “All”. The language follows the KitProvider, single texts change through the labels prop.
Can an AI assistant build with Data table?
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Data table with aiw_components and install it with aiw_add @ai-website/data-table. Name the variant in your prompt, for example variant="simple", and the assistant writes your content straight into the props.
Similar components, Often combined with
Similar components
More from App, the same area of the kit.
- SettingsProfile, account, notifications and billing.
- AuthenticationSign-in, sign-up, one-time codes and onboarding.
- AI and chatChats, prompts, agents and answers with sources.
- CalendarCalendars, schedulers and time slots.
- All of AppScreens for products. Sign-in, dashboards, tables, settings, billing and AI.
Often combined with
Sections that usually sit next to Tables on a page.
Loading the source