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

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.

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 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.

Install Vlak or inspect the linked pages for React, CSS, registry, keyboard, and accessibility details.