DevExtreme React Grid
DevExtreme React Grid is a component that displays table data from a local or remote source.
Composable plugin-based data grid component for React
DevExtreme React Grid is a component that displays table data from a local or remote source.
react-popper dependency to v2, by @glsignal (345fa12)forwardedRef prop from a DOM (T1068005) (#3520) (3ad77df)timeScaleTickCellComponent property public (#3474) (cee2043)TableColumnVisibility plug-in before the TableBandHeader plug-in to correctly calculate column spans and borders....
+<TableColumnVisibility
+ defaultHiddenColumnNames={...}
+/>
...
<TableBandHeader
columnBands={columnBands}
/>
...
-<TableColumnVisibility
- defaultHiddenColumnNames={...}
-/>
...top or bottom (#3343) (99c4efd)onValueChange property for TableEditCell optional (#3253) (5c1247f)shift key (#3132) (9d2532e), closes #3130ref and exportGrid types in GridExporter (#2887) (f89fb05)DayView and WeekView plugins now do not have the timeScaleRowComponent and timeScaleCellComponent properties. Instead, they have a new, timeScaleLabelComponent, property....
<WeekView
- timeScaleRowComponent
- timeScaleCellComponent
+ timeScaleLabelComponent
/>
<DayView
- timeScaleRowComponent
- timeScaleCellComponent
+ timeScaleLabelComponent
/>
...headerComponent and contentComponent in the AppointmentTooltip plugin with new properties. If you use these components, add the following properties in your code:...
<AppointmentTooltip
headerComponent={({
+ commandButtonComponent
+ showOpenButton
+ showCloseButton
+ showDeleteButton
+ commandBottonIds
...restProps
}) => (
<AppointmentTooltip.Header
+ commandButtonComponent={commandButtonComponent}
+ showOpenButton={showOpenButton}
+ showCloseButton={showCloseButton}
+ showDeleteButton={showDeleteButton}
+ commandBottonIds={commandBottonIds}
{...restProps}
/>
)}
contentComponent={({
+ formatDate
...restProps
}) => (
<AppointmentTooltip.Content
+ formatDate={formatDate}
{...restProps}
/>
)}
/>
...new Date behavior in Safari (#2370) (061fd31), closes #2369AppointmentForm plugin now doesn't have the popupComponent, containerComponent, scrollableAreaComponent and staticAreaComponent properties. We have made many changes to the form. You can find all the new properties in the AppointmentForm Plugin Reference....
<AppointmentForm
- popupComponent
- containerComponent
- scrollableAreaComponent
- staticAreaComponent
/>
...MonthView and WeekView plugins now do not have firstDayOfWeek property. It was moved to the Scheduler plugin.<Scheduler
+ firstDayOfWeek={firstDayOfWeek}
>
<MonthView
- firstDayOfWeek={firstDayOfWeek}
>
<WeekView
- firstDayOfWeek={firstDayOfWeek}
>
...
</Scheduler>BREAKING CHANGES:
EditingState plugin. Now, editing requires the EditingState, and either the IntegratedEditing or the EditRecurrenceMenu plugin. In addition, you can add the EditRecurrenceMenu plugin to allow users to select how recurrent appointments are edited.<Scheduler>
<EditingState />
+ <EditRecurrenceMenu />
+ {/* or <IntegratedEditing />*/}
...
</Scheduler>The following EditingState properties were replaced:
editingAppointmentId -> editingAppointmentdefaultEditingAppointmentId -> defaultEditingAppointmentonEditingAppointmentIdChange -> onEditingAppointmentChangeThe new properties contain an AppointmentModel of the appointment being edited.
<Scheduler>
<EditingState
- editingAppointmentId
- defaultEditingAppointmentId
- onEditingAppointmentIdChange
+ editingAppointment
+ defaultEditingAppointment
+ onEditingAppointmentChange
/>
...
</Scheduler>DayView plugin's, WeekView plugin's and MonthView plugin's layout component now doesn't have the height property. height is now Scheduler plugin's root component property....
<DayView
layoutComponent={({
- height,
...restProps
}) => (
<DayView.Layout
- height={height}
{...restProps}
/>
)}
/>
...
<WeekView
layoutComponent={({
- height,
...restProps
}) => (
<WeekView.Layout
- height={height}
{...restProps}
/>
)}
/>
...
<MonthView
layoutComponent={({
- height,
...restProps
}) => (
<MonthView.Layout
- height={height}
{...restProps}
/>
)}
/>
...
<Scheduler
rootComponent={({
+ height,
...restProps
}) => (
<Scheduler.Root
+ height={height}
{...restProps}
/>
)}
/>
...We released v2.0.0 today because we migrated to material-ui v4. For the time being, we will fix bugs in v1.x for those who need to remain on material-ui v3. We recommend updating to material-ui v4, since new features will only be included in v2.x.
ViewSwitcher plugin's switcher component now doesn't have the currentViewName and availableViewNames properties. To specify the current view name use currentView property consisting of 2 fields: name and displayName. To provide available views, use availableViews property, which is an array of elements with name and displayName fields....
<ViewSwitcher
switcherComponent={({
- currentViewName,
+ currentView,
- avalableViewNames,
+ availableViews,
...restProps
}) => (
<ViewSwitcher.Switcher
- currentViewName={currentViewName}
+ currentView={currentView}
- availableViewNames={availableViewNames}
+ availableViews={availableViews}
{...restProps}
/>
)}
/>
...AllDayPanel plugin's layout component now doesn't have the allDayPanel property. To specify cell elements use setCellElementsMeta property....
<AllDayyPanel
layoutComponent={({
- allDayPanelRef,
+ setCellElementsMeta,
...restProps
}) => (
<AllDayPanel.Layout>
- allDayPanelRef={allDayPanelRef}
+ setCellElementsMeta={setCellElementsMeta}
{...restProps}
/>
)}
/>
...x, y, and y1 properties in series points' coordinates have been renamed to arg, val, and startVal respectively. The old names were unsuitable in the case when the chart was rotated.dominantBaseline option with the dy option for axis labels because Edge does not support the former. The dy option does not change the baseline position and simply shifts text up or down.react-scheduler:
The Appointment component of the Appointments plugin has not received a style property. These styles have passed to the Container component of the Appointments plugin.
Before
...
<Appointments
appointmentComponent={({ style, children, data, onClick?, onDoubleClick? }) => ... }
...
/>
...After
...
<Appointments
appointmentComponent={({ children, data, onClick?, onDoubleClick? }) => ... }
containerComponent={({ style, children }) => ... }
...
/>
...react-chart:
Previously, pointComponent of BarSeries and PieSeries accepted precalculated fields (width and d, respectively). Now, pointComponent accepts fields that provide raw data for calculation. This makes pointComponent more flexible as the width and d fields can now be calculated the way you need.
The following substitutions took place:
width => barWidth and maxBarWidthd => innerRadius, outerRadius, maxRadius, startAngle, and endAnglereact-chart:
Previously the ArgumentAxis, ValueAxis, and Scale plugins allowed you to customize argument and value scales. In this release, we have implemented the ArgumentScale and ValueScale plugins for this purpose.
react-chart:
The showGrids Axis property is renamed to showGrid.
react-chart:
The min and max scale properties are replaced with the modifyDomain property because the band scale domain cannot be customized in min and max terms.
Replace this
<ArgumentScale min={0} max={10} ... />with this
const modifyDomain = () => [0, 10];
<ArgumentScale modifyDomain={modifyDomain} ... />react-scheduler:
We have changed the onChange function's argument type to make the ViewSwitcher's API more clear.
Previously:
onChange({ nextViewName: string }) => voidNow:
onChange(nextViewName: string) => voidreact-scheduler:
We changed the onNavigate function's argument type to make the DateNavigator's API more clear.
Previously:
onNavigate({ back: boolean }) => voidNow:
onNavigate(direction: 'forward' | 'back') => voidreact-chart:
In the ArgumentAxis and ValueAxis plugins lineComponent and tickComponent render identical svg-path elements. Previously, they require different properties for drawing: width and height for lineComponent and x1, x2, y1, y2 for tickComponent.
Now, for more consistency the lineComponent requires the same properties as tickComponent.
Previously, there were ArgumentGrid and ValueGrid plugins that render grid lines for axes. Now, grids are part of the axes:
<ArgumentAxis showGrids />
<ValueAxis /> For grid customization, use gridComponent as follows:
<ArgumentAxis gridComponent={...} />
<ValueAxis gridComponent={...} />groupWidth property configures a band scale for arguments - it is not a property of a particular bar series.
To configure a band scale, use the Scale plugin as follows:<Scale extensions={[{ type: 'band', constructor: d3.scaleBand().paddingOuter(0.1).paddingInner(0.2) }]} />
react-chart: Previously, there was a single Grid plugin. Now there are ArgumentGrid and ValueGrid plugins.
ArgumentGrid is bound to an argument domain.
ValueGrid is bound to a value domain specified by the name property or to a default domain.
react-chart: Previously, the Chart component configured scales internally. Starting with this release, we extracted the scale customization logic to a separate plugin to enable a user to customize a scale. Now, you need to manually add the Scale plugin to the Chart component to draw a chart.
getMessage property was moved from the TableHeaderRow.CellProps interface to TableHeaderRow.SortLabelProps. This property returns the sort label's text.row property to the table edit command cell (#890) (610343c)row property to the table edit command cell (#890) (610343c)PluginContainer component has been renamed to Plugin.expandedRowIds getter of the RowDetailState plugin has been renamed to expandedDetailRowIds.draftGrouping getter does not contain information about draft mode anymore. The draftGroupingChange, and cancelGroupingChange actions have been renamed to draftColumnGrouping, and cancelColumnGroupingDraft.react-grid: The type of the TableColumnResizing plugin's columnWidths and defaultColumnWidths properties has been changed from object to array to improve API consistency.
Before:
<Grid>
<TableColumnResizing columnWidths={{ a: 120 }} />
</Grid>After:
<Grid>
<TableColumnResizing columnWidths={[{ columnName: a, width: 120 }]} />
</Grid>react-grid: The changeDraftTableColumnWidth action has been renamed to draftTableColumnWidth. The functionality that resets draft column width has been moved from from the draftTableColumnWidth action into the separate cancelTableColumnWidthDraft action.
The onDraftWidthChange event of the TableHeaderRow's cellComponent has been renamed to onWidthDraft. The functionality that cancels draft width changes has been extracted to the onWidthDraftCancel event.
groupByColumn action has been renamed to changeColumnGrouping.selection getter's data type from Set to Array to improve the API consistency.react-grid: We renamed the following TableColumnVisibility plugin's properties to improve the API consistency:
hiddenColumns => hiddenColumnNamesdefaultHiddenColumns => defaultHiddenColumnNamesonHiddenColumnsChange => onHiddenColumnNamesChangeThe hiddenColumns getter has been renamed to hiddenColumnNames.
react-grid: The following RowDetailState plugin's properties have been renamed to improve the API consistency:
expandedRows => expandedRowIdsdefaultExpandedRows => defaultExpandedRowIdsonExpandedRowsChange => onExpandedRowIdsChangeThe expandedRows getter has been renamed to expandedRowIds.
react-grid: The following EditingState plugin's properties have been renamed to improve the API consistency:
changedRows => rowChangesdefaultChangedRows => defaultRowChangesonChangedRowsChange => onRowChangesChangeThe changedRows getter has been renamed to rowChanges.
setColumnFilter action has been renamed to changeColumnFilter.setDetailRowExpanded action has been renamed to toggleDetailRowExpanded.toggleSelection action's selected parameter has been renamed to state.expandedGroups getter's data type from Set to Array to improve the API consistency.react-grid: The following EditingState plugin's properties have been renamed to improve the API consistency:
deletedRows => deletedRowIdsdefaultDeletedRows => defaultDeletedRowIdsonDeletedRowsChange => onDeletedRowIdsChangeeditingRows => editingRowIdsdefaultEditingRows => defaultEditingRowIdsonEditingRowsChange => onEditingRowIdsChangeThe deletedRows getter has been renamed to deletedRowIds.
The editingRows getter has been renamed to editingRowIds.
setColumnSorting action has been renamed to changeColumnSorting.react-grid: We have moved the PagingState plugin's totalCount property to the CustomPaging plugin to improve API consistency. Now, you can add the CustomPaging plugin to a project and specify its totalCount property to implement remote paging.
Before:
<Grid>
<...>
<PagingState totalCount={10} />
</Grid>After:
<Grid>
<...>
<PagingState />
<CustomPaging totalCount={10} />
</Grid>allowGroupingByClick property has been renamed to showGroupingControls.allowUngroupingByClick property has been renamed to showGroupingControls.allowedPageSizes property has been renamed to pageSizes.getCellValue function has gotten higher priority than that defined in the Grid component.createRowChange function arguments order has been changed to (row: any, value: any, columnName: string) to improve the API consistency. Now, the EditingState plugin's createRowChange function has the same signature as the column extension's one.react-grid: We have renamed the following plugins that process data to make the Grid API more consistent:
react-grid: We removed the LocalSorting plugin's getColumnIdentity property to improve API consistency. Now, use the column extension's criteria property to specify an individual column's grouping criteria.
Before:
const columns = [{ name: 'field' }, { name: 'field2' }];
const fieldGroupCriteria = /* custom group criteria */;
const getColumnIdentity = (columnName) => {
if (name === 'field') return fieldGroupCriteria;
};
<Grid columns={columns}>
<LocalGrouping getColumnIdentity={getColumnIdentity} />
</Grid>After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const fieldGroupCriteria = /* custom group criteria */;
const integratedGroupingColumnExtensions = [
{ columnName: 'field', criteria: fieldGroupCriteria },
];
<Grid columns={columns}>
<IntegratedGrouping columnExtensions={integratedGroupingColumnExtensions} />
</Grid>cancel argument from the SortingState plugin's setColumnSorting action and from the onSort event of the TableHeaderCellProps and GroupPanelItemProps component properties. Now, you can pass null to the direction argument to cancel sorting by column.allowResizing property has been renamed to resizingEnabled to improve the API consistency.react-grid: We removed the getColumnCompare property from the LocalSorting plugin to improve API consistency. Now, use the columnExtension property to specify individual column sorting options.
Before:
const columns = [{ name: 'field' }, { name: 'field2' }];
const fieldCompare = /* custom sort compare */;
const getColumnCompare = (columnName) => {
if (name === 'field') return fieldCompare;
};
<Grid columns={columns}>
<LocalSorting getColumnCompare={getColumnCompare} />
</Grid>After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const fieldCompare = /* custom sort compare */;
const integratedSortingColumnExtensions = [
{ columnName: 'field', compare: fieldIdentity },
];
<Grid columns={columns}>
<IntegratedSorting columnExtensions={integratedSortingColumnExtensions} />
</Grid>react-grid: We have integrated the column chooser into the Grid as a plugin to simplify the API. Now, use the column chooser as follows:
<Grid>
{/* ... */}
<TableColumnVisibility
/* props */
/>
<Toolbar />
<ColumnChooser />
</Grid>For details, see Controlling Column Visibility.
react-grid: We extracted the column's showWhenGrouped property that the TableGroupRow plugin handles to a column extension to improve the API readability.
The TableGroupRow plugin's showColumnsWhenGrouped property type has been changed to boolean and this property affects all columns. If you need to control specific columns' visibility, use column extensions.
Before:
const columns = [{ name: 'field', showWhenGrouped: true }, { name: 'field2' }];
<Grid columns={columns}>
<TableGroupRow />
</Grid>After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const tableGroupColumnExtensions = [
{ columnName: 'field', showWhenGrouped: true },
];
<Grid columns={columns}>
<TableGroupRow columnExtensions={tableGroupColumnExtensions} />
</Grid>Note that column extension properties have higher priority than corresponding plugin properties.
DragDropContext plugin to DragDropProvider to improve API consistency.allowResizing property from the TableHeaderRow plugin to simplify the API. Now, adding the TableColumnResizing plugin enables column resizing.react-grid: In order to improve API readability, we extracted the width and align column properties that the Table and VirtualTable plugins handle into a separate property. Now, the width and align properties in the Grid columns are no longer supported. Use a TableColumnExtension instead:
Before:
const columns= [{ name: 'field', width: 100 }, { name: 'field2' }];
<Grid columns={columns}>
<Table />
</Grid>After:
const columns= [{ name: 'field1' }, { name: 'field2' }];
const tableColumnExtensions = [{ columnName: 'field1', width: 100 }];
<Grid columns={columns}>
<Table columnExtensions={tableColumnExtensions} />
</Grid>react-grid: In order to simplify API, we changed the way the DataTypeProvider plugin detects columns associated with a type. Now, to associate a custom formatter and editor with a column, pass a column array to the DataTypeProvider's for field:
Before:
const columns= [{ name: 'field', dataType: 'boolean' }, { name: 'field2' }];
<Grid columns={columns}>
<DataTypeProvider type="boolean" />
</Grid>After:
const columns= [{ name: 'field1' }, { name: 'field2' }];
const booleanColumns = ['field1'];
<Grid columns={columns}>
<DataTypeProvider for={booleanColumns} />
</Grid>react-grid: In order to improve API consistency, we've decided to replace the getColumnPredicate function in the LocalFiltering plugin with the LocalFilteringColumnExtension.
Before:
const columns = [{ name: 'field' }, { name: 'field2' }];
const fieldPredicate = /* custom filtering predicate */;
const getColumnPredicate = (columnName) => {
if (name === 'field') return fieldPredicate;
};
<Grid columns={columns}>
<LocalFiltering getColumnPredicate={getColumnPredicate} />
</Grid>After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const fieldPredicate = /* custom filtering predicate */;
const integratedFilteringColumnExtensions = [
{ columnName: 'field', predicate: fieldPredicate },
];
<Grid columns={columns}>
<IntegratedFiltering columnExtensions={integratedFilteringColumnExtensions} />
</Grid>react-grid:
To provide a more convenient and flexible way to render elements that are placed within a Grid header we add the Toolbar plugin. For this reason, the GroupingPanel plugin has the Toolbar dependency:
import {
// ...
Toolbar,
GroupingPanel
} from '@devexpress/dx-react-grid-material-ui';
<Grid>
{/* ... */}
<Toolbar />
<GroupingPanel />
</Grid>To simplify Grid's markup we removed header placeholder and footer placeholder components.
If you're customizing Grid appearance using the headerPlaceholderComponent and footerPlaceholderComponent properties, your code should be updated as follows:
Before:
<Grid
headerPlaceholderTemplate={() => (<div />)}
footerPlaceholderTemplate={() => (<div />)}
>
{/* ... */}
</Grid>After:
import { Template, TemplatePlaceholder } from '@devexpress/dx-react-core';
<Grid>
<Template name="header">
<TemplatePlaceholder />
{/* Custom markup */}
</Template>
<Template name="footer">
<TemplatePlaceholder />
{/* Custom markup */}
</Template>
{/* ... */}
</Grid>react-grid: We extracted the column's createRowChange property that the EditingState plugin handles to a column extension to improve API readability.
Before:
const columns = [{ name: 'field', createRowChange: (row, value) => { /* logic */ } }, { name: 'field2' }];
<Grid columns={columns}>
<EditingState />
</Grid>After:
const columns= [{ name: 'field' }, { name: 'field2' }];
const editingColumnExtensions = [
{ columnName: 'field', createRowChange: (row, value) => { /* logic */ } },
];
<Grid columns={columns}>
<EditingState columnExtensions={editingColumnExtensions} />
</Grid>Note that column extension properties have higher priority than corresponding plugin properties.
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.
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:
availableToSelect getter has been deleted from the SelectionState plugin, while the selectAllAvailable, allSelected, and someSelected getters have been added to the LocalSelection plugin.SelectionState plugin's setRowsSelection action has been renamed to toggleSelection.selection getter's return value type has been changed to Set.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:
TableView plugin has been renamed to Table;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:
onToggle property is used instead of the toggleGroupExpanded argument.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:
onToggle property is used instead of the toggleAll argument.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.
rect-grid: The ColumnOrderState plugin has been renamed to TableColumnReordering and is now available via the @devexpress/dx-react-grid-bootstrap3 and @devexpress/dx-react-grid-material-ui packages.
The TableView plugin's allowColumnReordering property has been removed and the TableColumnReordering plugin now depends on the TableView plugin. Thus, it is enough to link the TableColumnReordering plugin below the TableView plugin to enable column reordering.
Before:
import {
// ...
ColumnOrderState
} from '@devexpress/dx-react-grid';
// ...
<ColumnOrderState defaultOrder={[/* ... */]} />
<TableView allowColumnReordering />After:
import {
// ...
TableColumnReordering
} from '@devexpress/dx-react-grid-bootstrap3';
// } from '@devexpress/dx-react-grid-material-ui';
// ...
<TableView />
<TableColumnReordering defaultOrder={[/* ... */]} />react-grid: The TableColumnResizing plugin is now available in the "@devexpress/dx-react-grid-bootstrap3" and "@devexpress/dx-react-grid-material-ui" packages.
Use the following code to import the plugin.
import {
TableColumnResizing,
} from from '@devexpress/dx-react-grid-bootstrap3'/* or '@devexpress/dx-react-grid-material-ui' */;react-grid: The scope parameter of the setColumnSorting action has been removed.
The GroupingState plugin now has an optional dependency on the SortingState plugin. So, GroupingState should be placed after SortingState.
Before:
<GroupingState /* ... */ />
<SortingState /* ... */ />After:
<SortingState /* ... */ />
<GroupingState /* ... */ />filterFn property of the LocalFiltering has been renamed to getColumnPredicate. The argument list has been changed from filterFn(row: Row, filter: Filter) => boolean to getColumnPredicate(columnName: string) => Function. The returning function has the following signature (value: any, filter, row: Row) => boolean.getCellData property of the TableView plugin and the getCellData field of the Column interface have been renamed to getCellValue.tableExtraProps getter was removed from the TableView and TableSelection plugins.connectGetters and connectActions properties have been removed from the Template component. From now on, you can connect Getters and Actions using the TemplateConnector component.Before:
<Template name="templateName"
connectGetters={getter => ({ value: getter('value') })}
connectActions={action => ({ changeValue: action('changeValue') })}
>
{({ value, changeValue }) => /* ... */}
</Template>After:
<Template name="templateName">
<TemplateConnector>
{({ value }, { changeValue }) => /* ... */}
</TemplateConnector>
</Template>tableTemplate property has been renamed to tableLayoutTemplate to make the TableView plugin API more eloquent.react-grid: The following changes have been made in the GroupingPanel plugin:
groupPanelCellTemplate property has been renamed to groupPanelItemTemplate;groupedColumns property has been renamed to groupingPanelItems and now contains an array of objects which conform the GroupingPanelItem interface.The isDraft property of the DraftGrouping interface has been renamed to draft.
groupedColumns and draftGroupedColumns getters are no longer exported from the GroupingState plugin.The column field is no longer present in the GroupRow interface. So, to access the column field in groupCellTemplate and groupIndentCellTemplate of the TableGroupRow plugin, it is necessary to use args.column instead of args.row.column.
colspan field passed to tableNoDataCellTemplate (the TableView plugin), detailCellTemplate (the TableRowDetail plugin) and groupCellTemplate (the TableGroupRow plugin) has been renamed to colSpan.react-grid: To simplify the Grid plugins API the setRowSelection action was removed from the SelectionState and TableSelection plugins.
For now, to select a single row you can use the setRowsSelection action in the following manner:
setRowsSelection({ rowIds: [/* rowId */] })react-grid:TableRow and TableColumn interfaces structure has been changed. Now, it wraps original rows and columns of the Grid component instead of patching it.
Before:
interface TableRow extends Row {
type?: string;
}
interface TableColumn extends Column {
type?: string;
}After:
interface TableRow {
key: string;
type: string;
rowId?: number | string;
row?: Row;
height?: number;
}
interface TableColumn {
key: string;
type: string;
column?: Column;
width?: number;
} The CommandHeadingCellArgs interface related to the TableEditColumn plugin no longer has column and row fields.
@devexpress/dx-react-grid-material-ui package is no longer providedsetPageSize and setCurrentPage actions were simpilified. Now, to call these actions, a user can use numbers instead of objects. See the following code:setPageSize(5); // instead of setPageSize({ size: 5 })andsetCurrentPage(1); // instead of setCurrentPage({ page: 1 })allowGrouping property has been renamed to allowGroupingByClick.totalPages getter is no longer exported from the PagingState and LocalPaging plugins.groupPanelCellTemplate property of the grouping-panel plugin instead of the GroupPanelProps interface's cellTemplate property to specify a template used to render a grouping panel cell. The GroupPanelProps interface's cellTemplate property is no longer available.react-grid: The following package has become a peer dependency of the @devexpress/dx-react-grid one and has to be installed by your app:
npm i --save @devexpress/dx-react-corereact-grid: The 'groupRowCellTemplate' property of the TableGroupRow plugin has been renamed to 'groupCellTemplate'
detailToggleTemplate property of the TableRowDetail plugin to detailToggleCellTemplate to make it consistent with the detailToggleCellWidth property.react-grid: We moved layout templates from the TableView plugin to the Grid component. The Grid component with the predefined plugins is now available in the "@devexpress/dx-react-grid-bootstrap3" package. If you want to define custom layout templates, the Grid component without predefined templates is still available in the "devexpress/dx-react-grid" package.
The following code:
import {
Grid
} from '@devexpress/dx-react-grid';should be replaced with:
import {
Grid
} from '@devexpress/dx-react-grid-bootstrap3';Previously, to enable the 'Detail row' feature a user had to use only the 'TableRowDetail' plugin. But, this plugin mixed up the rendering and state managing functionality. Now, there are two particular plugins. The first one is the 'RowDetailState' plugin. It's responsible for a state managing. The second one is the 'TableRowDetail' plugin. It only renders a detail row.
The following code:
<TableRowDetail
expandedRows={expandedRows}
onExpandedRowsChange={onExpandedRowsChange}
template={({ row }) =>
<GridDetailContainer
data={row}
columns={detailColumns}
/>
}
/>should be replaced with:
<RowDetailState
expandedRows={expandedRows}
onExpandedRowsChange={onExpandedRowsChange}
/>
<TableRowDetail
template={({ row }) =>
<GridDetailContainer
data={row}
columns={detailColumns}
/>
}
/>