We're in early-stage — get in touch!
Scroll-Jacking Demo

The Entity List Table

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
Europe/Rome
System / Settings / Customers
Emailends with.com
Name Email Status
Onboarded At
Created
Acme Corpinfo@acme.comActive16 May 2026, 19:0015 Mar 2024
Globex Inchello@globex.comActive16 May 2026, 19:0002 Apr 2024
Initechcontact@initech.comLead16 May 2026, 19:0010 May 2024
Umbrella Coadmin@umbrella.comInactive20 Jun 2024
Stark Industriestony@stark.comActive01 Jul 2024
1-8 / 247
Page size
1 / 31
System / Settings / Customers
NameEmailStatusCreated
Acme Corpinfo@acme.comActive15 Mar 2024
Globex Inchello@globex.comActive02 Apr 2024
Initechcontact@initech.comLead10 May 2024
Umbrella Coadmin@umbrella.comInactive20 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:00
16 May 2026, 19:00
16 May 2026, 19:00
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
NameStatusDeleted At
Acme OldDeleted01 Jun 2024
Beta CorpDeleted2024-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 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.