@devexpress/dx-grid-core
Advanced tools
Core library for the DevExtreme Reactive Grid component
Core library for the DevExtreme Reactive Grid component.
1.0.0-beta.3 (2017-12-28)
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>
react-grid: To simplify working and make consistent API, some plugins properties have been renamed.
allowGroupingByClick property has been renamed to showGroupingControls.allowUngroupingByClick property has been renamed to showGroupingControls.allowedPageSizes property has been renamed to pageSizes .react-grid: A column's getCellValue function has gotten higher priority than that defined in the Grid component.
react-grid: The 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>
react-grid: We removed the 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.
react-grid: The TableHeaderCellProps interface's 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.
react-grid: We renamed the DragDropContext plugin to DragDropProvider to improve API consistency.
react-grid: We removed the 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: In order to simplify API, we've decided to remove allowDragging properties in TableHeaderRow and GroupingPanel plugins. Now, to enable dragging it is enough to add the DragDropContext plugin.
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.
<a name="1.0.0-beta.2"></a>
FAQs
Core library for the DevExtreme Reactive Grid component
The npm package @devexpress/dx-grid-core receives a total of 10,593 weekly downloads. As such, @devexpress/dx-grid-core popularity was classified as popular.
We found that @devexpress/dx-grid-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.