);
});
- it('should call the `changeSelected` function on cell click if selection is available', () => {
- const changeSelected = jest.fn();
+ it('should fire the `onToggle` event on cell click if selection is available', () => {
+ const onToggle = jest.fn();
const tree = mount((
));
tree.find(Checkbox).simulate('click');
- expect(changeSelected)
+ expect(onToggle)
.toHaveBeenCalledTimes(1);
});
});
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx
index 5684bbf9a3..f9ae417ca7 100644
--- a/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx
@@ -6,7 +6,7 @@ export const TableSelectRow = ({
selected,
children,
style,
- changeSelected,
+ onToggle,
selectByRowClick,
}) => (
{
if (!selectByRowClick) return;
e.stopPropagation();
- changeSelected();
+ onToggle();
}}
>
{children}
@@ -24,7 +24,7 @@ export const TableSelectRow = ({
TableSelectRow.propTypes = {
children: PropTypes.node,
- changeSelected: PropTypes.func,
+ onToggle: PropTypes.func,
selected: PropTypes.bool,
selectByRowClick: PropTypes.bool,
style: PropTypes.object,
@@ -32,7 +32,7 @@ TableSelectRow.propTypes = {
TableSelectRow.defaultProps = {
children: null,
- changeSelected: () => {},
+ onToggle: () => {},
selected: false,
selectByRowClick: false,
style: null,
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx
index b79342b7d5..163c316b79 100644
--- a/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx
@@ -10,7 +10,7 @@ describe('TableSelectRow', () => {
const defaultProps = {
selected: false,
selectByRowClick: false,
- changeSelected: () => {},
+ onToggle: () => {},
};
beforeAll(() => {
@@ -36,14 +36,14 @@ describe('TableSelectRow', () => {
});
it('should handle row click', () => {
- const changeSelectedMock = jest.fn();
+ const onToggleMock = jest.fn();
const tree = mount();
tree.find(TableRowMUI).simulate('click');
- expect(changeSelectedMock).toBeCalled();
+ expect(onToggleMock).toBeCalled();
});
});
diff --git a/packages/dx-react-grid/docs/guides/selection.md b/packages/dx-react-grid/docs/guides/selection.md
index 1d56073010..b1c2a0c532 100644
--- a/packages/dx-react-grid/docs/guides/selection.md
+++ b/packages/dx-react-grid/docs/guides/selection.md
@@ -6,7 +6,7 @@ The Grid component supports selecting/deselecting rows programmatically or via t
The following plugins implement selection features:
-- [SelectionState](../reference/selection-state.md) - controls the selection state
+- [SelectionState](../reference/selection-state.md) - controls the selection state
- [TableSelection](../reference/table-selection.md) - renders selection check boxes or highlights the selected rows
Note that [plugin order](./plugin-overview.md#plugin-order) is important.
@@ -19,21 +19,21 @@ Import the plugins listed above to set up a simple Grid with selection enabled.
## Select by Row Click
-A user can select a row using a check box click by default. Set the `TableSelection` plugin's `selectByRowClick` property to true to check/uncheck a check box by a row click as demonstrated in the following example:
+A user can select a row using a checkbox click by default. Set the `TableSelection` plugin's `selectByRowClick` property to true to check/uncheck a checkbox by a row click as demonstrated in the following example:
.embedded-demo(selection/select-by-row-click)
-In some scenarios, it is useful to highlight selected rows instead of using check boxes. For this, hide check boxes setting the `TableSelection` plugin's `showSelectionColumn` property to false and assign true to the `selectByRowClick` and `highlightSelected` properties as demonstrated in the following demo:
+In some scenarios, it is useful to highlight selected rows instead of using checkboxes. For this, hide checkboxes by setting the `TableSelection` plugin's `showSelectionColumn` property to false and assign true to the `selectByRowClick` and `highlightRow` properties as demonstrated in the following demo:
.embedded-demo(selection/hidden-checkboxes)
## Select All
-If your Grid configuration includes the `TableHeaderRow` plugin and the `TableSelection` plugin's `showSelectionColumn` property is set to true, the header row displays the Select All check box that provides the capability to select/deselect all rows.
+If your Grid configuration includes the `TableHeaderRow` plugin and the `TableSelection` plugin's `showSelectionColumn` property is set to true, the header row displays the Select All checkbox that provides the capability to select/deselect all rows.
### Without Paging
-The following example demonstrates selection without paging. We increase the row count using the Table's [virtual mode](virtual-scrolling.md).
+The following example demonstrates selection without paging. You can increase the row count using the Table's [virtual mode](virtual-scrolling.md).
.embedded-demo(selection/select-all-virtual)
@@ -41,7 +41,7 @@ The following example demonstrates selection without paging. We increase the row
If you are using the `LocalPaging` plugin, you can integrate the Select All behavior with the `PagingState` plugin.
-The Select All check box selects/deselects all rows on a page or all pages depending on the `SelectionState` and `LocalPaging` plugin's order.
+The Select All checkbox selects/deselects all rows on a page or all pages depending on the `SelectionState` and `LocalPaging` plugin's order.
Place the `SelectionState` plugin after `LocalPaging` to implement the Select All behavior within a visible page:
diff --git a/packages/dx-react-grid/docs/reference/table-selection.md b/packages/dx-react-grid/docs/reference/table-selection.md
index 3ea1d76a3e..4b4c151acf 100644
--- a/packages/dx-react-grid/docs/reference/table-selection.md
+++ b/packages/dx-react-grid/docs/reference/table-selection.md
@@ -1,6 +1,6 @@
# TableSelection Plugin Reference
-This plugin visualizes the selection state within a table by rendering selection checkboxes and highlighting the selected rows.
+A plugin that visualizes table rows' selection state by rendering selection checkboxes and highlighting the selected rows.
## User Reference
@@ -13,48 +13,40 @@ This plugin visualizes the selection state within a table by rendering selection
Name | Type | Default | Description
-----|------|---------|------------
-highlightSelected | boolean | false | If true, selected rows are highlighted. Note that the `Table` plugin's `rowComponent` is ignored in this case.
-selectByRowClick | boolean | false | If true, a selected row is toggled by click. Note that the `Table` plugin's `rowComponent` is ignored in this case.
-showSelectAll | boolean | true | If true, the 'select all' checkbox is rendered inside the heading row.
-showSelectionColumn | boolean | false | If true, selection checkboxes are rendered inside each data row.
-selectCellTemplate | (args: [SelectCellArgs](#select-cell-args)) => ReactElement | | A component that renders a data row selection checkbox.
-selectAllCellTemplate | (args: [SelectAllCellArgs](#select-all-cell-args)) => ReactElement | | A component that renders the Select All checkbox.
+highlightRow | boolean | false | If true, selected rows are highlighted. Note that `Table` plugin's `rowComponent` is ignored in this case.
+selectByRowClick | boolean | false | If true, the row's selection state is toggled when a user clicks the row. Note that `Table` plugin's `rowComponent` is ignored in this case.
+showSelectAll | boolean | true | If true, the 'select all' checkbox is rendered in the header row.
+showSelectionColumn | boolean | true | If true, the selection column (that displays a selection checkbox) is rendered.
+cellComponent | ElementType<[TableSelectCellProps](#tableselectcellprops)> | | A component that renders a selection cell (a cell containing a selection checkbox).
+headerCellComponent | ElementType<[TableSelectHeaderCellProps](#tableselectcellprops)> | | A component that renders a cell containing the 'Select All' checkbox.
selectionColumnWidth | number | | The selection column's width.
## Interfaces
-### TableRow (Extension)
+### TableSelectHeaderCellProps
-A value with the [TableRow](table.md#tablerow) shape extended by the following fields:
-
-Field | Type | Description
-------|------|------------
-selected? | boolean | Specifies if a row is selected.
-
-### SelectAllCellArgs
-
-Describes properties passed to the template that renders a cell with selection control.
+Describes properties passed to a component that renders a cell containing the Select All checkbox.
A value with the [TableCellProps](table.md#tablecellprops) shape extended by the following fields:
Field | Type | Description
------|------|------------
-selectionAvailable | boolean | True if at least one row can be selected.
-allSelected | boolean | True if all the rows available for selection are selected.
-someSelected | boolean | True if at least one but not all rows available for selection are selected.
-toggleAll | () => void | Selects or deselects all rows.
+disabled | boolean | Indicates if there are no rows that can be selected.
+allSelected | boolean | Indicates if all the rows available for selection are selected.
+someSelected | boolean | Indicates if one or more but not all rows available for selection are selected.
+onToggle | () => void | An event that initiates selecting or deselecting of all rows.
-### SelectCellArgs
+### TableSelectCellProps
-Describes properties passed to a template that renders a cell with the selection control inside the heading row.
+Describes properties passed to a component that renders a cell containing a selection checkbox.
A value with the [TableCellProps](table.md#tablecellprops) shape extended by the following fields:
Field | Type | Description
------|------|------------
row | any | A row.
-selected | boolean | Specifies whether a row is selected.
-changeSelected | () => void | Selects or deselects a row.
+selected | boolean | Indicates if a row is selected.
+onToggle | () => void | An event that initiates row selecting or deselecting.
## Plugin Developer Reference
@@ -63,7 +55,7 @@ changeSelected | () => void | Selects or deselects a row.
Name | Plugin | Type | Description
-----|--------|------|------------
tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns.
-tableBodyRows | Getter | Array<[TableRow](#tablerow)> | Body rows to be rendered.
+tableBodyRows | Getter | Array<[TableRow](table.md#tablerow)> | Body rows to be rendered.
selection | Getter | Array<number | string> | Selected rows.
availableToSelect | Getter | Array<number | string> | Rows to be rendered, which are available for selection.
setRowsSelection | Action | ({ rowIds: Array<number | string>, selected?: boolean }) => void | Selects/deselects rows. The `selected` argument specifies whether the rows should be selected (true), deselected (false), or their selection status should be set to the opposite value (undefined). In the last case, the function selects unselected rows and deselects selected ones. To select/deselect a single row, pass an array with a single item to the `rowIds` argument.
@@ -75,4 +67,4 @@ tableRow | Template | [TableRowProps](table.md#tablerowprops) | A template that
Name | Plugin | Type | Description
-----|--------|------|------------
tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns including the selection column.
-tableBodyRows | Getter | Array<[TableRow](#tablerow)> | Body rows to be rendered including the selected ones.
+tableBodyRows | Getter | Array<[TableRow](table.md#tablerow)> | Body rows (including selected) to be rendered.
diff --git a/packages/dx-react-grid/src/plugins/table-selection.jsx b/packages/dx-react-grid/src/plugins/table-selection.jsx
index 4697390633..6a1f4a4911 100644
--- a/packages/dx-react-grid/src/plugins/table-selection.jsx
+++ b/packages/dx-react-grid/src/plugins/table-selection.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import {
Getter, Template, PluginContainer,
- TemplateConnector, TemplateRenderer,
+ TemplateConnector,
} from '@devexpress/dx-react-core';
import {
tableColumnsWithSelection,
@@ -11,43 +11,6 @@ import {
isDataTableRow,
} from '@devexpress/dx-grid-core';
-const getSelectTableCellTemplateArgs = (
- params,
- { selection },
- { setRowsSelection },
-) => ({
- ...params,
- row: params.tableRow.row,
- selected: selection.indexOf(params.tableRow.rowId) > -1,
- changeSelected: () => setRowsSelection({ rowIds: [params.tableRow.rowId] }),
-});
-
-const getSelectAllTableCellTemplateArgs = (
- params,
- { availableToSelect, selection },
- { setRowsSelection },
-) => ({
- ...params,
- selectionAvailable: !!availableToSelect.length,
- allSelected: selection.length === availableToSelect.length && selection.length !== 0,
- someSelected: selection.length !== availableToSelect.length && selection.length !== 0,
- toggleAll: () => setRowsSelection({ rowIds: availableToSelect }),
-});
-
-const getSelectTableRowTemplateArgs = (
- { selectByRowClick, highlightSelected, ...restParams },
- { selection },
- { setRowsSelection },
-) => {
- const { rowId } = restParams.tableRow;
- return ({
- ...restParams,
- selectByRowClick,
- selected: highlightSelected && selection.indexOf(rowId) > -1,
- changeSelected: () => setRowsSelection({ rowIds: [rowId] }),
- });
-};
-
const pluginDependencies = [
{ pluginName: 'SelectionState' },
{ pluginName: 'Table' },
@@ -56,14 +19,14 @@ const pluginDependencies = [
export class TableSelection extends React.PureComponent {
render() {
const {
- highlightSelected,
+ highlightRow,
+ selectByRowClick,
showSelectionColumn,
showSelectAll,
+ headerCellComponent: HeaderCell,
+ cellComponent: Cell,
+ rowComponent: Row,
selectionColumnWidth,
- selectAllCellTemplate,
- selectCellTemplate,
- selectRowTemplate,
- selectByRowClick,
} = this.props;
const tableColumnsComputed = ({ tableColumns }) =>
@@ -85,10 +48,15 @@ export class TableSelection extends React.PureComponent {
>
{params => (
- {(getters, actions) => (
- (
+ setRowsSelection({ rowIds: availableToSelect })}
/>
)}
@@ -102,33 +70,31 @@ export class TableSelection extends React.PureComponent {
>
{params => (
- {(getters, actions) => (
- (
+ -1}
+ onToggle={() => setRowsSelection({ rowIds: [params.tableRow.rowId] })}
/>
)}
)}
)}
- {(highlightSelected || selectByRowClick) && (
+ {(highlightRow || selectByRowClick) && (
isDataTableRow(tableRow)}
>
{params => (
- {(getters, actions) => (
- (
+ -1}
+ onToggle={() => setRowsSelection({ rowIds: [params.tableRow.rowId] })}
/>
)}
@@ -141,10 +107,10 @@ export class TableSelection extends React.PureComponent {
}
TableSelection.propTypes = {
- selectAllCellTemplate: PropTypes.func.isRequired,
- selectCellTemplate: PropTypes.func.isRequired,
- selectRowTemplate: PropTypes.func.isRequired,
- highlightSelected: PropTypes.bool,
+ headerCellComponent: PropTypes.func.isRequired,
+ cellComponent: PropTypes.func.isRequired,
+ rowComponent: PropTypes.func.isRequired,
+ highlightRow: PropTypes.bool,
selectByRowClick: PropTypes.bool,
showSelectAll: PropTypes.bool,
showSelectionColumn: PropTypes.bool,
@@ -152,7 +118,7 @@ TableSelection.propTypes = {
};
TableSelection.defaultProps = {
- highlightSelected: false,
+ highlightRow: false,
selectByRowClick: false,
showSelectAll: true,
showSelectionColumn: true,
diff --git a/packages/dx-react-grid/src/plugins/table-selection.test.jsx b/packages/dx-react-grid/src/plugins/table-selection.test.jsx
index 49c2733e4f..b4dab7b5fa 100644
--- a/packages/dx-react-grid/src/plugins/table-selection.test.jsx
+++ b/packages/dx-react-grid/src/plugins/table-selection.test.jsx
@@ -43,9 +43,9 @@ const defaultDeps = {
};
const defaultProps = {
- selectAllCellTemplate: () => null,
- selectCellTemplate: () => null,
- selectRowTemplate: () => null,
+ headerCellComponent: () => null,
+ cellComponent: () => null,
+ rowComponent: () => null,
selectionColumnWidth: 100,
};
@@ -89,14 +89,12 @@ describe('Table Selection', () => {
it('should render select cell on select column and user-defined row intersection', () => {
isSelectTableCell.mockImplementation(() => true);
- const selectCellTemplate = jest.fn(() => null);
- mount((
+ const tree = mount((
{pluginDepsToComponents(defaultDeps)}
));
@@ -106,23 +104,21 @@ describe('Table Selection', () => {
defaultDeps.template.tableCell.tableRow,
defaultDeps.template.tableCell.tableColumn,
);
- expect(selectCellTemplate)
- .toBeCalledWith(expect.objectContaining({
+ expect(tree.find(defaultProps.cellComponent).props())
+ .toMatchObject({
...defaultDeps.template.tableCell,
row: defaultDeps.template.tableCell.tableRow.row,
- }));
+ });
});
it('should render selectAll cell on select column and heading row intersection', () => {
isSelectAllTableCell.mockImplementation(() => true);
- const selectAllCellTemplate = jest.fn(() => null);
- mount((
+ const tree = mount((
{pluginDepsToComponents(defaultDeps)}
));
@@ -132,34 +128,32 @@ describe('Table Selection', () => {
defaultDeps.template.tableCell.tableRow,
defaultDeps.template.tableCell.tableColumn,
);
- expect(selectAllCellTemplate)
- .toBeCalledWith(expect.objectContaining(defaultDeps.template.tableCell));
+ expect(tree.find(defaultProps.headerCellComponent).props())
+ .toMatchObject(defaultDeps.template.tableCell);
});
- it('should render row by using selectRowTemplate if selectByRowClick is true', () => {
- const selectRowTemplate = jest.fn(() => null);
+ it('should render row by using rowComponent if selectByRowClick is true', () => {
isDataTableRow.mockImplementation(() => true);
- mount((
+ const tree = mount((
{pluginDepsToComponents(defaultDeps)}
));
- selectRowTemplate.mock.calls[0][0].changeSelected();
+ tree.find(defaultProps.rowComponent).props().onToggle();
expect(isDataTableRow).toBeCalledWith(defaultDeps.template.tableRow.tableRow);
- expect(selectRowTemplate)
- .toBeCalledWith(expect.objectContaining({
+ expect(tree.find(defaultProps.rowComponent).props())
+ .toMatchObject({
...defaultDeps.template.tableRow,
selectByRowClick: true,
selected: false,
- }));
+ });
expect(defaultDeps.action.setRowsSelection.mock.calls[0][0])
.toEqual({
@@ -167,42 +161,40 @@ describe('Table Selection', () => {
});
});
- it('should render row by using selectRowTemplate if highlightSelected is true', () => {
- const selectRowTemplate = jest.fn(() => null);
+ it('should render row by using rowComponent if highlightRow is true', () => {
isDataTableRow.mockImplementation(() => true);
- mount((
+ const tree = mount((
{pluginDepsToComponents(defaultDeps)}
));
- expect(isDataTableRow).toBeCalledWith(defaultDeps.template.tableRow.tableRow);
- expect(selectRowTemplate)
- .toBeCalledWith(expect.objectContaining({
+ expect(isDataTableRow)
+ .toBeCalledWith(defaultDeps.template.tableRow.tableRow);
+ expect(tree.find(defaultProps.rowComponent).props())
+ .toMatchObject({
...defaultDeps.template.tableRow,
selected: true,
- }));
+ });
});
- it('should not use selectRowTemplate if highlightSelected & selectByRowClick are false', () => {
- const selectRowTemplate = jest.fn(() => null);
-
- mount((
+ it('should not use rowComponent if highlightRow & selectByRowClick are false', () => {
+ const tree = mount((
{pluginDepsToComponents(defaultDeps)}
));
- expect(selectRowTemplate.mock.calls).toHaveLength(0);
+
+ expect(tree.find(defaultProps.rowComponent).exists())
+ .toBeFalsy();
});
});