DevExtreme React Grid Material-UI
A template suite used to render the React Grid based on Material-UI components.
Material-UI templates for DevExtreme React Grid component
A template suite used to render the React Grid based on Material-UI components.
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
-> editingAppointment
defaultEditingAppointmentId
-> defaultEditingAppointment
onEditingAppointmentIdChange
-> onEditingAppointmentChange
The 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 maxBarWidth
d
=> innerRadius
, outerRadius
, maxRadius
, startAngle
, and endAngle
react-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 }) => void
Now:
onChange(nextViewName: string) => void
react-scheduler:
We changed the onNavigate
function's argument type to make the DateNavigator
's API more clear.
Previously:
onNavigate({ back: boolean }) => void
Now:
onNavigate(direction: 'forward' | 'back') => void
react-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
=> hiddenColumnNames
defaultHiddenColumns
=> defaultHiddenColumnNames
onHiddenColumnsChange
=> onHiddenColumnNamesChange
The hiddenColumns
getter has been renamed to hiddenColumnNames
.
react-grid: The following RowDetailState plugin's properties have been renamed to improve the API consistency:
expandedRows
=> expandedRowIds
defaultExpandedRows
=> defaultExpandedRowIds
onExpandedRowsChange
=> onExpandedRowIdsChange
The expandedRows
getter has been renamed to expandedRowIds
.
react-grid: The following EditingState plugin's properties have been renamed to improve the API consistency:
changedRows
=> rowChanges
defaultChangedRows
=> defaultRowChanges
onChangedRowsChange
=> onRowChangesChange
The 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
=> deletedRowIds
defaultDeletedRows
=> defaultDeletedRowIds
onDeletedRowsChange
=> onDeletedRowIdsChange
editingRows
=> editingRowIds
defaultEditingRows
=> defaultEditingRowIds
onEditingRowsChange
=> onEditingRowIdsChange
The 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-core
react-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}
/>
}
/>