Skip to content

Commit

Permalink
fix(grid-core): fix problem when grouped columns are hidden (#562)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaximKudriavtsev
MaximKudriavtsev authored Dec 11, 2017
1 parent 5615ecf commit 8fbc2c9
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 60 deletions.
7 changes: 2 additions & 5 deletions packages/dx-grid-core/src/plugins/table-group-row/computeds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,15 @@ const tableColumnsWithDraftGrouping = (tableColumns, draftGrouping, showColumnWh
}, []);

export const tableColumnsWithGrouping = (
columns,
tableColumns,
grouping,
draftGrouping,
indentColumnWidth,
showColumnWhenGrouped,
) => [
...grouping.map((columnGrouping) => {
const groupedColumn = tableColumns
.find(tableColumn =>
tableColumn.type === TABLE_DATA_TYPE &&
tableColumn.column.name === columnGrouping.columnName)
.column;
const groupedColumn = columns.find(column => column.name === columnGrouping.columnName);
return {
key: `${TABLE_GROUP_TYPE}_${groupedColumn.name}`,
type: TABLE_GROUP_TYPE,
Expand Down
118 changes: 66 additions & 52 deletions packages/dx-grid-core/src/plugins/table-group-row/computeds.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,15 @@ describe('TableGroupRow Plugin computeds', () => {
{ columnName: 'a' },
{ columnName: 'c' },
];
const columns = [
{ name: 'a' },
{ name: 'b' },
{ name: 'c' },
{ name: 'd' },
];

it('should work', () => {
expect(tableColumnsWithGrouping(tableColumns, grouping, grouping, 123, () => false))
expect(tableColumnsWithGrouping(columns, tableColumns, grouping, grouping, 123, () => false))
.toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
Expand All @@ -44,74 +50,82 @@ describe('TableGroupRow Plugin computeds', () => {
{ columnName: 'a' },
{ columnName: 'c', draft: GROUP_ADD_MODE },
];
expect(tableColumnsWithGrouping(tableColumns, grouping, draftGrouping, 123, () => false))
.toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'c' }, draft: true },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
expect(tableColumnsWithGrouping(
columns, tableColumns, grouping,
draftGrouping, 123, () => false,
)).toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'c' }, draft: true },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
});

it('should add a draft column when ungrouping', () => {
const draftGrouping = [
{ columnName: 'a' },
{ columnName: 'c', draft: GROUP_REMOVE_MODE },
];
expect(tableColumnsWithGrouping(tableColumns, grouping, draftGrouping, 123, () => false))
.toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'c' }, draft: true },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
expect(tableColumnsWithGrouping(
columns, tableColumns, grouping,
draftGrouping, 123, () => false,
)).toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'c' }, draft: true },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
});

it('should add a draft column when reordering groups', () => {
const draftGrouping = [
{ columnName: 'a' },
{ columnName: 'c', draft: GROUP_REORDER_MODE },
];
expect(tableColumnsWithGrouping(tableColumns, grouping, draftGrouping, 123, () => false))
.toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
expect(tableColumnsWithGrouping(
columns, tableColumns, grouping,
draftGrouping, 123, () => false,
)).toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
});

it('can keep grouped columns in table', () => {
expect(tableColumnsWithGrouping(tableColumns, grouping, grouping, 123, columnName => columnName === 'c'))
.toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'c' } },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
expect(tableColumnsWithGrouping(
columns, tableColumns, grouping,
grouping, 123, columnName => columnName === 'c',
)).toEqual([
{
key: `${TABLE_GROUP_TYPE}_a`, type: TABLE_GROUP_TYPE, column: { name: 'a' }, width: 123,
},
{
key: `${TABLE_GROUP_TYPE}_c`, type: TABLE_GROUP_TYPE, column: { name: 'c' }, width: 123,
},
{ type: 'undefined', column: { name: 'a' } },
{ type: TABLE_DATA_TYPE, column: { name: 'b' } },
{ type: TABLE_DATA_TYPE, column: { name: 'c' } },
{ type: TABLE_DATA_TYPE, column: { name: 'd' } },
]);
});
});

Expand Down
1 change: 1 addition & 0 deletions packages/dx-react-grid/docs/reference/table-group-row.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ Additional properties are added to the component's root element.

Name | Plugin | Type | Description
-----|--------|------|------------
columns | Getter | Array<[Column](#column)> | The grid columns.
tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns.
tableBodyRows | Getter | Array<[TableRow](table.md#tablerow)> | Table body rows.
grouping | Getter | Array<[Grouping](grouping-state.md#grouping)> | Current grouping options.
Expand Down
1 change: 1 addition & 0 deletions packages/dx-react-grid/src/plugins/table-group-row.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export class TableGroupRow extends React.PureComponent {
columns, tableColumns, grouping, draftGrouping,
}) =>
tableColumnsWithGrouping(
columns,
tableColumns,
grouping,
draftGrouping,
Expand Down
8 changes: 5 additions & 3 deletions packages/dx-react-grid/src/plugins/table-group-row.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ jest.mock('@devexpress/dx-grid-core', () => ({

const defaultDeps = {
getter: {
columns: [{ name: 'a' }, { name: 'b' }],
tableColumns: [{ type: 'undefined', id: 1, column: 'column' }],
tableBodyRows: [{ type: 'undefined', id: 1, row: 'row' }],
grouping: [{ columnName: 'a' }],
Expand Down Expand Up @@ -109,6 +110,7 @@ describe('TableGroupRow', () => {
.toBe('tableColumnsWithGrouping');
expect(tableColumnsWithGrouping)
.toBeCalledWith(
defaultDeps.getter.columns,
defaultDeps.getter.tableColumns,
defaultDeps.getter.grouping,
defaultDeps.getter.draftGrouping,
Expand Down Expand Up @@ -141,7 +143,7 @@ describe('TableGroupRow', () => {

expect(getComputedState(tree).getters.tableColumns)
.toBe('tableColumnsWithGrouping');
const showColumnWhenGrouped = tableColumnsWithGrouping.mock.calls[0][4];
const showColumnWhenGrouped = tableColumnsWithGrouping.mock.calls[0][5];
expect(showColumnWhenGrouped('A')).toBe(false);
expect(showColumnWhenGrouped('B')).toBe(false);
});
Expand All @@ -168,7 +170,7 @@ describe('TableGroupRow', () => {

expect(getComputedState(tree).getters.tableColumns)
.toBe('tableColumnsWithGrouping');
const showColumnWhenGrouped = tableColumnsWithGrouping.mock.calls[0][4];
const showColumnWhenGrouped = tableColumnsWithGrouping.mock.calls[0][5];
expect(showColumnWhenGrouped('A')).toBe(true);
expect(showColumnWhenGrouped('B')).toBe(false);
});
Expand Down Expand Up @@ -199,7 +201,7 @@ describe('TableGroupRow', () => {

expect(getComputedState(tree).getters.tableColumns)
.toBe('tableColumnsWithGrouping');
const showColumnWhenGrouped = tableColumnsWithGrouping.mock.calls[0][4];
const showColumnWhenGrouped = tableColumnsWithGrouping.mock.calls[0][5];
expect(showColumnWhenGrouped('A')).toBe(false);
expect(showColumnWhenGrouped('B')).toBe(true);
});
Expand Down

0 comments on commit 8fbc2c9

Please sign in to comment.