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

Reordering

CommunityReact

Drag a header to move the column.

Try it: Drag a header sideways to move the column.

Read the guide →

Loading DataGrid…