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 shaded ReferenceArea highlights your selection as you drag. On mouse up, the selected range is applied as a date filter on the table, zooming into that time window. 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.