From ed485b32a92957e2bae08e33af1af280903b1d59 Mon Sep 17 00:00:00 2001 From: Komarov Alexander Date: Mon, 26 Oct 2020 21:58:27 +0100 Subject: [PATCH 1/4] Add column.visible property --- public/static/icons/ColumnSettingsDemo.svg | 36 +++++++ .../groups/{DataEditing.svg => Editing.svg} | 0 .../ColumnSettingsDemo.test.tsx | 10 ++ .../ColumnSettingsDemo/ColumnSettingsDemo.tsx | 96 +++++++++++++++++++ src/Demos/DemoText.tsx | 2 +- src/Demos/Demos.tsx | 14 +-- src/Demos/RemoteDataDemo/RemoteDataDemo.tsx | 34 ++++--- src/Demos/RemoteDataDemo/serverEmulator.ts | 8 +- src/lib/Components/Table/Table.tsx | 3 +- src/lib/Models/Column.ts | 5 +- src/lib/Reducers/kaReducer.ts | 12 +++ src/lib/Utils/PropsUtils.test.ts | 60 +++++++++++- src/lib/Utils/PropsUtils.ts | 5 +- .../__snapshots__/PropsUtils.test.ts.snap | 12 +++ src/lib/actionCreators.ts | 10 ++ src/lib/enums.ts | 6 +- 16 files changed, 277 insertions(+), 36 deletions(-) create mode 100644 public/static/icons/ColumnSettingsDemo.svg rename public/static/icons/groups/{DataEditing.svg => Editing.svg} (100%) create mode 100644 src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.test.tsx create mode 100644 src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx diff --git a/public/static/icons/ColumnSettingsDemo.svg b/public/static/icons/ColumnSettingsDemo.svg new file mode 100644 index 00000000..12a9f779 --- /dev/null +++ b/public/static/icons/ColumnSettingsDemo.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/public/static/icons/groups/DataEditing.svg b/public/static/icons/groups/Editing.svg similarity index 100% rename from public/static/icons/groups/DataEditing.svg rename to public/static/icons/groups/Editing.svg diff --git a/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.test.tsx b/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.test.tsx new file mode 100644 index 00000000..c20d77af --- /dev/null +++ b/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import ColumnSettingsDemo from './ColumnSettingsDemo'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx b/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx new file mode 100644 index 00000000..e3e84b2b --- /dev/null +++ b/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx @@ -0,0 +1,96 @@ +import React, { useState } from 'react'; + +import { ITableAllProps, ITableProps, kaReducer, Table } from '../../lib'; +import { hideColumn, showColumn } from '../../lib/actionCreators'; +import CellEditorBoolean from '../../lib/Components/CellEditorBoolean/CellEditorBoolean'; +import { ActionType, DataType, EditingMode, SortingMode } from '../../lib/enums'; +import { DispatchFunc } from '../../lib/types'; + +const dataArray = Array(10).fill(undefined).map( + (_, index) => ({ + column1: `column:1 row:${index}`, + column2: `column:2 row:${index}`, + column3: `column:3 row:${index}`, + column4: `column:4 row:${index}`, + column5: `column:5 row:${index}`, + column6: `column:6 row:${index}`, + id: index, + }), +); + +const tablePropsInit: ITableProps = { + columns: [ + { key: 'column1', title: 'Column 1', dataType: DataType.String }, + { key: 'column2', title: 'Column 2', dataType: DataType.String }, + { key: 'column3', title: 'Column 3', dataType: DataType.String, visible: false }, + { key: 'column4', title: 'Column 4', dataType: DataType.String }, + { key: 'column5', title: 'Column 5', dataType: DataType.String }, + { key: 'column6', title: 'Column 6', dataType: DataType.String }, + ], + data: dataArray, + editingMode: EditingMode.Cell, + rowKeyField: 'id', + sortingMode: SortingMode.Single, +}; + +const ColumnSettings: React.FC = (tableProps: ITableAllProps) => { + const columnsSettingsProps: ITableProps = { + data: tableProps.columns.map(c => ({...c, visible: c.visible !== false })), + rowKeyField: 'key', + columns: [{ + key: 'title', + isEditable: false, + title: 'Field', + dataType: DataType.String + }, { + key: 'visible', + title: 'Visible', + isEditable: false, + style: { width: 45 }, + dataType: DataType.Boolean + }], + editingMode: EditingMode.None, + } + const dispatchSettings: DispatchFunc = (action) => { + if (action.type === ActionType.UpdateCellValue){ + tableProps.dispatch(action.value ? showColumn(action.rowKeyValue) : hideColumn(action.rowKeyValue)); + } + }; + return ( + ({style: {width: 400, marginBottom: 20}})}, + cell: { + content: (props) => { + switch (props.column.key){ + case 'visible': return ; + } + } + } + }} + dispatch={dispatchSettings} + /> + ); +} + +const ColumnSettingsDemo: React.FC = () => { + const [tableProps, changeTableProps] = useState(tablePropsInit); + const dispatch: DispatchFunc = (action) => { + changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); + }; + return ( +
+ +
+ + ); +}; + +export default ColumnSettingsDemo; \ No newline at end of file diff --git a/src/Demos/DemoText.tsx b/src/Demos/DemoText.tsx index e4a468e0..0ef96efe 100644 --- a/src/Demos/DemoText.tsx +++ b/src/Demos/DemoText.tsx @@ -10,7 +10,7 @@ interface IDemoTextProps { const DemoText: React.FunctionComponent = ({ demoFileName }) => { const [text, changeText]: [string, any] = useState(''); useEffect(() => { - fetch(`demos/${demoFileName}/${demoFileName}.tsx?c=2`) + fetch(`demos/${demoFileName}/${demoFileName}.tsx?c=3`) .then((res) => res.text()) .then((fileText) => changeText(fileText)); }, [demoFileName]); diff --git a/src/Demos/Demos.tsx b/src/Demos/Demos.tsx index 45eda44a..ec19ccdb 100644 --- a/src/Demos/Demos.tsx +++ b/src/Demos/Demos.tsx @@ -9,6 +9,7 @@ import BootstrapDemo from './BootstrapDemo/BootstrapDemo'; import ClassComponentDemo from './ClassComponentDemo/ClassComponentDemo'; import ColumnReorderingDemo from './ColumnReorderingDemo/ColumnReorderingDemo'; import ColumnResizingDemo from './ColumnResizingDemo/ColumnResizingDemo'; +import ColumnSettingsDemo from './ColumnSettingsDemo/ColumnSettingsDemo'; import CustomAttributesDemo from './CustomAttributesDemo/CustomAttributesDemo'; import CustomCellDemo from './CustomCellDemo/CustomCellDemo'; import CustomDataRowDemo from './CustomDataRowDemo/CustomDataRowDemo'; @@ -59,22 +60,23 @@ initializeGA(); const demos: Demo[] = [ new Demo(OverviewDemo, '/overview', 'Basics', 'OverviewDemo', 'https://stackblitz.com/edit/table-overview-js', 'https://stackblitz.com/edit/table-overview-ts', ''), - new Demo(AddRowDemo, '/add-row', 'Add New Row', 'AddRowDemo', 'https://stackblitz.com/edit/table-add-row-js', 'https://stackblitz.com/edit/table-add-row-ts', 'Data Editing'), + new Demo(AddRowDemo, '/add-row', 'Add New Row', 'AddRowDemo', 'https://stackblitz.com/edit/table-add-row-js', 'https://stackblitz.com/edit/table-add-row-ts', 'Editing'), new Demo(AlertCellDemo, '/alert-cell', 'Alert Cell', 'AlertCellDemo', 'https://stackblitz.com/edit/table-alert-cell-js', 'https://stackblitz.com/edit/table-alert-cell-ts', 'Customization'), new Demo(BootstrapDemo, '/bootstrap', 'Bootstrap', 'BootstrapDemo', 'https://stackblitz.com/edit/table-bootstrap-js', 'https://stackblitz.com/edit/table-bootstrap-ts', ''), new Demo(MaterialDemo, '/material', 'Material', 'MaterialDemo', 'https://stackblitz.com/edit/table-material-js', 'https://stackblitz.com/edit/table-material-ts', ''), new Demo(CustomAttributesDemo, '/custom-attributes', 'Custom Attributes', 'CustomAttributesDemo', 'https://stackblitz.com/edit/table-custom-attributes-js', 'https://stackblitz.com/edit/table-custom-attributes-ts', 'Customization'), + new Demo(ColumnSettingsDemo, '/column-settings', 'Column Settings', 'ColumnSettingsDemo', 'https://stackblitz.com/edit/table-column-settings-js', 'https://stackblitz.com/edit/table-column-settings-ts', 'Columns'), new Demo(ColumnReorderingDemo, '/column-reordering', 'Column Reordering', 'ColumnReorderingDemo', 'https://stackblitz.com/edit/table-column-reordering-js', 'https://stackblitz.com/edit/table-column-reordering-ts', 'Columns'), new Demo(ColumnResizingDemo, '/column-resizing', 'Column Resizing', 'ColumnResizingDemo', 'https://stackblitz.com/edit/table-column-resizing-js', 'https://stackblitz.com/edit/table-column-resizing-ts', 'Columns'), new Demo(ClassComponentDemo, '/class-component', 'Class Component', 'ClassComponentDemo', 'https://stackblitz.com/edit/table-class-component-js', 'https://stackblitz.com/edit/table-class-component-ts', ''), new Demo(CustomCellDemo, '/custom-cell', 'Custom Cell', 'CustomCellDemo', 'https://stackblitz.com/edit/table-custom-cell-js', 'https://stackblitz.com/edit/table-custom-cell-ts', 'Customization'), new Demo(CustomDataRowDemo, '/custom-data-row', 'Custom Row', 'CustomDataRowDemo', 'https://stackblitz.com/edit/table-custom-data-row-js', 'https://stackblitz.com/edit/table-custom-data-row-ts', 'Customization'), - new Demo(CustomEditorDemo, '/custom-editor', 'Custom Editor', 'CustomEditorDemo', 'https://stackblitz.com/edit/table-custom-editor-js', 'https://stackblitz.com/edit/table-custom-editor-ts', 'Data Editing'), + new Demo(CustomEditorDemo, '/custom-editor', 'Custom Editor', 'CustomEditorDemo', 'https://stackblitz.com/edit/table-custom-editor-js', 'https://stackblitz.com/edit/table-custom-editor-ts', 'Editing'), new Demo(CustomHeaderCellDemo, '/custom-header-cell', 'Custom Header Cell', 'CustomHeaderCellDemo', 'https://stackblitz.com/edit/table-custom-header-cell-js', 'https://stackblitz.com/edit/table-custom-header-cell-ts', 'Customization'), - new Demo(DeleteRowDemo, '/delete-row', 'Delete Row', 'DeleteRowDemo', 'https://stackblitz.com/edit/table-delete-row-js', 'https://stackblitz.com/edit/table-delete-row-ts', 'Data Editing'), + new Demo(DeleteRowDemo, '/delete-row', 'Delete Row', 'DeleteRowDemo', 'https://stackblitz.com/edit/table-delete-row-js', 'https://stackblitz.com/edit/table-delete-row-ts', 'Editing'), new Demo(DetailsRowDemo, '/details-row', 'Details Row', 'DetailsRowDemo', 'https://stackblitz.com/edit/table-details-row-js', 'https://stackblitz.com/edit/table-details-row-ts', 'Rows'), - new Demo(EditingDemo, '/editing', 'Editing', 'EditingDemo', 'https://stackblitz.com/edit/table-editing-js', 'https://stackblitz.com/edit/table-editing-ts', 'Data Editing'), - new Demo(EditingRowDemo, '/editing-row', 'Editing - Row', 'EditingRowDemo', 'https://stackblitz.com/edit/table-editing-row-js', 'https://stackblitz.com/edit/table-editing-row-ts', 'Data Editing'), + new Demo(EditingDemo, '/editing', 'Editing - Cell', 'EditingDemo', 'https://stackblitz.com/edit/table-editing-js', 'https://stackblitz.com/edit/table-editing-ts', 'Editing'), + new Demo(EditingRowDemo, '/editing-row', 'Editing - Row', 'EditingRowDemo', 'https://stackblitz.com/edit/table-editing-row-js', 'https://stackblitz.com/edit/table-editing-row-ts', 'Editing'), new Demo(EventsDemo, '/events', 'Events', 'EventsDemo', 'https://stackblitz.com/edit/table-events-js', 'https://stackblitz.com/edit/table-events-ts', 'Miscellaneous'), new Demo(ExportDemo, '/export', 'Export to CSV', 'ExportDemo', 'https://stackblitz.com/edit/table-export-js', 'https://stackblitz.com/edit/table-export-ts', 'Export / Print'), new Demo(ExportToPdfDemo, '/export-pdf', 'Export to PDF', 'ExportToPdfDemo', 'https://stackblitz.com/edit/table-export-pdf-js', 'https://stackblitz.com/edit/table-export-pdf-ts', 'Export / Print'), @@ -102,7 +104,7 @@ const demos: Demo[] = [ new Demo(SelectionSingleDemo, '/selection-single', 'Selection - Single', 'SelectionSingleDemo', 'https://stackblitz.com/edit/table-selection-single-js', 'https://stackblitz.com/edit/table-selection-single-ts', 'Selection'), new Demo(SortingDemo, '/sorting', 'Sorting', 'SortingDemo', 'https://stackblitz.com/edit/table-sorting-js', 'https://stackblitz.com/edit/table-sorting-ts', ''), new Demo(StateStoringDemo, '/state-storing', 'State Storing', 'StateStoringDemo', 'https://stackblitz.com/edit/table-state-storing-js', '', 'Miscellaneous', true), - new Demo(ValidationDemo, '/validation', 'Validation', 'ValidationDemo', 'https://stackblitz.com/edit/table-validation-js', 'https://stackblitz.com/edit/table-validation-ts', 'Data Editing'), + new Demo(ValidationDemo, '/validation', 'Validation', 'ValidationDemo', 'https://stackblitz.com/edit/table-validation-js', 'https://stackblitz.com/edit/table-validation-ts', 'Editing'), ]; const cases: DemoCase[] = demos.map((d: Demo) => { diff --git a/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx b/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx index e7d97453..946d7881 100644 --- a/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx +++ b/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx @@ -45,45 +45,43 @@ const tablePropsInit: ITableProps = { rowKeyField: 'id', }; +const initGetData = (props: ITableProps, dispatch: DispatchFunc) => { + return (action?: any) => { + serverEmulator.get(props.paging, props.columns, action?.pageIndex).then((result) => { + dispatch(updatePagesCount(result.pagesCount)); + dispatch(updateData(result.data)); + dispatch(hideLoading()); + }); + } +}; + const RemoteDataDemo: React.FC = () => { const [tableProps, changeTableProps] = useState(tablePropsInit); const dispatch: DispatchFunc = (action) => { - const getData = (props: ITableProps) => { - serverEmulator.get({ ...props.paging, pageIndex: action.pageIndex }, props.columns).then((result) => { - dispatch(updatePagesCount(result.pagesCount)); - dispatch(updateData(result.data)); - dispatch(hideLoading()); - }); - }; if (action.type === ActionType.DeleteRow) { dispatch(showLoading('Deleting Row..')); serverEmulator.delete(action.rowKeyValue).then((result) => { - getData(tableProps); + getData(action); }); } else if (action.type === ActionType.UpdateCellValue) { dispatch(showLoading('Updating Data..')); const column = tableProps.columns.find((c) => c.key === action.columnKey)!; serverEmulator.update(action.rowKeyValue, { [getField(column)]: action.value }).then(() => { - getData(tableProps); + getData(action); }); } else if (action.type === ActionType.UpdatePageIndex) { dispatch(showLoading('Loading Data..')); - getData(tableProps); + getData(action); } else if (action.type === ActionType.UpdateSortDirection) { dispatch(showLoading('Loading Data..')); - getData(kaReducer(tableProps, action)); + initGetData(kaReducer(tableProps, action), dispatch)(action); } changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); }; + const getData = initGetData(tableProps, dispatch); if (!tableProps.data) { - serverEmulator.get(tableProps.paging).then( - (result) => { - dispatch(updatePagesCount(result.pagesCount)); - dispatch(updateData(result.data)); - dispatch(hideLoading()); - }, - ); + getData(); } return ( diff --git a/src/Demos/RemoteDataDemo/serverEmulator.ts b/src/Demos/RemoteDataDemo/serverEmulator.ts index 86073f1f..bd1b52b8 100644 --- a/src/Demos/RemoteDataDemo/serverEmulator.ts +++ b/src/Demos/RemoteDataDemo/serverEmulator.ts @@ -13,11 +13,15 @@ let dataArray = Array(100).fill(undefined).map( }), ); -const get = (paging?: PagingOptions, columns?: Column[]): Promise => { +const get = (paging?: PagingOptions, columns?: Column[], pageIndexNew?: number): Promise => { return new Promise((resolve) => { setTimeout(() => { const sortedData = columns ? sortData(columns, dataArray) : dataArray; - const data = getPageData(sortedData, { ...paging, pagesCount: undefined }); + const data = getPageData(sortedData, { + ...paging, + pagesCount: undefined, + pageIndex: pageIndexNew != null ? pageIndexNew : paging?.pageIndex + }); resolve({ data, pagesCount: getPagesCount(dataArray, { ...paging, pagesCount: undefined }) diff --git a/src/lib/Components/Table/Table.tsx b/src/lib/Components/Table/Table.tsx index ced326c8..4aabbd42 100644 --- a/src/lib/Components/Table/Table.tsx +++ b/src/lib/Components/Table/Table.tsx @@ -64,8 +64,7 @@ export const Table: React.FunctionComponent = (props) => { const { elementAttributes, content: rootDivContent } = getElementCustomization({ className: kaCss }, { ...props, dispatch }, childComponents.rootDiv); - elementAttributes.style = {...elementAttributes.style, width, height} - + elementAttributes.style = {width, height, ...elementAttributes.style} return (
{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..d0604cbf 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,6 +201,62 @@ describe('getDraggableProps', () => { }); }); +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('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, 4], + rowKeyField: 'id', + paging: { + enabled: true, + pageSize: 2 + } + }; + const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps); + expect(allFilteredRowsSelected).toBeTruthy(); + }); + it('false', () => { + const tableProps: ITableProps = { + columns: [{ key: 'id', filterRowValue: 4, filterRowOperator: FilterOperatorName.LessThanOrEqual }], + data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }], + selectedRows: [1, 3, 5], + rowKeyField: 'id', + paging: { + enabled: true, + pageSize: 2 + } + }; + const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps); + expect(allFilteredRowsSelected).toBeFalsy(); + }); + it('false if selectedRows is undefined', () => { + const tableProps: ITableProps = { + columns: [{ key: 'id', filterRowValue: 4, filterRowOperator: FilterOperatorName.LessThanOrEqual }], + data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }], + rowKeyField: 'id', + paging: { + enabled: true, + pageSize: 2 + } + }; + const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps); + expect(allFilteredRowsSelected).toBeFalsy(); + }); +}); describe('getDraggableProps', () => { const tableProps = { 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', From eb97c1509d3fe0b76bab7288f31f28c1bd049f54 Mon Sep 17 00:00:00 2001 From: Komarov Alexander Date: Wed, 28 Oct 2020 09:16:56 +0100 Subject: [PATCH 2/4] Remove duplicate of areAllFilteredRowsSelected tests --- src/lib/Utils/PropsUtils.test.ts | 45 -------------------------------- 1 file changed, 45 deletions(-) diff --git a/src/lib/Utils/PropsUtils.test.ts b/src/lib/Utils/PropsUtils.test.ts index d0604cbf..58271ecc 100644 --- a/src/lib/Utils/PropsUtils.test.ts +++ b/src/lib/Utils/PropsUtils.test.ts @@ -327,48 +327,3 @@ describe('areAllVisibleRowsSelected', () => { expect(allFilteredRowsSelected).toBeFalsy(); }); }); - -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, 4], - rowKeyField: 'id', - paging: { - enabled: true, - pageSize: 2 - } - }; - const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps); - expect(allFilteredRowsSelected).toBeTruthy(); - }); - it('false', () => { - const tableProps: ITableProps = { - columns: [{ key: 'id', filterRowValue: 4, filterRowOperator: FilterOperatorName.LessThanOrEqual }], - data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }], - selectedRows: [1, 3, 5], - rowKeyField: 'id', - paging: { - enabled: true, - pageSize: 2 - } - }; - const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps); - expect(allFilteredRowsSelected).toBeFalsy(); - }); - it('false if selectedRows is undefined', () => { - const tableProps: ITableProps = { - columns: [{ key: 'id', filterRowValue: 4, filterRowOperator: FilterOperatorName.LessThanOrEqual }], - data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }], - rowKeyField: 'id', - paging: { - enabled: true, - pageSize: 2 - } - }; - const allFilteredRowsSelected = areAllFilteredRowsSelected(tableProps); - expect(allFilteredRowsSelected).toBeFalsy(); - }); -}); - From 2e964ac209391982467ae45cf44dac7a8780f667 Mon Sep 17 00:00:00 2001 From: Komarov Alexander Date: Wed, 28 Oct 2020 09:29:30 +0100 Subject: [PATCH 3/4] Increase version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3893b244..db56daae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ka-table", - "version": "5.4.0", + "version": "5.5.0", "license": "MIT", "repository": "github:komarovalexander/ka-table", "homepage": "https://komarovalexander.github.io/ka-table/#/overview", From daa412bbd2b8a87b351a20e10c632af5a20bef2e Mon Sep 17 00:00:00 2001 From: Komarov Alexander Date: Wed, 28 Oct 2020 09:37:14 +0100 Subject: [PATCH 4/4] Update demos menu --- src/Demos/MenuItems.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Demos/MenuItems.tsx b/src/Demos/MenuItems.tsx index bd4bf7ad..9ed047d8 100644 --- a/src/Demos/MenuItems.tsx +++ b/src/Demos/MenuItems.tsx @@ -11,8 +11,8 @@ export class MenuItem { public isActive?: boolean; } -const newItems: string[] = ['FixedColumnDemo', 'PrintDemo', 'ExportToPdfDemo']; -const updateItems: string[] = ['Columns', 'ExportPrint', 'SortingDemo', 'RemoteDataDemo']; +const newItems: string[] = ['ColumnSettingsDemo']; +const updateItems: string[] = ['Columns']; const MenuItems: React.FC<{ items: MenuItem[] }> = ({ items }) => {