# Data displays

Use this page when the UI is showing structured information and the first decision is whether the content is static, keyboard-navigable, selectable, picker-like, or paginated.

## Quick Decision Rules

- Use [Table](https://vega-ui.dev/components/table/) for semantic tabular content that is primarily read, not navigated cell by cell.
- Use [DataGrid](https://vega-ui.dev/components/data-grid/) for keyboard-aware cell navigation.
- Use [DataGridSelectable](https://vega-ui.dev/components/data-grid-selectable/) when grid navigation also needs selection behavior.
- Use [DataGridPicker](https://vega-ui.dev/components/data-grid-picker/) when the grid should read like a picker surface rather than a general interaction matrix.
- Use [Pagination](https://vega-ui.dev/components/pagination/) when content is split into discrete pages.
- Use [PageControl](https://vega-ui.dev/components/page-control/) when the UI needs compact page or slide indicators rather than full pagination chrome.

## By Interaction Model

- Static or reading-first table: [Table](https://vega-ui.dev/components/table/)
- Navigable interaction grid: [DataGrid](https://vega-ui.dev/components/data-grid/)
- Navigable plus selectable grid: [DataGridSelectable](https://vega-ui.dev/components/data-grid-selectable/)
- Picker-shaped grid: [DataGridPicker](https://vega-ui.dev/components/data-grid-picker/)
- Full page navigation: [Pagination](https://vega-ui.dev/components/pagination/)
- Compact page or slide indicator: [PageControl](https://vega-ui.dev/components/page-control/)

## Common Misclassifications

- Do not use [Table](https://vega-ui.dev/components/table/) when active-cell navigation is part of the UX.
- Do not use [DataGrid](https://vega-ui.dev/components/data-grid/) when the UI is only displaying static rows and columns.
- Do not use [DataGridSelectable](https://vega-ui.dev/components/data-grid-selectable/) when the real need is a standard picker layer.
- Do not use [DataGridPicker](https://vega-ui.dev/components/data-grid-picker/) for general data navigation when the UI should not read like a chooser.
- Do not use [PageControl](https://vega-ui.dev/components/page-control/) when users need explicit page numbers or broader navigation affordances.

## Start Here

- Read-only tables and summaries: [Table](https://vega-ui.dev/components/table/)
- Schedules, planners, or keyboard-driven matrices: [DataGrid](https://vega-ui.dev/components/data-grid/), [DataGridSelectable](https://vega-ui.dev/components/data-grid-selectable/)
- Dense choice grids: [DataGridPicker](https://vega-ui.dev/components/data-grid-picker/)
- Lists split across pages: [Pagination](https://vega-ui.dev/components/pagination/)
- Carousels, onboarding steps, or slide indicators: [PageControl](https://vega-ui.dev/components/page-control/)