faq

Short, direct answers to the things people ask when choosing a React table. (Looking for a quick comparison table instead? See comparison.md.)

What is AdaptTable?

AdaptTable is a headless, UI-agnostic React data table. A single headless engine (@adapttable/core) powers ready, batteries-included adapters for Mantine, MUI, Chakra, Ant Design, and Tailwind/shadcn (unstyled). You get TanStack-Table-style headless freedom and a styled table for the UI kit you already use — from the same core.

What is the best headless React table that works with my design system?

If you use Mantine, MUI, Chakra, Ant Design, or Tailwind/shadcn, AdaptTable gives you a fully-featured table (sorting, filtering, selection, pagination, infinite scroll, optional virtualization, URL state, i18n/RTL, dark mode) that matches your kit without building the UI yourself. If you’re on a different kit, the unstyled adapter exposes semantic HTML with data-* and className hooks, and the headless useDataTable core works with any markup.

Is there a free alternative to MUI X DataGrid or ag-Grid?

Yes — AdaptTable is MIT-licensed and fully free, including server-side data, infinite scroll, filtering, and selection. MUI X DataGrid and ag-Grid are open-core: their advanced server-side data and infinite-loading capabilities sit behind paid Pro/Premium or Enterprise tiers. The MUI adapter gives a DataGrid-style experience at no cost.

How does it handle responsive tables on mobile?

It does not try to squeeze desktop columns into a tiny viewport. The adapters automatically switch to mobile cards, with labels per value and a tunable mobileIdentityColumns option so the most important columns remain visible. This avoids the horizontal-scroll table pattern that breaks many responsive apps.

How do I use the same table for client-side and server-side data?

Use one TableSource contract for both:

// in-memory
const source = useFrontendData({ data: rows, columns });
// server-paginated (wraps your useInfiniteQuery hook) — the table is identical
const source = useBackendData({ usePaginatedQuery });

<DataTable source={source} … /> doesn’t change between them.

Does AdaptTable support RTL and Arabic?

Yes, RTL is first-class. Column alignment uses logical CSS (start/end), so it flips automatically under dir="rtl". The optional @adapttable/i18n package ships 10 locales — English, Arabic, German, Spanish, French, Hebrew, Italian, Japanese, Portuguese, and Chinese — plus getDirection / isRtlLocale helpers. Arabic and Hebrew are right-to-left.

Does it have dark mode?

Dark mode is seamless — it’s inherited from your UI kit’s theme, with logical color choices and no hardcoded surfaces that fight the host theme.

Can I animate rows? Do I need GSAP?

Animation is opt-in and dependency-free — the built-in entrance stagger uses the Web Animations API and honours prefers-reduced-motion. Prefer GSAP or Framer Motion? Every row/card is tagged with data-stagger, so you can drive the animation yourself (see customization.md). Or run with no animation at all — your call.

Does it support virtualization?

Yes. Long infinite lists can opt into row/card virtualization with virtualize, estimateRowSize, estimateCardSize, and virtualOverscan. Ant Design uses its native virtual table mode via the same virtualize prop.

How do I add URL-synced (shareable, deep-linkable) table state?

It’s built in. Search, sort, filters, and page sync to the URL through an injectable adapter (browser History by default; pass a router adapter for Next.js / react-router). Reloads, shared links, and back/forward restore the exact view. See url-state.md.

Which React versions and bundlers are supported?

React 18+. Every package ships dual ESM/CJS builds with .d.ts types (verified with publint --strict and are-the-types-wrong), so it works with Vite, Next.js, Remix, webpack, and friends. It’s written in strict TypeScript.

Is it accessible?

Yes — semantic table markup, aria-sort on sortable headers, labelled selection checkboxes and icon buttons, and a keyboard-friendly UX. Every adapter is audited with axe in CI, on both desktop and mobile layouts.

How big is it / is it tree-shakeable?

Every package sets sideEffects: false and ships ESM, so unused code is tree-shaken. You only install the one adapter you use; the headless core has zero UI-kit dependencies.

How do I get started quickly?

npx @adapttable/cli init   # detects your UI kit and scaffolds a table

Or install an adapter directly, e.g. pnpm add @adapttable/mantine. See the Getting started guide.

When might another library fit better?

• You need a heavyweight enterprise grid with pivoting, range selection, and Excel-style editing today → ag-Grid or MUI X DataGrid (paid).
• You’re not on React → TanStack Table (multi-framework).
• You need spreadsheet-grade enterprise features like pivoting, Excel-style editing, or range selection today.