Data-heavy software
Build data-heavy React interfaces with readable tables, persistent filters, record inspectors, and explicit missing, stale, and error states.
Vlak provides React components for data-heavy software: tables, filters, record details, charts, and the controls around them. Start with the decision a person must make from the data. The visible columns, units, sorting, and next action should follow from that decision.
Start a record comparison · Install Vlak
Build a review loop
A useful working view connects four things: the current scope, the result set, the selected record, and its next action. Keep the scope near the table. Open record details without discarding filters or scroll position. After an edit, preserve selection by a stable record identity rather than its position in the current sort order.
The CSV reconciliation study is a concrete starting point. It compares local files using chosen keys, separates matches from exceptions, and lets a person inspect the difference before exporting a result. Duplicate keys stay ambiguous until reviewed. That behavior is more useful to copy than a dashboard full of sample totals.
Make data states distinct
A blank cell can mean several different things. Define those meanings in your data model and render them deliberately. Do not let a formatter turn them all into zero or a dash.
- Zero: a measured or calculated value that is exactly zero, with its unit.
- Missing: no value was supplied. Keep it separate from an empty result set.
- Stale: a known value with its observation time and refresh state.
- Unavailable: the source failed or access was denied. Explain which scope is affected.
- Pending: the value is still loading or a requested change has not been confirmed.
Test real density
Test long identifiers, mixed units, repeated names, and the widest plausible values. Decide which columns must remain visible and which belong in an inspector. On a phone, give the chosen record a readable screen and a clear return path instead of shrinking the entire desktop table.
Your application owns fetching, server-side filtering, pagination, and any virtualization required by the dataset. A table component alone does not establish a performance budget for thousands of records. Measure the actual data path, preserve keyboard focus during updates, and expose exact values alongside chart summaries.
Keep edits reversible where the workflow allows it. Show validation beside the affected value, retain the original on failure, and distinguish a submitted request from a confirmed change. For shared systems, resolve concurrent edits in the host application and make conflicts visible to the reviewer.
Working rules
- Keep filters close to the records they change and preserve the selected record when the result set changes.
- Expose exact values beside visual summaries. Missing, zero, delayed, and unavailable remain different states.
- On narrow screens, move from overview to a focused record instead of compressing every column.
Components
- Data table. Sorts, filters and selects structured records. Native controls expose sort and selection state.
- Filter bar. Shows active filters with individual removal, reset, and a result count.
- Description list. Aligns semantic labels and values in a responsive description list.
- Badge. Labels status or category. 11px text with outline, solid, and muted variants.
- Progress. Shows completion for a known process. 4px bar; the label carries the percentage.
- Bar chart. Compares values with vertical or horizontal bars. Thin ink marks, square ends, optional stacks.
- Drawer. Opens a focused task from the bottom edge. Native dialog with platform focus handling and backdrop.
Continue
- Workflow kits. Inspect state and adapter contracts for record review and approval.
- Accessibility. Review naming, focus, keyboard behavior, and test coverage.
- Enterprise software. Connect record work with teams, schedules, and permissions.
Interfaces
- CSV reconciliation. Compare two CSV exports, review exceptions and keep a reusable reconciliation project.
- Dashboard. A print production desk with dated work, supplied output totals, and local review notes.
- Fleet management. A fleet desk with a Mapbox map of Dogpatch, supplied vehicle records, and local dispatch notes.
- Satellite operations. An observation workspace with an asset list, map tools and a structured pass inspector.
Install Vlak or inspect the linked pages for React, CSS, registry, keyboard, and accessibility details.