- Fixed an edge case where clicking outside the grid wouldn't close and commit an open editor quickly enough, resulting in the previous rows state being used by parent components in
clickhandlers. (PR) - Support for filters has been removed, along with: (PR)
- The
<DataGrid />props:headerFiltersHeight,filters,onFiltersChange,enableFilterRow Column.filterRenderer- The exports:
FilterRendererProps,Filters
- The
- Optional
Columnprops can now also benullin addition toundefined. (PR)
- Added a third, optional generic on
<DataGrid />to specify the row key type. (PR) - Added the
useRowSelectionhook for custom cell renderers to accessisRowSelectedandonRowSelectionChange. (PR) HeaderRendererProps.allRowsSelectedtweaks, affecting theSelectColumn: (PR)- It will now be
falsewhenrows.length === 0instead oftrue. selectedRowsmust contain all the row keys forallRowsSelectedto betrue, instead of naively comparing thesizeandlength.
- It will now be
- Optional props on
<DataGrid />can now also benullin addition toundefined. (PR)
- Optimize onRowsChange: only update changed rows (PR)
- Fixed issue where the scrollbars would flicker in edge cases (PR)
- Fix
aria-readonly(PR)
- Add
column.colSpanprop to merge cells (PR) - Removed prefixed css properties from the generated style file (PR)
- Add
enableVirtualizationprop (PR). Grid renders all the rows/columns when it is set to false.
- Fix summary row position (PR)
- Fixed column headers not showing when grid is horizontally scrolled (PR)
- Migrate to css-in-js with linaria (PR). RDG now internally uses linaria to manage styles. The stylesheets are automatically injected and there is no stylesheet to manually import anymore.
- Expose data grid root element reference (PR).
- (Bug fix) Tabbing into the grid should initiate keyboard navigation (PR).
- Only show the vertical scrollbar when necessary (PR)
- Fix
editorPortalTargetdefault value for server-side rendering (PR) - Use grid layout for rows, split column metrics from compute columns (PR). Resizing columns no longer recreates columns so less re-renders
- Augment
onRowsChangewithindexesandcolumndata (PR)
- (Bug) Commit changes before exiting grid (PR)
- Fix importing rdg with webpack 4 (PR)
- (Breaking) Remove some exports from the grid (PR)
- Use a pseudo-element for header resizer (PR)
- (new) Formatters now receive a new onRowChange prop (PR)
- (new) Change
column.nametype fromstringtostring/ReactElement(PR) - Publish bundles instead of modules, use babel only for transpilation (PR)
- Use the new jsx runtime (PR). The minimum supported react version is 16.14 now.
- Forward sorting props to
headerRenderer(PR) - Disable cell navigation while editing. This behavior can be controlled using the new
column.editorOptions.onNavigationoption (PR)
- (Breaking) Removed
onRowsUpdate,enableCellCopyPaste, andenableCellDragAndDropprops. Added 2 new props (onFillandonPaste) (PR) - (Breaking) Rename
enableFilterstoenableFilterRow(PR)
- (Breaking) Removed old editor API (PR)
- (Breaking) Removed
onCheckCellIsEditableprop (PR). Usecolumn.editableinstead. = (Breaking) Replaced rowKey prop with rowKeyGetter (PR)
- Fixed Copy & Paste events not working properly in non-English keyboards (PR)
- Added support for webpack 5 (PR)
- Fixed a bug where grid was getting scrolled on cell focus
- Minor style fixes
- Add Grouping (PR). Check the new example.
- (Breaking) Removed
heightandwidthprops and added newclassNameandstyleprops. We are now usingResizeObserverto calculate all the grid dimensions (PR) - (Breaking) Removed formatterOptions. Grid now handles formatter focus internally so this prop is no longer required (PR)
- Added support for React 17
- Editor2 bug fixes (PR)
formatterOptions.focusablecan be a function now so different rows can have different focus behavior for the same column- Grid now internally uses
ResizeObserverAPI to calculate the available width (PR)
- A new editor api that does not require a ref (PR)
- A new
columnDefaultOptionsprop. This replacesminColumnWidthanddefaultFormatterprops (PR)
- Allow setting ref on
Cell/Rowrenderers (PR)
- Accessibility improvements. Added various aria attributes. (PR)
- Removed enableCellAutoFocus prop (PR)
- Removed InteractionMasks component. This is an internal change to prepare for grouping and it fixes a few selected cell position bugs
- Improved focus for custom formatters using the new formatterOptions (PR)
- Added:
- Props:
classNamestyleonRowsChangeonFillonPasteonSelectedCellChange⚠️ This replaces theonCellSelectedandonCellDeSelectedprops
enableFilterRow⚠️ This replaces theenableHeaderFiltersandcolumn.filterableprops
filtersonFiltersChangerows⚠️ This replace therowGetterandrowsCountprops
rowClassdefaultColumnOptions⚠️ This replaces theminColumnWidthanddefaultFormatterprops
groupByrowGrouper- More info in #2106
column.cellClass(row)function support:column = { ..., cellClass(row) { return string; } }
column.minWidthcolumn.maxWidthcolumn.headerCellClasscolumn.editor- New API
column.editorOptions- More info in #2102
column.groupFormatter- More info in #2106
scrollToRowmethod⚠️ This replaces thescrollToRowIndexprop
- Dark mode support
- Dark mode is automatically applied following user preference
- Light and dark modes can be forced by setting the
rdg-lightorrdg-darkclass names.
- Props:
- Removed:
- Support:
⚠️ IE11
- Packages:
⚠️ react-data-grid-addons
- Props:
⚠️ width⚠️ height⚠️ cellContentRenderer⚠️ contextMenu- Check the Context Menu example
⚠️ enableCellSelect⚠️ enableCellAutoFocus⚠️ getValidFilterValues⚠️ onCellCopyPaste⚠️ onSelectedCellRangeChange⚠️ onCheckCellIsEditable- Use
column.editableinstead.
- Use
⚠️ onGridKeyDown⚠️ onGridKeyUp⚠️ onRowDoubleClick⚠️ onRowsUpdate- Use
onRowsChange,onFill, andonPasteinstead.
- Use
⚠️ onHeaderDrop⚠️ draggableHeaderCell- Check #2007 on how to migrate
⚠️ rowGroupRenderer⚠️ onRowExpandToggle- Check #2012 on how to migrate
⚠️ rowsContainer⚠️ Subrow props:getSubRowDetails,onCellExpand,onDeleteSubRow, andonAddSubRow- Check #1853 on how to migrate
⚠️ cellMetaData(fromRowandCellprops)⚠️ value(fromcolumn.formatterprops)
- Ref handlers:
⚠️ openCellEditor, useselectCellinstead.
⚠️ React elements are no longer supported, please use components instead.- For example:
const column = { key: 'example', name: 'Example', - formatter: <CustomFormatter length={5} /> + formatter: (props) => <CustomFormatter {...props} length={5} /> };⚠️ column.events⚠️ column.getCellActions- Check #1845 on how to migrate
⚠️ column.getRowMetaData⚠️ column.minColumnWidth⚠️ column.filterable⚠️ column.draggable⚠️ cellRangeSelection.{onStart,onUpdate,onEnd}⚠️ fromRowId,toRowId, andfromRowDatafromonRowsUpdateargument⚠️ Stopped exportingHeaderCell
- Support:
- Renamed:
⚠️ minHeighttoheight⚠️ minWidthtowidth⚠️ onGridSorttoonSort⚠️ emptyRowsViewtoemptyRowsRenderer⚠️ rowKeytorowKeyGetter⚠️ rowDatatorow⚠️ fromRowDatatofromRow⚠️ idxtorowIdxinRowrenderer
- Changed:
⚠️ Started publishing ES2019/ESM modules instead of ES5/CommonJS modules.- Using
@babel/preset-envwithcore-jsis recommended to enable compatibility for the browsers your project aims to support.
- Using
⚠️ Improved support for summary rows:summaryRowstypes are now independent fromrows- Added
column.summaryCellClassandcolumn.summaryFormatterprops column.formatterisn't used anymore to render summary row cells.
- Only visible headers cells are now rendered. #1837
⚠️ therowKeyGetterprop is now required for row selection.⚠️ column.cellClassdoes not affect header cells anymore.⚠️ onScrollwill directly pass the UIEvent rather than the scrollLeft and scrollRight only.⚠️ The stylesheets are now automatically injected, there is no stylsheet to manually import anymore.
- Added:
- TypeScript declaration files
column.cellContentRenderer- More info in this gist
summaryRowsprop #1773sortColumnandsortDirectionprops⚠️ The internal sort states have been removed.- Check #1768 on how to migrate.
selectedRowsandonSelectedRowsChangeprops⚠️ Row selection has been reimplemented.- A new
SelectColumnis now available to import and add a row selection column. - Check #1762 on how to migrate.
- Removed:
- Packages:
react-data-grid-examples- Use the website as reference, or clone the repo locally and run
npm install+npm start
- Use the website as reference, or clone the repo locally and run
- Props:
⚠️ onCellsDragged⚠️ onDragHandleDoubleClick⚠️ onRows⚠️ onRowUpdated⚠️ rowScrollTimeout⚠️ toolbar- Check #1769 on how to migrate
⚠️ isScrolling(fromcolumn.formatterprops)
⚠️ ContainerEditorWrapper⚠️ EditorBase⚠️ setScrollLeftfromRowandCellrendererssetScrollLeftinstance method was previously required on custom Cell and Row renderers and it can be safely removed now.- More info in #1793
⚠️ Dropped ImmutableJS support.⚠️ Dropped dynamic height row support.- This was not officially supported, but it was still possible to implement dynamic rows via custom Row renderer. This was a buggy feature so it has been removed.
⚠️ Removed row reordering support.
- Packages:
- Renamed:
ReactDataGridtoDataGrid
- Changed:
⚠️ The stylesheets are now bundled separately:react-data-grid/dist/react-data-grid.css
⚠️ Reimplemented stylesheets, renamed various class names #1780- No longer depends on bootstrap
- Resizing a column now immediately resizes all its cells instead of just its header.
- Improved performance across the board.
⚠️ react-data-grid-addonshas no default export anymore- Use
import * as DataGridAddons from 'react-data-grid-addons';instead
- Use
⚠️ The stylesheets are now bundled separately:react-data-grid-addons/dist/react-data-grid-addons.css
- Removed:
⚠️ AutoCompleteeditor⚠️ Utils
- Bugfix: fix: draggable resizing col jumps to right (1421)
- Bugfix: Cell Tooltip - Focus Issues (1422)
- Bugfix: Fix formatter exports (1409)
- Bugfix: Fix outside click logic for committing changes (1404)
- TechDebt Add ESLint Rules (1396 1397 1396 1399)
- TechDebt: Upgrade build tools to latest versions (1350)
- Feature: Cleanup zIndex logic (1393)
- Breaking Use react portals for cell editors (1369)
- TechDebt: Upgrade build tools to latest versions (1350)
- Bugfix: Custom Formatters Example - Styling Fix (1364)
- Bugfix: Fix website publishing and remove ImmutableJS dependency (1366)
- Bugfix: Remove react-data-grid dependency from the addons package (1354)
- Bugfix: Fix drag fill in IE 11 (1359)
- Bugfix: Ensure webpack uses correct common js external ref (1370)
- Feature: Move DropTargetRowContainer static styles to CSS class for user customization (1308)
- Bugfix: Replace use of i for column index which is no longer passed in (1344)
- Bugfix: Remove utils from documentation as an exported module (1374)
- TechDebt: Upgrade eslint packages (1376)
- Bugfix: Cleanup DraggableContainer and fix styles (1379)
- Bugfix: Fix frozen-columns source url (1355)
- TechDebt: Defining the ref callback as a bound method (1353)
- Bugfix: Fix cell focusing logic (1352)
- Bugfix: RDG Tree Cell Expand Styling Issues (1316)
- Bugfix: Fix grouping example (1311)
- Bugfix: Remove contain layout css (1346)
- Bugfix: Preserve window scroll position on cell selection (1349)
- Bugfix: Fix CopyMask columns (1289)
- Feature: Improve Cell navigation Performance (1123)
- Feature: Scrolling improvements (1254)
- Feature: Remove react-data-grid dependency from react-data-grid-addons bundle (1272)
- Bugfix: Fix editor refs (#1183)
- Feature: Support
React v16(#1116) - Feature: Set sort column and direction with props (#649)
- Bugfix: Filtering should ignore null values (#1147)
- Bugfix: Resize column doesnt work on firefox when also draggable (#1121)
- Breaking: Migrate to
react-context-menu 2.9.2(#1081)