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.
| Course | Status | Level | Subjects | Deadline | Actions | |
|---|---|---|---|---|---|---|
|
HR
Mathematics
Hills Road Sixth Form College
|
Accepting | A-Level |
Maths
STEM
|
31 Jan 2026
in 3 weeks
|
||
|
KE
Computer Science
King Edward VI College
|
Closing Soon | A-Level |
Computing
STEM
+2
|
28 Feb 2026
in 7 weeks
|
||
|
HR
Chemistry
Hills Road Sixth Form College
|
Accepting | A-Level |
Sciences
|
31 Jan 2026
in 3 weeks
|
||
|
GH
Business (Extended)
Greenford High School
|
Closed | BTEC |
Business
Economics
Finance
+1
|
15 Feb 2026
closed
|
||
|
MC
Modern Languages
Manchester College
|
Accepting | A-Level |
Languages
|
10 Mar 2026
in 9 weeks
|
<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 | Provider | Spaces |
|---|---|---|---|
| Sixth Form Open Evening | 18 Oct 2025 |
Hills Road Sixth Form College
|
80 |
| Science & Maths Taster | 25 Oct 2025 |
King Edward VI College
|
15 |
| Campus Tour | 8 Nov 2025 |
Greenford High School
|
0 |
<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.
| Provider | Ofsted | Location | Added | |
|---|---|---|---|---|
|
HR
Hills Road Sixth Form College
|
Outstanding | Cambridge | 15 Feb 2026 | |
|
KE
King Edward VI College
|
Good | Stourbridge | 14 Feb 2026 | |
|
GH
Greenford High School
|
Outstanding | London | 13 Feb 2026 | |
|
MC
Manchester College
|
Good | Manchester | 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.
| Course | Provider | Level | Ofsted | Status | |
|---|---|---|---|---|---|
|
A-Level Physics
OCR · 2 years
|
Hills Road Sixth Form College
|
A-Level | Outstanding | New | |
|
A-Level Economics
AQA · 2 years
|
King Edward VI College
|
A-Level | Good | New | |
|
BTEC Engineering
Pearson · 2 years
|
Greenford High School
|
BTEC | Outstanding | 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.
| Course | Status | Level | Deadline |
|---|---|---|---|
|
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 | Event | Type | Spaces | Status |
|---|---|---|---|---|
| 18 Oct 2025 | Sixth Form Open Evening — Hills Road |
Open Day
|
80 | Booking |
| 25 Oct 2025 | Science & Maths Taster — King Edward VI |
Taster
|
15 | Almost Full |
| 8 Nov 2025 | Campus Tour — Greenford High |
Tour
|
0 | Full |
| 22 Nov 2025 | Subject Information Evening — Hills Road |
Open Day
|
120 | Booking |
| 29 Nov 2025 | Apprenticeship Fair — Manchester College |
Careers
|
200 | Open |
| 6 Dec 2025 | A-Level Results Workshop — King Edward VI |
Workshop
|
40 | Booking |
<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 availability grids where rows are subjects and columns are providers (or campuses). Each cell contains a counted tag showing the course code and places remaining.
| Subject | Hills Road | King Edward VI | Greenford | Manchester College |
|---|---|---|---|---|
| A-Level Chemistry | AQA Chem 2 left | OCR Chem Full | ||
| A-Level Mathematics | OCR Maths 11 left | AQA Maths 4 left | ||
| A-Level English Literature | AQA Eng Lit 12 left | OCR Eng Lit 1 left | Edexcel Eng Lit 7 left | |
| A-Level Computer Science | OCR CompSci 1 left | AQA CompSci 4 left | ||
| A-Level Biology | OCR Bio 9 left |
<td class="tw-data-table-cell-block"><span class="tw-badge tw-badge-chip tw-badge-outline-info tw-badge-neutral-text">OCR Maths <span class="tw-badge tw-badge-rounded tw-badge-info">11 left</span></span></td>