# Docs

For any docs page URL, append `.md` to get the markdown version.

## Overview

- [Introduction](https://react-datatable.com/docs/introduction): See what react-datatable gives you, why it is source-first, and how to approach the rest of the docs.
- [Why react-datatable](https://react-datatable.com/docs/why-react-datatable): Understand why teams choose react-datatable instead of starting from a headless table or adopting a closed grid.
- [Coding agents](https://react-datatable.com/docs/coding-agents): Use coding agents to install and adapt react-datatable inside your product.
- [Pricing](https://react-datatable.com/docs/pricing): Pricing, delivery, guarantee, and common purchase questions for react-datatable.
- [License](https://react-datatable.com/docs/license): Software license agreement for react-datatable commercial source access.

## Quickstart

- [Getting started](https://react-datatable.com/docs/quickstart/getting-started): Render your first provider-free react-datatable with static local rows.

## Installation

- [Installation](https://react-datatable.com/docs/installation): Choose the framework you want to install react-datatable into.
- [Vite](https://react-datatable.com/docs/installation/vite): Install react-datatable into a Vite React app.
- [Next.js](https://react-datatable.com/docs/installation/next): Install react-datatable into a Next.js App Router or Pages Router app.
- [TanStack Start](https://react-datatable.com/docs/installation/tanstack-start): Install react-datatable into a TanStack Start app.
- [React Router](https://react-datatable.com/docs/installation/react-router): Install react-datatable into a React Router framework app.
- [Astro](https://react-datatable.com/docs/installation/astro): Install react-datatable into an Astro app with React enabled.
- [Laravel](https://react-datatable.com/docs/installation/laravel): Install react-datatable into a Laravel app that uses Vite and React.
- [Manual](https://react-datatable.com/docs/installation/manual): Install react-datatable into a custom React setup.

## Concepts

- [Table anatomy](https://react-datatable.com/docs/concepts/table-anatomy): Learn the canonical names for each visible region of a react-datatable table and how those regions work together.
- [Data loading](https://react-datatable.com/docs/concepts/data-loading): Understand who owns rows, when the server participates, and how rendering stays separate from fetching.
- [State Lifecycle](https://react-datatable.com/docs/concepts/state-lifecycle): Understand how the table chooses one opening state before rendering.
- [Persistence and Sharing](https://react-datatable.com/docs/concepts/persistence-and-sharing): Understand the difference between private memory, saved views, and shared links.

## Guides

- [Define columns](https://react-datatable.com/docs/guides/define-columns): Build stable column definitions that control filtering, sorting, grouping, and cell presentation together.
- [Define your table](https://react-datatable.com/docs/guides/define-your-table): Set the top-level table contract by choosing your row identity, data mode, and first-pass table wiring.
- [Choose a data mode](https://react-datatable.com/docs/guides/choose-a-data-mode): Decide whether the browser or server owns the rows, then choose the right navigation and virtualization strategy for that path.
- [Add global search](https://react-datatable.com/docs/guides/add-global-search): Add a fast toolbar search box, keep matches relevant, and handle local versus online search correctly.
- [Add column filters](https://react-datatable.com/docs/guides/add-column-filters): Add field-specific filters, choose the right filter types, and implement filtering cleanly in local or online mode.
- [Add sorting](https://react-datatable.com/docs/guides/add-sorting): Let users order rows by the fields that matter, set a clear default order, and handle local versus online sorting correctly.
- [Configure display options](https://react-datatable.com/docs/guides/configure-display-options): Decide which presentation controls users should get, shape the display-options popover, and keep layout controls aligned with your product surface.
- [Add column ordering](https://react-datatable.com/docs/guides/add-column-ordering): Let users rearrange visible columns safely, preserve frozen-column boundaries when needed, and keep reordered layouts durable.
- [Add grouping](https://react-datatable.com/docs/guides/add-grouping): Turn flat rows into scannable sections, choose deliberate grouping columns, and implement grouping cleanly in local or online mode.
- [Add keyboard navigation](https://react-datatable.com/docs/guides/add-keyboard-navigation): Give the grid an active row, support open and preview shortcuts, and keep keyboard movement separate from selection.
- [Add row preview](https://react-datatable.com/docs/guides/add-row-preview): Let users inspect a row in context, configure the floating panel, and keep preview behavior distinct from full row navigation.
- [Add row selection](https://react-datatable.com/docs/guides/add-row-selection): Enable checkbox selection for real workflows, control which rows can be selected, and distinguish visible-row selection from all-matching selection.
- [Add bulk actions](https://react-datatable.com/docs/guides/add-bulk-actions): Turn row selection into safe client or server workflows, use confirmation steps, and make all-matching scope explicit.
- [Add current-view persistence](https://react-datatable.com/docs/guides/add-current-view-persistence): Remember each user's last table state automatically, scope it correctly, and keep persistence separate from shareable or saved views.
- [Add saved views](https://react-datatable.com/docs/guides/add-saved-views): Let users save named table presets, decide who can see them, and keep saved views separate from automatic persistence and temporary links.
- [Add copy links](https://react-datatable.com/docs/guides/add-copy-links): Let users copy a shareable snapshot of the current table state without turning continuous URL sync on for the whole page.
- [Add URL sync](https://react-datatable.com/docs/guides/add-url-sync): Make the table state live in the address bar when the URL itself should stay in sync with filtering and sorting.
- [Tune virtualization](https://react-datatable.com/docs/guides/tune-virtualization): Keep large tables feeling fast by choosing the right rendering mode, row density, and overscan settings.
- [Server query endpoint](https://react-datatable.com/docs/guides/server-query-endpoint): Accept the datatable's online query contract, choose the flat or grouped execution path, and return the exact response shape the table expects.
- [Server query planning](https://react-datatable.com/docs/guides/server-query-planning): Normalize datatable request state and compile it into a validated flat or grouped backend query plan.
- [Server query execution](https://react-datatable.com/docs/guides/server-query-execution): Execute a validated backend query plan with one shared setup, then a flat or grouped execution strategy, and return the final online response.
- [Server persisted state endpoint](https://react-datatable.com/docs/guides/server-persisted-state-endpoint): Store a user's last table state in Postgres with Drizzle, expose GET and PUT/DELETE endpoints, and replay that state through a backend table-state adapter.
- [Server saved views endpoint](https://react-datatable.com/docs/guides/server-saved-views-endpoint): Store named table views in Postgres with Drizzle, expose the saved-views API surface, and replay those views through a backend datatable view adapter.

## Customization

- [Customization overview](https://react-datatable.com/docs/customization/customization-overview): Understand where react-datatable expects product customization to live so you can adapt the table deeply without blurring the core behavior contract.
- [Custom React cells](https://react-datatable.com/docs/customization/custom-react-cells): Use custom cell renderers when a column needs product-specific UI, while keeping table behavior, performance, and keyboard semantics intact.
- [Styling rows and cells](https://react-datatable.com/docs/customization/styling-rows-and-cells): Use row-presentation hooks to style rows and cells from table-owned interaction state without mixing styling concerns into cell rendering or data behavior.
- [Customizing filter UI](https://react-datatable.com/docs/customization/customizing-filter-ui): Adapt the built-in filter surface by choosing better labels, icons, options, and workflow boundaries before you replace any filter components outright.
- [Customizing toolbar and controls](https://react-datatable.com/docs/customization/customizing-toolbar-and-controls): Shape the shipped toolbar by choosing which controls appear, how much state stays visible, and when a product need is big enough to justify editing the copied source.
- [Replacing built-in icons](https://react-datatable.com/docs/customization/replacing-built-in-icons): Swap the table's built-in icon set from one proxy file while keeping product-specific cell and filter icons local to your app.
- [Replacing built-in UI elements](https://react-datatable.com/docs/customization/replacing-built-in-ui-elements): Edit the copied table source directly when prop-level customization stops short, while keeping table contracts, state flows, and future maintenance sane.
- [Customizing preview UI](https://react-datatable.com/docs/customization/customizing-preview-ui): Adapt the floating row-preview surface so it fits your product workflow without confusing preview, navigation, and heavier detail experiences.
- [Customizing saved view UI](https://react-datatable.com/docs/customization/customizing-saved-view-ui): Adapt the saved-views surface around naming, sharing, defaults, and dirty-state workflows while keeping the table's persistence model predictable.

## Examples

- [Local Data Table](https://react-datatable.com/docs/examples/local-data-table): Build a full local-mode customer table that combines search, filters, selection, bulk actions, and preview in one copyable example.
- [Paginated Table](https://react-datatable.com/docs/examples/paginated-table): Build a server-owned paginated table that sends search, filters, sorting, grouping, and counts through one online query contract.
- [Infinite Scroll Table](https://react-datatable.com/docs/examples/infinite-scroll-table): Build a server-owned table that loads row windows as users scroll through one continuous result set.
- [Custom cells gallery](https://react-datatable.com/docs/examples/custom-cells-gallery): Browse the landing-page custom cell patterns, then open a dedicated page for the exact implementation you want to copy.
- [Avatar select cell](https://react-datatable.com/docs/examples/avatar-select-cell): Build an owner picker cell with avatars, search, and a full table example.
- [Single select cell](https://react-datatable.com/docs/examples/single-select-cell): Finite-state status selector with color dot semantics.
- [Multi-select cell](https://react-datatable.com/docs/examples/multi-select-cell): Compact tag picker with badge summary and searchable list.
- [Date select cell](https://react-datatable.com/docs/examples/date-select-cell): Inline date picker for compact deadline or renewal fields.
- [Editable text cell](https://react-datatable.com/docs/examples/editable-text-cell): Click-to-edit inline text field with enter, blur, and escape handling.
- [Progress cell](https://react-datatable.com/docs/examples/progress-cell): Compact progress bar for health, completion, or score fields.
- [Currency trend cell](https://react-datatable.com/docs/examples/currency-trend-cell): Compact revenue display paired with an up, down, or flat trend signal.
- [Link cell](https://react-datatable.com/docs/examples/link-cell): Compact external link cell that cooperates with row interactions.
- [Boolean toggle cell](https://react-datatable.com/docs/examples/boolean-toggle-cell): Small switch control for true or false row fields.

## Reference

- [Component API](https://react-datatable.com/docs/reference/component-api): Reference for the top-level Datatable component props, exports, and feature configuration groups.
- [Column API](https://react-datatable.com/docs/reference/column-api): Reference for the DatatableColumn contract, filter configuration, grouping specs, and column metadata.
- [Online API](https://react-datatable.com/docs/reference/online-api): Reference for the `online` table contract, query input and response types, grouping summaries, facets, and prefetch behavior.
- [Server helper API](https://react-datatable.com/docs/reference/server-helper-api): Reference for the optional `react-datatable-server` helper package and its in-memory online-query contract implementation.
- [TypeScript types](https://react-datatable.com/docs/reference/typescript-types): Reference index for the main exported TypeScript contracts in `react-datatable` and `react-datatable-server`.
- [Troubleshooting](https://react-datatable.com/docs/reference/troubleshooting): Symptom-first fixes for setup, providers, identity, persistence, URL sync, online mode, filters, and virtualization.