Changelog History
Page 8
-
v1.1.0-beta.3 Changes
March 07, 2018 -
v1.1.0-beta.2 Changes
March 02, 2018 -
v1.1.0-beta.1 Changes
February 22, 2018๐ Bug Fixes
- react-grid: allow adding custom styles to some components (#728) (7580410)
- react-grid: fix reordering after grouping (#744) (4de38d7)
- react-grid-bootstrap3: repair column chooser positioning (#740) (4c4ed15)
- ๐ป react-grid-material-ui: remove PagingPanel's border-top (#751) (353e486)
๐ Features
- react-grid: add the ability to prevent column filtering (#702) (f3d3f10)
- react-grid: add the ability to prevent column visibility toggling (#705) (2cdfe06)
- react-grid: add the ability to prevent editing by a column (#729) (3c88c4c)
- react-grid: add the ability to sort/group by the particular column (#692) (b5d0e2f)
- react-grid: add TypeScript definitions (#710) (7dfc052)
-
v1.0.3 Changes
March 02, 2018 -
v1.0.1 Changes
February 16, 2018 -
v1.0.0 Changes
February 02, 2018๐จ Code Refactoring
- react-core: rename PluginContainer to Plugin (#712) (30734d8)
- react-grid: rename expanded details getter (#713) (771eb3f)
๐ฅ BREAKING CHANGES
- react-core: The
PluginContainercomponent has been renamed toPlugin. - react-grid: The
expandedRowIdsgetter of the RowDetailState plugin has been renamed toexpandedDetailRowIds.
-
v1.0.0-rc.2 Changes
January 26, 2018๐ Bug Fixes
- react-core: fix crash when using with webpack-dev-server and Hot Module Reloading (#694) (bdc944b)
- react-grid-bootstrap3: align header and data cell texts (#687) (b34f142)
- react-grid-bootstrap3: correct grouping icon alignment (#686) (fb30cc3)
- ๐ป react-grid-material-ui: use long paths for modules (#684) (b32f79c)
-
v1.0.0-rc.1 Changes
January 18, 2018๐ Bug Fixes
- react-core: clear text selection when dragging (#669) (b7c2eac)
- react-grid: display empty message when all data columns are hidden (#670) (44d7622)
- react-grid: set higher precedence to props in state plugins (#663) (bb5ef97), closes #662
- react-grid: update render component in correct lifecycle hook (#655) (c56ff88), closes #649
- react-grid-bootstrap3: repair keyboard navigation in column chooser (#666) (7f2b461)
- ๐ป react-grid-material-ui: disable ripple on active page button (#682) (c75078d)
- ๐ป react-grid-material-ui: import 'VisibilityOff' icon from separate file (#640) (7b71ebc)
๐จ Code Refactoring
- react-grid: change columnWidth type from object to array (#613) (6f4d19f)
- react-grid: change the 'expandedGroups' Getter data type (#661) (f078d3a)
- react-grid: change the 'selection' Getter data type (#656) (262d169)
- react-grid: rename the *hiddenColumns getters and props (#651) (068604d)
- react-grid: rename the changedRows Getter and dependent properties (#657) (26735c7)
- react-grid: rename the deletedRows Getter and dependent properties (#652) (ae78d23)
- react-grid: rename the expandedRows Getter and dependent properties (#653) (db56cad)
- react-grid: rename the groupByColumn action to changeColumnGrouping (#660) (a3974bd)
- react-grid: rename the setColumnFilter action to changeColumnFilter (#659) (eec6c41)
- react-grid: rename the setColumnSorting action to changeColumnSorting (#658) (e4f9c12)
- react-grid: rename the setDetailRowExpanded action (#648) (1285a14)
- react-grid: standardize draft change actions in GroupingState (#668) (43593eb)
- react-grid: standardize draft change actions in TableColumnResizing (#665) (3fec37a)
- react-grid: use the 'state' name as a parameter in toggle actions (#645) (6c3f15d)
- react-grid: rename the EditingState plugin properties (#650) (4d7fe82)
๐ฅ BREAKING CHANGES
- react-grid: The
draftGroupinggetter does not contain information about draft mode anymore. ThedraftGroupingChange, andcancelGroupingChangeactions have been renamed todraftColumnGrouping, andcancelColumnGroupingDraft. - react-grid: The type of the TableColumnResizing plugin's
columnWidthsanddefaultColumnWidthsproperties 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
changeDraftTableColumnWidthaction has been renamed todraftTableColumnWidth. The functionality that resets draft column width has been moved from from thedraftTableColumnWidthaction into the separatecancelTableColumnWidthDraftaction.
The
onDraftWidthChangeevent of the TableHeaderRow's cellComponent has been renamed toonWidthDraft. The functionality that cancels draft width changes has been extracted to theonWidthDraftCancelevent.- react-grid: The the GroupingState plugin's
groupByColumnaction has been renamed tochangeColumnGrouping. - react-grid: We changed the
selectiongetter's data type fromSettoArrayto improve the API consistency. react-grid: We renamed the following TableColumnVisibility plugin's properties to improve the API consistency:
hiddenColumns=>hiddenColumnNamesdefaultHiddenColumns=>defaultHiddenColumnNamesonHiddenColumnsChange=>onHiddenColumnNamesChange
The
hiddenColumnsgetter has been renamed tohiddenColumnNames.react-grid: The following RowDetailState plugin's properties have been renamed to improve the API consistency:
expandedRows=>expandedRowIdsdefaultExpandedRows=>defaultExpandedRowIdsonExpandedRowsChange=>onExpandedRowIdsChange
The
expandedRowsgetter has been renamed toexpandedRowIds.react-grid: The following EditingState plugin's properties have been renamed to improve the API consistency:
changedRows=>rowChangesdefaultChangedRows=>defaultRowChangesonChangedRowsChange=>onRowChangesChange
The
changedRowsgetter has been renamed torowChanges.- react-grid: The FilteringState plugin's
setColumnFilteraction has been renamed tochangeColumnFilter. - react-grid: The RowDetailState plugin's
setDetailRowExpandedaction has been renamed totoggleDetailRowExpanded. - react-grid: The
toggleSelectionaction'sselectedparameter has been renamed tostate. - react-grid: We changed the
expandedGroupsgetter's data type fromSettoArrayto 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=>onEditingRowIdsChange
The
deletedRowsgetter has been renamed todeletedRowIds. TheeditingRowsgetter has been renamed toeditingRowIds.- react-grid: The SortingState plugin's
setColumnSortingaction has been renamed tochangeColumnSorting.
-
v1.0.0-beta.3 Changes
December 28, 2017๐ Bug Fixes
- grid-core: fix blinks when reordering group items (#573) (739c664)
- react-grid: correct state helper & editing state (#623) (3cd07bd)
- react-grid: fix blinks when reordering header-cell items (#590) (e94b824)
- react-grid: fix incorrect applying of several actions in a batch (#560) (7c3ff9b), closes #549
- react-grid: remove outline from header cell when mouse click (#576) (807597b)
- ๐ป react-grid-material-ui: add border beetwin rows and pager panel (#622) (d7cb9c7)
- ๐ป react-grid-material-ui: use theme constant in the table header background (#602) (797e134)
๐จ Code Refactoring
- react-grid: add the toolbar (#585) (70fdc25)
- react-grid: cancel column sorting by passing null to the direction argument (#620) (3abe8f9)
- react-grid: extract table column extension (#586) (7f57be2)
- react-grid: get rid of explicit column resizing enabling (#597) (f215103)
- react-grid: get rid of explicit dragging enabling (#583) (60797c2)
- react-grid: give column properties greater precedence (#617) (4a2924c)
- react-grid: remove totalCount property from PagingState to CustomPaging (#555) (95fe97d)
- react-grid: rename data processing plugins (#612) (468dde4)
- react-grid: rename DragDropContext to DragDropProvider (#611) (26d303e)
- react-grid: rename properties from allow* to *Enabled (#618) (6c291e8)
- react-grid: rename some group and paging properties (#581) (6300249)
- react-grid: specify typed columns directly in DataTypeProvider (#591) (6ed28e4)
- react-grid: swap args in the createRowChange function (#619) (1178ee1)
- react-grid: switch to column extensions in EditingState (#604) (d56b3f0)
- react-grid: switch to column extensions in LocalFiltering (#594) (955da48)
- react-grid: switch to column extensions in LocalGrouping (#601) (9efc007)
- react-grid: switch to column extensions in LocalSorting (#603) (08c96da)
- react-grid: switch to column extensions in TableGroupRow (#609) (373d4d8)
๐ Features
๐ฅ BREAKING CHANGES
- react-grid: We have moved the PagingState plugin's
totalCountproperty to the CustomPaging plugin to improve API consistency. Now, you can add the CustomPaging plugin to a project and specify itstotalCountproperty 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.
- The TableHeaderRow plugin's
allowGroupingByClickproperty has been renamed toshowGroupingControls. - The GroupingPanel plugin's
allowUngroupingByClickproperty has been renamed toshowGroupingControls. - The PagingPanel plugin's
allowedPageSizesproperty has been renamed topageSizes.
- The TableHeaderRow plugin's
- react-grid: A column's
getCellValuefunction has gotten higher priority than that defined in the Grid component. - react-grid: The
createRowChangefunction arguments order has been changed to(row: any, value: any, columnName: string)to improve the API consistency. Now, the EditingState plugin'screateRowChangefunction 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:
- LocalFiltering => IntegratedFiltering
- LocalGrouping => IntegratedGrouping
- LocalPaging => IntegratedPaging
- LocalSelection => IntegratedSelection
- LocalSorting => IntegratedSorting
react-grid: We removed the LocalSorting plugin's
getColumnIdentityproperty to improve API consistency. Now, use the column extension'scriteriaproperty 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
cancelargument from the SortingState plugin'ssetColumnSortingaction and from theonSortevent of the TableHeaderCellProps and GroupPanelItemProps component properties. Now, you can passnullto thedirectionargument to cancel sorting by column. - react-grid: The TableHeaderCellProps interface's
allowResizingproperty has been renamed toresizingEnabledto improve the API consistency. - react-grid: We removed the
getColumnCompareproperty from the LocalSorting plugin to improve API consistency. Now, use thecolumnExtensionproperty 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
showWhenGroupedproperty that the TableGroupRow plugin handles to a column extension to improve the API readability. The TableGroupRow plugin'sshowColumnsWhenGroupedproperty type has been changed tobooleanand 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
DragDropContextplugin toDragDropProviderto improve API consistency. - react-grid: We removed the
allowResizingproperty 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
widthandaligncolumn properties that the Table and VirtualTable plugins handle into a separate property. Now, thewidthandalignproperties in the Gridcolumnsare 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
forfield:
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
getColumnPredicatefunction 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: ย ```js import { // ... Toolbar, GroupingPanel } from '@devexpress/dx-react-grid-material-ui';
{/* ... */}
ย 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: ```js <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
createRowChangeproperty 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.