- 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
editorPortalTarget
default 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
onRowsChange
withindexes
andcolumn
data (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.name
type fromstring
tostring/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.onNavigation
option (PR)
- (Breaking) Removed
onRowsUpdate
,enableCellCopyPaste
, andenableCellDragAndDrop
props. Added 2 new props (onFill
andonPaste
) (PR) - (Breaking) Rename
enableFilters
toenableFilterRow
(PR)
- (Breaking) Removed old editor API (PR)
- (Breaking) Removed
onCheckCellIsEditable
prop (PR). Usecolumn.editable
instead. = (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
height
andwidth
props and added newclassName
andstyle
props. We are now usingResizeObserver
to 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.focusable
can be a function now so different rows can have different focus behavior for the same column- Grid now internally uses
ResizeObserver
API to calculate the available width (PR)
- A new editor api that does not require a ref (PR)
- A new
columnDefaultOptions
prop. This replacesminColumnWidth
anddefaultFormatter
props (PR)
- Allow setting ref on
Cell/Row
renderers (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:
className
style
onRowsChange
onFill
onPaste
onSelectedCellChange
⚠️ This replaces theonCellSelected
andonCellDeSelected
props
enableFilterRow
⚠️ This replaces theenableHeaderFilters
andcolumn.filterable
props
filters
onFiltersChange
rows
⚠️ This replace therowGetter
androwsCount
props
rowClass
defaultColumnOptions
⚠️ This replaces theminColumnWidth
anddefaultFormatter
props
groupBy
rowGrouper
- More info in #2106
column.cellClass(row)
function support:column = { ..., cellClass(row) { return string; } }
column.minWidth
column.maxWidth
column.headerCellClass
column.editor
- New API
column.editorOptions
- More info in #2102
column.groupFormatter
- More info in #2106
scrollToRow
method⚠️ This replaces thescrollToRowIndex
prop
- Dark mode support
- Dark mode is automatically applied following user preference
- Light and dark modes can be forced by setting the
rdg-light
orrdg-dark
class 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.editable
instead.
- Use
⚠️ onGridKeyDown
⚠️ onGridKeyUp
⚠️ onRowDoubleClick
⚠️ onRowsUpdate
- Use
onRowsChange
,onFill
, andonPaste
instead.
- 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
(fromRow
andCell
props)⚠️ value
(fromcolumn.formatter
props)
- Ref handlers:
⚠️ openCellEditor
, useselectCell
instead.
⚠️ 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
, andfromRowData
fromonRowsUpdate
argument⚠️ Stopped exportingHeaderCell
- Support:
- Renamed:
⚠️ minHeight
toheight
⚠️ minWidth
towidth
⚠️ onGridSort
toonSort
⚠️ emptyRowsView
toemptyRowsRenderer
⚠️ rowKey
torowKeyGetter
⚠️ rowData
torow
⚠️ fromRowData
tofromRow
⚠️ idx
torowIdx
inRow
renderer
- Changed:
⚠️ Started publishing ES2019/ESM modules instead of ES5/CommonJS modules.- Using
@babel/preset-env
withcore-js
is recommended to enable compatibility for the browsers your project aims to support.
- Using
⚠️ Improved support for summary rows:summaryRows
types are now independent fromrows
- Added
column.summaryCellClass
andcolumn.summaryFormatter
props column.formatter
isn't used anymore to render summary row cells.
- Only visible headers cells are now rendered. #1837
⚠️ therowKeyGetter
prop is now required for row selection.⚠️ column.cellClass
does not affect header cells anymore.⚠️ onScroll
will 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
summaryRows
prop #1773sortColumn
andsortDirection
props⚠️ The internal sort states have been removed.- Check #1768 on how to migrate.
selectedRows
andonSelectedRowsChange
props⚠️ Row selection has been reimplemented.- A new
SelectColumn
is 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.formatter
props)
⚠️ ContainerEditorWrapper
⚠️ EditorBase
⚠️ setScrollLeft
fromRow
andCell
rendererssetScrollLeft
instance 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:
ReactDataGrid
toDataGrid
- 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-addons
has 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:
⚠️ AutoComplete
editor⚠️ 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)