# Features

> Timeline chart, live mode, and keyboard shortcuts

Source: https://data-table.openstatus.dev/docs/features · Docs index: https://data-table.openstatus.dev/llms.txt · Full docs: https://data-table.openstatus.dev/llms-full.txt

Try all features live in the [/infinite](/infinite) demo.

### Timeline Chart

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

```ts
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:

```ts
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](/docs/table-schema#row-selection-with-colselect). Use [DataTableFloatingBar](/docs/ui-components#datatablefloatingbar) to add bulk action buttons to the selection bar.