Data display
MSM patternData Table
Search, facet filters, sorting, pagination, selection scope, and row actions for collections.
When to use it
Every collection of records people search, filter, sort, or select uses DataTable. Define columns with dataTableColumns and pass facet filters, row actions, and bulk actions as data. When the page holds the complete collection, pass it as data: search, filters, sorting, and paging run instantly in the browser. When the server pages the collection, pass page and view instead: the query returns the rows, total, and facet counts for the view, and onViewChange reports each change, so keep the view in the URL. Never sort or filter a server page in the browser. Search matches text columns other than facet filters. Bulk actions receive the selection scope: exact row IDs, or every row matching a server view.
Students
| Specialties | Actions | |||||||
|---|---|---|---|---|---|---|---|---|
| Alex Riveraalex.guitar@example.com | Guitar | Sam Patel | Northside | Active | 96% | $0.00 | ||
| Alex Riveraalex.piano@example.com | Piano | Jordan Ellis | Riverside | Active | 88% | $120.00 | ||
| Maya Chenmaya@example.com | VoicePiano | Jordan Ellis | Northside | Active | 100% | $0.00 | ||
| Avery Montgomery-WilliamsEmail not provided | Drums | Drew Kim | Riverside | Trial | 75% | $45.00 | ||
| Priya Nairpriya@example.com | Violin | Ren Okafor | Online | Active | 92% | $0.00 | ||
| Theo Laurenttheo@example.com | Cello | Ren Okafor | Northside | Paused | 60% | $240.00 | ||
| Zoe Martinezzoe@example.com | Piano | Jordan Ellis | Online | Active | 98% | $0.00 | ||
| Leo Anderssonleo@example.com | GuitarVoice | Sam Patel | Riverside | Trial | 80% | $60.00 | ||
| Hana Suzukihana@example.com | ViolinPiano | Ren Okafor | Northside | Active | 94% | $0.00 | ||
| Omar HaddadEmail not provided | Drums | Drew Kim | Northside | Withdrawn | 40% | $0.00 |
1–10 of 24 students
Rows per page
Page 1 of 3
Students paged by the server
| Specialties | ||||||
|---|---|---|---|---|---|---|
| Alex Riveraalex.guitar@example.com | Guitar | Sam Patel | Northside | Active | $0.00 | |
| Alex Riveraalex.piano@example.com | Piano | Jordan Ellis | Riverside | Active | $120.00 | |
| Maya Chenmaya@example.com | VoicePiano | Jordan Ellis | Northside | Active | $0.00 | |
| Avery Montgomery-WilliamsEmail not provided | Drums | Drew Kim | Riverside | Trial | $45.00 | |
| Priya Nairpriya@example.com | Violin | Ren Okafor | Online | Active | $0.00 | |
| Theo Laurenttheo@example.com | Cello | Ren Okafor | Northside | Paused | $240.00 | |
| Zoe Martinezzoe@example.com | Piano | Jordan Ellis | Online | Active | $0.00 | |
| Leo Anderssonleo@example.com | GuitarVoice | Sam Patel | Riverside | Trial | $60.00 | |
| Hana Suzukihana@example.com | ViolinPiano | Ren Okafor | Northside | Active | $0.00 | |
| Omar HaddadEmail not provided | Drums | Drew Kim | Northside | Withdrawn | $0.00 |
1–10 of 24 students
Rows per page
Page 1 of 3
Loading, empty, and failed
0–0 of 0 families
Rows per page
Page 1 of 1
Usage
Use the Code tab to copy a complete example. MSM pages import shared components from @msm/ui; changes to those components appear here and in the application.