One table component — every feature a backoffice needs, zero per-page config
↓ Scroll to control the animation
The Entity List Table
Every feature. One component.
Search, filter, sort, select, paginate, preview, bulk actions, view modes — all from a single metadata-driven table.
The Table
One table, metadata-driven.
Columns, types, and order come from the entity meta endpoint. Drop the component on any page — it renders itself.
Pagination
Server-side paging, built in.
Navigate large datasets without loading everything. Page size, total records, and navigation — all handled by the server.
Metadata ExampleJSON
1{
2"entity":"customers",
3"columns":[
4{
5"key":"name",
6"label":"Name",
7"type":"text",
8"sticky":true
9},
10{
11"key":"status",
12"label":"Status",
13"type":"badge",
14"options":["Active","Lead",…]
15},
16… 3 more columns
17]
18}
Search & Filter
Find anything, filter everything.
Global search with field scoping, standard filters, and a full advanced builder with type-aware operators.
Column Management
Your columns, your rules.
Reorder, hide, and stick columns. IANA timezones per record. All persisted per user.
Selection & Cross-page
Select across pages. Nothing lost.
Selections survive server pagination. View only selected with client-side paging. Horizontal scroll preserved across reloads.
Sorting & Row Actions
Sort in three states. Act on any row.
Asc, desc, null — a three-state cycle. Per-row actions appear on hover: edit, preview, duplicate, delete, and custom.
View Modes & Deletion
See it your way. Even the deleted.
Table, card grid, or card list. Toggle active, deleted, or all — soft-deleted rows shown with red chrome.
Bulk Ops & Preview
Act on hundreds. Inspect any one.
Bulk delete, restore, duplicate, and export. Slide-out preview panel with prev/next navigation.
One table. Every feature. Zero config.
Intro
🔒https://backoffice.acme.org/customers
AC
JD
Search...Ctrl K
Europe/Rome
System / Settings / Customers
Emailends with.com
Select allSort byin orderOnboarded At
Name
Email
Status
Onboarded At
Created
Acme Corp
info@acme.com
Active
16 May 2026, 19:00
15 Mar 2024
Globex Inc
hello@globex.com
Active
16 May 2026, 19:00
02 Apr 2024
Initech
contact@initech.com
Lead
16 May 2026, 19:00
10 May 2024
Umbrella Co
admin@umbrella.com
Inactive
20 Jun 2024
Stark Industries
tony@stark.com
Active
01 Jul 2024
Name
Email
Status
Onboarded At
Deleted At
Acme Old
old@acme.com
Deleted
10 Jan 2024
01 Jun 2024
Beta Corp
info@beta.com
Deleted
05 Feb 2024
15 Jul 2024
Gamma LLC
contact@gamma.com
Deleted
20 Mar 2024
10 Aug 2024
Delta Inc
admin@delta.com
Deleted
15 Apr 2024
22 Sep 2024
Epsilon Co
hello@epsilon.com
Deleted
01 May 2024
05 Oct 2024
Name
Email
Status
Onboarded At
Created
Acme Corp
info@acme.com
Active
16 May 2026, 19:00
15 Mar 2024
Acme Old
old@acme.com
Deleted
10 Jan 2024
01 Jun 2024
Globex Inc
hello@globex.com
Active
16 May 2026, 19:00
02 Apr 2024
Beta Corp
info@beta.com
Deleted
05 Feb 2024
15 Jul 2024
Stark Industries
tony@stark.com
Active
01 Jul 2024
NameAcme Corp
Emailinfo@acme.com
StatusActive
Created15 Mar 2024
NameGlobex Inc
Emailhello@globex.com
StatusActive
Created02 Apr 2024
NameInitech
Emailcontact@initech.com
StatusLead
Created10 May 2024
NameUmbrella Co
Emailadmin@umbrella.com
StatusInactive
Created20 Jun 2024
NameStark Industries
Emailtony@stark.com
StatusActive
Created01 Jul 2024
NameAcme Corp
Emailinfo@acme.com
StatusActive
Onboarded At16 May 2026, 19:00
Created15 Mar 2024
NameGlobex Inc
Emailhello@globex.com
StatusActive
Onboarded At16 May 2026, 19:00
Created02 Apr 2024
NameInitech
Emailcontact@initech.com
StatusLead
Onboarded At16 May 2026, 19:00
Created10 May 2024
NameUmbrella Co
Emailadmin@umbrella.com
StatusInactive
Onboarded At—
Created20 Jun 2024
NameStark Industries
Emailtony@stark.com
StatusActive
Onboarded At—
Created01 Jul 2024
1-8 / 247
0 selected
Page size
1 / 31
System / Settings / Customers
Name
Email
Status
Created
Acme Corp
info@acme.com
Active
15 Mar 2024
Globex Inc
hello@globex.com
Active
02 Apr 2024
Initech
contact@initech.com
Lead
10 May 2024
Umbrella Co
admin@umbrella.com
Inactive
20 Jun 2024
1-25 / 247
Page size
1 / 10
Search In
All fields
Code
First name
Last name
Company
Email
Phone
UUID
Status reason
Address
City
State/Region
Country
ZIP
Emailends with.com
Advanced Filters
Standard
Advanced
All criteria
Any criteria
Emailends with.com
Onboarded At
16 May 2026, 19:00America/New_York
16 May 2026, 19:00Europe/Rome
16 May 2026, 19:00Asia/Tokyo
Columns
Sticky fields
Name
Data fields
Code
Email
Status
Phone
Auditing fields
Created At
Created By
Name
Acme Corp
Globex Inc
Initech
Umbrella Co
Stark Industries
Edit
Duplicate
Version history
Preview
Delete
Name
Status
Deleted At
Acme Old
Deleted
01 Jun 2024
Beta Corp
Deleted
2024-07-15
Preview
1 / 124
Sticky fields
CompanyAcme Corp
CodeACM-001
Data fields
First nameJohn
Last nameDoe
Emailinfo@acme.com
Phone+1 555-0100
StatusActive
Auditing fields
Updated at16 May 2026, 19:00
Version42
Metadata-driven rendering
Columns, types, and order come from the entity definition. Drop the table on any page — it builds itself.
Server-side pagination
Navigate large datasets without loading everything. The server handles paging — your browser only sees the current page.
Total records
Always shows which rows you're viewing and how many exist in total. Updates instantly as you page or filter.
Rows per page
Choose how many rows fit on screen. Your preference is remembered for each entity.
Search
Type at least 3 characters and the table filters automatically — a "contains" match across all selected text fields, combined with OR. Fires 450ms after you stop typing.
Search In panel
Open the right-side sheet to narrow the search to specific columns. All text fields are included by default. Your selection is remembered per entity.
Filters & Bulk Actions toolbar
A second toolbar below the main one. Toggle bulk actions, clear all filters, or review active filter badges — all in one row.
Clear all filters
Remove every active filter at once with a single click.
Active filter badges
Each badge shows a field, operator, and value. Click the × on any badge to instantly remove that filter.
Advanced filter builder
A right-side sheet panel for building complex, multi-condition filters that go beyond the standard filters.
Reset all filters
Clear every advanced filter in one click. Same as Clear all in the toolbar — resets to no filters applied.
AND / OR criteria
Toggle whether all conditions must match (AND) or any condition can match (OR).
Filter preview
Each active filter is shown as a readable line: field, operator, and value. Edit or remove a single filter without starting over.
Dynamic filter form
Pick a field and the form adapts automatically — operators match the column type, and the value input changes to a date picker, badge selector, or text input accordingly.
Standard filters
A simple list of all filterable fields. Each text field uses a contains operator — type any substring and the table filters instantly.
Contains operator
Every text field filters with a contains match. No need to pick an operator — just type and results update live.
Browser timezone
All datetime values are formatted using your browser's timezone (shown in the topbar). The same UTC value displays identically across all rows.
IANA record mode
Toggle to see each value in its original local timezone. Times differ per record. A badge shows the IANA timezone that was local when the data was entered.
Column selector
Show, hide, and reorder columns by dragging within their section. Order changes in real time. Your layout is saved.
Sticky fields
Sticky columns stay visible while scrolling horizontally. The right-most column for row actions is always sticky and cannot be hidden or moved.
Auditing fields
Audit fields track who created or modified a record. An entity can be auditable or not — it depends on the entity definition in the metadata.
Sticky columns
Name (left) and Actions (right) stay visible while scrolling horizontally. The right-most action column is always sticky and cannot be hidden or moved.
Left sticky
The Name column is marked as sticky in the column selector. It remains pinned on the left edge while other columns scroll underneath.
Right sticky
Row actions are always sticky on the right edge. This column cannot be hidden or reordered.
Row selection
Click checkboxes to select rows. Your selection persists across server-side pagination — selected rows stay selected even when you page or reload.
Select all
The header checkbox selects or deselects all rows on the current page at once.
Selection counter
The footer shows how many rows are selected. Use the eye toggle to view only selected rows with client-side pagination.
Sorting — 3-state cycle
Click any column to cycle through ascending, descending, and no sort. A default sort from metadata is always applied when no user sort is active.
No user sort
The default sort defined in the entity metadata is always applied. Columns show a neutral arrow icon until you click.
Ascending
First click sorts ascending. The arrow points up and the column header is highlighted.
Descending
Second click reverses to descending. A third click clears the user sort and returns to the metadata default.
Row actions
Edit, duplicate, version history, preview, delete and restore — plus custom actions defined in the entity metadata. Every action is under RBAC control. Admin-level actions require step-up MFA authentication per action before they can proceed.
View modes
Switch between table, card grid, or compact list. Your preference is remembered across sessions.
Card grid view
Each row becomes a card in a responsive grid. Same metadata, sorting, filtering and selection — just a different layout.
Card view toolbar
All table functions are still available here — select all, sort by column, and sort direction — adapted for the active view mode. IANA timezone toggles are also automatically detected and rendered for each datetime column that declares them.
Card list view
Horizontal cards stack vertically, showing more fields per card. Ideal for scanning detailed records without horizontal scrolling.
Soft Deleted Entities
Toggle between active, deleted, and all records. Soft-deleted rows are preserved with a rose-tinted background and dimmed opacity, never truly removed until explicitly purged.
Only deleted records
Switching to the deleted filter shows only soft-deleted entries. Each row displays a rose-tinted background, dimmed opacity, and a Deleted badge with the deletion timestamp.
All records
The all-records view merges active and soft-deleted entries in a single list. Deleted rows remain visually distinct with their rose background, making them easy to identify and restore.
Bulk actions mode
The same toolbar toggles to bulk mode when rows are selected. Operate on selected records — even across different pages — or on the entire dataset when RBAC permissions allow it. The toolbar auto-switches back to filters when filters are applied.
Mode toggle
Click to switch between filters and bulk actions. When rows are selected, the toolbar auto-switches to bulk mode. When filters are applied, it switches back to filters.
Export formats
Export selected rows or the entire dataset to XLSX or CSV — real server-generated files, not client-side fakes. HTML export supports custom templates with live preview, PDF generation, and email-ready output.
Duplicate records
Creates an exact copy of the selected record — all fields cloned server-side via a single API call. Works on one row or many at once.
Coming soon
Field-level control: choose which fields to copy, which to exclude, and which to manually set before duplicating.
Preview panel
A resizable panel inside the table area. Inspect any row's full details without leaving the list. Navigate between records with prev/next — even across pages. Toggle edit mode, access row actions, or close — all from the header.