<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>DATA TABLE:</strong> Full-featured data table with toolbar, sorting, selection, and pagination<br> <strong>COMPOSES:</strong> Table | Badge | Button | Form | Pagination | Input Group | Tag | Avatar | Dropdown </p> <p class="tw:mb-0 tw:text-sm"> Higher-level pattern that wraps a <code>.table</code> with toolbar (search, filters, actions), bulk actions bar, and pagination footer. All inner content uses existing components. </p> </div> <!-- 1. Full Data Table --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Full Data Table</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Complete example:</strong> Toolbar with search + filter pills + primary action, sortable + selectable table with mixed cell types, and pagination footer. </p> </div> <div class="tw-data-table"> <!-- Toolbar --> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <div class="tw-input-group tw-has-icon-start tw:max-w-xs"> <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i> <input type="search" class="tw-form-control" placeholder="Search enquiries..."> </div> <div class="tw:flex tw:gap-1"> <button class="tw-badge tw-badge-primary-subtle tw-badge-lg tw:cursor-pointer" type="button">All <span class="tw:ml-1 tw:font-normal tw:text-muted">142</span></button> <button class="tw-badge tw-badge-success-subtle tw-badge-lg tw:cursor-pointer" type="button">Active <span class="tw:ml-1 tw:font-normal tw:text-muted">98</span></button> <button class="tw-badge tw-badge-warning-subtle tw-badge-lg tw:cursor-pointer" type="button">Pending <span class="tw:ml-1 tw:font-normal tw:text-muted">31</span></button> <button class="tw-badge tw-badge-danger-subtle tw-badge-lg tw:cursor-pointer" type="button">Rejected <span class="tw:ml-1 tw:font-normal tw:text-muted">13</span></button> </div> </div> <div class="tw-data-table-toolbar-end"> <button class="tw-btn tw-btn-primary" type="button"><i class="fa-solid fa-plus tw:mr-1"></i> Add Enquiry</button> </div> </div> <!-- Table --> <div class="tw-data-table-body"> <table class="tw-table tw-table-hover"> <thead> <tr> <th class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </th> <th class="tw-table-sortable tw-table-sort-asc"> Name <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th class="tw-table-sortable"> Status <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th class="tw-table-sortable"> Year Group <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th>Interests</th> <th class="tw-table-sortable"> Submitted <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th class="tw-table-cell-actions">Actions</th> </tr> </thead> <tbody> <tr> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-blue">SJ</div> <div> <div class="tw:font-medium tw:text-neutral-900">Sarah Johnson</div> <div class="tw:text-body-xs tw:text-muted">sarah.j@email.com</div> </div> </div> </td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-dot">Active</span></td> <td>Year 7</td> <td> <div class="tw-tag-group"> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Music</span> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Drama</span> </div> </td> <td class="tw:whitespace-nowrap"> 15 Feb 2026 <div class="tw:text-body-xs tw:text-neutral-400">3 days ago</div> </td> <td class="tw-table-cell-actions"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="View"> <i class="fa-regular fa-eye"></i> </button> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit"> <i class="fa-solid fa-pen"></i> </button> </td> </tr> <tr> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-green">MC</div> <div> <div class="tw:font-medium tw:text-neutral-900">Michael Chen</div> <div class="tw:text-body-xs tw:text-muted">m.chen@email.com</div> </div> </div> </td> <td><span class="tw-badge tw-badge-warning-subtle tw-badge-dot">Pending</span></td> <td>Year 7</td> <td> <div class="tw-tag-group"> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Sport</span> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Science</span> <span class="tw-tag tw-tag-secondary-soft tw-tag-sm">+2</span> </div> </td> <td class="tw:whitespace-nowrap"> 14 Feb 2026 <div class="tw:text-body-xs tw:text-neutral-400">4 days ago</div> </td> <td class="tw-table-cell-actions"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="View"> <i class="fa-regular fa-eye"></i> </button> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit"> <i class="fa-solid fa-pen"></i> </button> </td> </tr> <tr> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-red">EW</div> <div> <div class="tw:font-medium tw:text-neutral-900">Emma Williams</div> <div class="tw:text-body-xs tw:text-muted">emma.w@email.com</div> </div> </div> </td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-dot">Active</span></td> <td>Year 8</td> <td> <div class="tw-tag-group"> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Art</span> </div> </td> <td class="tw:whitespace-nowrap"> 13 Feb 2026 <div class="tw:text-body-xs tw:text-neutral-400">5 days ago</div> </td> <td class="tw-table-cell-actions"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="View"> <i class="fa-regular fa-eye"></i> </button> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit"> <i class="fa-solid fa-pen"></i> </button> </td> </tr> <tr> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-orange">JB</div> <div> <div class="tw:font-medium tw:text-neutral-900">James Brown</div> <div class="tw:text-body-xs tw:text-muted">j.brown@email.com</div> </div> </div> </td> <td><span class="tw-badge tw-badge-danger-subtle tw-badge-dot">Rejected</span></td> <td>Year 7</td> <td> <div class="tw-tag-group"> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Music</span> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Sport</span> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Tech</span> <span class="tw-tag tw-tag-secondary-soft tw-tag-sm">+1</span> </div> </td> <td class="tw:whitespace-nowrap"> 12 Feb 2026 <div class="tw:text-body-xs tw:text-neutral-400">6 days ago</div> </td> <td class="tw-table-cell-actions"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="View"> <i class="fa-regular fa-eye"></i> </button> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit"> <i class="fa-solid fa-pen"></i> </button> </td> </tr> <tr> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-magenta">LD</div> <div> <div class="tw:font-medium tw:text-neutral-900">Lily Davis</div> <div class="tw:text-body-xs tw:text-muted">lily.d@email.com</div> </div> </div> </td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-dot">Active</span></td> <td>Year 9</td> <td> <div class="tw-tag-group"> <span class="tw-tag tw-tag-info-soft tw-tag-sm">Languages</span> </div> </td> <td class="tw:whitespace-nowrap"> 10 Feb 2026 <div class="tw:text-body-xs tw:text-neutral-400">8 days ago</div> </td> <td class="tw-table-cell-actions"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="View"> <i class="fa-regular fa-eye"></i> </button> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit"> <i class="fa-solid fa-pen"></i> </button> </td> </tr> </tbody> </table> </div> <!-- Footer --> <div class="tw-data-table-footer"> <span class="tw-data-table-results">Showing 1–5 of 142 results</span> <nav aria-label="Page navigation"> <ul class="tw-pagination tw-pagination-sm"> <li class="tw-page-item disabled"><a class="tw-page-link" href="#" aria-label="Previous"><i class="fa-solid fa-chevron-left fa-xs"></i></a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">3</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">...</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">15</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#" aria-label="Next"><i class="fa-solid fa-chevron-right fa-xs"></i></a></li> </ul> </nav> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;div class="tw-data-table"&gt;&lt;div class="tw-data-table-toolbar"&gt;...&lt;/div&gt;&lt;div class="tw-data-table-body"&gt;&lt;table&gt;...&lt;/table&gt;&lt;/div&gt;&lt;div class="tw-data-table-footer"&gt;...&lt;/div&gt;&lt;/div&gt;</code> </div> </div> <!-- 2. Minimal Data Table --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Minimal Data Table</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Simple variant:</strong> Search + basic table + pagination. No selection, no filters, no bulk actions. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <div class="tw-input-group tw-has-icon-start tw:max-w-xs"> <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i> <input type="search" class="tw-form-control" placeholder="Search events..."> </div> </div> </div> <div class="tw-data-table-body"> <table class="tw-table"> <thead> <tr> <th>Event Name</th> <th>Date</th> <th>Location</th> <th class="tw:text-right">Attendees</th> </tr> </thead> <tbody> <tr> <td class="tw:font-medium tw:text-neutral-900">Spring Open Day</td> <td class="tw:whitespace-nowrap">22 Mar 2026</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-location-dot tw:text-neutral-400"></i> <span>Main Hall</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">156</td> </tr> <tr> <td class="tw:font-medium tw:text-neutral-900">Year 7 Information Evening</td> <td class="tw:whitespace-nowrap">15 Apr 2026</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-location-dot tw:text-neutral-400"></i> <span>Assembly Hall</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">89</td> </tr> <tr> <td class="tw:font-medium tw:text-neutral-900">Scholarship Assessment Day</td> <td class="tw:whitespace-nowrap">3 May 2026</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-location-dot tw:text-neutral-400"></i> <span>Exam Centre</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">42</td> </tr> </tbody> </table> </div> <div class="tw-data-table-footer"> <span class="tw-data-table-results">Showing 1–3 of 12 results</span> <nav aria-label="Page navigation"> <ul class="tw-pagination tw-pagination-sm"> <li class="tw-page-item disabled"><a class="tw-page-link" href="#" aria-label="Previous"><i class="fa-solid fa-chevron-left fa-xs"></i></a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">3</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">4</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#" aria-label="Next"><i class="fa-solid fa-chevron-right fa-xs"></i></a></li> </ul> </nav> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;div class="tw-data-table"&gt;...toolbar (search only)...table...footer...&lt;/div&gt;</code> </div> </div> <!-- 3. Bulk Actions --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Bulk Actions (Bar)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>BULK BAR:</strong> .tw-data-table-bulk | .tw-data-table-bulk-head | .tw-data-table-bulk-count | .tw-data-table-bulk-clear | .tw-data-table-bulk-actions </p> <p class="tw:mb-0 tw:text-sm"> White bar with a primary rail, shown when rows are selected. A head row carries the count and <em>Clear selection</em>; beneath it the action buttons wrap. Hide the whole bar with <code>.tw:hidden</code> on a wrapper when nothing is selected. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <div class="tw-input-group tw-has-icon-start tw:max-w-xs"> <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i> <input type="search" class="tw-form-control" placeholder="Search students..."> </div> </div> </div> <!-- Bulk actions bar — visible --> <div class="tw-data-table-bulk"> <div class="tw-data-table-bulk-head"> <span class="tw-data-table-bulk-count"><strong>3</strong> students selected</span> <button class="tw-data-table-bulk-clear" type="button"> <i class="fa-solid fa-xmark tw:mr-1"></i>Clear selection </button> </div> <div class="tw-data-table-bulk-actions"> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button"><i class="fa-solid fa-file-export tw:mr-1"></i> Export</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button"><i class="fa-regular fa-envelope tw:mr-1"></i> Email</button> <button class="tw-btn tw-btn-sm tw-btn-danger" type="button"><i class="fa-solid fa-trash tw:mr-1"></i> Delete</button> </div> </div> <div class="tw-data-table-body"> <table class="tw-table tw-table-hover"> <thead> <tr> <th class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </th> <th>Student</th> <th>Status</th> <th>Year Group</th> <th>Submitted</th> </tr> </thead> <tbody> <tr class="tw-table-row-selected"> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input" checked> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-blue">SJ</div> <div class="tw:font-medium tw:text-neutral-900">Sarah Johnson</div> </div> </td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-dot">Active</span></td> <td>Year 7</td> <td class="tw:whitespace-nowrap">15 Feb 2026</td> </tr> <tr> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-green">MC</div> <div class="tw:font-medium tw:text-neutral-900">Michael Chen</div> </div> </td> <td><span class="tw-badge tw-badge-warning-subtle tw-badge-dot">Pending</span></td> <td>Year 7</td> <td class="tw:whitespace-nowrap">14 Feb 2026</td> </tr> <tr class="tw-table-row-selected"> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input" checked> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-red">EW</div> <div class="tw:font-medium tw:text-neutral-900">Emma Williams</div> </div> </td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-dot">Active</span></td> <td>Year 8</td> <td class="tw:whitespace-nowrap">13 Feb 2026</td> </tr> <tr class="tw-table-row-selected"> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input" checked> </td> <td> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw-avatar tw-avatar-sm tw-avatar-orange">JB</div> <div class="tw:font-medium tw:text-neutral-900">James Brown</div> </div> </td> <td><span class="tw-badge tw-badge-danger-subtle tw-badge-dot">Rejected</span></td> <td>Year 7</td> <td class="tw:whitespace-nowrap">12 Feb 2026</td> </tr> </tbody> </table> </div> <div class="tw-data-table-footer"> <span class="tw-data-table-results">Showing 1–4 of 4 results</span> <nav aria-label="Page navigation"> <ul class="tw-pagination tw-pagination-sm"> <li class="tw-page-item disabled"><a class="tw-page-link" href="#" aria-label="Previous"><i class="fa-solid fa-chevron-left fa-xs"></i></a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item disabled"><a class="tw-page-link" href="#" aria-label="Next"><i class="fa-solid fa-chevron-right fa-xs"></i></a></li> </ul> </nav> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;div class="tw-data-table-bulk"&gt;&lt;div class="tw-data-table-bulk-head"&gt;count + clear&lt;/div&gt;&lt;div class="tw-data-table-bulk-actions"&gt;...buttons...&lt;/div&gt;&lt;/div&gt;</code> </div> </div> <!-- 3a-2. Bulk Actions — Many Actions --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Bulk Actions — Many Actions</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Every action stays on the surface.</strong> When a list has more bulk actions than a row can hold, the buttons wrap — they do <em>not</em> move into an overflow menu, collapse to icons, or scroll sideways. The count leads with its scope ("across 3 pages"), and <code>.tw-data-table-bulk-clear</code> sits at the far right of the head row, away from the count, so a stray click can't discard a large selection. Seventeen actions below, all visible, in two rows. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-bulk"> <div class="tw-data-table-bulk-head"> <span class="tw-data-table-bulk-count"><strong>247</strong> applications selected across 3 pages</span> <button class="tw-data-table-bulk-clear" type="button"> <i class="fa-solid fa-xmark tw:mr-1"></i>Clear selection </button> </div> <div class="tw-data-table-bulk-actions"> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Send email</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Send SMS</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Send letter</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Print address labels</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Schedule reminder</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Change status</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Assign to staff</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Add tag</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Move to intake</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Update year group</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Add note</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Export CSV</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Download documents</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Generate report</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Sync to MIS</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Archive applications</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Delete applications</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;div class="tw-data-table-bulk"&gt;&lt;div class="tw-data-table-bulk-head"&gt;count + clear&lt;/div&gt;&lt;div class="tw-data-table-bulk-actions"&gt;…wrapping buttons…&lt;/div&gt;&lt;/div&gt;</code> </div> </div> <!-- 3b. Inline Bulk Actions --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Bulk Actions (Inline)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>INLINE BULK:</strong> .tw-data-table-bulk-inline | .tw-data-table-bulk-clear | .tw-data-table-bulk-divider </p> <p class="tw:mb-0 tw:text-sm"> 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 <code>toolbar-end</code>. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <h3 class="tw-h4 tw:mb-0">All Enquiries</h3> <div class="tw-data-table-bulk-divider"></div> <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" type="button">Clear</button> </div> </div> <div class="tw-data-table-toolbar-end"> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button"><i class="fa-solid fa-file-export tw:mr-1"></i> Export</button> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button"><i class="fa-regular fa-user-plus tw:mr-1"></i> Assign</button> <button class="tw-btn tw-btn-sm tw-btn-primary" type="button"><i class="fa-regular fa-envelope tw:mr-1"></i> Send Email</button> </div> </div> <div class="tw-data-table-body"> <table class="tw-table tw-table-hover"> <thead> <tr> <th class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </th> <th>Student</th> <th>Family</th> <th>Year Group</th> <th>Source</th> <th>Status</th> </tr> </thead> <tbody> <tr class="tw-table-row-selected"> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input" checked> </td> <td> <div class="tw:font-medium tw:text-blue-500">Lily Hughes</div> <div class="tw:text-body-xs tw:text-muted">daisy.hughes@email.com</div> </td> <td> <div>Poppy Smith (Mother)</div> <div class="tw:text-body-xs tw:text-muted">Siblings: <span class="tw:text-blue-500">Daisy Hughes</span></div> </td> <td>Year 7</td> <td>Website</td> <td><span class="tw-badge tw-badge-primary-subtle tw-badge-dot">New</span></td> </tr> <tr class="tw-table-row-selected"> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input" checked> </td> <td> <div class="tw:font-medium tw:text-blue-500">Sophie Martin</div> <div class="tw:text-body-xs tw:text-muted">olivia.m@email.com</div> </td> <td> <div>Jack Martin (Father)</div> <div class="tw:text-body-xs tw:text-muted">Siblings: <span class="tw:text-blue-500">Olivia Martin</span>, <span class="tw:text-blue-500">James Martin</span></div> </td> <td>Reception</td> <td>Referral</td> <td><span class="tw-badge tw-badge-primary-subtle tw-badge-dot">New</span></td> </tr> <tr> <td class="tw-table-cell-check"> <input type="checkbox" class="tw-form-check-input"> </td> <td> <div class="tw:font-medium tw:text-blue-500">Olivia Taylor</div> <div class="tw:text-body-xs tw:text-muted">o.taylor@email.com</div> </td> <td> <div>Charlotte Taylor (Mother)</div> </td> <td>Year 5</td> <td>Open Day</td> <td><span class="tw-badge tw-badge-primary-subtle tw-badge-dot">New</span></td> </tr> </tbody> </table> </div> <div class="tw-data-table-footer"> <span class="tw-data-table-results">Showing 1–3 of 3 results</span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;div class="tw-data-table-bulk tw-data-table-bulk-inline"&gt;&lt;span class="tw-data-table-bulk-count"&gt;2 selected&lt;/span&gt;&lt;button class="tw-data-table-bulk-clear"&gt;Clear&lt;/button&gt;&lt;/div&gt;</code> </div> </div> <!-- 4. Empty State --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Empty State</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>No results:</strong> Use <code>.table-empty</code> inside the data table when no records match the current filter or search. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <div class="tw-input-group tw-has-icon-start tw:max-w-xs"> <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i> <input type="search" class="tw-form-control" value="xyzabc" placeholder="Search..."> </div> </div> </div> <div class="tw-data-table-body"> <table class="tw-table"> <thead> <tr> <th>Name</th> <th>Status</th> <th>Year Group</th> <th>Submitted</th> </tr> </thead> <tbody> <tr> <td colspan="4" class="tw-table-empty"> <div class="tw:mb-2"><i class="fa-solid fa-magnifying-glass tw:text-neutral-300 tw:text-2xl"></i></div> <p class="tw:mb-1 tw:font-medium">No results found</p> <p class="tw:text-sm tw:mb-0">Try adjusting your search or filter criteria.</p> </td> </tr> </tbody> </table> </div> <div class="tw-data-table-footer"> <span class="tw-data-table-results">0 results</span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;td colspan="4" class="tw-table-empty"&gt;...&lt;/td&gt;</code> </div> </div> <!-- 5. Compact (Small) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact Data Table</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Dense variant:</strong> Combine <code>.table-sm</code> with the data table pattern for high-density data views. Useful for dashboards and reporting screens. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <div class="tw-input-group tw-has-icon-start tw:max-w-60"> <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i> <input type="search" class="tw-form-control tw-form-control-sm" placeholder="Search..."> </div> </div> <div class="tw-data-table-toolbar-end"> <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button"><i class="fa-solid fa-file-export tw:mr-1"></i> Export</button> </div> </div> <div class="tw-data-table-body"> <table class="tw-table tw-table-sm tw-table-hover tw-table-striped"> <thead> <tr> <th class="tw-table-sortable tw-table-sort-desc"> Date <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th class="tw-table-sortable"> Description <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th class="tw-table-sortable"> Category <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th class="tw-table-sortable tw:text-right"> Amount <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i> </th> <th>Status</th> </tr> </thead> <tbody> <tr> <td class="tw:whitespace-nowrap">13 Feb 2026</td> <td class="tw:font-medium tw:text-neutral-900">Application fee — Johnson</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-graduation-cap tw:text-neutral-400"></i> <span>Admissions</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">£150.00</td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-sm">Paid</span></td> </tr> <tr> <td class="tw:whitespace-nowrap">12 Feb 2026</td> <td class="tw:font-medium tw:text-neutral-900">Registration deposit — Chen</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-graduation-cap tw:text-neutral-400"></i> <span>Admissions</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">£500.00</td> <td><span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span></td> </tr> <tr> <td class="tw:whitespace-nowrap">11 Feb 2026</td> <td class="tw:font-medium tw:text-neutral-900">Assessment fee — Williams</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-regular fa-file-lines tw:text-neutral-400"></i> <span>Assessment</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">£75.00</td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-sm">Paid</span></td> </tr> <tr> <td class="tw:whitespace-nowrap">10 Feb 2026</td> <td class="tw:font-medium tw:text-neutral-900">Application fee — Brown</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-graduation-cap tw:text-neutral-400"></i> <span>Admissions</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">£150.00</td> <td><span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Overdue</span></td> </tr> <tr> <td class="tw:whitespace-nowrap">9 Feb 2026</td> <td class="tw:font-medium tw:text-neutral-900">Bursary application — Davis</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-hand-holding-heart tw:text-neutral-400"></i> <span>Financial Aid</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">£0.00</td> <td><span class="tw-badge tw-badge-info-subtle tw-badge-sm">Review</span></td> </tr> <tr> <td class="tw:whitespace-nowrap">8 Feb 2026</td> <td class="tw:font-medium tw:text-neutral-900">Application fee — Taylor</td> <td> <div class="tw:flex tw:items-center tw:gap-2"> <i class="fa-solid fa-graduation-cap tw:text-neutral-400"></i> <span>Admissions</span> </div> </td> <td class="tw:text-right tw:tabular-nums tw:font-medium">£150.00</td> <td><span class="tw-badge tw-badge-success-subtle tw-badge-sm">Paid</span></td> </tr> </tbody> </table> </div> <div class="tw-data-table-footer"> <span class="tw-data-table-results">Showing 1–6 of 48 results</span> <nav aria-label="Page navigation"> <ul class="tw-pagination tw-pagination-sm"> <li class="tw-page-item disabled"><a class="tw-page-link" href="#" aria-label="Previous"><i class="fa-solid fa-chevron-left fa-xs"></i></a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">3</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">...</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">8</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#" aria-label="Next"><i class="fa-solid fa-chevron-right fa-xs"></i></a></li> </ul> </nav> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;table class="tw-table tw-table-sm tw-table-hover tw-table-striped"&gt;...&lt;/table&gt;</code> </div> </div> <!-- ============================================ Section: Block Table ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Block Table</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-1 tw:text-sm"> <strong>COMPOSES:</strong> Table + Counted Tag (Tag + Badge)<br> <strong>CELL CLASS:</strong> <code>.tw-data-table-cell-block</code> </p> <p class="tw:mb-0 tw:text-sm"> 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. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-body"> <table class="tw-table"> <thead> <tr> <th>Course</th> <th>Block A</th> <th>Block B</th> <th>Block C</th> <th>Block D</th> </tr> </thead> <tbody> <tr> <td class="tw:font-semibold tw:text-neutral-800 tw:whitespace-nowrap tw:align-middle">A Level Chemistry</td> <td class="tw-data-table-cell-block"></td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-warning tw-tag-neutral-text"> 12 Chem A <span class="tw-badge tw-badge-rounded tw-badge-warning">12/14</span> </span> </td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-danger tw-tag-neutral-text"> 12 Chem B <span class="tw-badge tw-badge-rounded tw-badge-danger">16/17</span> </span> </td> <td class="tw-data-table-cell-block"></td> </tr> <tr> <td class="tw:font-semibold tw:text-neutral-800 tw:whitespace-nowrap tw:align-middle">A Level Mathematics</td> <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> <td class="tw-data-table-cell-block"></td> <td class="tw-data-table-cell-block"></td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-info tw-tag-neutral-text"> 12 Maths A <span class="tw-badge tw-badge-rounded tw-badge-info">11/15</span> </span> </td> </tr> <tr> <td class="tw:font-semibold tw:text-neutral-800 tw:whitespace-nowrap tw:align-middle">A Level English Literature</td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-info tw-tag-neutral-text"> 12 Eng Lit A <span class="tw-badge tw-badge-rounded tw-badge-info">5/17</span> </span> </td> <td class="tw-data-table-cell-block"></td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-warning tw-tag-neutral-text"> 12 Eng Lit B <span class="tw-badge tw-badge-rounded tw-badge-warning">17/18</span> </span> </td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-info tw-tag-neutral-text"> 12 Eng Lit C <span class="tw-badge tw-badge-rounded tw-badge-info">6/13</span> </span> </td> </tr> <tr> <td class="tw:font-semibold tw:text-neutral-800 tw:whitespace-nowrap tw:align-middle">A Level Psychology</td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-warning tw-tag-neutral-text"> 12 Psych A <span class="tw-badge tw-badge-rounded tw-badge-warning">11/12</span> </span> </td> <td class="tw-data-table-cell-block"></td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-info tw-tag-neutral-text"> 12 Psych B <span class="tw-badge tw-badge-rounded tw-badge-info">14/18</span> </span> </td> <td class="tw-data-table-cell-block"></td> </tr> <tr> <td class="tw:font-semibold tw:text-neutral-800 tw:whitespace-nowrap tw:align-middle">A Level Biology</td> <td class="tw-data-table-cell-block"> <span class="tw-tag tw-tag-outline-info tw-tag-neutral-text"> 12 Bio A <span class="tw-badge tw-badge-rounded tw-badge-info">9/17</span> </span> </td> <td class="tw-data-table-cell-block"></td> <td class="tw-data-table-cell-block"></td> <td class="tw-data-table-cell-block"></td> </tr> </tbody> </table> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;td class="tw-data-table-cell-block"&gt;&lt;span class="tw-tag tw-tag-outline-info tw-tag-neutral-text"&gt;12 Maths B &lt;span class="tw-badge tw-badge-rounded tw-badge-info"&gt;7/18&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;</code> </div> </div> <!-- The canonical list toolbar --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">The Canonical List Toolbar</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>One order, every list screen.</strong> Production varies the order and contents of this row from screen to screen, so the same control lives somewhere different on each list. The rule: <code>-toolbar-start</code> holds everything that decides <strong>which records you see</strong> (saved view → Filters → active filter chips → search); <code>-toolbar-end</code> holds everything that acts on <strong>the list as shown</strong> (Columns → Export → Share). The primary create action is not here at all — it belongs in <code>.tw-page-header-actions</code>. </p> </div> <div class="tw-data-table"> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <!-- 1. Saved view --> <div class="tw-dropdown" data-controller="dropdown"> <button class="tw-btn tw-btn-secondary tw-dropdown-toggle" type="button" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"> <i class="fa-regular fa-eye tw:mr-1" aria-hidden="true"></i> View: Offer holders </button> <div class="tw-dropdown-menu" data-dropdown-target="menu"> <div class="tw-dropdown-header">Saved views</div> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">All applications</span></button> <button class="tw-dropdown-item" type="button" role="menuitem" aria-current="true" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Offer holders</span><i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i></button> <div class="tw-dropdown-divider"></div> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><i class="fa-regular fa-plus tw-dropdown-item-icon" aria-hidden="true"></i><span class="tw-dropdown-item-text">Save current view…</span></button> </div> </div> <!-- 2. Filters — opens the filter drawer (DR-2026-05) --> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-regular fa-filter tw:mr-1" aria-hidden="true"></i> Filters <span class="tw-badge tw-badge-sm tw-badge-primary tw:ml-1">2</span> </button> <!-- 3. Active filters, each removable, with a clear-all --> <div class="tw-tag-group"> <span class="tw-tag tw-tag-sm tw-tag-primary-subtle">Year 7 <button type="button" class="tw-tag-close" aria-label="Remove Year 7 filter"><i class="fa-solid fa-xmark"></i></button> </span> <span class="tw-tag tw-tag-sm tw-tag-primary-subtle">Submitted after 1 Mar <button type="button" class="tw-tag-close" aria-label="Remove submitted-after filter"><i class="fa-solid fa-xmark"></i></button> </span> <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button">Clear all</button> </div> <!-- 4. Search --> <div class="tw-input-group tw-has-icon-start tw:max-w-xs"> <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i> <input type="search" class="tw-form-control" placeholder="Search applications…" aria-label="Search applications"> </div> </div> <div class="tw-data-table-toolbar-end"> <!-- 5. Columns --> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-solid fa-table-columns tw:mr-1" aria-hidden="true"></i> Columns </button> <!-- 6. Export --> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-solid fa-file-export tw:mr-1" aria-hidden="true"></i> Export </button> <!-- 7. Share --> <button class="tw-btn tw-btn-icon tw-btn-secondary" type="button" aria-label="Share this view"> <i class="fa-regular fa-share-nodes"></i> </button> </div> </div> <div class="tw-data-table-body"> <table class="tw-table tw-table-hover"> <thead> <tr><th>Student</th><th>Status</th><th>Year group</th><th>Submitted</th></tr> </thead> <tbody> <tr> <td>Amelia Okafor</td><td><span class="tw-badge tw-badge-success-subtle">Offer accepted</span></td> <td>Year 7</td><td>14 Mar 2026</td> </tr> <tr> <td>Josh Whitmore</td><td><span class="tw-badge tw-badge-info-subtle">Offer made</span></td> <td>Year 7</td><td>2 Mar 2026</td> </tr> </tbody> </table> </div> <div class="tw-data-table-footer tw:border-t tw:border-neutral-200"> <span class="tw-data-table-results">Showing 1–2 of 38 offer holders</span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>-toolbar-start: saved view → Filters (count badge) → active filter tags + Clear all → search &nbsp;|&nbsp; -toolbar-end: Columns → Export → Share</code> </div> </div> <!-- Saved Views & Column Configuration --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Saved Views &amp; Column Configuration</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Two toolbar affordances:</strong> a <strong>saved-views selector</strong> at the start of the toolbar (the current view's name is the trigger; the menu lists views with a check on the active one, then "Save current view…") and a <strong>Columns</strong> control at the end (a multi-select dropdown driven by <code>data-controller="table-columns"</code> — unticking a column hides its header and cells; cells opt in with <code>data-column</code> keys). "Year group" starts unticked below — tick it to bring the column back. </p> </div> <div class="tw-data-table" data-controller="table-columns"> <div class="tw-data-table-toolbar"> <div class="tw-data-table-toolbar-start"> <div class="tw-dropdown" data-controller="dropdown"> <button class="tw-btn tw-btn-secondary tw-dropdown-toggle" type="button" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"> <i class="fa-regular fa-eye tw:mr-1" aria-hidden="true"></i> View: Offer holders </button> <div class="tw-dropdown-menu" data-dropdown-target="menu"> <div class="tw-dropdown-header">Saved views</div> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">All applications</span></button> <button class="tw-dropdown-item" type="button" role="menuitem" aria-current="true" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Offer holders</span><i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i></button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Awaiting documents</span></button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">SEN &amp; EHCP</span></button> <div class="tw-dropdown-divider"></div> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><i class="fa-regular fa-plus tw-dropdown-item-icon" aria-hidden="true"></i><span class="tw-dropdown-item-text">Save current view…</span></button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><i class="fa-regular fa-gear tw-dropdown-item-icon" aria-hidden="true"></i><span class="tw-dropdown-item-text">Manage views…</span></button> </div> </div> </div> <div class="tw-data-table-toolbar-end"> <div class="tw-dropdown" data-controller="dropdown" data-dropdown-multiple-value="true"> <button class="tw-btn tw-btn-secondary tw-dropdown-toggle" type="button" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"> <i class="fa-solid fa-table-columns tw:mr-1" aria-hidden="true"></i> Columns </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" role="listbox" aria-multiselectable="true" data-dropdown-target="menu" tabindex="-1"> <label class="tw-dropdown-check" data-dropdown-target="item"> <input type="checkbox" class="tw-dropdown-check-input" data-column="status" data-action="change->dropdown#check change->table-columns#toggle" checked> <span class="tw-dropdown-check-label">Status</span> </label> <label class="tw-dropdown-check" data-dropdown-target="item"> <input type="checkbox" class="tw-dropdown-check-input" data-column="year" data-action="change->dropdown#check change->table-columns#toggle"> <span class="tw-dropdown-check-label">Year group</span> </label> <label class="tw-dropdown-check" data-dropdown-target="item"> <input type="checkbox" class="tw-dropdown-check-input" data-column="submitted" data-action="change->dropdown#check change->table-columns#toggle" checked> <span class="tw-dropdown-check-label">Submitted</span> </label> </div> </div> </div> </div> <div class="tw-data-table-body"> <table class="tw-table tw-table-hover"> <thead> <tr> <th>Student</th> <th data-column="status">Status</th> <th data-column="year">Year group</th> <th data-column="submitted">Submitted</th> </tr> </thead> <tbody> <tr> <td>Amelia Okafor</td> <td data-column="status"><span class="tw-badge tw-badge-success-subtle">Offer accepted</span></td> <td data-column="year">Year 7</td> <td data-column="submitted">14 Mar 2026</td> </tr> <tr> <td>Josh Whitmore</td> <td data-column="status"><span class="tw-badge tw-badge-info-subtle">Offer made</span></td> <td data-column="year">Year 7</td> <td data-column="submitted">2 Mar 2026</td> </tr> <tr> <td>Priya Nair</td> <td data-column="status"><span class="tw-badge tw-badge-warning-subtle">Awaiting response</span></td> <td data-column="year">Year 12</td> <td data-column="submitted">27 Feb 2026</td> </tr> </tbody> </table> </div> <div class="tw-data-table-footer tw:border-t tw:border-neutral-200"> <span class="tw-data-table-results">Showing 1–3 of 214 offer holders</span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>&lt;div class="tw-data-table" data-controller="table-columns"&gt; … &lt;input type="checkbox" data-column="year" data-action="change-&gt;dropdown#check change-&gt;table-columns#toggle"&gt; … &lt;th data-column="year"&gt;</code> </div> </div> </div>