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
Auto-size & fit
CommunityReactBuilt for ReactSize to content or fill the grid exactly.
Try it: Double-click a header edge to fit its content, or let the grid fill the width exactly.
Loading DataGrid…