Behind the scenes of the latest Zeiko data-table refresh—detailing the architectural, UX, and DX improvements that keep enterprise dashboards fast, reliable, and developer-friendly.
Behind the scenes of the latest Zeiko data-table refresh—detailing the architectural, UX, and DX improvements that keep enterprise dashboards fast, reliable, and developer-friendly. Zeiko frames this for teams building production AI agents, so the takeaway is not only the concept but the execution pattern operators can apply to business automation workflows.
More Zeiko field notes on agents, operations, and automation.
Zeiko helps teams deploy specialized AI agents for reporting, customer operations, marketing workflows, approvals, and shared-brain business context.
A practical comparison of AI SDK patterns and OpenAI Agents SDK for teams building specialist multi-agent systems, workflow automation, handoffs, approvals, and deployable AI workers.
The practical reasons Zeiko moved production agent execution from Vercel AI SDK patterns to OpenAI Agents SDK: durable tools, state, approvals, handoffs, and safer rollout gates.
When we reframed Zeiko as an AI workplace for business operations, we knew the humble data table had to keep up. Enterprise customers expect operational surfaces that filter thousands of records instantly, respond to agent-driven queries, and never lose state across views. This post walks through the tuning work we’ve done over the past sprint—work that your team can borrow for any large-scale table UI.
Because Zeiko and Lezgo share this table inside the same monorepo, every fix goes live in both properties immediately—see the SaaS experience at zeiko.io and the partner ecosystem at lezgo.co.
Problem: deterministic fetches didn’t always fire. React Query would reuse cached payloads because our key missed subtle changes (e.g., new filters, sort toggles, or pagination).
Fix: we lifted the determinism into useDataTable:
app, context, search, filters, sort, and pagination.useEffect ensures we refetch when any driver changes—even if the object reference stays stable.Takeaway: never rely on
JSON.stringifysprinkled across components. Centralize key generation and trigger refetches from the hook that owns the state.
useState spaghetti)The table hook now uses a reducer:
const [state, dispatch] = useReducer(reducer, createDefaultState(defaultSort));
Benefits:
SET_SEARCH_TEXT, SUBMIT_SEARCH, SET_FILTERS, etc. are explicit.For teams migrating: start by codifying your current states (searchQuery, filters, sort, pagination). Then write a reducer that enforces the invariants you want (e.g., reset pagination on filter changes).
Auto-hiding empty columns felt magic—until users sorted on untouched datasets. Sorting triggered the hide pass and collapsed every column.
What changed: autoHideEmptyColumnsMode now defaults to 'filtered'. We only hide columns after a filter is applied; pure sorting leaves the layout alone. You can opt back into 'always' when the UX warrants it.
<DataTable
autoHideEmptyColumns
autoHideEmptyColumnsMode="filtered"
{...otherProps}
/>
Hover prefetching can speed up tabbed views—but only if it’s bulletproof. We extracted createContactsPrefetchHandler so prefetch logic lives in one tested helper:
Set.const prefetch = createContactsPrefetchHandler({
queryClient,
accountId,
currentView,
});
Vitest runs are now fast (sub-second) after we scoped include patterns to apps/web/__tests__. We also added focused tests:
use-data-table-key.test.ts validates key stability across sort & filter changes.contacts-navigation-prefetch.test.ts ensures hover prefetching and failure handling behave.If your monorepo suffers from “tests never finish,” audit include globs first; no amount of mocking offsets grabbing every workspace.
SEO_AUTOMATION_TASKS.md to track how feature docs become Keystatic posts.docs/data-table-implementation-updated.md and DATA_TABLE_IMPROVEMENTS.md.This sprint hardened the table underpinning Zeiko’s dashboards, but the patterns generalize to any data-heavy UI. If you’re building something similar, borrow the reducer, copy the key helpers, and wrap your navigation prefetches in defensive code. And if you’d rather skip the yak shaving, we’re happy to help—reach out through zeiko.io or the partner team at lezgo.co.