Table Component

Overview

Table animates rows into place when filters, pages, or data change, with optional cell staggers and rolling or counting numbers. It pairs that motion with status filters, pagination, row and bulk selection, drag reordering, expandable details, interactive status badges, sticky headers, a pinned total, and loading skeletons.

Use it when users inspect and act on structured records that change during a session, such as invoices, orders, subscriptions, and projects. Accurate data and predictable controls always matter more than the movement.

Theme and Interaction Customisation

Set column alignment, borders, roundness, separators, header weight, primary or muted row highlights, check or circle selection marks, status badges, and a fixed or full-height layout. Motion settings include row and cell stagger, rolling or count-up numbers, sliding pagination, hover text rolls, selection, drag reordering, and expandable previews.

Example Production Use Case

A finance dashboard can filter invoices by Paid, Pending, or Unpaid, with matching rows sliding into place. The team Shift-clicks a run of pending invoices and exports them from the action bar that appears.

An order management tool can use status badges that advance from Processing to Shipped, with an expandable row showing items and tracking details.

A SaaS admin panel can paginate accounts, keep headers sticky, and pin a total MRR footer while staff scroll through subscriptions.

Best Used For

• Invoice and payment dashboards.
• Order management systems.
• SaaS administration panels.
• Project and task tracking.
• Internal business tools.
• Reporting interfaces with pagination and totals.
• Content management systems.
• Financial operations tools.

Not For

Content without a real row-and-column structure, like portfolios or narrative lists, reads better as cards or lists.

Large analytical datasets and continuously updating monitors need stable layouts, virtualisation, and spreadsheet-style tools rather than animated rows.

It doesn’t replace a full data platform with complex permissions, bulk editing, or server-side grouping.

Performance Budget

Keep staggers short, use cell stagger sparingly, and never delay real values behind count-up effects. Use stable records, memoise derived data, avoid layout measurement during drag, and paginate or virtualise large sets without animating offscreen rows.

Accessibility and Mobile

Use semantic table markup with associated headers, and label checkboxes, badges, drag handles, and row actions. Keep hover, selection, and focus distinct, give status badges readable text, and announce bulk changes briefly. On mobile, prefer horizontal scroll over cramped columns and keep touch targets usable, and with reduced motion remove row movement and numeric transitions.

Common Mistakes

• Using unstable row IDs that move data or selection between records.
• Treating a hovered row as a selected row.
• Assuming header Select all covers every page.
• Ignoring the active filter when adding new records.
• Letting animated numbers differ from the real values.
• Triggering a checkbox or delete when expanding a row.
• Enabling cell stagger without row stagger, totals without totalKey, or skeletons outside loading.
• Leaving users on an empty page after filtering or deleting.
• Calculating totals from the wrong dataset.
• Breaking table semantics for animation.
• Overanimating large datasets.
• Assuming local adds, deletes, or status changes are saved.