DATA TABLE: Full-featured data table with toolbar, sorting, selection, and pagination
COMPOSES: Table | Badge | Button | Form | Pagination | Input Group | Tag | Avatar | Dropdown
Higher-level pattern that wraps a .table with toolbar (search, filters, actions), bulk actions bar, and pagination footer. All inner content uses existing components.
Complete example: Toolbar with search + filter pills + primary action, sortable + selectable table with mixed cell types, and pagination footer.
| Name | Status | Year Group | Interests | Submitted | Actions | |
|---|---|---|---|---|---|---|
|
SJ
Sarah Johnson
sarah.j@email.com
|
Active | Year 7 |
Music
Drama
|
15 Feb 2026
3 days ago
|
||
|
MC
Michael Chen
m.chen@email.com
|
Pending | Year 7 |
Sport
Science
+2
|
14 Feb 2026
4 days ago
|
||
|
EW
Emma Williams
emma.w@email.com
|
Active | Year 8 |
Art
|
13 Feb 2026
5 days ago
|
||
|
JB
James Brown
j.brown@email.com
|
Rejected | Year 7 |
Music
Sport
Tech
+1
|
12 Feb 2026
6 days ago
|
||
|
LD
Lily Davis
lily.d@email.com
|
Active | Year 9 |
Languages
|
10 Feb 2026
8 days ago
|
<div class="tw-data-table"><div class="tw-data-table-toolbar">...</div><div class="tw-data-table-body"><table>...</table></div><div class="tw-data-table-footer">...</div></div>
Simple variant: Search + basic table + pagination. No selection, no filters, no bulk actions.
| Event Name | Date | Location | Attendees |
|---|---|---|---|
| Spring Open Day | 22 Mar 2026 |
Main Hall
|
156 |
| Year 7 Information Evening | 15 Apr 2026 |
Assembly Hall
|
89 |
| Scholarship Assessment Day | 3 May 2026 |
Exam Centre
|
42 |
<div class="tw-data-table">...toolbar (search only)...table...footer...</div>
BULK: .data-table-bulk | .data-table-bulk-count | .data-table-bulk-actions
Shown when rows are selected. Contains a count label and action buttons. Hide with .hidden when no rows are selected.
| Student | Status | Year Group | Submitted | |
|---|---|---|---|---|
|
SJ
Sarah Johnson
|
Active | Year 7 | 15 Feb 2026 | |
|
MC
Michael Chen
|
Pending | Year 7 | 14 Feb 2026 | |
|
EW
Emma Williams
|
Active | Year 8 | 13 Feb 2026 | |
|
JB
James Brown
|
Rejected | Year 7 | 12 Feb 2026 |
<div class="tw-data-table-bulk"><span class="tw-data-table-bulk-count">3 selected</span><div class="tw-data-table-bulk-actions">...buttons...</div></div>
No results: Use .table-empty inside the data table when no records match the current filter or search.
| Name | Status | Year Group | Submitted |
|---|---|---|---|
|
No results found Try adjusting your search or filter criteria. |
|||
<td colspan="4" class="tw-table-empty">...</td>
Dense variant: Combine .table-sm with the data table pattern for high-density data views. Useful for dashboards and reporting screens.
| Date | Description | Category | Amount | Status |
|---|---|---|---|---|
| 13 Feb 2026 | Application fee — Johnson |
Admissions
|
£150.00 | Paid |
| 12 Feb 2026 | Registration deposit — Chen |
Admissions
|
£500.00 | Pending |
| 11 Feb 2026 | Assessment fee — Williams |
Assessment
|
£75.00 | Paid |
| 10 Feb 2026 | Application fee — Brown |
Admissions
|
£150.00 | Overdue |
| 9 Feb 2026 | Bursary application — Davis |
Financial Aid
|
£0.00 | Review |
| 8 Feb 2026 | Application fee — Taylor |
Admissions
|
£150.00 | Paid |
<table class="tw-table tw-table-sm tw-table-hover tw-table-striped">...</table>