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 BAR: .tw-data-table-bulk | .tw-data-table-bulk-count | .tw-data-table-bulk-actions
Full-width colored bar shown when rows are selected. Contains a count label and action buttons. Hide with .tw:hidden when no rows are selected. Best for action-heavy bulk operations.
| 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>
INLINE BULK: .tw-data-table-bulk-inline | .tw-data-table-bulk-clear | .tw-data-table-bulk-divider
A compact bulk selection indicator that sits inline within the toolbar row. Use when the toolbar already has a title, tabs, or filters and a separate bar would be too heavy. The count and clear action sit alongside other items; bulk action buttons go in toolbar-end.
| Student | Family | Year Group | Source | Status | |
|---|---|---|---|---|---|
|
Lily Hughes
daisy.hughes@email.com
|
Poppy Smith (Mother)
Siblings: Daisy Hughes
|
Year 7 | Website | New | |
|
Sophie Martin
olivia.m@email.com
|
Jack Martin (Father)
Siblings: Olivia Martin, James Martin
|
Reception | Referral | New | |
|
Olivia Taylor
o.taylor@email.com
|
Charlotte Taylor (Mother)
|
Year 5 | Open Day | New |
<div class="tw-data-table-bulk tw-data-table-bulk-inline"><span class="tw-data-table-bulk-count">2 selected</span><button class="tw-data-table-bulk-clear">Clear</button></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>
COMPOSES: Table + Counted Tag (Tag + Badge)
CELL CLASS: .tw-data-table-cell-block
For allocation grids where rows are subjects/courses and columns are blocks or time slots. Each cell contains a counted tag showing the group name and fill count.
| Course | Block A | Block B | Block C | Block D |
|---|---|---|---|---|
| A Level Chemistry | 12 Chem A 12/14 | 12 Chem B 16/17 | ||
| A Level Mathematics | 12 Maths B 7/18 | 12 Maths A 11/15 | ||
| A Level English Literature | 12 Eng Lit A 5/17 | 12 Eng Lit B 17/18 | 12 Eng Lit C 6/13 | |
| A Level Psychology | 12 Psych A 11/12 | 12 Psych B 14/18 | ||
| A Level Biology | 12 Bio A 9/17 |
<td class="tw-data-table-cell-block"><span class="tw-tag tw-tag-outline-info tw-tag-neutral-text">12 Maths B <span class="tw-badge tw-badge-rounded tw-badge-info">7/18</span></span></td>