-
react-core: To get rid of redundant 'div' elements in markup, we have updated the minimum React version the grid requires to 16.2.0.
-
react-grid: Some times ago, we created a pull request that allows using our React Grid with the seamless-immutable library. The main change is that we switched from the Array.prototype.slice()
function to the Array.from()
one to copy arrays. It was not a good decision, because Array.from()
is slower than Array.prototype.slice()
. Now we return back to Array.prototype.slice()
for performance reasons.
If you are using the seamless-immutable library, change your code as follows:
const state = {
data: Immutable({
selection: [],
})
};
<Grid>
{ /* ...*/ }
<SelectionState
// selection: this.state.data.selection -> before
selection: this.state.data.selection.asMutable() // now
/>
</Grid>
The related guide is updated as well.
-
react-grid-material-ui: To make Grid for Material-UI more flexible we've stopped using the Paper component inside the Grid's layout.
It allows placing our Grid to an existing Paper with other components. For example:
<Paper>
<Button>Products</Button>
<Button>Customers</Button>
<Button>Sales</Button>
<Grid
/* ... */
>
{/* ... */}
</Grid>
</Paper>
-
react-grid: To simplify working with selection features and make the selection plugin's purposes clearer, the functionality that computes the selection state has been moved from the SelectionState
plugin to the LocalSelection
one:
- The
availableToSelect
getter has been deleted from the SelectionState
plugin, while the selectAllAvailable
, allSelected
, and someSelected
getters have been added to the LocalSelection
plugin. - The
SelectionState
plugin's setRowsSelection
action has been renamed to toggleSelection
. - The
selection
getter's return value type has been changed to Set
. - The default value of the
TableSelection
plugin's showSelectAll
property has been changed to false
.
Both plugins are available from the @devexpress/dx-react-grid
package.
Note that LocalSelection
should be linked after SelectionState
if you use the TableSelection
plugin.
-
react-core: To simplify working with plugins, we have got rid of the Watcher.
Now, you can use a Getter instead.
Before:
...
<Watcher
watch={
getter = getter('someGetter')
}
onChange={(action, someGetter) => {
action('someAction')(someGetter);
}}
/>
...
After:
...
<Getter
name="someGetter"
computed={(getters, actions) => {
actions.someAction(getters.someGetter);
return getters.someGetter;
}}
/>
...
-
react-grid: Such plugin names as TableView
and VirtualTableView
don't correspond to other plugins like TableFilterRow
, TableGroupRow
, TableSelection
, which do not have "view" in their names. To keep the names of plugins consistent, the following changes have been introduced:
- the
TableView
plugin has been renamed to Table
; - the
VirtualTableView
plugin has been renamed to VirtualTable
;
-
react-grid: The TableEditRow plugin's editCellTemplate
, and editRowTemplate
properties have been replaced with cellComponent
, and rowComponent
ones, which accept components instead of render functions. Find more details here: #496
-
react-grid: The GroupingPanel plugin's groupPanelTemplate
, and groupPanelItemTemplate
properties have been replaced with containerComponent
, and itemComponent
ones, which accept components instead of render functions. Find more details here: #496
containerComponent
takes on the children
property instead of all arguments passed to the groupPanelTemplate
function.
The onSort
, and onGroup
properties passed to itemComponent
are used instead of the changeSortingDirection
, and groupByColumn
arguments passed to the groupPanelItemTemplate
function. The item
, and draft
properties are no longer available, use the item
property instead.
-
react-grid: The TableEditColumn plugin's commandTemplate
, cellTemplate
and headingCellTemplate
properties have been replaced with commandComponent
, cellComponent
, and headerCellComponent
ones, which accept components instead of render functions. Find more details here: #496
Properties passed to a component returned from commandComponent
have the same names as arguments passed to the commandTemplate
function with the following exception. The onExecute
property is used instead of the executeCommand
argument.
All properties passed to the cellComponent
except row
have been replaced by the children
property providing configured commands.
All properties passed to the headingCellComponent
have been replaced by the children
property providing configured commands.
-
react-grid: The TableGroupRow plugin's groupIndentColumnWidth
property has been renamed to indentColumnWidth
. The groupCellTemplate
, groupRowTemplate
and groupIndentCellTemplate
properties have been replaced with cellComponent
, rowComponent
, and indentCellComponent
ones, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent
have the same names as arguments passed to the groupCellTemplate
function with the following exceptions:
- The
onToggle
property is used instead of the toggleGroupExpanded
argument. - The
expanded
property is used instead of the isExpanded
argument.
-
react-grid: The TableFilterRow plugin's filterCellTemplate
and filterRowTemplate
properties have been replaced with cellComponent
, and rowComponent
ones, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent
have the same names as arguments passed to the filterCellTemplate
function except for the onFilter
property, which is used instead of the setFilter
argument.
-
react-grid: The TableHeaderRow's headerCellTemplate
, and headerRowTemplate
properties have been replaced with cellComponent
, and rowComponent
, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent
have the same names as arguments passed to the headerCellTemplate
function with the following exceptions: the onSort
, onGroup
, onWidthChange
and onDraftWidthChange
properties are used instead of the changeSortingDirection
, groupByColumn
, changeColumnWidth
and changeDraftColumnWidth
arguments respectively.
-
react-grid: The TableRowDetail plugin's detailToggleCellWidth
property has been renamed to toggleColumnWidth
. The template
, detailCellTemplate
, detailRowTemplate
, and detailToggleCellTemplate
properties have been replaced with contentComponent
, cellComponent
, rowComponent
, and toggleCellComponent
ones, which accept components instead of render functions. Find more details here: #496
Properties passed to cellComponent
have the same names as arguments passed to the detailCellTemplate
function except for the children
property, which is used instead of the template
argument.
Properties passed to toggleCellComponent
have the same names as arguments passed to the detailToggleCellTemplate
function except for the onToggle
property, which is used instead of the toggleExpanded
argument.
-
react-grid: The TableSelection plugin's highlightSelected
property has been renamed to highlightRow
. The selectCellTemplate
and selectAllCellTemplate
properties have been replaced with cellComponent
, and headerCellComponent
ones, which accept components instead of render functions. Find more details here: #496
Properties passed to headerCellComponent
have the same names as arguments passed to the selectAllCellTemplate
function with the following exceptions:
- The
onToggle
property is used instead of the toggleAll
argument. - The
disabled
property is used instead of the selectionAvailable
argument and it's value is inverted.
Properties passed to cellComponent
have the same names as arguments passed to the selectCellTemplate
function except for the onToggle
property, which is used instead of the changeSelected
argument.
-
react-grid: The Table's tableLayoutTemplate
, tableCellTemplate
, tableRowTemplate
, tableNoDataCellTemplate
, tableNoDataRowTemplate
, tableStubCellTemplate
, and tableStubHeaderCellComponent
properties have been replaced with layoutComponent
, cellComponent
, rowComponent
, noDataCellComponent
, noDataRowComponent
, stubCellComponent
and stubHeaderCellComponent
. This also means that they accept components instead of render functions. Find more details here: #496
-
react-grid: The Grid's rootTemplate
, headerPlaceholderTemplate
, and footerPlaceholderTemplate
properties have been replaced with rootComponent
, headerPlaceholderComponent
, and footerPlaceholderComponent
. This also means that they accept components instead of render functions. Find more details here: #496
The headerTemplate
, bodyTemplate
, and footerTemplate
properties have been replaced with the children
property in rootTemplate
.