{rootDivContent ||
}
diff --git a/src/lib/Models/Column.ts b/src/lib/Models/Column.ts
index 57dd5554..83768ec9 100644
--- a/src/lib/Models/Column.ts
+++ b/src/lib/Models/Column.ts
@@ -3,9 +3,9 @@ import { Field } from '../types';
export class Column {
public dataType?: DataType;
- public filterRowValue?: any;
- public filterRowOperator?: any;
public field?: Field;
+ public filterRowOperator?: any;
+ public filterRowValue?: any;
public isEditable?: boolean;
public isResizable?: boolean;
public key!: string;
@@ -13,4 +13,5 @@ export class Column {
public sortIndex?: number;
public style?: React.CSSProperties;
public title?: string;
+ public visible?: boolean;
}
diff --git a/src/lib/Reducers/kaReducer.ts b/src/lib/Reducers/kaReducer.ts
index 3d98b41d..86dbd10e 100644
--- a/src/lib/Reducers/kaReducer.ts
+++ b/src/lib/Reducers/kaReducer.ts
@@ -50,6 +50,18 @@ const kaReducer: any = (props: ITableProps, action: any) => {
} = props;
switch (action.type) {
+ case ActionType.ShowColumn: {
+ const newColumns = [...columns];
+ const columnIndex = newColumns.findIndex(c => c.key === action.columnKey);
+ newColumns[columnIndex] = {...newColumns[columnIndex], visible: true};
+ return {...props, columns: newColumns};
+ }
+ case ActionType.HideColumn: {
+ const newColumns = [...columns];
+ const columnIndex = newColumns.findIndex(c => c.key === action.columnKey);
+ newColumns[columnIndex] = {...newColumns[columnIndex], visible: false};
+ return {...props, columns: newColumns};
+ }
case ActionType.ReorderRows: {
const newData = reorderData(data, (d) => getValueByField(d, rowKeyField), action.rowKeyValue, action.targetRowKeyValue);
return {...props, data: newData};
diff --git a/src/lib/Utils/PropsUtils.test.ts b/src/lib/Utils/PropsUtils.test.ts
index e67574de..58271ecc 100644
--- a/src/lib/Utils/PropsUtils.test.ts
+++ b/src/lib/Utils/PropsUtils.test.ts
@@ -1,12 +1,14 @@
+
import { AllHTMLAttributes } from 'react';
import { ITableProps } from '../';
import { DataType, EditingMode, FilterOperatorName, SortDirection, SortingMode } from '../enums';
+import { Column } from '../models';
import { ICellProps } from '../props';
import { ChildAttributesItem } from '../types';
import {
areAllFilteredRowsSelected, areAllVisibleRowsSelected, getData, getDraggableProps,
- getPagesCountByProps, mergeProps,
+ getPagesCountByProps, mergeProps, prepareTableOptions,
} from './PropsUtils';
describe('PropsUtils', () => {
@@ -199,46 +201,32 @@ describe('getDraggableProps', () => {
});
});
-
-describe('getDraggableProps', () => {
- const tableProps = {
- columns: [{ key: 'column' }],
- rowKeyField: 'id',
- data: Array(30).fill(undefined).map(
- (_, index) => ({
- id: index,
- column: index % 5
- }),
- ),
- paging: {
- enabled: true,
- pageSize: 3
- },
- searchText: '3'
- };
- it('pages count should depends on filters', () => {
- const pagesCount = getPagesCountByProps(tableProps);
- expect(pagesCount).toEqual(2);
- });
- it('pages count is 1 by default', () => {
- const pagesCount = getPagesCountByProps({ ...tableProps, paging: undefined });
- expect(pagesCount).toEqual(1);
+describe('prepareTableOptions', () => {
+ it('prepareTableOptions', () => {
+ const columns: Column[] = [
+ { key: 'column1', visible: false },
+ { key: 'column2', visible: true },
+ { key: 'column3' },
+ { key: 'column4', visible: false }
+ ]
+ const result = prepareTableOptions({ columns, rowKeyField: 'column1' });
+ expect(result.columns).toMatchSnapshot();
});
});
-describe('areAllVisibleRowsSelected', () => {
+describe('areAllFilteredRowsSelected', () => {
it('true', () => {
const tableProps: ITableProps = {
columns: [{ key: 'id', filterRowValue: 4, filterRowOperator: FilterOperatorName.LessThanOrEqual }],
data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
- selectedRows: [1, 2, 3, 5],
+ selectedRows: [1, 2, 3, 4],
rowKeyField: 'id',
paging: {
enabled: true,
pageSize: 2
}
};
- const allFilteredRowsSelected = areAllVisibleRowsSelected(tableProps);
+ const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps);
expect(allFilteredRowsSelected).toBeTruthy();
});
it('false', () => {
@@ -252,7 +240,7 @@ describe('areAllVisibleRowsSelected', () => {
pageSize: 2
}
};
- const allFilteredRowsSelected = areAllVisibleRowsSelected(tableProps);
+ const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps);
expect(allFilteredRowsSelected).toBeFalsy();
});
it('false if selectedRows is undefined', () => {
@@ -265,24 +253,50 @@ describe('areAllVisibleRowsSelected', () => {
pageSize: 2
}
};
- const allFilteredRowsSelected = areAllVisibleRowsSelected(tableProps);
+ const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps);
expect(allFilteredRowsSelected).toBeFalsy();
});
});
-describe('areAllFilteredRowsSelected', () => {
+describe('getDraggableProps', () => {
+ const tableProps = {
+ columns: [{ key: 'column' }],
+ rowKeyField: 'id',
+ data: Array(30).fill(undefined).map(
+ (_, index) => ({
+ id: index,
+ column: index % 5
+ }),
+ ),
+ paging: {
+ enabled: true,
+ pageSize: 3
+ },
+ searchText: '3'
+ };
+ it('pages count should depends on filters', () => {
+ const pagesCount = getPagesCountByProps(tableProps);
+ expect(pagesCount).toEqual(2);
+ });
+ it('pages count is 1 by default', () => {
+ const pagesCount = getPagesCountByProps({ ...tableProps, paging: undefined });
+ expect(pagesCount).toEqual(1);
+ });
+});
+
+describe('areAllVisibleRowsSelected', () => {
it('true', () => {
const tableProps: ITableProps = {
columns: [{ key: 'id', filterRowValue: 4, filterRowOperator: FilterOperatorName.LessThanOrEqual }],
data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
- selectedRows: [1, 2, 3, 4],
+ selectedRows: [1, 2, 3, 5],
rowKeyField: 'id',
paging: {
enabled: true,
pageSize: 2
}
};
- const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps);
+ const allFilteredRowsSelected = areAllVisibleRowsSelected(tableProps);
expect(allFilteredRowsSelected).toBeTruthy();
});
it('false', () => {
@@ -296,7 +310,7 @@ describe('areAllFilteredRowsSelected', () => {
pageSize: 2
}
};
- const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps);
+ const allFilteredRowsSelected = areAllVisibleRowsSelected(tableProps);
expect(allFilteredRowsSelected).toBeFalsy();
});
it('false if selectedRows is undefined', () => {
@@ -309,8 +323,7 @@ describe('areAllFilteredRowsSelected', () => {
pageSize: 2
}
};
- const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps);
+ const allFilteredRowsSelected = areAllVisibleRowsSelected(tableProps);
expect(allFilteredRowsSelected).toBeFalsy();
});
});
-
diff --git a/src/lib/Utils/PropsUtils.ts b/src/lib/Utils/PropsUtils.ts
index 0b8c6cf0..ac5c1e16 100644
--- a/src/lib/Utils/PropsUtils.ts
+++ b/src/lib/Utils/PropsUtils.ts
@@ -1,5 +1,4 @@
import { AllHTMLAttributes } from 'react';
-import { isFunction } from 'util';
import { ITableProps } from '../';
import { SortingMode } from '../enums';
@@ -36,7 +35,7 @@ export const mergeProps = (
const propName = prop as string;
const propValue: any = (childCustomAttributes as any)[propName];
const baseFunc = (childElementAttributes as any)[propName] || emptyFunc;
- if (isFunction(propValue)) {
+ if (typeof propValue === 'function') {
customPropsWithEvents[prop] = (e: any) => {
propValue(e, {
baseFunc,
@@ -48,6 +47,7 @@ export const mergeProps = (
}
}
}
+
const mergedResult: React.AllHTMLAttributes
= {
...childElementAttributes,
...childCustomAttributes,
@@ -123,6 +123,7 @@ export const prepareTableOptions = (props: ITableProps) => {
groupedColumns = columns.filter((c) => groups.some((g) => g.columnKey === c.key));
columns = columns.filter((c) => !groups.some((g) => g.columnKey === c.key));
}
+ columns = columns.filter((c) => c.visible !== false);
return {
columns,
groupColumnsCount,
diff --git a/src/lib/Utils/__snapshots__/PropsUtils.test.ts.snap b/src/lib/Utils/__snapshots__/PropsUtils.test.ts.snap
index 90056579..e11ed4de 100644
--- a/src/lib/Utils/__snapshots__/PropsUtils.test.ts.snap
+++ b/src/lib/Utils/__snapshots__/PropsUtils.test.ts.snap
@@ -209,3 +209,15 @@ Array [
},
]
`;
+
+exports[`prepareTableOptions prepareTableOptions 1`] = `
+Array [
+ Object {
+ "key": "column2",
+ "visible": true,
+ },
+ Object {
+ "key": "column3",
+ },
+]
+`;
diff --git a/src/lib/actionCreators.ts b/src/lib/actionCreators.ts
index f2afee51..f8ef929c 100644
--- a/src/lib/actionCreators.ts
+++ b/src/lib/actionCreators.ts
@@ -195,3 +195,13 @@ export const reorderColumns = (columnKey: string, targetColumnKey: string) => ({
columnKey,
targetColumnKey,
});
+
+export const showColumn = (columnKey: any) => ({
+ columnKey,
+ type: ActionType.ShowColumn,
+});
+
+export const hideColumn = (columnKey: any) => ({
+ columnKey,
+ type: ActionType.HideColumn,
+});
diff --git a/src/lib/enums.ts b/src/lib/enums.ts
index 3026a5c0..a5fe5fb5 100644
--- a/src/lib/enums.ts
+++ b/src/lib/enums.ts
@@ -16,10 +16,11 @@ export enum ActionType {
CloseEditor = 'CloseEditor',
CloseRowEditors = 'CloseRowEditors',
DeleteRow = 'DeleteRow',
- DeselectAllRows = 'DeselectAllRows',
DeselectAllFilteredRows = 'DeselectAllFilteredRows',
+ DeselectAllRows = 'DeselectAllRows',
DeselectAllVisibleRows = 'DeselectAllVisibleRows',
DeselectRow = 'DeselectRow',
+ HideColumn = 'HideColumn',
HideDetailsRow = 'HideDetailsRow',
HideLoading = 'HideLoading',
HideNewRow = 'HideNewRow',
@@ -32,12 +33,13 @@ export enum ActionType {
SaveRowEditors = 'SaveRowEditors',
ScrollTable = 'ScrollTable',
Search = 'Search',
- SelectAllRows = 'SelectAllRows',
SelectAllFilteredRows = 'SelectAllFilteredRows',
+ SelectAllRows = 'SelectAllRows',
SelectAllVisibleRows = 'SelectAllVisibleRows',
SelectRow = 'SelectRow',
SelectRowsRange = 'SelectRowsRange',
SelectSingleRow = 'SelectSingleRow',
+ ShowColumn = 'ShowColumn',
ShowDetailsRow = 'ShowDetailsRow',
ShowLoading = 'ShowLoading',
ShowNewRow = 'ShowNewRow',