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.
A practical breakdown of OpenAI’s harness engineering ideas and how to apply them to OpenClaw: skills, feedback loops, legibility, and safe GitHub automation.
Discover our AI-powered business intelligence platform.
Get the latest insights on AI business automation, predictive analytics, and data-driven growth strategies delivered to your inbox.
When we rebranded Zeiko as an AI business manager, we knew the humble data table had to keep up. Enterprise customers expect dashboards that filter thousands of records instantly, respond to AI-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 . We only hide columns after a filter is applied; pure sorting leaves the layout alone. You can opt back into when the UX warrants it.
A practical SOP for running an OpenClaw agent against a real codebase: skill routing, templates, long-run durability, and secure GitHub access (without leaking tokens).
'filtered''always'<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.