Virtual scrollingWeb Worker offloadColumnar encodingServer-side dataPaginationInfinite scrollTransactionsAsync transactionsCell span / mergeSortingAutomatic columnsCustom sort orderResizingReorderingPinningAuto-size & fitVisibility & chooserBands (multi-level headers)Filter rowHeader filter popupQuick searchFilter panel barExternal filterMulti filterFilter builderGrouping (one level)Group panelMulti-level groupingGroup summariesMaster-detailTree dataFooter column totalsTotals row placementCustom aggregationSelection statisticsRow selectionFocused rowDeferred selectionRange selectionCell focus & keyboardCopyFill handleCut & pasteCell editingBatch editingRow editingForm & popup editingValidationPermissionsCustom editors & lookupsCRUD handlersUndo / redoCSV exportExcel exportPDF exportStyled exportImport wizardThemes & palettesDensityLocalizationTooltipsRow numbersCell flashPinned rowsRow drag & dropSparklinesCell notesPrint layoutAligned gridsLoading & empty overlaysStatus barSide bar & tool panelsChart data hookChart panelCross-filter & zoomChart exportEventsImperative APISaved viewsContext menusSSR & bundlers
Resizing
CommunityReactBuilt for ReactDrag the edge; double-click for best fit.
Try it: Drag a header edge. Double-click it to size the column to its content.
Loading DataGrid…