The Data Table
also known as: The Grid Beast, The Spreadsheet Leviathan, The Sortable Horror
"The table had forty-three columns. Twelve were frozen. Nineteen were sortable. Seven contained inline editing. Three contained nested expandable rows that themselves contained tables. I have been working on it since the second quarter."
— From the field journal of Cas Whitmore, Senior Dungeon Engineer, enterprise campaign, year three
The Data Table is the most complex native creature in the Codebase, and the one most frequently underestimated by those who have not faced one in a genuine enterprise habitat. At its simplest — a few columns, a handful of rows — it appears manageable, even tame. As requirements accumulate, as features are added one by one over months and years, the creature grows without apparent limit: sorting, filtering, pagination, row selection, bulk actions, inline editing, resizable columns, frozen headers, nested rows, virtual scrolling, and column visibility toggles are all features that have been added to individual Data Tables. None of the summoners involved planned for all of them at once. That is precisely how it happened.
The creature requires genuine HTML table semantics to be accessible — <table>, <thead>, <tbody>, <th scope="col">, and <td> — and every deviation from this structure must be compensated with ARIA roles that replicate what the native elements would have provided for free. Custom-built grid implementations using divs throughout are frequently encountered in the wild. They are rarely correct.
Fig. VII — A Data Table: five rows, four columns, one selected. The compound eye in the header monitors all columns simultaneously. The pagination row at the base suggests further specimens are not visible.
swords Vital Statistics
auto_awesome Special Abilities
aria-sort. Implementations that sort but do not announce the sort state to screen readers have completed half the work and called it done.
shield Weaknesses
- A card view — for mobile or low-density data, cards communicate the same information without the horizontal scroll problem
- Column prioritisation — hide secondary columns by default and let users reveal them; the creature becomes manageable
- Native
<table>semantics — using real table HTML costs nothing and provides accessibility for free - Pagination or infinite scroll — the creature without a page limit is boundless and undefeatable
category Known Variants
- The Simple Table — few columns, no sorting, no pagination. Perfectly manageable. Rarely what is eventually delivered.
- The Editable Table — cells that can be clicked to edit inline. A spreadsheet that has forgotten it is a spreadsheet.
- The Nested Table — rows that expand to reveal child rows. A recursive creature. Approach with a plan.
- The Enterprise Grid — the fully realised form. 40+ columns, virtual scroll, frozen panes. It has consumed entire sprints.
edit_note Field Notes
Note I. — Before building a custom Data Table from scratch, survey available libraries. AG Grid, TanStack Table, and similar have absorbed years of edge case handling that a bespoke implementation will rediscover, painfully, one bug report at a time.
Note II. — Every column needs a decision: is it sortable? Filterable? Resizable? Hideable? Frozen? These are product decisions that must be made before the first line of code. Retrofitting them after launch is how the creature grows to CR 8.
Note III. — The empty state — when the table has no rows — is not an edge case. It is a first impression for new users and a regular occurrence in filtered views. It deserves a proper message, an illustration if the dungeon permits, and a clear call to action.