Table Search & Filter Bar
Search, filter count and view switch, with active filters shown as removable chips so a filtered table never looks unfiltered.
Sortable Selectable Table
Type-aware sorting with aria-sort, a header checkbox that goes properly indeterminate, and selection that survives a re-sort.
297 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026
- table
- sort
- selection
- data grid
- bulk actions
What's included
components/data-table-sortable.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add data-table-sortable
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
| Actions | |||||
|---|---|---|---|---|---|
| Contosobilling@contoso.io | Pro | $190 | active | ||
| Globexfinance@globex.co | Team | $980 | active | ||
| Initechadmin@initech.dev | Pro | $190 | trialing | ||
| Northwind Ltdops@northwind.com | Team | $490 | active | ||
| Umbrellait@umbrella.org | Free | — | churned | ||
| Vandelaygeorge@vandelay.com | Pro | $90 | trialing |
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/data-table-sortable.tsx
'use client'
/**
* <DataTableSortable> — a sortable, selectable table.
*
* The details that make this worth lifting rather than rewriting:
*
* - `aria-sort` on the sorted column header. Without it a screen reader
* user has no way to know the table is ordered at all, let alone by what.
* - The header checkbox goes *indeterminate* when the selection is
* partial. `indeterminate` is a DOM property with no HTML attribute, so
* it has to be set through a ref — which is exactly why hand-rolled
* versions skip it and end up with a header box that lies.
* - Sorting is stable and type-aware: numbers compare numerically, strings
* through `localeCompare`. A numeric column sorted lexically puts 100
* before 9, and it is always caught late.
* - Selection survives sorting, because it is keyed by row id rather than
* by index.
*/
import * as React from 'react'
import { ChevronUp, ChevronDown, ChevronsUpDown, MoreHorizontal } from 'lucide-react'
export interface Column<T> {
key: keyof T & string
header: string
sortable?: boolean
align?: 'left' | 'right'
/** Custom cell rendering — falls back to the raw value. */
render?: (row: T) => React.ReactNode
}
export interface Row {
id: string
name: string
email: string
plan: string
mrr: number
status: 'active' | 'trialing' | 'churned'
}
export interface DataTableSortableProps {
rows?: Row[]
columns?: Column<Row>[]
className?: string
}
const STATUS_TONE: Record<Row['status'], string> = {
active: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
trialing: 'bg-sky-500/15 text-sky-600 dark:text-sky-400',
churned: 'bg-muted text-muted-foreground',
}
const DEFAULT_ROWS: Row[] = [
{ id: '1', name: 'Northwind Ltd', email: 'ops@northwind.com', plan: 'Team', mrr: 490, status: 'active' },
{ id: '2', name: 'Contoso', email: 'billing@contoso.io', plan: 'Pro', mrr: 190, status: 'active' },
{ id: '3', name: 'Initech', email: 'admin@initech.dev', plan: 'Pro', mrr: 190, status: 'trialing' },
{ id: '4', name: 'Globex', email: 'finance@globex.co', plan: 'Team', mrr: 980, status: 'active' },
{ id: '5', name: 'Umbrella', email: 'it@umbrella.org', plan: 'Free', mrr: 0, status: 'churned' },
{ id: '6', name: 'Vandelay', email: 'george@vandelay.com', plan: 'Pro', mrr: 90, status: 'trialing' },
]
const DEFAULT_COLUMNS: Column<Row>[] = [
{ key: 'name', header: 'Customer', sortable: true },
{ key: 'plan', header: 'Plan', sortable: true },
{
key: 'mrr',
header: 'MRR',
sortable: true,
align: 'right',
render: (row) => (row.mrr === 0 ? '—' : `$${row.mrr.toLocaleString('en-US')}`),
},
{
key: 'status',
header: 'Status',
sortable: true,
render: (row) => (
<span
className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize ${STATUS_TONE[row.status]}`}
>
{row.status}
</span>
),
},
]
type Direction = 'asc' | 'desc'
export function DataTableSortable({
rows = DEFAULT_ROWS,
columns = DEFAULT_COLUMNS,
className = '',
}: DataTableSortableProps) {
const [sortKey, setSortKey] = React.useState<keyof Row & string>('name')
const [direction, setDirection] = React.useState<Direction>('asc')
const [selected, setSelected] = React.useState<Set<string>>(() => new Set())
const headerBox = React.useRef<HTMLInputElement>(null)
const allSelected = rows.length > 0 && selected.size === rows.length
const someSelected = selected.size > 0 && !allSelected
// `indeterminate` has no HTML attribute — React cannot set it as a prop,
// so it has to be written to the DOM node directly.
React.useEffect(() => {
if (headerBox.current) headerBox.current.indeterminate = someSelected
}, [someSelected])
const sorted = React.useMemo(() => {
const copy = [...rows]
copy.sort((a, b) => {
const left = a[sortKey]
const right = b[sortKey]
const result =
typeof left === 'number' && typeof right === 'number'
? left - right
: String(left).localeCompare(String(right))
return direction === 'asc' ? result : -result
})
return copy
}, [rows, sortKey, direction])
function toggleSort(key: keyof Row & string) {
if (key === sortKey) {
setDirection((d) => (d === 'asc' ? 'desc' : 'asc'))
} else {
setSortKey(key)
setDirection('asc')
}
}
function toggleRow(id: string) {
setSelected((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
}
function toggleAll() {
setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)))
}
return (
<div className={`overflow-hidden rounded-2xl border border-border/60 bg-card/60 ${className}`}>
{selected.size > 0 ? (
<div
aria-live="polite"
className="flex items-center gap-3 border-b border-border/60 bg-primary/5 px-4 py-2.5 text-sm"
>
<span className="font-medium">{selected.size} selected</span>
<button type="button" className="text-muted-foreground hover:text-foreground">
Export
</button>
<button type="button" className="text-destructive hover:underline">
Delete
</button>
<button
type="button"
onClick={() => setSelected(new Set())}
className="ms-auto text-muted-foreground hover:text-foreground"
>
Clear
</button>
</div>
) : null}
{/*
`relative` is load-bearing. Tailwind's `sr-only` is `position:
absolute`, and an overflow box only clips an absolutely positioned
descendant when it is also that descendant's containing block. Without
it the screen-reader labels in the right-hand cells laid out at their
static position, escaped this scroller, and gave the whole PAGE a
sideways scroll on a phone — pointing at nothing anyone could see.
Same bug, same fix as the table on /compare.
*/}
<div className="relative overflow-x-auto">
<table className="w-full border-collapse text-sm">
<thead>
<tr className="border-b border-border/60 bg-muted/30">
<th scope="col" className="w-10 px-4 py-3">
<input
ref={headerBox}
type="checkbox"
checked={allSelected}
onChange={toggleAll}
aria-label={allSelected ? 'Deselect all rows' : 'Select all rows'}
className="h-4 w-4 rounded border-border/60 accent-primary"
/>
</th>
{columns.map((col) => {
const isSorted = col.key === sortKey
return (
<th
key={col.key}
scope="col"
aria-sort={
isSorted ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'
}
className={`px-4 py-3 font-semibold ${
col.align === 'right' ? 'text-end' : 'text-start'
}`}
>
{col.sortable ? (
<button
type="button"
onClick={() => toggleSort(col.key)}
className={`inline-flex items-center gap-1 transition-colors hover:text-foreground ${
col.align === 'right' ? 'flex-row-reverse' : ''
} ${isSorted ? '' : 'text-muted-foreground'}`}
>
{col.header}
{isSorted ? (
direction === 'asc' ? (
<ChevronUp aria-hidden className="h-3.5 w-3.5" />
) : (
<ChevronDown aria-hidden className="h-3.5 w-3.5" />
)
) : (
<ChevronsUpDown aria-hidden className="h-3.5 w-3.5 opacity-40" />
)}
</button>
) : (
col.header
)}
</th>
)
})}
<th scope="col" className="w-10 px-4 py-3">
<span className="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody>
{sorted.map((row) => {
const isSelected = selected.has(row.id)
return (
<tr
key={row.id}
data-state={isSelected ? 'selected' : undefined}
className={`border-b border-border/40 last:border-0 transition-colors ${
isSelected ? 'bg-primary/5' : 'hover:bg-muted/30'
}`}
>
<td className="px-4 py-3">
<input
type="checkbox"
checked={isSelected}
onChange={() => toggleRow(row.id)}
aria-label={`Select ${row.name}`}
className="h-4 w-4 rounded border-border/60 accent-primary"
/>
</td>
{columns.map((col) => (
<td
key={col.key}
className={`px-4 py-3 ${col.align === 'right' ? 'text-end tabular-nums' : ''}`}
>
{col.render ? (
col.render(row)
) : col.key === 'name' ? (
<span>
<span className="block font-medium">{row.name}</span>
<span className="block text-xs text-muted-foreground">{row.email}</span>
</span>
) : (
String(row[col.key])
)}
</td>
))}
<td className="px-4 py-3">
<button
type="button"
aria-label={`Actions for ${row.name}`}
className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
>
<MoreHorizontal aria-hidden className="h-4 w-4" />
</button>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Install: npm i lucide-react
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/data-table-sortable.tsx and import it where you need the section:
import { DataTableSortable } from '@/components/data-table-sortable'Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
rows | Row[] | DEFAULT_ROWS |
columns | Column<Row>[] | DEFAULT_COLUMNS |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.
data-table-sortable.html
<!--
Sortable Selectable Table — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block is interactive in React and the handlers are NOT here.
Buttons, toggles and menus render in their initial state and do
nothing until you wire them up.
-->
<div class="overflow-hidden rounded-2xl border border-border/60 bg-card/60 ">
<div class="relative overflow-x-auto">
<table class="w-full border-collapse text-sm">
<thead>
<tr class="border-b border-border/60 bg-muted/30">
<th scope="col" class="w-10 px-4 py-3">
<input type="checkbox" aria-label="Select all rows" class="h-4 w-4 rounded border-border/60 accent-primary" />
</th>
<th scope="col" aria-sort="ascending" class="px-4 py-3 font-semibold text-start">
<button type="button" class="inline-flex items-center gap-1 transition-colors hover:text-foreground ">Customer<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up h-3.5 w-3.5" aria-hidden="true"><path d="m18 15-6-6-6 6"></path></svg></button>
</th>
<th scope="col" aria-sort="none" class="px-4 py-3 font-semibold text-start">
<button type="button" class="inline-flex items-center gap-1 transition-colors hover:text-foreground text-muted-foreground">Plan<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-3.5 w-3.5 opacity-40" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button>
</th>
<th scope="col" aria-sort="none" class="px-4 py-3 font-semibold text-end">
<button type="button" class="inline-flex items-center gap-1 transition-colors hover:text-foreground flex-row-reverse text-muted-foreground">MRR<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-3.5 w-3.5 opacity-40" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button>
</th>
<th scope="col" aria-sort="none" class="px-4 py-3 font-semibold text-start">
<button type="button" class="inline-flex items-center gap-1 transition-colors hover:text-foreground text-muted-foreground">Status<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-3.5 w-3.5 opacity-40" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button>
</th>
<th scope="col" class="w-10 px-4 py-3">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border/40 last:border-0 transition-colors hover:bg-muted/30">
<td class="px-4 py-3">
<input type="checkbox" aria-label="Select Contoso" class="h-4 w-4 rounded border-border/60 accent-primary" />
</td>
<td class="px-4 py-3 ">
<span>
<span class="block font-medium">Contoso</span>
<span class="block text-xs text-muted-foreground">billing@contoso.io</span>
</span>
</td>
<td class="px-4 py-3 ">Pro</td>
<td class="px-4 py-3 text-end tabular-nums">$190</td>
<td class="px-4 py-3 ">
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize bg-emerald-500/15 text-emerald-600 dark:text-emerald-400">active</span>
</td>
<td class="px-4 py-3">
<button type="button" aria-label="Actions for Contoso" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</td>
</tr>
<tr class="border-b border-border/40 last:border-0 transition-colors hover:bg-muted/30">
<td class="px-4 py-3">
<input type="checkbox" aria-label="Select Globex" class="h-4 w-4 rounded border-border/60 accent-primary" />
</td>
<td class="px-4 py-3 ">
<span>
<span class="block font-medium">Globex</span>
<span class="block text-xs text-muted-foreground">finance@globex.co</span>
</span>
</td>
<td class="px-4 py-3 ">Team</td>
<td class="px-4 py-3 text-end tabular-nums">$980</td>
<td class="px-4 py-3 ">
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize bg-emerald-500/15 text-emerald-600 dark:text-emerald-400">active</span>
</td>
<td class="px-4 py-3">
<button type="button" aria-label="Actions for Globex" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</td>
</tr>
<tr class="border-b border-border/40 last:border-0 transition-colors hover:bg-muted/30">
<td class="px-4 py-3">
<input type="checkbox" aria-label="Select Initech" class="h-4 w-4 rounded border-border/60 accent-primary" />
</td>
<td class="px-4 py-3 ">
<span>
<span class="block font-medium">Initech</span>
<span class="block text-xs text-muted-foreground">admin@initech.dev</span>
</span>
</td>
<td class="px-4 py-3 ">Pro</td>
<td class="px-4 py-3 text-end tabular-nums">$190</td>
<td class="px-4 py-3 ">
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize bg-sky-500/15 text-sky-600 dark:text-sky-400">trialing</span>
</td>
<td class="px-4 py-3">
<button type="button" aria-label="Actions for Initech" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</td>
</tr>
<tr class="border-b border-border/40 last:border-0 transition-colors hover:bg-muted/30">
<td class="px-4 py-3">
<input type="checkbox" aria-label="Select Northwind Ltd" class="h-4 w-4 rounded border-border/60 accent-primary" />
</td>
<td class="px-4 py-3 ">
<span>
<span class="block font-medium">Northwind Ltd</span>
<span class="block text-xs text-muted-foreground">ops@northwind.com</span>
</span>
</td>
<td class="px-4 py-3 ">Team</td>
<td class="px-4 py-3 text-end tabular-nums">$490</td>
<td class="px-4 py-3 ">
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize bg-emerald-500/15 text-emerald-600 dark:text-emerald-400">active</span>
</td>
<td class="px-4 py-3">
<button type="button" aria-label="Actions for Northwind Ltd" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</td>
</tr>
<tr class="border-b border-border/40 last:border-0 transition-colors hover:bg-muted/30">
<td class="px-4 py-3">
<input type="checkbox" aria-label="Select Umbrella" class="h-4 w-4 rounded border-border/60 accent-primary" />
</td>
<td class="px-4 py-3 ">
<span>
<span class="block font-medium">Umbrella</span>
<span class="block text-xs text-muted-foreground">it@umbrella.org</span>
</span>
</td>
<td class="px-4 py-3 ">Free</td>
<td class="px-4 py-3 text-end tabular-nums">—</td>
<td class="px-4 py-3 ">
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize bg-muted text-muted-foreground">churned</span>
</td>
<td class="px-4 py-3">
<button type="button" aria-label="Actions for Umbrella" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</td>
</tr>
<tr class="border-b border-border/40 last:border-0 transition-colors hover:bg-muted/30">
<td class="px-4 py-3">
<input type="checkbox" aria-label="Select Vandelay" class="h-4 w-4 rounded border-border/60 accent-primary" />
</td>
<td class="px-4 py-3 ">
<span>
<span class="block font-medium">Vandelay</span>
<span class="block text-xs text-muted-foreground">george@vandelay.com</span>
</span>
</td>
<td class="px-4 py-3 ">Pro</td>
<td class="px-4 py-3 text-end tabular-nums">$90</td>
<td class="px-4 py-3 ">
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize bg-sky-500/15 text-sky-600 dark:text-sky-400">trialing</span>
</td>
<td class="px-4 py-3">
<button type="button" aria-label="Actions for Vandelay" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Data Tables
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Data TablesShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Data Tables blocks
View categoryPagination With Page Window
Page size, range summary and a fixed-width number window that stays the same size from page 1 to page 200.
Expandable Detail Rows
Rows that open into a full-width detail panel via colSpan, with aria-expanded and aria-controls wired to the detail row.
Column Show, Hide & Reorder
Reordering that works from the keyboard rather than by drag alone, pinned columns that cannot be hidden or moved, and a guard so the last visible column cannot be unchecked into a blank table.
Bulk Action Bar
The selection bar that asks the question most tables skip: this page, or all 1,284 rows the filter matches. Typed confirmation above a threshold, an undo with the window counting down, and a select-all that names its own scope.
Inline Editable Table
Edit cells in the grid with staged changes, per-cell validation, the original value kept beside the attempt, and a save that counts what is still pending.
Grouped Table with Subtotals
Collapsible group headers that carry their own subtotals while collapsed, with a grand total that sums every row rather than only the visible ones.