Features

Try all features live in the /infinite demo.

Timeline Chart

The timeline chart visualizes data distribution over time as a stacked bar chart.

type BaseChartSchema = {
  timestamp: number; // UNIX ms
  [key: string]: number; // Level counts, e.g. "success", "warning", "error"
};

Pass chart data via the chartData and chartDataColumnId props on DataTableInfinite. Selecting a range on the chart sets the corresponding date filter.

Zoom

The timeline chart supports click-and-drag zoom. Click and drag across bars to select a time range — a ReferenceArea marks the selection with a line and grip on each end, fades the buckets outside it, and a card shows the range, duration, and row count as you drag. On mouse up the selection is parked rather than applied: the same card grows Cancel and Zoom buttons, so confirm with Zoom (or Enter) to set the date filter on the table, or discard with Cancel (or Escape). The axis tick format adapts automatically based on the visible time span (seconds for ≤10 min, hours for ≤1 day, day+hour for ≤1 week, full date otherwise).

Live Mode

Live mode polls for new data every 5 seconds using fetchPreviousPage from useInfiniteQuery. New rows are prepended to the data array.

The live field in the filter schema controls this:

live: field.boolean().default(false),

When live mode is active, rows older than the activation timestamp are visually dimmed.

Keyboard Shortcuts

Built-in keyboard shortcuts for common interactions:

• Cmd+K — Toggle command palette
• Cmd+B — Toggle filter sidebar
• Cmd+U — Reset column state (order, visibility)
• Cmd+J — Toggle live mode
• Esc — Reset table filters
• Cmd+. — Reset element focus
• Cmd+Shift+X — Deselect all rows (when rows are selected)

Row selection requires col.select() in your Table Schema. Use DataTableFloatingBar to add bulk action buttons to the selection bar.