Virtual scrolling Web Worker offload Columnar encoding Server-side data Pagination Infinite scroll Transactions Async transactions Cell span / merge Sorting Automatic columns Custom sort order Resizing Reordering Pinning Auto-size & fit Visibility & chooser Bands (multi-level headers)Filter row Header filter popup Quick search Filter panel bar External filter Multi filter Filter builder Grouping (one level)Group panel Multi-level grouping Group summaries Master-detail Tree data Footer column totals Totals row placement Custom aggregation Selection statistics Row selection Focused row Deferred selection Range selection Cell focus & keyboard Copy Fill handle Cut & paste Cell editing Batch editing Row editing Form & popup editing Validation Permissions Custom editors & lookups CRUD handlers Undo / redo CSV export Excel export PDF export Styled export Import wizard Themes & palettes Density Localization Tooltips Row numbers Cell flash Pinned rows Row drag & drop Sparklines Cell notes Print layout Aligned grids Loading & empty overlays Status bar Side bar & tool panels Chart data hook Chart panel Cross-filter & zoom Chart export Events Imperative API Saved views Context menus SSR & bundlers

Master-detail

EnterpriseReact

Expand a row into your own detail panel.

Try it: Click a row’s chevron — the panel is yours to render.

Read the guide →

This is an Enterprise feature. The demo runs under our own licence — that is why you see no watermark. Your app needs its own key; see pricing.

Loading DataGrid…