Skip to content

Data display

MSM pattern

Data 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

SpecialtiesActions
Alex Riveraalex.guitar@example.com
Guitar
Sam PatelNorthsideActive96%$0.00
Alex Riveraalex.piano@example.com
Piano
Jordan EllisRiversideActive88%$120.00
Maya Chenmaya@example.com
VoicePiano
Jordan EllisNorthsideActive100%$0.00
Avery Montgomery-WilliamsEmail not provided
Drums
Drew KimRiversideTrial75%$45.00
Priya Nairpriya@example.com
Violin
Ren OkaforOnlineActive92%$0.00
Theo Laurenttheo@example.com
Cello
Ren OkaforNorthsidePaused60%$240.00
Zoe Martinezzoe@example.com
Piano
Jordan EllisOnlineActive98%$0.00
Leo Anderssonleo@example.com
GuitarVoice
Sam PatelRiversideTrial80%$60.00
Hana Suzukihana@example.com
ViolinPiano
Ren OkaforNorthsideActive94%$0.00
Omar HaddadEmail not provided
Drums
Drew KimNorthsideWithdrawn40%$0.00

1–10 of 24 students

Page 1 of 3

Students paged by the server

Specialties
Alex Riveraalex.guitar@example.com
Guitar
Sam PatelNorthsideActive$0.00
Alex Riveraalex.piano@example.com
Piano
Jordan EllisRiversideActive$120.00
Maya Chenmaya@example.com
VoicePiano
Jordan EllisNorthsideActive$0.00
Avery Montgomery-WilliamsEmail not provided
Drums
Drew KimRiversideTrial$45.00
Priya Nairpriya@example.com
Violin
Ren OkaforOnlineActive$0.00
Theo Laurenttheo@example.com
Cello
Ren OkaforNorthsidePaused$240.00
Zoe Martinezzoe@example.com
Piano
Jordan EllisOnlineActive$0.00
Leo Anderssonleo@example.com
GuitarVoice
Sam PatelRiversideTrial$60.00
Hana Suzukihana@example.com
ViolinPiano
Ren OkaforNorthsideActive$0.00
Omar HaddadEmail not provided
Drums
Drew KimNorthsideWithdrawn$0.00

1–10 of 24 students

Page 1 of 3

Loading, empty, and failed

0–0 of 0 families

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.

View registry item