diff --git a/README.md b/README.md index bdd809f3..9f4cb337 100644 --- a/README.md +++ b/README.md @@ -34,11 +34,10 @@ yarn add ka-table ```js import 'ka-table/style.css'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from 'ka-table'; +import { Table } from 'ka-table'; import { DataType, EditingMode, SortingMode } from 'ka-table/enums'; -import { DispatchFunc } from 'ka-table/types'; const dataArray = Array(10) .fill(undefined) @@ -50,29 +49,19 @@ const dataArray = Array(10) 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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const OverviewDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return ( ); }; diff --git a/package.json b/package.json index 9dfe763e..752fa8dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ka-table", - "version": "7.8.5", + "version": "7.9.0", "license": "MIT", "repository": "github:komarovalexander/ka-table", "homepage": "https://komarovalexander.github.io/ka-table/#/overview", @@ -21,6 +21,7 @@ "react": "17.0.2", "react-csv": "^2.0.3", "react-dom": "17.0.2", + "react-query": "^3.39.3", "react-redux": "^7.2.0", "react-to-print": "^2.12.6" }, diff --git a/src/Demos/AddRowDemo/AddRowDemo.tsx b/src/Demos/AddRowDemo/AddRowDemo.tsx index cbc8f2f8..85817b09 100644 --- a/src/Demos/AddRowDemo/AddRowDemo.tsx +++ b/src/Demos/AddRowDemo/AddRowDemo.tsx @@ -1,12 +1,10 @@ import './AddRowDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { hideNewRow, saveNewRow, showNewRow } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; import { ICellEditorProps, IHeadCellProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(7).fill(undefined).map( (_, index) => ({ @@ -68,40 +66,31 @@ const SaveButton: React.FC = ({ ); }; -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - { - key: 'addColumn', - style: {width: 53} - }, - ], - data: dataArray, - validation: ({ column, value }) => { - if (column.key === 'column1'){ - return value ? '' : 'value must be specified'; - } - }, - rowKeyField: 'id', -}; - const AddRowDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ + if (column.key === 'column1'){ + return value ? '' : 'value must be specified'; + } + }} + rowKeyField={'id'} childComponents={{ cellEditor: { content: (props) => { @@ -118,7 +107,6 @@ const AddRowDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); diff --git a/src/Demos/AlertCellDemo/AlertCellDemo.tsx b/src/Demos/AlertCellDemo/AlertCellDemo.tsx index b1a45a46..67b5ae81 100644 --- a/src/Demos/AlertCellDemo/AlertCellDemo.tsx +++ b/src/Demos/AlertCellDemo/AlertCellDemo.tsx @@ -1,11 +1,9 @@ import './AlertCellDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; import { ICellTextProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(10).fill(undefined).map( (_, index) => ({ @@ -30,29 +28,23 @@ const AlertCell: React.FC = ({ ); }; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'command1', style: { textAlign: 'center' }, width: 70 }, - { key: 'column1-1', field: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column1-2', field: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column2', title: 'Column 2', dataType: DataType.String }, - { key: 'column3', title: 'Column 3', dataType: DataType.String }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - rowKeyField: 'id', -}; - const AlertCellDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ @@ -62,7 +54,6 @@ const AlertCellDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/BootstrapDemo/BootstrapDemo.tsx b/src/Demos/BootstrapDemo/BootstrapDemo.tsx index b9868c64..bafe841e 100644 --- a/src/Demos/BootstrapDemo/BootstrapDemo.tsx +++ b/src/Demos/BootstrapDemo/BootstrapDemo.tsx @@ -1,11 +1,10 @@ import './BootstrapDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; +import { EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; import { ChildComponents } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; import { CustomLookupEditor, DateEditor, NumberEditor } from './editors'; const dataArray = Array(119).fill(undefined).map( @@ -18,30 +17,6 @@ const dataArray = Array(119).fill(undefined).map( }), ); -const tablePropsInit: ITableProps = { - columns: [ - { key: 'column1', title: 'Column 1', dataType: DataType.Boolean, style: {minWidth: 130} }, - { key: 'column2', title: 'Column 2', dataType: DataType.String, style: {width: 240} }, - { key: 'column3', title: 'Column 3', dataType: DataType.Number, filterRowOperator: '>', style: {width: 230} }, - { key: 'column4', title: 'Column 4', dataType: DataType.Date, filterRowOperator: '<', style: {minWidth: 100} }, - ], - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - paging: { - enabled: true, - pageSize: 7, - pageIndex: 0 - }, - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - sortingMode: SortingMode.Single, - filteringMode: FilteringMode.FilterRow -}; - const bootstrapChildComponents: ChildComponents = { table: { elementAttributes: () => ({ @@ -90,18 +65,31 @@ const bootstrapChildComponents: ChildComponents = { }; const BootstrapDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
', style: {width: 230} }, + { key: 'column4', title: 'Column 4', dataType: DataType.Date, filterRowOperator: '<', style: {minWidth: 100} }, + ]} + format= {({ column, value }) => { + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + paging= {{ + enabled: true, + pageSize: 7, + pageIndex: 0 + }} + data={dataArray} + editingMode={EditingMode.Cell} + rowKeyField={'id'} + sortingMode={SortingMode.Single} + filteringMode={FilteringMode.FilterRow} childComponents={bootstrapChildComponents} - dispatch={dispatch} /> ); diff --git a/src/Demos/ClassComponentDemo/ClassComponentDemo.tsx b/src/Demos/ClassComponentDemo/ClassComponentDemo.tsx index e0273e55..96d77b9e 100644 --- a/src/Demos/ClassComponentDemo/ClassComponentDemo.tsx +++ b/src/Demos/ClassComponentDemo/ClassComponentDemo.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { Table } from '../../lib'; import { DataType, EditingMode, SortingMode } from '../../lib/enums'; const dataArray = Array(20).fill(undefined).map( @@ -13,40 +13,22 @@ const dataArray = Array(20).fill(undefined).map( }), ); -const tableProps: 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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - -class ClassComponentDemo extends React.Component { - constructor(props: any) { - super(props); - this.state = { tableProps }; - this.dispatch = this.dispatch.bind(this); - } - +class ClassComponentDemo extends React.Component { public render() { return (
+ 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 }, + { key: 'column4', title: 'Column 4', dataType: DataType.String }, + ]} + data={dataArray} + editingMode={EditingMode.Cell} + rowKeyField={'id'} + sortingMode={SortingMode.Single} /> ); } - - private dispatch(action: any) { - this.setState((prevState) => ({ - ...prevState, - ...{tableProps: kaReducer(prevState.tableProps, action)} - })); - } } export default ClassComponentDemo; diff --git a/src/Demos/ColumnReorderingDemo/ColumnReorderingDemo.tsx b/src/Demos/ColumnReorderingDemo/ColumnReorderingDemo.tsx index e5c1f831..d78b1c1e 100644 --- a/src/Demos/ColumnReorderingDemo/ColumnReorderingDemo.tsx +++ b/src/Demos/ColumnReorderingDemo/ColumnReorderingDemo.tsx @@ -1,9 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; import { Column } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; const columns: Column[] = Array(15).fill(undefined).map( (_, index) => ({ @@ -21,23 +19,14 @@ const dataArray = Array(30).fill(undefined).map( }, { id: index }), ); -const tablePropsInit: ITableProps = { - columnReordering: true, - columns, - data: dataArray, - rowKeyField: 'id' -}; - const ColumnReorderingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ diff --git a/src/Demos/ColumnResizingDemo/ColumnResizingDemo.tsx b/src/Demos/ColumnResizingDemo/ColumnResizingDemo.tsx index 0370b429..b7d39711 100644 --- a/src/Demos/ColumnResizingDemo/ColumnResizingDemo.tsx +++ b/src/Demos/ColumnResizingDemo/ColumnResizingDemo.tsx @@ -1,11 +1,10 @@ import './ColumnResizingDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode, SortingMode } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; +import { EditingMode, SortingMode } from '../../lib/enums'; import { Column } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; const columns: Column[] = Array(15).fill(undefined).map( (_, index) => ({ @@ -24,26 +23,17 @@ const dataArray = Array(30).fill(undefined).map( }, { id: index }), ); -const tablePropsInit: ITableProps = { - sortingMode: SortingMode.Single, - rowKeyField: 'id', - editingMode: EditingMode.Cell, - data: dataArray, - columns, - columnResizing: true, -}; - const ColumnResizingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
); diff --git a/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx b/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx index 20063000..fd945be6 100644 --- a/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx +++ b/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx @@ -1,13 +1,12 @@ +import { ActionType, DataType, EditingMode, SortingMode } from '../../lib/enums'; +import { ITableInstance, Table, useTable } from '../../lib'; 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) => ({ +const dataArray = Array(10) + .fill(undefined) + .map((_, index) => ({ column1: `column:1 row:${index}`, column2: `column:2 row:${index}`, column3: `column:3 row:${index}`, @@ -15,80 +14,78 @@ const dataArray = Array(10).fill(undefined).map( 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: { textAlign: 'center' }, - width: 80, - 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)); - } - }; +const ColumnSettings = ({ table }: { table: ITableInstance }) => { + const [data, setData] = useState(); + const updateData = () => setData(table?.props?.columns?.map((c) => ({ ...c, visible: c.visible !== false }))); + const settingsTable = useTable({ + onDispatch: (action) => { + if (action.type === ActionType.UpdateCellValue) { + action.value ? table.showColumn(action.rowKeyValue) : table.hideColumn(action.rowKeyValue); + updateData(); + } + if (action.type === ActionType.ComponentDidMount) { + updateData(); + } + }, + }); return (
({style: {width: 400, marginBottom: 20}})}, + rootDiv: { elementAttributes: () => ({ style: { width: 400, marginBottom: 20 } }) }, cell: { content: (props) => { - switch (props.column.key){ - case 'visible': return ; + 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)); - }; + const table = useTable(); return (
- +
); diff --git a/src/Demos/CustomAttributesDemo/CustomAttributesDemo.tsx b/src/Demos/CustomAttributesDemo/CustomAttributesDemo.tsx index a1b8425d..d51360cb 100644 --- a/src/Demos/CustomAttributesDemo/CustomAttributesDemo.tsx +++ b/src/Demos/CustomAttributesDemo/CustomAttributesDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { SortingMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true, tryDate: new Date(2021, 10, 9) }, @@ -16,38 +15,28 @@ const dataArray: any[] = [ { id: 9, name: 'Treme Watson', score: 61, passed: true, tryDate: new Date(2022, 10, 9) }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String }, - { key: 'score', title: 'Score', dataType: DataType.Number, filterRowOperator: '>' }, - { key: 'passed', title: 'Passed', dataType: DataType.Boolean }, - { dataType: DataType.Date, key: 'tryDate', title: 'Date', filterRowOperator: '<' }, - ], - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - paging: { - enabled: true, - pageSize: 7, - pageIndex: 0 - }, - data: dataArray, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const CustomAttributesDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
' }, + { key: 'passed', title: 'Passed', dataType: DataType.Boolean }, + { dataType: DataType.Date, key: 'tryDate', title: 'Date', filterRowOperator: '<' }, + ]} + format= {({ column, value }) => { + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + paging= {{ + enabled: true, + pageSize: 7, + pageIndex: 0 + }} + data={dataArray} + rowKeyField={'id'} + sortingMode={SortingMode.Single} childComponents={{ dataRow: { elementAttributes: ({ rowData }) => ({ @@ -58,7 +47,6 @@ const CustomAttributesDemo: React.FC = () => { }) } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/CustomCellDemo/CustomCellDemo.tsx b/src/Demos/CustomCellDemo/CustomCellDemo.tsx index 0c7e3e19..05525a1b 100644 --- a/src/Demos/CustomCellDemo/CustomCellDemo.tsx +++ b/src/Demos/CustomCellDemo/CustomCellDemo.tsx @@ -1,85 +1,75 @@ import './CustomCellDemo.scss'; -import React, { useState } from 'react'; +import { DataType, Table, useTableInstance } from '../../lib'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { openEditor } from '../../lib/actionCreators'; -import { DataType, EditingMode } from '../../lib/enums'; +import { EditingMode } from '../../lib/enums'; import { ICellTextProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; +import React from 'react'; import dataArray from './data'; const CustomCell: React.FC = ({ column, - dispatch, rowKeyValue, value, }) => { + const table = useTableInstance(); return (
{ - dispatch(openEditor(rowKeyValue, column.key)); + table.openEditor(rowKeyValue, column.key); }} className={value ? 'custom-cell-demo-loyal' : 'custom-cell-demo-no-loyal'}> {value ? 'Loyal Program Member' : 'No Loyal Programm'}
); }; -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'representative.name', - width: 210, - title: 'Representative', - }, - { - dataType: DataType.Boolean, - key: 'company.hasLoyalProgram', - style: { textAlign: 'center' }, - width: 200, - title: 'Loyal Program', - }, - { - dataType: DataType.String, - key: 'product.name', - width: 110, - title: 'Product', - }, - { - dataType: DataType.Number, - key: 'product.price', - style: { textAlign: 'right' }, - width: 130, - title: 'Price', - }, - { - dataType: DataType.Date, - key: 'firstDealDate', - width: 150, - title: 'First Deal Date', - }, - ], - format: ({ column, value }) => { - if (column.key === 'product.price'){ - return `$${value}`; - } - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', -}; - const CustomCellDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const onDispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ + if (column.key === 'product.price'){ + return `$${value}`; + } + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + data={dataArray} + editingMode={EditingMode.Cell} + rowKeyField={'id'} childComponents={{ cellText: { content: (props) => { @@ -89,7 +79,6 @@ const CustomCellDemo: React.FC = () => { } } }} - dispatch={onDispatch} /> ); }; diff --git a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx index 3de81b73..1c03e459 100644 --- a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx +++ b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx @@ -1,10 +1,9 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import defaultOptions from '../../lib/defaultOptions'; -import { DataType, SortDirection, SortingMode } from '../../lib/enums'; +import { SortDirection, SortingMode } from '../../lib/enums'; import { IDataRowProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true }, @@ -25,36 +24,27 @@ const DataRow: React.FC = ({rowData, columns}) => { ); }; -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'name', - sortDirection: SortDirection.Descend, - width: 100, - title: 'Student', - }, - { key: 'score', title: 'Score', dataType: DataType.Number }, - ], - data: dataArray, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const CustomDataRowDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
, } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx b/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx index 63b4b360..28114a6b 100644 --- a/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx +++ b/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx @@ -2,11 +2,10 @@ import './CustomEditorDemo.scss'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { closeEditor, updateCellValue } from '../../lib/actionCreators'; -import { DataType, EditingMode } from '../../lib/enums'; +import { EditingMode } from '../../lib/enums'; import { ICellEditorProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true }, @@ -68,42 +67,33 @@ const CustomLookupEditor: React.FC = ({ ); }; -const tablePropsInit: ITableProps = { - columns: [ - { dataType: DataType.String, key: 'name', title: 'Name', width: 390 }, - { key: 'score', title: 'Score', dataType: DataType.Number, width: 90 }, - { - dataType: DataType.Boolean, - key: 'passed', - width: 90, - title: 'Passed', - }, - { - dataType: DataType.Date, - key: 'nextTry', - title: 'Next Try', - }, - ], - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - data: dataArray, - editableCells: [{ columnKey: 'name', rowKeyValue: 1 }], - editingMode: EditingMode.Cell, - rowKeyField: 'id', -}; - const CustomEditorDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + data={dataArray} + editableCells={[{ columnKey: 'name', rowKeyValue: 1 }]} + editingMode={EditingMode.Cell} + rowKeyField={'id'} childComponents={{ table: { elementAttributes: () => ({ diff --git a/src/Demos/CustomHeaderCellDemo/CustomHeaderCellDemo.tsx b/src/Demos/CustomHeaderCellDemo/CustomHeaderCellDemo.tsx index c91defe8..c9bdde9f 100644 --- a/src/Demos/CustomHeaderCellDemo/CustomHeaderCellDemo.tsx +++ b/src/Demos/CustomHeaderCellDemo/CustomHeaderCellDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { Table } from '../../lib'; import { IHeadCellProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(7).fill(undefined).map( (_, index) => ({ @@ -22,31 +21,22 @@ const HeadCell: React.FC = ({ ); }; -const tablePropsInit: ITableProps = { - columns: [ - { - key: 'column1', - style: { textAlign: 'left' }, - title: 'Column 1', - }, - { - key: 'column2', - title: 'Column 2', - }, - ], - data: dataArray, - rowKeyField: 'id', -}; - const CustomHeaderCellDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ @@ -56,7 +46,6 @@ const CustomHeaderCellDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/CustomPagingDemo/CustomPagingDemo.tsx b/src/Demos/CustomPagingDemo/CustomPagingDemo.tsx index 4b37aadb..f5899b39 100644 --- a/src/Demos/CustomPagingDemo/CustomPagingDemo.tsx +++ b/src/Demos/CustomPagingDemo/CustomPagingDemo.tsx @@ -1,12 +1,10 @@ import './CustomPagingDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { updatePageIndex, updatePageSize } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; import { IPagingProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(180).fill(undefined).map( (_, index) => ({ @@ -18,23 +16,6 @@ const dataArray = Array(180).fill(undefined).map( }), ); -const tableOption: 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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - paging: { - enabled: true, - pageIndex: 0, - pageSize: 10, - pageSizes: [5, 10, 15] - }, - rowKeyField: 'id', -}; - const PageSizeSelector: React.FC = ({ pageSize, pageSizes, dispatch }) => ( <> Page Size: @@ -68,16 +49,23 @@ const PagesSelector: React.FC = ({ pageIndex, pagesCount, dispatch ) const CustomPagingDemo: React.FC = () => { - const [option, changeOptions] = useState(tableOption); - const dispatch: DispatchFunc = (action) => { - changeOptions((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
diff --git a/src/Demos/CustomThemeDemo/CustomThemeDemo.tsx b/src/Demos/CustomThemeDemo/CustomThemeDemo.tsx index 560ad676..7666ddb3 100644 --- a/src/Demos/CustomThemeDemo/CustomThemeDemo.tsx +++ b/src/Demos/CustomThemeDemo/CustomThemeDemo.tsx @@ -1,11 +1,10 @@ // open TS Example or JS Example to see how to override styles import './CustomThemeDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; const dataArray = Array(119).fill(undefined).map( (_, index) => ({ @@ -17,42 +16,31 @@ const dataArray = Array(119).fill(undefined).map( }), ); -const tablePropsInit: ITableProps = { - columns: [ - { key: 'column1', title: 'Column 1', dataType: DataType.Boolean, style: {minWidth: 130} }, - { key: 'column2', title: 'Column 2', dataType: DataType.String, style: {width: 240} }, - { key: 'column3', title: 'Column 3', dataType: DataType.Number, style: {width: 230} }, - { key: 'column4', title: 'Column 4', dataType: DataType.Date, style: {minWidth: 100} }, - ], - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - paging: { - enabled: true, - pageSize: 7, - pageIndex: 0 - }, - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - sortingMode: SortingMode.Single, - filteringMode: FilteringMode.FilterRow -}; - const CustomThemeDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + paging= {{ + enabled: true, + pageSize: 7, + pageIndex: 0 + }} + data={dataArray} + editingMode={EditingMode.Cell} + rowKeyField={'id'} + sortingMode={SortingMode.Single} + filteringMode={FilteringMode.FilterRow} /> ); diff --git a/src/Demos/DeleteRowDemo/DeleteRowDemo.tsx b/src/Demos/DeleteRowDemo/DeleteRowDemo.tsx index a3ab4698..82bf4a03 100644 --- a/src/Demos/DeleteRowDemo/DeleteRowDemo.tsx +++ b/src/Demos/DeleteRowDemo/DeleteRowDemo.tsx @@ -1,12 +1,10 @@ import './DeleteRowDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { deleteRow } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; import { ICellTextProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(10).fill(undefined).map( (_, index) => ({ @@ -31,28 +29,19 @@ const DeleteRow: React.FC = ({ ); }; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'column1-1', field: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column1-2', field: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column2', title: 'Column 2', dataType: DataType.String }, - { key: 'column3', title: 'Column 3', dataType: DataType.String }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - { key: ':delete', width: 70, style: { textAlign: 'center' } }, - ], - data: dataArray, - rowKeyField: 'id', -}; - const DeleteRowDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ @@ -62,7 +51,6 @@ const DeleteRowDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/DemoPage.tsx b/src/Demos/DemoPage.tsx index 95275bea..6577466b 100644 --- a/src/Demos/DemoPage.tsx +++ b/src/Demos/DemoPage.tsx @@ -6,7 +6,7 @@ import Demo from './Demo'; import DemoText from './DemoText'; import { trackEvent } from './ga'; -const kaStylesDisabled = ['BootstrapDemo', 'MaterialDemo', 'CustomThemeDemo']; +const kaStylesDisabled = ['BootstrapDemo', 'CustomThemeDemo']; const getDemoPage = (demo: Demo) => { return () => { return ( @@ -41,6 +41,7 @@ const getDemoPage = (demo: Demo) => { + diff --git a/src/Demos/Demos.tsx b/src/Demos/Demos.tsx index 9225fc12..6b2fb40d 100644 --- a/src/Demos/Demos.tsx +++ b/src/Demos/Demos.tsx @@ -109,6 +109,7 @@ const demos: Demo[] = [ new Demo(FilterRowDemo, '/filter-row', 'Filter Row', 'FilterRowDemo', 'https://stackblitz.com/edit/table-filter-row-js', 'https://stackblitz.com/edit/table-filter-row-ts', 'Filtering'), new Demo(FixedColumnDemo, '/fixed-column', 'Fixed Colum', 'FixedColumnDemo', 'https://stackblitz.com/edit/table-fixed-column-js', 'https://stackblitz.com/edit/table-fixed-column-ts', 'Columns'), new Demo(GetDataByPropsDemo, '/get-data-by-props', 'Get Data By Props', 'GetDataByPropsDemo', 'https://stackblitz.com/edit/table-get-data-by-props-js', 'https://stackblitz.com/edit/table-get-data-by-props-ts', 'Miscellaneous'), + new Demo(GroupedColumnsDemo, '/grouped-columns', 'Grouped Columns', 'GroupedColumnsDemo', 'https://stackblitz.com/edit/table-grouped-columns-js', 'https://stackblitz.com/edit/table-grouped-columns-ts', 'Grouping'), new Demo(GroupingCustomCellDemo, '/grouping-custom-cell', 'Grouping Custom Cell', 'GroupingCustomCellDemo', 'https://stackblitz.com/edit/table-grouping-custom-cell-js', 'https://stackblitz.com/edit/table-grouping-custom-cell-ts', 'Grouping'), new Demo(GroupingCustomRowDemo, '/grouping-custom-row', 'Grouping Custom Row', 'GroupingCustomRowDemo', 'https://stackblitz.com/edit/table-grouping-custom-row-js', 'https://stackblitz.com/edit/table-grouping-custom-row-ts', 'Grouping'), new Demo(GroupingDemo, '/grouping', 'Grouping', 'GroupingDemo', 'https://stackblitz.com/edit/table-grouping-js', 'https://stackblitz.com/edit/table-grouping-ts', 'Grouping'), @@ -126,7 +127,6 @@ const demos: Demo[] = [ new Demo(ManyRowsGroupingDemo, '/many-rows-grouping', '10k Grouped', 'ManyRowsGroupingDemo', 'https://stackblitz.com/edit/table-many-rows-grouping-js', 'https://stackblitz.com/edit/table-many-rows-grouping-ts', 'Virtual Scrolling'), new Demo(ManyRowsMemoDemo, '/many-rows-memo', '300K Rows & memo', 'ManyRowsMemoDemo', 'https://stackblitz.com/edit/table-many-rows-memo-js', 'https://stackblitz.com/edit/table-many-rows-memo-ts', 'Virtual Scrolling'), new Demo(MaterialDemo, '/material', 'Material', 'MaterialDemo', 'https://stackblitz.com/edit/table-material-js', 'https://stackblitz.com/edit/table-material-ts', 'Themes'), - new Demo(GroupedColumnsDemo, '/grouped-columns', 'Grouped Columns', 'GroupedColumnsDemo', 'https://stackblitz.com/edit/table-grouped-columns-js', 'https://stackblitz.com/edit/table-grouped-columns-ts', 'Grouping'), new Demo(NullableCellDataDemo, '/nullable-cell-data', 'Nullable Cell Data', 'NullableCellDataDemo', 'https://stackblitz.com/edit/table-nullable-cell-data-js', 'https://stackblitz.com/edit/table-nullable-cell-data-ts', 'Miscellaneous'), new Demo(PagingDemo, '/paging', 'Paging', 'PagingDemo', 'https://stackblitz.com/edit/table-paging-js', 'https://stackblitz.com/edit/table-paging-ts', ''), new Demo(PrintDemo, '/print', 'Print', 'PrintDemo', 'https://stackblitz.com/edit/table-print-js', 'https://stackblitz.com/edit/table-print-ts', 'Export / Print'), diff --git a/src/Demos/DetailsRowDemo/DetailsRowDemo.tsx b/src/Demos/DetailsRowDemo/DetailsRowDemo.tsx index 9f5474cd..97f9856d 100644 --- a/src/Demos/DetailsRowDemo/DetailsRowDemo.tsx +++ b/src/Demos/DetailsRowDemo/DetailsRowDemo.tsx @@ -1,10 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { hideDetailsRow, showDetailsRow } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; import { ICellTextProps, IDataRowProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(10).fill(undefined).map( (_, index) => ({ @@ -44,29 +42,19 @@ const DetailsRow: React.FC = ({ ); }; -const tableOption: ITableProps = { - columns: [ - { key: 'show-hide-details-row' }, - { key: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column2', title: 'Column 2', dataType: DataType.String }, - { key: 'column3', title: 'Column 3', dataType: DataType.String }, - { key: 'column4', title: 'Column 4', dataType: DataType.String } - ], - data: dataArray, - detailsRows: [1], - rowKeyField: 'id', -}; - const DetailsRowDemo: React.FC = () => { - const [option, changeOptions] = useState(tableOption); - const dispatch: DispatchFunc = (action) => { - changeOptions((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ diff --git a/src/Demos/EditingDemo/EditingDemo.tsx b/src/Demos/EditingDemo/EditingDemo.tsx index 5fb7caf0..3862c3fc 100644 --- a/src/Demos/EditingDemo/EditingDemo.tsx +++ b/src/Demos/EditingDemo/EditingDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { EditingMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true }, @@ -13,41 +12,31 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false, nextTry: new Date(2021, 10, 9, 10) }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String, width: '30%' }, - { key: 'score', title: 'Score', dataType: DataType.Number, width: 80 }, - { key: 'passed', title: 'Passed', dataType: DataType.Boolean, width: '10%' }, - { - dataType: DataType.Date, - key: 'nextTry', - title: 'Next Try', - }, - ], - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - data: dataArray, - editableCells: [{ - columnKey: 'name', - rowKeyValue: 2, - }], - editingMode: EditingMode.Cell, - rowKeyField: 'id', -}; - const EditingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + data= {dataArray} + editableCells= {[{ + columnKey: 'name', + rowKeyValue: 2, + }]} + editingMode={EditingMode.Cell} + rowKeyField={'id'} /> ); }; diff --git a/src/Demos/EditingRowDemo/EditingRowDemo.tsx b/src/Demos/EditingRowDemo/EditingRowDemo.tsx index d060a7d3..7d72303a 100644 --- a/src/Demos/EditingRowDemo/EditingRowDemo.tsx +++ b/src/Demos/EditingRowDemo/EditingRowDemo.tsx @@ -1,12 +1,10 @@ import './EditingRowDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { closeRowEditors, openRowEditors, saveRowEditors } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; import { ICellEditorProps, ICellTextProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true }, @@ -62,38 +60,29 @@ const SaveButton: React.FC = ({ ); }; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String }, - { key: 'score', title: 'Score', dataType: DataType.Number }, - { key: 'passed', title: 'Passed', dataType: DataType.Boolean }, - { key: 'nextTry', title: 'Next Try', dataType: DataType.Date }, - { key: 'editColumn', width: 80 }, - ], - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - data: dataArray, - rowKeyField: 'id', - validation: ({ column, value }) => { - if (column.key === 'name'){ - return value ? '' : 'value must be specified'; - } - } -}; - const EditingDemoRow: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + data={dataArray} + rowKeyField={'id'} + validation= {({ column, value }) => { + if (column.key === 'name'){ + return value ? '' : 'value must be specified'; + } + }} childComponents={{ cellText: { content: (props) => { @@ -110,7 +99,6 @@ const EditingDemoRow: React.FC = () => { } } }} - dispatch={dispatch} /> ); diff --git a/src/Demos/EditingTableDemo/EditingTableDemo.tsx b/src/Demos/EditingTableDemo/EditingTableDemo.tsx index d9969d1a..82768989 100644 --- a/src/Demos/EditingTableDemo/EditingTableDemo.tsx +++ b/src/Demos/EditingTableDemo/EditingTableDemo.tsx @@ -1,11 +1,9 @@ import './EditingTableDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { openAllEditors, saveAllEditors, validate } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table, useTable } from '../../lib'; +import { openAllEditors } from '../../lib/actionCreators'; import { kaPropsUtils } from '../../lib/utils'; const dataArray = Array(3) @@ -18,49 +16,44 @@ const dataArray = Array(3) 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 }, - { key: 'value', title: 'Value', dataType: DataType.String } - ], - data: dataArray, - validation: ({ column, value }) => { - if (column.key === 'value') { - return value ? '' : 'value must be specified'; - } - }, - rowKeyField: 'id', - singleAction: openAllEditors() -}; - const AddRowDemo = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = action => { - changeTableProps(prevState => kaReducer(prevState, action)); - }; - + const table = useTable(); const updateCells = () => { - if (kaPropsUtils.isValid(tableProps)) { - dispatch(saveAllEditors()); + if (kaPropsUtils.isValid(table.props)) { + table.saveAllEditors(); } else { - dispatch(validate()); + table.validate(); } }; return (
- -
+ +
{ + if (column.key === 'value') { + return value ? '' : 'value must be specified'; + } + }} + rowKeyField={'id'} + singleAction={openAllEditors()} + />

Table Data:

- 
{JSON.stringify(tableProps.data, null, 2)}
+ 
{JSON.stringify(table.props.data, null, 2)}
); diff --git a/src/Demos/EventsDemo/EventsDemo.tsx b/src/Demos/EventsDemo/EventsDemo.tsx index 2c5f038d..31118786 100644 --- a/src/Demos/EventsDemo/EventsDemo.tsx +++ b/src/Demos/EventsDemo/EventsDemo.tsx @@ -2,10 +2,8 @@ import './EventsDemo.scss'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { Table, useTable } from '../../lib'; import { DataType, EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; -import { ChildComponents } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; import { EventsLog } from './EventsLog'; const dataArray = Array(20).fill(undefined).map( @@ -18,83 +16,78 @@ const dataArray = Array(20).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - filteringMode: FilteringMode.FilterRow, - height: 300, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - -const childComponents: ChildComponents = { - cell: { - elementAttributes: () => ({ - className: 'my-cell-class', - onClick: (e, extendedEvent) => { - const { childProps: { dispatch } } = extendedEvent; - dispatch({ type: 'MY_CELL_onClick', ...{ extendedEvent }}); - }, - }) - }, - cellText: { - elementAttributes: () => ({ - className: 'my-cell-text-class', - onClick: (e, extendedEvent) => { - const { childProps: { dispatch } } = extendedEvent; - dispatch({ type: 'MY_CELL_TEXT_onClick', ...{ extendedEvent }}); - }, - onContextMenu: (e, extendedEvent) => { - extendedEvent.dispatch({ type: 'MY_CELL_onContextMenu', ...{ extendedEvent }}); - }, - onDoubleClick: (e, extendedEvent) => { - const { dispatch, childElementAttributes } = extendedEvent; - dispatch({ type: 'MY_CELL_TEXT_onDoubleClick', ...{ extendedEvent }}); - childElementAttributes.onClick!(e); - }, - }) - }, - dataRow: { - elementAttributes: () => ({ - onClick: (e, extendedEvent) => { - const { childProps: { dispatch } } = extendedEvent; - dispatch({ type: 'MY_ROW_onClick', ...{ extendedEvent }}); - } - }), - }, - table: { - elementAttributes: () => ({ - onMouseEnter: (e, extendedEvent) => { - const { dispatch } = extendedEvent; - dispatch({ type: 'MY_TABLE_onMouseEnter', ...{ extendedEvent }}); - }, - onMouseLeave: (e, extendedEvent) => { - const { dispatch } = extendedEvent; - dispatch({ type: 'MY_TABLE_onMouseLeave', ...{ extendedEvent }}); - } - }), - }, -}; const EventsDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); const [events, changeEvents] = useState([] as any []); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - changeEvents((prevValue) => ([{ type: action.type, data: action, date: new Date(), showData: false }, ...prevValue])); - }; + const table = useTable({ + onDispatch: (action) => { + changeEvents((prevValue) => ([{ type: action.type, data: action, date: new Date(), showData: false }, ...prevValue])); + } + }); return (
({ + className: 'my-cell-class', + onClick: (e, extendedEvent) => { + const { childProps: { dispatch } } = extendedEvent; + dispatch({ type: 'MY_CELL_onClick', ...{ extendedEvent }}); + }, + }) + }, + cellText: { + elementAttributes: () => ({ + className: 'my-cell-text-class', + onClick: (e, extendedEvent) => { + const { childProps: { dispatch } } = extendedEvent; + dispatch({ type: 'MY_CELL_TEXT_onClick', ...{ extendedEvent }}); + }, + onContextMenu: (e, extendedEvent) => { + extendedEvent.dispatch({ type: 'MY_CELL_onContextMenu', ...{ extendedEvent }}); + }, + onDoubleClick: (e, extendedEvent) => { + const { dispatch, childElementAttributes } = extendedEvent; + dispatch({ type: 'MY_CELL_TEXT_onDoubleClick', ...{ extendedEvent }}); + childElementAttributes.onClick!(e); + }, + }) + }, + dataRow: { + elementAttributes: () => ({ + onClick: (e, extendedEvent) => { + const { childProps: { dispatch } } = extendedEvent; + dispatch({ type: 'MY_ROW_onClick', ...{ extendedEvent }}); + } + }), + }, + table: { + elementAttributes: () => ({ + onMouseEnter: (e, extendedEvent) => { + const { dispatch } = extendedEvent; + dispatch({ type: 'MY_TABLE_onMouseEnter', ...{ extendedEvent }}); + }, + onMouseLeave: (e, extendedEvent) => { + const { dispatch } = extendedEvent; + dispatch({ type: 'MY_TABLE_onMouseLeave', ...{ extendedEvent }}); + } + }), + }, + }} /> ({ @@ -16,22 +13,14 @@ const dataArray = Array(7).fill(undefined).map( }), ); -const tablePropsInit: ITableProps = { - columns: [ +const ExportDemo: React.FC = () => { + const data = dataArray; + const 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 }, { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - rowKeyField: 'id', -}; - -const ExportDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + ]; return (
@@ -40,8 +29,8 @@ const ExportDemo: React.FC = () => { marginLeft: 20 }}> ({ label: c.title!, key: c.key! }))} + data={dataArray} + headers={columns.map(c => ({ label: c.title!, key: c.key! }))} filename='ka-table.data.csv' enclosingCharacter={''} separator={';'}> @@ -49,8 +38,9 @@ const ExportDemo: React.FC = () => {
); diff --git a/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx b/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx index cc0b8d0b..b9b1d493 100644 --- a/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx +++ b/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx @@ -1,11 +1,9 @@ import 'jspdf-autotable'; import jsPDF from 'jspdf'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table, useTable } from '../../lib'; import { getValueByColumn } from '../../lib/Utils/DataUtils'; const dataArray = Array(2000).fill(undefined).map( @@ -18,30 +16,12 @@ const dataArray = Array(2000).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - virtualScrolling: { - enabled: true - }, - data: dataArray, - rowKeyField: 'id', -}; - const ExportToPdfDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - + const table = useTable(); const exportClick = (orientation?: any) => { const doc: any = new jsPDF(orientation); - const head = [tableProps.columns.map(c => c.title)]; - const body = tableProps.data!.map(d => tableProps.columns.map(c => getValueByColumn(d, c))); + const head = [table.props.columns.map(c => c.title)]; + const body = table.props.data!.map(d => table.props.columns.map(c => getValueByColumn(d, c))); doc.autoTable({ margin: 1, headStyles: { fillColor: '#F1F5F7', textColor: '#747D86' }, @@ -63,8 +43,18 @@ const ExportToPdfDemo: React.FC = () => {
); diff --git a/src/Demos/FilterExtendedDemo/FilterExtendedDemo.tsx b/src/Demos/FilterExtendedDemo/FilterExtendedDemo.tsx index fc6ce9fb..b67494bf 100644 --- a/src/Demos/FilterExtendedDemo/FilterExtendedDemo.tsx +++ b/src/Demos/FilterExtendedDemo/FilterExtendedDemo.tsx @@ -1,10 +1,9 @@ +import { DataType, Table } from '../../lib'; import React, { useState } from 'react'; + +import { EditingMode } from '../../lib/enums'; import FilterControl from 'react-filter-control'; import { IFilterControlFilterValue } from 'react-filter-control/interfaces'; - -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; import { filterData } from './filterData'; const dataArray: any[] = [ @@ -17,52 +16,55 @@ const dataArray: any[] = [ { id: 7, name: 'Tom Bruce', score: 67, passed: false }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String }, - { key: 'score', title: 'Score', dataType: DataType.Number }, - { key: 'passed', title: 'Passed', dataType: DataType.Boolean }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', -}; - -const fields = [{ - caption: 'Name', - name: 'name', - operators: [{ - caption: 'Contains', - name: 'contains', - }, { - caption: 'Does not Contain', - name: 'doesNotContain', - }], -}, { - caption: 'Score', - name: 'score', - operators: [{ - caption: 'Equals', - name: '=', - }, { - caption: 'Does not Equal', - name: '<>', - }, { - caption: 'More than', - name: '>', - }, { - caption: 'Less than', - name: '<', - }], -}]; +const fields = [ + { + caption: 'Name', + name: 'name', + operators: [ + { + caption: 'Contains', + name: 'contains', + }, + { + caption: 'Does not Contain', + name: 'doesNotContain', + }, + ], + }, + { + caption: 'Score', + name: 'score', + operators: [ + { + caption: 'Equals', + name: '=', + }, + { + caption: 'Does not Equal', + name: '<>', + }, + { + caption: 'More than', + name: '>', + }, + { + caption: 'Less than', + name: '<', + }, + ], + }, +]; -const groups = [{ - caption: 'And', - name: 'and', -}, { - caption: 'Or', - name: 'or', -}]; +const groups = [ + { + caption: 'And', + name: 'and', + }, + { + caption: 'Or', + name: 'or', + }, +]; const filter: IFilterControlFilterValue = { groupName: 'and', items: [ @@ -82,10 +84,6 @@ const filter: IFilterControlFilterValue = { }; const FilterExtendedDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; const [filterValue, changeFilter] = useState(filter); const onFilterChanged = (newFilterValue: IFilterControlFilterValue) => { changeFilter(newFilterValue); @@ -93,11 +91,17 @@ const FilterExtendedDemo: React.FC = () => { return ( <>
- +
filterData(data, filterValue)} /> diff --git a/src/Demos/FilterRowCustomEditorDemo/FilterRowCustomEditorDemo.tsx b/src/Demos/FilterRowCustomEditorDemo/FilterRowCustomEditorDemo.tsx index 5cb1921c..3d8fe227 100644 --- a/src/Demos/FilterRowCustomEditorDemo/FilterRowCustomEditorDemo.tsx +++ b/src/Demos/FilterRowCustomEditorDemo/FilterRowCustomEditorDemo.tsx @@ -1,8 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { updateFilterRowOperator, updateFilterRowValue } from '../../lib/actionCreators'; -import { DataType, EditingMode, FilteringMode } from '../../lib/enums'; +import { EditingMode, FilteringMode } from '../../lib/enums'; import { Column } from '../../lib/models'; import { IFilterRowEditorProps } from '../../lib/props'; import { DispatchFunc } from '../../lib/types'; @@ -103,57 +103,49 @@ const DateEditor: React.FC = ({ ); }; -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.Boolean, - filterRowValue: false, - key: 'passed', - style: {width: 90}, - title: 'Passed', - }, - { - dataType: DataType.String, - key: 'name', - style: {width: 100}, - title: 'Name', - }, - { - dataType: DataType.Number, - filterRowOperator: '>=', - filterRowValue: 45, - key: 'score', - style: {width: 120}, - title: 'Score', - }, - { - dataType: DataType.Date, - filterRowOperator: '<=', - filterRowValue: new Date(2021, 11, 11), - key: 'nextTry', - style: {width: 220}, - title: 'Next Try', - }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - filteringMode: FilteringMode.FilterRow, - rowKeyField: 'id', -}; - const FilterRowCustomEditorDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
=', + filterRowValue: 45, + key: 'score', + style: {width: 120}, + title: 'Score', + }, + { + dataType: DataType.Date, + filterRowOperator: '<=', + filterRowValue: new Date(2021, 11, 11), + key: 'nextTry', + style: {width: 220}, + title: 'Next Try', + }, + ]} + data={dataArray} + editingMode={EditingMode.Cell} + format= {({ column, value }) => { + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + filteringMode= {FilteringMode.FilterRow} + rowKeyField={'id'} childComponents={{ cellEditor: { content: (props) => { @@ -173,7 +165,6 @@ const FilterRowCustomEditorDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx b/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx index 2c9ccb3c..933aa6f3 100644 --- a/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx +++ b/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx @@ -1,9 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import FilterRowNumber from '../../lib/Components/FilterRowNumber/FilterRowNumber'; -import { DataType, FilteringMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { FilteringMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, prevScores: [60, 65, 70], passed: true, nextTry: new Date(2021, 10, 9) }, @@ -15,59 +14,50 @@ const dataArray: any[] = [ { id: 7, name: 'Alex Brzowsky', score: 48, prevScores: [50, 47, 43], passed: false, nextTry: new Date(2021, 11, 11) }, ]; - -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.Boolean, - filterRowValue: false, - key: 'passed', - style: {width: 90}, - title: 'Passed', - }, - { - dataType: DataType.String, - key: 'name', - style: {width: 100}, - title: 'Name', - }, - { - dataType: DataType.Number, - key: 'score', - style: {width: 120}, - title: 'Score', - }, - { - dataType: DataType.Object, - filterRowValue: 60, - key: 'prevScores', - style: {width: 120}, - title: 'Previous Scores', - } - ], - data: dataArray, - format: ({ column, value }) => { - if (column.key === 'prevScores'){ - return value.join(); - } - }, - filter: ({ column }) => { - if (column.key === 'prevScores') { - return (value: number[], filterRowValue: number) => value.includes(Number(filterRowValue)); - } - }, - filteringMode: FilteringMode.FilterRow, - rowKeyField: 'id', -}; - const FilterRowCustomLogicDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ + if (column.key === 'prevScores'){ + return value.join(); + } + }} + filter= {({ column }) => { + if (column.key === 'prevScores') { + return (value: number[], filterRowValue: number) => value.includes(Number(filterRowValue)); + } + }} + filteringMode={FilteringMode.FilterRow} + rowKeyField={'id'} childComponents={{ filterRowCell: { content: (props) => { @@ -77,7 +67,6 @@ const FilterRowCustomLogicDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/FilterRowDemo/FilterRowDemo.tsx b/src/Demos/FilterRowDemo/FilterRowDemo.tsx index 9d6c55cb..6f31e2a3 100644 --- a/src/Demos/FilterRowDemo/FilterRowDemo.tsx +++ b/src/Demos/FilterRowDemo/FilterRowDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, FilteringMode, SortDirection } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { FilteringMode, SortDirection } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true, nextTry: new Date(2021, 10, 9) }, @@ -13,37 +12,27 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false, nextTry: new Date(2021, 10, 9) }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String, sortDirection: SortDirection.Descend, filterRowValue: 'Billi Bob' }, - { key: 'score', title: 'Score', dataType: DataType.Number }, - { key: 'passed', title: 'Passed', dataType: DataType.Boolean }, - { - dataType: DataType.Date, - key: 'nextTry', - title: 'Next Try', - }, - ], - data: dataArray, - filteringMode: FilteringMode.FilterRow, - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - rowKeyField: 'id', -}; - const FilterRowDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + rowKeyField={'id'} /> ); }; diff --git a/src/Demos/FixedColumnDemo/FixedColumnDemo.tsx b/src/Demos/FixedColumnDemo/FixedColumnDemo.tsx index eb44f7c2..138d199f 100644 --- a/src/Demos/FixedColumnDemo/FixedColumnDemo.tsx +++ b/src/Demos/FixedColumnDemo/FixedColumnDemo.tsx @@ -1,9 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode, SortingMode } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; +import { EditingMode, SortingMode } from '../../lib/enums'; import { Column } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; const columns: Column[] = Array(20).fill(undefined).map( (_, index) => ({ @@ -21,25 +20,15 @@ const dataArray = Array(30).fill(undefined).map( }, { id: index }), ); -const tablePropsInit: ITableProps = { - columns, - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const FixedColumnDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ diff --git a/src/Demos/GetDataByPropsDemo/GetDataByPropsDemo.tsx b/src/Demos/GetDataByPropsDemo/GetDataByPropsDemo.tsx index 2d153907..57b9df2f 100644 --- a/src/Demos/GetDataByPropsDemo/GetDataByPropsDemo.tsx +++ b/src/Demos/GetDataByPropsDemo/GetDataByPropsDemo.tsx @@ -1,11 +1,9 @@ import './GetDataByPropsDemo.scss'; +import { DataType, EditingMode, FilteringMode, SortDirection, SortingMode } from '../../lib/enums'; import React, { useState } from 'react'; +import { Table, useTable } from '../../lib'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { search } from '../../lib/actionCreators'; -import { DataType, EditingMode, FilteringMode, SortDirection, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; import { kaPropsUtils } from '../../lib/utils'; const dataArray: any[] = [ @@ -17,53 +15,51 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false, nextTry: new Date(2019, 10, 9, 10) }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { dataType: DataType.String, key: 'name', title: 'Name', sortDirection: SortDirection.Ascend }, - { key: 'score', title: 'Score', dataType: DataType.Number }, - { - dataType: DataType.Boolean, - key: 'passed', - title: 'Passed', - }, - { - dataType: DataType.Date, - key: 'nextTry', - title: 'Next Try', - }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - format: ({ column, value }) => { - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - rowKeyField: 'id', - filteringMode: FilteringMode.FilterRow, - sortingMode: SortingMode.Single, -}; const GetDataByPropsDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - - const data = kaPropsUtils.getData(tableProps); + const [printData, setPrintData] = useState(); + const [searchText, setSearchText] = useState(); + const table = useTable(); return (
- { - dispatch(search(event.currentTarget.value)); + { + setSearchText(event.currentTarget.value); }} className='top-element'/>
{ + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + rowKeyField={'id'} + filteringMode={FilteringMode.FilterRow} + sortingMode={SortingMode.Single} />

Table Data:

- 
{JSON.stringify(data, null, 2)}
+ + 
{JSON.stringify(printData, null, 2)}
); diff --git a/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.tsx b/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.tsx index 01753cb3..239e5a30 100644 --- a/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.tsx +++ b/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.tsx @@ -1,11 +1,10 @@ import './GroupedColumnsDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, SortingMode } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; +import { SortingMode } from '../../lib/enums'; import { Column } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; const columns: Column[] = Array(15).fill(undefined).map( (_, index) => ({ @@ -23,46 +22,36 @@ const dataArray = Array(30).fill(undefined).map( }), { id: index }), ); -const tablePropsInit: ITableProps = { - columnResizing: true, - groupedColumns: [ { - key: 'grouped.column1', - title: 'Group 1', - columnsKeys: ['grouped.column2', 'grouped.column3'] - }, { - key: 'grouped.column2', - title: 'Subgroup 1', - columnsKeys: ['column1', 'column2'] - }, { - key: 'grouped.column3', - title: 'Subgroup 2', - columnsKeys: ['column3', 'column4', 'column5'] - }, { - key: 'grouped.column4', - title: 'Group 2', - columnsKeys: ['column7', 'column8'] - }, { - key: 'grouped.column5', - title: 'Group 3', - columnsKeys: ['column9', 'column10', 'column14'] - }], - columns, - data: dataArray, - rowKeyField: 'id', - sortingMode: SortingMode.Single -}; - const GroupedColumnsDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
); diff --git a/src/Demos/GroupingCustomCellDemo/GroupingCustomCellDemo.tsx b/src/Demos/GroupingCustomCellDemo/GroupingCustomCellDemo.tsx index 39b4ce91..887c1537 100644 --- a/src/Demos/GroupingCustomCellDemo/GroupingCustomCellDemo.tsx +++ b/src/Demos/GroupingCustomCellDemo/GroupingCustomCellDemo.tsx @@ -1,8 +1,6 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; const dataArray = [ { id: 1, type: 'Cat', name: 'Kas', country: 'Czech Republic', age: 2 }, @@ -12,43 +10,35 @@ const dataArray = [ { id: 5, type: 'Cat', name: 'Hash', country: 'Czech Republic', age: 8 }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'type', - title: 'TYPE', - }, - { - dataType: DataType.String, - key: 'name', - title: 'NAME', - }, - { - dataType: DataType.String, - key: 'country', - title: 'COUNTRY', - }, - { - dataType: DataType.Number, - key: 'age', - width: '50%', - title: 'AGE', - }, - ], - data: dataArray, - groups: [{ columnKey: 'country' }, { columnKey: 'type' }], - rowKeyField: 'id', -}; - const GroupingCustomCellDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ @@ -61,7 +51,6 @@ const GroupingCustomCellDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/GroupingCustomRowDemo/GroupingCustomRowDemo.tsx b/src/Demos/GroupingCustomRowDemo/GroupingCustomRowDemo.tsx index e74c18ca..39cc4a52 100644 --- a/src/Demos/GroupingCustomRowDemo/GroupingCustomRowDemo.tsx +++ b/src/Demos/GroupingCustomRowDemo/GroupingCustomRowDemo.tsx @@ -1,11 +1,9 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { updateGroupsExpanded } from '../../lib/actionCreators'; import EmptyCells from '../../lib/Components/EmptyCells/EmptyCells'; -import { DataType } from '../../lib/enums'; import { IGroupRowProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; const dataArray = [ { id: 1, type: 'Cat', name: 'Kas', country: 'Czech Republic', age: 2 }, @@ -34,49 +32,40 @@ const GroupRow: React.FunctionComponent = ({ ); -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'type', - title: 'TYPE', - }, - { - dataType: DataType.String, - key: 'name', - title: 'NAME', - }, - { - dataType: DataType.String, - key: 'country', - title: 'COUNTRY', - }, - { - dataType: DataType.Number, - key: 'age', - width: '50%', - title: 'AGE', - }, - ], - data: dataArray, - groups: [{ columnKey: 'country' }, { columnKey: 'type' }], - rowKeyField: 'id', -}; - const GroupingCustomRowDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
); }; diff --git a/src/Demos/GroupingDemo/GroupingDemo.tsx b/src/Demos/GroupingDemo/GroupingDemo.tsx index fffb68e7..1c00bc6f 100644 --- a/src/Demos/GroupingDemo/GroupingDemo.tsx +++ b/src/Demos/GroupingDemo/GroupingDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { EditingMode } from '../../lib/enums'; const dataArray = [ { id: 1, type: 'Cat', name: 'Kas', country: 'Czech Republic', age: 2 }, @@ -12,28 +11,19 @@ const dataArray = [ { id: 5, type: 'Cat', name: 'Hash', country: 'Czech Republic', age: 8 }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'type', title: 'TYPE', dataType: DataType.String }, - { key: 'name', title: 'NAME', dataType: DataType.String }, - { key: 'country', title: 'COUNTRY', dataType: DataType.String }, - { key: 'age', title: 'AGE', dataType: DataType.Number, width: '50%' }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - groups: [{ columnKey: 'country' }, { columnKey: 'type' }], - rowKeyField: 'id', -}; - const GroupingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
); }; diff --git a/src/Demos/GroupingSummaryDemo/GroupingSummaryDemo.tsx b/src/Demos/GroupingSummaryDemo/GroupingSummaryDemo.tsx index 3c16bf4d..5f68e270 100644 --- a/src/Demos/GroupingSummaryDemo/GroupingSummaryDemo.tsx +++ b/src/Demos/GroupingSummaryDemo/GroupingSummaryDemo.tsx @@ -1,8 +1,6 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; const dataArray = [ { id: 1, type: 'Cat', name: 'Kas', country: 'Czech Republic', age: 2 }, @@ -12,26 +10,18 @@ const dataArray = [ { id: 5, type: 'Cat', name: 'Hash', country: 'Czech Republic', age: 8 }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'type', title: 'TYPE', dataType: DataType.String }, - { key: 'name', title: 'NAME', dataType: DataType.String }, - { key: 'country', title: 'COUNTRY', dataType: DataType.String }, - { key: 'age', title: 'AGE', dataType: DataType.Number, width: '50%' }, - ], - data: dataArray, - groups: [{ columnKey: 'country', enableSummary: false }, { columnKey: 'type', enableSummary: true }], - rowKeyField: 'id', -}; - const GroupingSummaryDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ @@ -43,7 +33,6 @@ const GroupingSummaryDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx b/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx index b01635d7..4b6ec960 100644 --- a/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx +++ b/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, FilteringMode, SortDirection, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { FilteringMode, SortDirection, SortingMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true, nextTry: new Date(2021, 10, 8) }, @@ -13,49 +12,38 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false, nextTry: new Date(2021, 10, 9) }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { - key: 'name', - title: 'Name', dataType: DataType.String, sortDirection: SortDirection.Descend, - }, - { - key: 'score', - title: 'Score', dataType: DataType.Number - }, - { - key: 'passed', - title: 'Passed', - dataType: DataType.Boolean - }, - { - key: 'nextTry', - dataType: DataType.Date, - title: 'Next Try', - }, - ], - data: dataArray, - sortingMode: SortingMode.Single, - filteringMode: FilteringMode.HeaderFilter, - format: ({ column, value }) => { - if (column.dataType === DataType.Date) { - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - rowKeyField: 'id', -}; - const HeaderFilterDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
{ + if (column.dataType === DataType.Date) { + return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + rowKeyField={'id'} childComponents={{ headFilterButton: { content: ({ column: {key}}) => key === 'name' && <>, diff --git a/src/Demos/HoverRowDemo/HoverRowDemo.tsx b/src/Demos/HoverRowDemo/HoverRowDemo.tsx index 5f33c697..64864627 100644 --- a/src/Demos/HoverRowDemo/HoverRowDemo.tsx +++ b/src/Demos/HoverRowDemo/HoverRowDemo.tsx @@ -2,43 +2,13 @@ import './HoverRowDemo.scss'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; import { ChildComponents } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; import dataArray from './data'; const ROW_MOUSE_ENTER = 'ROW_MOUSE_ENTER'; const ROW_MOUSE_LEAVE = 'ROW_MOUSE_LEAVE'; -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'name', - title: 'Representative', - }, - { - dataType: DataType.String, - key: 'phoneNumber', - title: 'Phone', - }, - { - dataType: DataType.Boolean, - key: 'hasLoyalProgram', - title: 'Loyal Program', - }, - { - dataType: DataType.String, - field: 'name', - key: 'company.name', - title: 'Company Name', - }, - ], - data: dataArray, - rowKeyField: 'id', -}; - const childAttributes: ChildComponents = { dataRow: { elementAttributes: (props) => ({ @@ -60,19 +30,35 @@ const childAttributes: ChildComponents = { }; const HoverRowDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const [selectedItem, changeSelectedItem] = useState(); - const dispatch: DispatchFunc = (action) => { - if (action.type === ROW_MOUSE_ENTER || action.type === ROW_MOUSE_LEAVE) { - changeSelectedItem(dataArray.find((i) => i.id === action.rowKeyValue)); - } - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const [selectedItem] = useState(); return (
{ selectedItem && ( diff --git a/src/Demos/InfiniteScrollingDemo/InfiniteScrollingDemo.tsx b/src/Demos/InfiniteScrollingDemo/InfiniteScrollingDemo.tsx index ab70466a..7a5f05f6 100644 --- a/src/Demos/InfiniteScrollingDemo/InfiniteScrollingDemo.tsx +++ b/src/Demos/InfiniteScrollingDemo/InfiniteScrollingDemo.tsx @@ -1,62 +1,56 @@ +import { DataType, Table, useTable } from '../../lib'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { hideLoading, showLoading, updateData } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; import serverEmulator from './serverEmulator'; const LOAD_MORE_DATA = 'LOAD_MORE_DATA'; -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - rowKeyField: 'id', - virtualScrolling: { - enabled: true - }, - singleAction: { type: LOAD_MORE_DATA } -}; - const InfiniteScrollingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); const [pageIndex, changePageIndex] = useState(0); - const dispatch: DispatchFunc = async (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - if (pageIndex !== -1) { - if (action.type === LOAD_MORE_DATA) { - dispatch(showLoading()); - const result = await serverEmulator.get(pageIndex); - changePageIndex(result.pageIndex); - dispatch(updateData([...tableProps.data || [], ...result.data])); - dispatch(hideLoading()); + const table = useTable({ + onDispatch: async (action) => { + if (pageIndex !== -1) { + if (action.type === LOAD_MORE_DATA) { + table.showLoading(); + const result = await serverEmulator.get(pageIndex); + changePageIndex(result.pageIndex); + table.updateData([...(table.props.data || []), ...result.data]); + table.hideLoading(); + } } - } - }; + }, + }); return (
({ onScroll: (event, { baseFunc }) => { baseFunc(event); - const element = event.currentTarget; + const element = event.currentTarget; const BOTTOM_OFFSET = 20; if (element.offsetHeight + element.scrollTop >= element.scrollHeight - BOTTOM_OFFSET) { - dispatch({ type: LOAD_MORE_DATA }); + table.dispatch({ type: LOAD_MORE_DATA }); } }, - style: { maxHeight: 600 } - }) - } + style: { maxHeight: 600 }, + }), + }, }} /> ); diff --git a/src/Demos/InsertRowDemo/InsertRowDemo.tsx b/src/Demos/InsertRowDemo/InsertRowDemo.tsx index 96fe6d0d..374147fe 100644 --- a/src/Demos/InsertRowDemo/InsertRowDemo.tsx +++ b/src/Demos/InsertRowDemo/InsertRowDemo.tsx @@ -1,9 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { insertRow } from '../../lib/actionCreators'; -import { DataType, EditingMode, InsertRowPosition } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table, useTable } from '../../lib'; +import { EditingMode, InsertRowPosition } from '../../lib/enums'; const dataArray = Array(7).fill(undefined).map( (_, index) => ({ @@ -20,39 +18,33 @@ const generateNewId = () => { return maxValue; }; -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 }, - { - key: 'insertRowBeforeColumn', - width: 200 - }, - { - key: 'insertRowAfterColumn', - width: 200 - }, - ], - editingMode: EditingMode.Cell, - data: dataArray, - rowKeyField: 'id', -}; - const InsertRowDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const table = useTable(); return (
{ @@ -64,7 +56,7 @@ const InsertRowDemo: React.FC = () => { id, column1: `column:1 rowId:${id}`, }; - dispatch(insertRow(newRow, { rowKeyValue: props.rowKeyValue })) + table.insertRow(newRow, { rowKeyValue: props.rowKeyValue }) }}> Insert Row Before @@ -78,7 +70,7 @@ const InsertRowDemo: React.FC = () => { id, column1: `column:1 rowId:${id}`, }; - dispatch(insertRow(newRow, { rowKeyValue: props.rowKeyValue, insertRowPosition: InsertRowPosition.after })) + table.insertRow(newRow, { rowKeyValue: props.rowKeyValue, insertRowPosition: InsertRowPosition.after }) }}> Insert Row After @@ -87,7 +79,6 @@ const InsertRowDemo: React.FC = () => { } }, }} - dispatch={dispatch} /> ); diff --git a/src/Demos/JsonDemo/JsonDemo.tsx b/src/Demos/JsonDemo/JsonDemo.tsx index ebbece95..91e6cfc7 100644 --- a/src/Demos/JsonDemo/JsonDemo.tsx +++ b/src/Demos/JsonDemo/JsonDemo.tsx @@ -1,39 +1,33 @@ +import { ActionType, SortDirection, SortingMode } from '../../lib/enums'; +import { DataType, Table, useTable } from '../../lib'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { loadData, updateData } from '../../lib/actionCreators'; -import { ActionType, DataType, SortDirection, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; - -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String }, - { key: 'score', title: 'Score', dataType: DataType.Number, sortDirection: SortDirection.Ascend }, - { key: 'passed', title: 'Passed', dataType: DataType.Boolean }, - ], - singleAction: loadData(), - sortingMode: SortingMode.Single, - rowKeyField: 'id', -}; - -const JsonDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - - const dispatch: DispatchFunc = async (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - - if (action.type === ActionType.LoadData) { - const response = await fetch('https://komarovalexander.github.io/ka-table/data/employees.json'); - const data = await response.json(); - dispatch(updateData(data)); +const JsonDemo = () => { + const [data, setData] = useState(); + const table = useTable({ + onDispatch: async (action) => { + if (action.type === ActionType.ComponentDidMount) { + table.showLoading(); + const response = await fetch('https://komarovalexander.github.io/ka-table/data/employees.json'); + const jsonData = await response.json(); + setData(jsonData); + table.hideLoading(); + } } - }; + }); return (
); diff --git a/src/Demos/KeyboardNavigationDemo/KeyboardNavigationDemo.tsx b/src/Demos/KeyboardNavigationDemo/KeyboardNavigationDemo.tsx index 14512644..68f10e2c 100644 --- a/src/Demos/KeyboardNavigationDemo/KeyboardNavigationDemo.tsx +++ b/src/Demos/KeyboardNavigationDemo/KeyboardNavigationDemo.tsx @@ -1,14 +1,9 @@ import './KeyboardNavigation.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { - clearFocused, moveFocusedDown, moveFocusedLeft, moveFocusedRight, moveFocusedUp, openEditor, - setFocused, updatePageIndex, updateSortDirection, -} from '../../lib/actionCreators'; -import { DataType, EditingMode, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table, useTable } from '../../lib'; +import { EditingMode, SortingMode } from '../../lib/enums'; const dataArray = Array(100).fill(undefined).map( (_, index) => ({ @@ -20,98 +15,91 @@ const dataArray = Array(100).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - rowKeyField: 'id', - sortingMode: SortingMode.Single, - editingMode: EditingMode.Cell, - paging: { - enabled: true, - pageIndex: 0, - pageSize: 10, - }, - focused: { - cell: { - columnKey: 'column4', - rowKeyValue: 2 - } - } -}; - const KeyboardNavigationDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const table = useTable(); return (
{ if (isEditableCell) return undefined; const cell = { columnKey: column.key, rowKeyValue } - const isFocused = cell.columnKey === tableProps.focused?.cell?.columnKey - && cell.rowKeyValue === tableProps.focused?.cell?.rowKeyValue; + const isFocused = cell.columnKey === table.props.focused?.cell?.columnKey + && cell.rowKeyValue === table.props.focused?.cell?.rowKeyValue; return { tabIndex: 0, ref: (ref: any) => isFocused && ref?.focus(), onKeyUp: (e) => { switch (e.keyCode){ - case 39: dispatch(moveFocusedRight({ end: e.ctrlKey })); break; - case 37: dispatch(moveFocusedLeft({ end: e.ctrlKey })); break; - case 38: dispatch(moveFocusedUp({ end: e.ctrlKey })); break; - case 40: dispatch(moveFocusedDown({ end: e.ctrlKey })); break; + case 39: table.moveFocusedRight({ end: e.ctrlKey }); break; + case 37: table.moveFocusedLeft({ end: e.ctrlKey }); break; + case 38: table.moveFocusedUp({ end: e.ctrlKey }); break; + case 40: table.moveFocusedDown({ end: e.ctrlKey }); break; case 13: - dispatch(openEditor(cell.rowKeyValue, cell.columnKey)); - dispatch(setFocused({ cellEditorInput: cell })); + table.openEditor(cell.rowKeyValue, cell.columnKey); + table.setFocused({ cellEditorInput: cell }); break; } }, - onFocus: () => !isFocused && dispatch(setFocused({ cell: { columnKey: column.key, rowKeyValue } })), + onFocus: () => !isFocused && table.setFocused({ cell: { columnKey: column.key, rowKeyValue } }), onKeyDown: (e) => e.keyCode !== 9 && e.preventDefault(), - onBlur: () => isFocused && dispatch(clearFocused()) + onBlur: () => isFocused && table.clearFocused() } }, }, cellEditorInput: { elementAttributes: ({column, rowKeyValue}) => { - const isFocused = column.key === tableProps.focused?.cellEditorInput?.columnKey - && rowKeyValue === tableProps.focused?.cellEditorInput?.rowKeyValue; + const isFocused = column.key === table.props.focused?.cellEditorInput?.columnKey + && rowKeyValue === table.props.focused?.cellEditorInput?.rowKeyValue; const cell = { columnKey: column.key, rowKeyValue }; return { ref: (ref: any) => isFocused && ref?.focus(), - onKeyUp: (e) => e.keyCode === 13 && dispatch(setFocused({ cell })), + onKeyUp: (e) => e.keyCode === 13 && table.setFocused({ cell }), onBlur: (e, {baseFunc}) => { baseFunc(); - dispatch(clearFocused()) + table.clearFocused() }, - onFocus: () => !isFocused && dispatch(setFocused({ cell: { columnKey: column.key, rowKeyValue } })), + onFocus: () => !isFocused && table.setFocused({ cell: { columnKey: column.key, rowKeyValue } }), } }, }, pagingIndex: { elementAttributes: (props) => ({ tabIndex: 0, - onKeyUp: (e) => e.keyCode === 13 && dispatch(updatePageIndex(props.pageIndex)) + onKeyUp: (e) => e.keyCode === 13 && table.updatePageIndex(props.pageIndex) }), }, headCell: { elementAttributes: (props) => ({ tabIndex: 0, - onKeyUp: (e) => e.keyCode === 13 && dispatch(updateSortDirection(props.column.key)) + onKeyUp: (e) => e.keyCode === 13 && table.updateSortDirection(props.column.key) }), }, }} - dispatch={dispatch} /> ); diff --git a/src/Demos/LoadingDemo/LoadingDemo.tsx b/src/Demos/LoadingDemo/LoadingDemo.tsx index e06a68b5..2ecd29ad 100644 --- a/src/Demos/LoadingDemo/LoadingDemo.tsx +++ b/src/Demos/LoadingDemo/LoadingDemo.tsx @@ -1,49 +1,44 @@ import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { hideLoading, showLoading } from '../../lib/actionCreators'; import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { Table } from '../../lib'; -const dataArray = Array(10).fill(undefined).map( - (_, index) => ({ +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}`, id: index, - }), -); - -const tableOption: 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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - loading: { - enabled: true, - text: 'Loading data' - }, - rowKeyField: 'id', -}; + })); const LoadingDemo: React.FC = () => { - const [option, changeOptions] = useState(tableOption); - const dispatch: DispatchFunc = (action) => { - changeOptions((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const [loading, setLoading] = useState(true); return ( <> -
); diff --git a/src/Demos/ManyColumnsDemo/ManyColumnsDemo.tsx b/src/Demos/ManyColumnsDemo/ManyColumnsDemo.tsx index 176b81b5..f1274c69 100644 --- a/src/Demos/ManyColumnsDemo/ManyColumnsDemo.tsx +++ b/src/Demos/ManyColumnsDemo/ManyColumnsDemo.tsx @@ -1,9 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode, SortingMode } from '../../lib/enums'; +import { DataType, Table } from '../../lib'; +import { EditingMode, SortingMode } from '../../lib/enums'; import { Column } from '../../lib/models'; -import { DispatchFunc } from '../../lib/types'; const columns: Column[] = Array(100).fill(undefined).map( (_, index) => ({ @@ -21,24 +20,14 @@ const dataArray = Array(30).fill(undefined).map( }, { id: index }), ); -const tablePropsInit: ITableProps = { - columns, - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const ManyColumnsDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
); }; diff --git a/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx b/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx index 6a6925fa..3e41d152 100644 --- a/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx +++ b/src/Demos/ManyRowsDemo/ManyRowsDemo.tsx @@ -1,8 +1,6 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; const dataArray = Array(100000).fill(undefined).map( (_, index) => ({ @@ -14,30 +12,20 @@ const dataArray = Array(100000).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - rowKeyField: 'id', - virtualScrolling: { - enabled: true - }, -}; - const ManyRowsDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
({ style: { maxHeight: 600 }}) diff --git a/src/Demos/ManyRowsDynamicDemo/ManyRowsDynamicDemo.tsx b/src/Demos/ManyRowsDynamicDemo/ManyRowsDynamicDemo.tsx index e673b908..218ab35a 100644 --- a/src/Demos/ManyRowsDynamicDemo/ManyRowsDynamicDemo.tsx +++ b/src/Demos/ManyRowsDynamicDemo/ManyRowsDynamicDemo.tsx @@ -1,9 +1,9 @@ -import { LoremIpsum } from 'lorem-ipsum'; +import { ITableProps, Table, kaReducer } from '../../lib'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; import { DataType } from '../../lib/enums'; import { DispatchFunc } from '../../lib/types'; +import { LoremIpsum } from 'lorem-ipsum'; const lorem = new LoremIpsum({ wordsPerSentence: { @@ -12,15 +12,15 @@ const lorem = new LoremIpsum({ }, }); -const dataArray = Array(10000).fill(undefined).map( - (_, index) => ({ +const dataArray = Array(10000) + .fill(undefined) + .map((_, index) => ({ column1: lorem.generateWords(), column2: `column:2 row:${index}`, column3: `column:3 row:${index}`, column4: `column:4 row:${index}`, id: index, - }), -); + })); const tablePropsInit: ITableProps = { columns: [ @@ -32,24 +32,28 @@ const tablePropsInit: ITableProps = { data: dataArray, rowKeyField: 'id', virtualScrolling: { - enabled: true + enabled: true, }, }; -const useDynamicRowsOptions = ({ rowKeyField } : ITableProps) => { +const useDynamicRowsOptions = ({ rowKeyField }: ITableProps) => { const [renderedRowSizes] = useState({}); let estimatedItemSize = 40; - const addRowHeight = (rowData: any, height?: number) => { if (height) { renderedRowSizes[rowData[rowKeyField]] = height; } }; + const addRowHeight = (rowData: any, height?: number) => { + if (height) { + renderedRowSizes[rowData[rowKeyField]] = height; + } + }; const totalHeight = Object.keys(renderedRowSizes).reduce((sum, key) => sum + parseFloat(renderedRowSizes[key] || 0), 0); - estimatedItemSize = estimatedItemSize === 40 && Object.keys(renderedRowSizes).length - ? Math.floor(totalHeight / Object.keys(renderedRowSizes).length) - : estimatedItemSize; + estimatedItemSize = + estimatedItemSize === 40 && Object.keys(renderedRowSizes).length + ? Math.floor(totalHeight / Object.keys(renderedRowSizes).length) + : estimatedItemSize; return { addRowHeight, - itemHeight: (rowData: any) => renderedRowSizes[rowData[rowKeyField]] || estimatedItemSize - } -} - + itemHeight: (rowData: any) => renderedRowSizes[rowData[rowKeyField]] || estimatedItemSize, + }; +}; const ManyRowsDynamicDemo: React.FC = () => { const [tableProps, changeTableProps] = useState(tablePropsInit); @@ -70,12 +74,12 @@ const ManyRowsDynamicDemo: React.FC = () => { childComponents={{ dataRow: { elementAttributes: ({ rowData }) => ({ - ref: (ref: any) => addRowHeight(rowData, ref?.offsetHeight) + ref: (ref: any) => addRowHeight(rowData, ref?.offsetHeight), }), }, tableWrapper: { - elementAttributes: () => ({ style: { maxHeight: 600 }}) - } + elementAttributes: () => ({ style: { maxHeight: 600 } }), + }, }} /> ); diff --git a/src/Demos/ManyRowsGroupingDemo/ManyRowsGroupingDemo.tsx b/src/Demos/ManyRowsGroupingDemo/ManyRowsGroupingDemo.tsx index 6ba0834d..0de4d314 100644 --- a/src/Demos/ManyRowsGroupingDemo/ManyRowsGroupingDemo.tsx +++ b/src/Demos/ManyRowsGroupingDemo/ManyRowsGroupingDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { SortingMode } from '../../lib/enums'; const dataArray = Array(10000).fill(undefined).map( (_, index) => ({ @@ -14,32 +13,22 @@ const dataArray = Array(10000).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - groups: [{ columnKey: 'column1'}, { columnKey: 'column2' }], - rowKeyField: 'id', - sortingMode: SortingMode.Single, - virtualScrolling: { - enabled: true - }, -}; - const ManyRowsGroupingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
({ style: { maxHeight: 600 }}) diff --git a/src/Demos/ManyRowsMemoDemo/ManyRowsMemoDemo.tsx b/src/Demos/ManyRowsMemoDemo/ManyRowsMemoDemo.tsx index 7ea4c071..bdff5d02 100644 --- a/src/Demos/ManyRowsMemoDemo/ManyRowsMemoDemo.tsx +++ b/src/Demos/ManyRowsMemoDemo/ManyRowsMemoDemo.tsx @@ -1,10 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import DataRowContent from '../../lib/Components/DataRowContent/DataRowContent'; -import { DataType } from '../../lib/enums'; import { IDataRowProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; let dataArray: any[]; @@ -23,31 +21,22 @@ const getDataArray = () => { return dataArray; }; -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - rowKeyField: 'id', - virtualScrolling: { - enabled: true - }, -}; - const DataRowContentMemo = React.memo((props: IDataRowProps) => , () => true); const ManyRowsMemoDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState({ ...tablePropsInit, data: getDataArray() }); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
({ style: {lineHeight: '25px'} }), diff --git a/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx b/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx index a8982aed..1f32ca49 100644 --- a/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx +++ b/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx @@ -1,18 +1,17 @@ +import { DataType, Table, useTableInstance } from '../../lib'; +import { EditingMode, FilteringMode, SortDirection, SortingMode } from '../../lib/enums'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { search, updateFilterRowValue } from '../../lib/actionCreators'; -import { DataType, EditingMode, FilteringMode, SortDirection, SortingMode } from '../../lib/enums'; import { IFilterRowEditorProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; -import { kaDateUtils } from '../../lib/utils'; import dataArray from './data'; +import { kaDateUtils } from '../../lib/utils'; const CustomDateFilterEditor: React.FC = ({ - column, dispatch, + column, }) => { const fieldValue = column.filterRowValue; const value = fieldValue && kaDateUtils.getDateInputValue(fieldValue); + const table = useTableInstance(); return (
<>Less than: @@ -22,88 +21,81 @@ const CustomDateFilterEditor: React.FC = ({ onChange={(event) => { const targetValue = event.currentTarget.value; const filterRowValue = targetValue ? new Date(targetValue) : null; - dispatch(updateFilterRowValue(column.key, filterRowValue)); + table.updateFilterRowValue(column.key, filterRowValue); }} />
); }; -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'representative.name', - width: 150, - title: 'Representative', - }, - { - dataType: DataType.Boolean, - key: 'company.hasLoyalProgram', - title: 'Loyal Program', - }, - { - dataType: DataType.String, - filterRowValue: 'e', - key: 'product.name', - width: 110, - title: 'Product', - }, - { - dataType: DataType.Number, - key: 'product.price', - sortDirection: SortDirection.Ascend, - width: 110, - style: { - textAlign: 'right', - }, - title: 'Product Price', - }, - { - dataType: DataType.Date, - filterRowOperator: '<', - filterRowValue: new Date(2015, 1, 2), - key: 'firstDealDate', - width: 190, - style: { - textAlign: 'center', - }, - title: 'First Deal Date', - }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - format: ({ column, value }) => { - if (column.key === 'company.hasLoyalProgram'){ - return `Loyal program: ${ value == null ? 'Unspecified' : (value ? 'Yes' : 'No')}`; - } - if (column.key === 'price'){ - return value == null ? '-' : `$${value}`; - } - if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); - } - }, - filteringMode: FilteringMode.FilterRow, - groups: [{ columnKey: 'company.hasLoyalProgram' }], - groupsExpanded: [[true]], - rowKeyField: 'id', - searchText: 'i', - sortingMode: SortingMode.Single, -}; - const NullableCellDataDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const [searchText, setSearchText] = useState('i'); return ( <> - { - dispatch(search(event.currentTarget.value)); + { + setSearchText(event.currentTarget.value); }} className='top-element'/>
{ + if (column.key === 'company.hasLoyalProgram'){ + return `Loyal program: ${ value == null ? 'Unspecified' : (value ? 'Yes' : 'No')}`; + } + if (column.key === 'price'){ + return value == null ? '-' : `$${value}`; + } + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }} + filteringMode={FilteringMode.FilterRow} + groups={[{ columnKey: 'company.hasLoyalProgram' }]} + groupsExpanded={[[true]]} + rowKeyField={'id'} + searchText={searchText} + sortingMode={SortingMode.Single} childComponents={{ filterRowCell: { content: (props) => { @@ -113,7 +105,6 @@ const NullableCellDataDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); diff --git a/src/Demos/OverviewDemo/OverviewDemo.tsx b/src/Demos/OverviewDemo/OverviewDemo.tsx index 6ace1940..f5a5280a 100644 --- a/src/Demos/OverviewDemo/OverviewDemo.tsx +++ b/src/Demos/OverviewDemo/OverviewDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { Table } from '../../lib'; import { DataType, EditingMode, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(10).fill(undefined).map( (_, index) => ({ @@ -14,29 +13,20 @@ const dataArray = Array(10).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; const OverviewDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
); }; diff --git a/src/Demos/PagingDemo/PagingDemo.tsx b/src/Demos/PagingDemo/PagingDemo.tsx index 4774f991..41a06abb 100644 --- a/src/Demos/PagingDemo/PagingDemo.tsx +++ b/src/Demos/PagingDemo/PagingDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { Table, useTable } from '../../lib'; import { DataType, EditingMode, PagingPosition, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; const dataArray = Array(180).fill(undefined).map( (_, index) => ({ @@ -14,46 +13,39 @@ const dataArray = Array(180).fill(undefined).map( }), ); -const tablePropsInit: ITableProps = { - columns: [ - { key: 'id', title: 'Id', dataType: DataType.Number, isEditable: false }, - { key: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column2', title: 'Column 2', dataType: DataType.String }, - { key: 'column3', title: 'Column 3', dataType: DataType.String }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - paging: { - enabled: true, - pageIndex: 0, - pageSize: 10, - pageSizes: [5, 10, 15], - position: PagingPosition.Bottom - }, - sortingMode: SortingMode.Single, - editingMode: EditingMode.Cell, - rowKeyField: 'id', -}; - const PagingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const table = useTable(); return ( <> Paging position:
); diff --git a/src/Demos/PrintDemo/PrintDemo.tsx b/src/Demos/PrintDemo/PrintDemo.tsx index 30335a04..3a5daf88 100644 --- a/src/Demos/PrintDemo/PrintDemo.tsx +++ b/src/Demos/PrintDemo/PrintDemo.tsx @@ -1,11 +1,9 @@ import './PrintDemo.scss'; -import React, { useRef, useState } from 'react'; +import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; const dataArray = Array(180).fill(undefined).map( (_, index) => ({ @@ -17,22 +15,7 @@ const dataArray = Array(180).fill(undefined).map( }), ); -const tableOption: 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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - rowKeyField: 'id', -}; - const PrintDemo: React.FC = () => { - const [option, changeOptions] = useState(tableOption); - const dispatch: DispatchFunc = (action) => { - changeOptions((prevState: ITableProps) => kaReducer(prevState, action)); - }; const componentRef = useRef(); return ( @@ -43,8 +26,14 @@ const PrintDemo: React.FC = () => { />
diff --git a/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx b/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx index 58be66bb..bbd2dacc 100644 --- a/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx +++ b/src/Demos/RemoteDataDemo/RemoteDataDemo.tsx @@ -1,57 +1,53 @@ +import { DataType, Table, useTable } from '../../lib'; +import { QueryClient, QueryClientProvider } from 'react-query'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { - hideLoading, loadData, setSingleAction, showLoading, updateData, updatePagesCount, -} from '../../lib/actionCreators'; -import { ActionType, DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; -import serverEmulator from './serverEmulator'; +import { ActionType } from '../../lib/enums'; +import { useGet } from './serverEmulator'; -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - loading: { - enabled: true - }, - paging: { - enabled: true, - pageIndex: 0, - pageSize: 10 - }, - singleAction: loadData(), - rowKeyField: 'id', -}; - -const RemoteDataDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - - const dispatch: DispatchFunc = async (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - - if (action.type === ActionType.LoadData) { - dispatch(showLoading()); - const result = await serverEmulator.get(tableProps.paging, tableProps.columns, action?.pageIndex); - dispatch(updatePagesCount(result.pagesCount)); - dispatch(updateData(result.data)); - dispatch(hideLoading()); - } else if (action.type === ActionType.UpdatePageIndex) { - dispatch(setSingleAction(loadData())); +const RemoteDataTable = () => { + const [pageIndex, setPageIndex] = useState(0); + const getQuery = useGet(pageIndex); + const table = useTable({ + onDispatch: async (action) => { + if (action.type === ActionType.UpdatePageIndex) { + setPageIndex(action.pageIndex); + } } - }; + }); return (
); }; +export const queryClient = new QueryClient(); + +const RemoteDataDemo = () => ( + + + +); + export default RemoteDataDemo; diff --git a/src/Demos/RemoteDataDemo/serverEmulator.ts b/src/Demos/RemoteDataDemo/serverEmulator.ts index bd1b52b8..afee9241 100644 --- a/src/Demos/RemoteDataDemo/serverEmulator.ts +++ b/src/Demos/RemoteDataDemo/serverEmulator.ts @@ -1,9 +1,10 @@ - -import { Column, PagingOptions } from '../../lib/models'; import { getPageData, getPagesCount } from '../../lib/Utils/PagingUtils'; + +import { DataType } from '../../lib'; import { sortData } from '../../lib/Utils/SortUtils'; +import { useQuery } from 'react-query'; -let dataArray = Array(100).fill(undefined).map( +const dataArray = Array(100).fill(undefined).map( (_, index) => ({ column1: `column:1 row:${index}`, column2: `column:2 row:${index}`, @@ -13,9 +14,20 @@ let dataArray = Array(100).fill(undefined).map( }), ); -const get = (paging?: PagingOptions, columns?: Column[], pageIndexNew?: number): Promise => { - return new Promise((resolve) => { +export const useGet = (pageIndexNew?: number) => { + return useQuery(['useGet', pageIndexNew], () => new Promise((resolve) => { setTimeout(() => { + const paging = { + enabled: true, + pageIndex: pageIndexNew, + pageSize: 10 + }; + const 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 }, + { key: 'column4', title: 'Column 4', dataType: DataType.String }, + ] const sortedData = columns ? sortData(columns, dataArray) : dataArray; const data = getPageData(sortedData, { ...paging, @@ -26,26 +38,7 @@ const get = (paging?: PagingOptions, columns?: Column[], pageIndexNew?: number): data, pagesCount: getPagesCount(dataArray, { ...paging, pagesCount: undefined }) }); - }, 1000); - }); -}; - -const update = (id: any, data: any): Promise => { - for (let i = 0; i < dataArray.length; i++) { - if (dataArray[i].id === id) { - dataArray[i] = {...dataArray[i], ...data}; - } - } - return new Promise((resolve) => {resolve()}); -}; - -const deleteRow = (id: any): Promise => { - dataArray = dataArray.filter((d) => d.id !== id); - return new Promise((resolve) => {resolve()}); -}; - -export default { - delete: deleteRow, - get, - update, -}; + }, 1000)}), { + cacheTime: 0 + }); +} diff --git a/src/Demos/RemoteDataEditingDemo/RemoteDataEditingDemo.tsx b/src/Demos/RemoteDataEditingDemo/RemoteDataEditingDemo.tsx index 0686479d..e88e02be 100644 --- a/src/Demos/RemoteDataEditingDemo/RemoteDataEditingDemo.tsx +++ b/src/Demos/RemoteDataEditingDemo/RemoteDataEditingDemo.tsx @@ -1,65 +1,60 @@ +import { ActionType, EditingMode, SortingMode } from '../../lib/enums'; +import { DataType, Table, useTable } from '../../lib'; +import { QueryClient, QueryClientProvider } from 'react-query'; import React, { useState } from 'react'; +import { useDelete, useGet, useUpdate } from './serverEmulator'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { - hideLoading, loadData, setSingleAction, showLoading, updateData, updatePagesCount, -} from '../../lib/actionCreators'; -import { ActionType, DataType, EditingMode, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { Column } from '../../lib/models'; import { DeleteRow } from './components'; -import serverEmulator from './serverEmulator'; +import { ReactQueryDevtools } from 'react-query/devtools'; -const tablePropsInit: ITableProps = { - columns: [ +const RemoteDataEditingTable = () => { + const [columns, setColumns] = useState([ { key: 'column1', title: 'Column 1', dataType: DataType.String }, { key: 'column2', title: 'Column 2', dataType: DataType.String }, { key: 'column3', title: 'Column 3', dataType: DataType.String }, { key: 'column4', title: 'Column 4', dataType: DataType.String }, { key: ':delete', width: 70, style: { textAlign: 'center' }}, - ], - editingMode: EditingMode.Cell, - loading: { - enabled: true - }, - singleAction: loadData(), - paging: { - enabled: true, - pageIndex: 0, - pageSize: 10 - }, - sortingMode: SortingMode.SingleTripleStateRemote, - rowKeyField: 'id', -}; - -const RemoteDataEditingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - - const dispatch: DispatchFunc = async (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - - if (action.type === ActionType.DeleteRow) { - dispatch(showLoading()); - await serverEmulator.delete(action.rowKeyValue); - dispatch(setSingleAction(loadData())); - } else if (action.type === ActionType.UpdateCellValue) { - dispatch(showLoading()); - await serverEmulator.update(action.rowKeyValue, { [action.columnKey]: action.value }); - dispatch(setSingleAction(loadData())); - } else if (action.type === ActionType.UpdateSortDirection || action.type === ActionType.UpdatePageIndex) { - dispatch(setSingleAction(loadData())); - } else if (action.type === ActionType.LoadData) { - dispatch(showLoading()); - const result = await serverEmulator.get(tableProps.paging, tableProps.columns, action?.pageIndex); - dispatch(updatePagesCount(result.pagesCount)); - dispatch(updateData(result.data)); - dispatch(hideLoading()); + ]); + const [pageIndex, setPageIndex] = useState(0); + const getQuery = useGet(pageIndex, columns); + const { mutateAsync: deleteItem, isLoading: deleting } = useDelete(); + const { mutateAsync: updateItem, isLoading: updating } = useUpdate(); + const table = useTable({ + onDispatch: async (action, newState) => { + if (action.type === ActionType.UpdatePageIndex) { + setPageIndex(action.pageIndex); + } + if (action.type === ActionType.DeleteRow) { + await deleteItem(action.rowKeyValue); + } + if (action.type === ActionType.UpdateCellValue) { + await updateItem({ id: action.rowKeyValue, data: { [action.columnKey]: action.value } }); + } + if (action.type === ActionType.UpdateSortDirection) { + setColumns(newState.columns) + } } - }; + }); return (
{ @@ -69,10 +64,20 @@ const RemoteDataEditingDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; + +export const queryClient = new QueryClient(); + +const RemoteDataEditingDemo = () => ( + + + + + +); + export default RemoteDataEditingDemo; diff --git a/src/Demos/RemoteDataEditingDemo/serverEmulator.ts b/src/Demos/RemoteDataEditingDemo/serverEmulator.ts index bd1b52b8..f5bb89b5 100644 --- a/src/Demos/RemoteDataEditingDemo/serverEmulator.ts +++ b/src/Demos/RemoteDataEditingDemo/serverEmulator.ts @@ -1,6 +1,7 @@ - -import { Column, PagingOptions } from '../../lib/models'; import { getPageData, getPagesCount } from '../../lib/Utils/PagingUtils'; +import { useMutation, useQuery, useQueryClient } from 'react-query'; + +import { Column } from '../../lib/models'; import { sortData } from '../../lib/Utils/SortUtils'; let dataArray = Array(100).fill(undefined).map( @@ -13,39 +14,55 @@ let dataArray = Array(100).fill(undefined).map( }), ); -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, - pageIndex: pageIndexNew != null ? pageIndexNew : paging?.pageIndex - }); - resolve({ - data, - pagesCount: getPagesCount(dataArray, { ...paging, pagesCount: undefined }) - }); - }, 1000); +export const useGet = (pageIndexNew: number, columns: Column[]) => { + return useQuery(['useGet', pageIndexNew, JSON.stringify(columns)], async () => { + return new Promise((resolve) => { + setTimeout(() => { + const paging = { + enabled: true, + pageIndex: pageIndexNew, + pageSize: 10 + }; + const sortedData = columns ? sortData(columns, dataArray) : dataArray; + const data = getPageData(sortedData, { + ...paging, + pagesCount: undefined, + pageIndex: pageIndexNew != null ? pageIndexNew : paging?.pageIndex + }); + resolve({ + data, + pagesCount: getPagesCount(dataArray, { ...paging, pagesCount: undefined }) + }); + }, 1000)}); + }, { + cacheTime: 0 }); -}; +} -const update = (id: any, data: any): Promise => { - for (let i = 0; i < dataArray.length; i++) { - if (dataArray[i].id === id) { - dataArray[i] = {...dataArray[i], ...data}; - } - } - return new Promise((resolve) => {resolve()}); +export const useUpdate = () => { + const queryClient = useQueryClient(); + return useMutation(({id, data}: {id: any, data: any}) => new Promise((resolve) => { + setTimeout(async () => { + for (let i = 0; i < dataArray.length; i++) { + if (dataArray[i].id === id) { + dataArray[i] = {...dataArray[i], ...data}; + } + } + await queryClient.refetchQueries(); + resolve({}); + }, 1000)}) + ); }; -const deleteRow = (id: any): Promise => { - dataArray = dataArray.filter((d) => d.id !== id); - return new Promise((resolve) => {resolve()}); +export const useDelete = () => { + const queryClient = useQueryClient(); + return useMutation(async (id: any) => new Promise((resolve) => { + setTimeout(async () => { + dataArray = dataArray.filter((d) => d.id !== id); + await queryClient.refetchQueries(); + resolve({}); + }, 1000); + }) + ); }; -export default { - delete: deleteRow, - get, - update, -}; diff --git a/src/Demos/ResponsiveDemo/ResponsiveDemo.tsx b/src/Demos/ResponsiveDemo/ResponsiveDemo.tsx index 38cfb74a..fa862056 100644 --- a/src/Demos/ResponsiveDemo/ResponsiveDemo.tsx +++ b/src/Demos/ResponsiveDemo/ResponsiveDemo.tsx @@ -1,11 +1,10 @@ // open TS Example or JS Example to see how to override styles import './ResponsiveDemo.scss'; -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { EditingMode } from '../../lib/enums'; const dataArray = Array(10).fill(undefined).map( (_, index) => ({ @@ -17,29 +16,19 @@ const dataArray = Array(10).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', -}; - const ResponsiveDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
({ diff --git a/src/Demos/RowReorderingDemo/RowReorderingDemo.tsx b/src/Demos/RowReorderingDemo/RowReorderingDemo.tsx index 51eeca76..23a6bfe7 100644 --- a/src/Demos/RowReorderingDemo/RowReorderingDemo.tsx +++ b/src/Demos/RowReorderingDemo/RowReorderingDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { EditingMode } from '../../lib/enums'; const dataArray = Array(10).fill(undefined).map( (_, index) => ({ @@ -14,29 +13,21 @@ const dataArray = Array(10).fill(undefined).map( }), ); -const tablePropsInit: ITableProps = { - columns: [ - { key: 'drag', width: 50, isEditable: false, title: '' }, - { key: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column2', title: 'Column 2', dataType: DataType.String }, - { key: 'column3', title: 'Column 3', dataType: DataType.String }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - editingMode: EditingMode.Cell, - rowKeyField: 'id', - rowReordering: true, -}; - const RowReorderingDemo: React.FC = () => { - const [columnChooserProps, changeColumnChooserProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeColumnChooserProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ @@ -46,7 +37,6 @@ const RowReorderingDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); diff --git a/src/Demos/SearchDemo/SearchDemo.tsx b/src/Demos/SearchDemo/SearchDemo.tsx index c99652ba..0ff1a904 100644 --- a/src/Demos/SearchDemo/SearchDemo.tsx +++ b/src/Demos/SearchDemo/SearchDemo.tsx @@ -1,10 +1,6 @@ +import { DataType, Table } from '../../lib'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { search } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; - const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true }, { id: 2, name: 'Billi Bob', score: 55, passed: false }, @@ -14,40 +10,32 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String, width: '45%' }, - { key: 'score', title: 'Score', dataType: DataType.Number, width: '15%' }, - { dataType: DataType.Boolean, key: 'passed', title: 'Passed' }, - ], - data: dataArray, - search: ({ searchText, rowData, column }) => { - if (column.key === 'passed'){ - return (searchText === 'false' && !rowData.passed) || (searchText === 'true' && rowData.passed); - } - }, - rowKeyField: 'id', - searchText: 'Billi Bob', -}; - const SearchDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const [searchText, setSearchText] = useState('Billi Bob'); return ( <> - { - dispatch(search(event.currentTarget.value)); + { + setSearchText(event.currentTarget.value); }} className='top-element'/>
{ + if (column.key === 'passed'){ + return (searchTextValue === 'false' && !rowData.passed) || (searchTextValue === 'true' && rowData.passed); + } + }} + rowKeyField={'id'} + searchText={searchText} childComponents={{ noDataRow: { content: () => 'No Data Found' } }} - dispatch={dispatch} /> ); diff --git a/src/Demos/SelectionDemo/SelectionDemo.tsx b/src/Demos/SelectionDemo/SelectionDemo.tsx index c4d79135..5c0d0d3f 100644 --- a/src/Demos/SelectionDemo/SelectionDemo.tsx +++ b/src/Demos/SelectionDemo/SelectionDemo.tsx @@ -1,122 +1,104 @@ import './SelectionDemo.scss'; -import React, { useState } from 'react'; - -import { ITableProps, kaReducer, Table } from '../../lib'; -import { - deselectAllFilteredRows, deselectRow, selectAllFilteredRows, selectRow, selectRowsRange, -} from '../../lib/actionCreators'; import { DataType, FilteringMode, SortingMode } from '../../lib/enums'; -import { ICellTextProps, IHeadCellProps } from '../../lib/props'; -import { DispatchFunc } from '../../lib/types'; +import { Table, useTableInstance } from '../../lib'; + +import { ICellTextProps } from '../../lib/props'; +import React from 'react'; import { kaPropsUtils } from '../../lib/utils'; -const dataArray = Array(64).fill(undefined).map( - (_, index) => ({ +const dataArray = Array(64) + .fill(undefined) + .map((_, index) => ({ column1: `column:1 row:${index}`, column2: `column:2 row:${index}`, column3: `column:3 row:${index}`, column4: `column:4 row:${index}`, id: index, - }), -); + })); -const SelectionCell: React.FC = ({ - rowKeyValue, dispatch, isSelectedRow, selectedRows -}) => { +const SelectionCell: React.FC = ({ rowKeyValue, isSelectedRow, selectedRows }) => { + const table = useTableInstance(); return ( { - if (event.nativeEvent.shiftKey){ - dispatch(selectRowsRange(rowKeyValue, [...selectedRows].pop())); + if (event.nativeEvent.shiftKey) { + table.selectRowsRange(rowKeyValue, [...selectedRows].pop()); } else if (event.currentTarget.checked) { - dispatch(selectRow(rowKeyValue)); + table.selectRow(rowKeyValue); } else { - dispatch(deselectRow(rowKeyValue)); + table.deselectRow(rowKeyValue); } }} /> ); }; -const SelectionHeader: React.FC = ({ - dispatch, areAllRowsSelected, -}) => { +const SelectionHeader = () => { + const table = useTableInstance(); + const areAllRowsSelected = kaPropsUtils.areAllFilteredRowsSelected(table.props); + return ( { if (event.currentTarget.checked) { - dispatch(selectAllFilteredRows()); // also available: selectAllVisibleRows(), selectAllRows() + table.selectAllFilteredRows(); // also available: selectAllVisibleRows(), selectAllRows() } else { - dispatch(deselectAllFilteredRows()); // also available: deselectAllVisibleRows(), deselectAllRows() + table.deselectAllFilteredRows(); // also available: deselectAllVisibleRows(), deselectAllRows() } }} /> ); }; -const tablePropsInit: ITableProps = { - columns: [ - { - key: 'selection-cell', - }, - { key: 'column1', title: 'Column 1', dataType: DataType.String }, - { key: 'column2', title: 'Column 2', dataType: DataType.String }, - { key: 'column3', title: 'Column 3', dataType: DataType.String }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - paging: { - enabled: true, - }, - data: dataArray, - rowKeyField: 'id', - selectedRows: [3, 5], - sortingMode: SortingMode.Single, - filteringMode: FilteringMode.FilterRow, -}; - const SelectionDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ - if (props.column.key === 'selection-cell'){ - return + if (props.column.key === 'selection-cell') { + return ; } - } + }, }, filterRowCell: { content: (props) => { - if (props.column.key === 'selection-cell'){ + if (props.column.key === 'selection-cell') { return <>; } - } + }, }, headCell: { content: (props) => { - if (props.column.key === 'selection-cell'){ - return ( - - ); + if (props.column.key === 'selection-cell') { + return ; } - } - } + }, + }, }} - dispatch={dispatch} /> ); diff --git a/src/Demos/SelectionSingleDemo/SelectionSingleDemo.tsx b/src/Demos/SelectionSingleDemo/SelectionSingleDemo.tsx index 50148050..d3450bb0 100644 --- a/src/Demos/SelectionSingleDemo/SelectionSingleDemo.tsx +++ b/src/Demos/SelectionSingleDemo/SelectionSingleDemo.tsx @@ -1,71 +1,70 @@ import './SelectionSingleDemo.scss'; +import { DataType, Table, useTable } from '../../lib'; import React, { useState } from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { deselectAllRows, selectSingleRow } from '../../lib/actionCreators'; -import { DataType } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; -import { kaPropsUtils } from '../../lib/utils'; import dataArray from './data'; - -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'name', - title: 'Representative', - }, - { - dataType: DataType.String, - key: 'phoneNumber', - title: 'Phone', - }, - { - dataType: DataType.Boolean, - key: 'hasLoyalProgram', - title: 'Loyal Program', - }, - { - dataType: DataType.String, - field: 'name', - key: 'company.name', - title: 'Company Name', - }, - ], - data: dataArray, - rowKeyField: 'id', -}; +import { kaPropsUtils } from '../../lib/utils'; const SelectionSingleDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; + const [selectedData, changeSelectedData] = useState(); + const table = useTable({ + onDispatch: (action, tableProps) => { + const selected = kaPropsUtils.getSelectedData(tableProps).pop(); + changeSelectedData(selected); + }, + }); - const selectedData = kaPropsUtils.getSelectedData(tableProps).pop(); return (
({ onClick: (event, extendedEvent) => { - extendedEvent.dispatch(selectSingleRow(extendedEvent.childProps.rowKeyValue)); + table.selectSingleRow(extendedEvent.childProps.rowKeyValue); }, - }) + }), }, }} /> - { selectedData && ( + {selectedData && (
Selected: {selectedData.name} ({selectedData.company.name}) - +
)} diff --git a/src/Demos/SortingCustomLogicDemo/SortingCustomLogicDemo.tsx b/src/Demos/SortingCustomLogicDemo/SortingCustomLogicDemo.tsx index f04e27ce..3340adcd 100644 --- a/src/Demos/SortingCustomLogicDemo/SortingCustomLogicDemo.tsx +++ b/src/Demos/SortingCustomLogicDemo/SortingCustomLogicDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, SortDirection, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { SortDirection, SortingMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, prevScores: [59, 65, 70], passed: true }, @@ -14,63 +13,53 @@ const dataArray: any[] = [ { id: 7, name: 'Alex Brzowsky', score: 48, prevScores: [50, 47, 43], passed: false }, ]; - -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.Boolean, - key: 'passed', - style: {width: 90}, - title: 'Passed', - }, - { - dataType: DataType.String, - key: 'name', - style: {width: 100}, - title: 'Name', - }, - { - dataType: DataType.Number, - key: 'score', - style: {width: 120}, - title: 'Score', - }, - { - dataType: DataType.Object, - sortDirection: SortDirection.Ascend, - key: 'prevScores', - style: {width: 120}, - title: 'Previous Scores', - } - ], - data: dataArray, - format: ({ column, value }) => { - if (column.key === 'prevScores'){ - return value.join(); - } - }, - sort: ({ column }) => { - if (column.key === 'prevScores'){ - return (a, b) => a[0] === b[0] - ? 0 - : a[0] < b[0] - ? column.sortDirection === SortDirection.Ascend ? -1 : 1 - : column.sortDirection === SortDirection.Ascend ? 1 : -1; - } - }, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const SortingCustomLogicDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ + if (column.key === 'prevScores'){ + return value.join(); + } + }} + sort= {({ column }) => { + if (column.key === 'prevScores'){ + return (a, b) => a[0] === b[0] + ? 0 + : a[0] < b[0] + ? column.sortDirection === SortDirection.Ascend ? -1 : 1 + : column.sortDirection === SortDirection.Ascend ? 1 : -1; + } + }} + rowKeyField={'id'} + sortingMode={SortingMode.Single} /> ); }; diff --git a/src/Demos/SortingDemo/SortingDemo.tsx b/src/Demos/SortingDemo/SortingDemo.tsx index 6d31e00f..71ce2927 100644 --- a/src/Demos/SortingDemo/SortingDemo.tsx +++ b/src/Demos/SortingDemo/SortingDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, SortDirection, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { SortDirection, SortingMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true, faculty: 'Economics', comment: 'Well done!' }, @@ -13,56 +12,46 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false, faculty: 'Mathematics', comment: 'It was just a bad day :)' }, ]; - -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.Boolean, - key: 'passed', - style: {width: 90}, - title: 'Passed', - }, - { - dataType: DataType.String, - key: 'name', - style: {width: 100}, - title: 'Name', - }, - { - dataType: DataType.Number, - key: 'score', - sortDirection: SortDirection.Ascend, - style: {width: 120}, - title: 'Score', - }, - { - dataType: DataType.String, - key: 'faculty', - style: {width: 150}, - title: 'Faculty (Custom icon)', - }, - { - dataType: DataType.String, - key: 'comment', - style: {width: 150}, - isSortable: false, - title: 'Comment (sorting disabled)', - } - ], - data: dataArray, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const SortingDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ diff --git a/src/Demos/StateStoringDemo/StateStoringDemo.tsx b/src/Demos/StateStoringDemo/StateStoringDemo.tsx index 26558d60..d01cbec7 100644 --- a/src/Demos/StateStoringDemo/StateStoringDemo.tsx +++ b/src/Demos/StateStoringDemo/StateStoringDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; - -import { ITableProps, kaReducer, Table } from '../../lib'; import { DataType, EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { Table, useTable } from '../../lib'; + +import React from 'react'; const initDataArray = [ { id: 1, type: 'Cat', name: 'Kas', country: 'Czech Republic', age: 2 }, @@ -12,40 +11,34 @@ const initDataArray = [ { id: 5, type: 'Cat', name: 'Hash', country: 'Czech Republic', age: 8 }, ]; -const defaultOption: ITableProps = { - columns: [ - { key: 'type', title: 'TYPE', dataType: DataType.String, isResizable: true }, - { key: 'name', title: 'NAME', dataType: DataType.String, isResizable: true }, - { key: 'country', title: 'COUNTRY', dataType: DataType.String, isResizable: true }, - { key: 'age', title: 'AGE', dataType: DataType.Number, width: '50%', isResizable: true }, - ], - data: initDataArray, - editingMode: EditingMode.Cell, - filteringMode: FilteringMode.FilterRow, - groups: [{ columnKey: 'country' }, { columnKey: 'type' }], - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const OPTION_KEY = 'state-storing-demo-table-option'; -const tablePropsInit: ITableProps = {...defaultOption, ...JSON.parse(localStorage.getItem(OPTION_KEY) || '0')}; +const savedOptions = {...JSON.parse(localStorage.getItem(OPTION_KEY) || '0')}; const StateStoringDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => { - const newState = kaReducer(prevState, action); - const { data, ...settingsWithoutData } = newState; + const table = useTable({ + onDispatch: (action, newProps) => { + const { data, ...settingsWithoutData } = newProps; localStorage.setItem(OPTION_KEY, JSON.stringify(settingsWithoutData)); - return newState; - }); - }; + } + }); return ( <>
); diff --git a/src/Demos/SummaryDemo/SummaryDemo.tsx b/src/Demos/SummaryDemo/SummaryDemo.tsx index 62ac2e0e..32865427 100644 --- a/src/Demos/SummaryDemo/SummaryDemo.tsx +++ b/src/Demos/SummaryDemo/SummaryDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { SortingMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true }, @@ -13,25 +12,17 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String, width: '45%' }, - { key: 'score', title: 'Score', dataType: DataType.Number, width: '15%', style: { textAlign: 'right' } }, - { dataType: DataType.Boolean, key: 'passed', title: 'Passed', style: {textAlign: 'right' } }, - ], - data: dataArray, - sortingMode: SortingMode.Single, - rowKeyField: 'id' -}; - const SummaryDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; return (
{ @@ -52,7 +43,6 @@ const SummaryDemo: React.FC = () => { } } }} - dispatch={dispatch} /> ); }; diff --git a/src/Demos/TabIndexDemo/TabIndexDemo.tsx b/src/Demos/TabIndexDemo/TabIndexDemo.tsx index ac02b635..6fa4f265 100644 --- a/src/Demos/TabIndexDemo/TabIndexDemo.tsx +++ b/src/Demos/TabIndexDemo/TabIndexDemo.tsx @@ -1,10 +1,9 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, Table } from '../../lib'; import { openEditor, updateSortDirection } from '../../lib/actionCreators'; import CellEditorString from '../../lib/Components/CellEditorString/CellEditorString'; -import { DataType, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { SortingMode } from '../../lib/enums'; import useKaFocusRef from './hook'; const dataArray = Array(10).fill(undefined).map( @@ -17,24 +16,7 @@ const dataArray = Array(10).fill(undefined).map( }), ); -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 }, - { key: 'column4', title: 'Column 4', dataType: DataType.String }, - ], - data: dataArray, - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const TabIndexDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - const kaFocusRef = useKaFocusRef({ columnKey: 'column2', rowKeyValue: 2 @@ -44,7 +26,15 @@ const TabIndexDemo: React.FC = () => { <>

Use Tab to navigate between cells. Press Enter - to start/stop editing cells, or sort column in case of header cell.

({ @@ -81,7 +71,6 @@ const TabIndexDemo: React.FC = () => { ) } }} - dispatch={dispatch} /> ); diff --git a/src/Demos/TreeModeDemo/TreeModeDemo.tsx b/src/Demos/TreeModeDemo/TreeModeDemo.tsx index c936b3fe..5dac1bd8 100644 --- a/src/Demos/TreeModeDemo/TreeModeDemo.tsx +++ b/src/Demos/TreeModeDemo/TreeModeDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; const data = [ { treeGroupId: null, id: 1, name: 'Department A', productivity: 5 }, @@ -20,30 +19,20 @@ const data = [ { treeGroupId: 11, id: 13, name: 'Mike Griffinson', productivity: 3 }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { key: 'name', title: 'Name', dataType: DataType.String }, - { key: 'productivity', title: 'Productivity', dataType: DataType.Number }, - ], - data, - filteringMode: FilteringMode.FilterRow, - treeGroupKeyField: 'treeGroupId', - editingMode: EditingMode.Cell, - treeGroupsExpanded: [7, 11], - rowKeyField: 'id', - sortingMode: SortingMode.Single, -}; - const TreeModeDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return (
'No Data Found' diff --git a/src/Demos/ValidationDemo/ValidationDemo.tsx b/src/Demos/ValidationDemo/ValidationDemo.tsx index ed154814..6fbbbc55 100644 --- a/src/Demos/ValidationDemo/ValidationDemo.tsx +++ b/src/Demos/ValidationDemo/ValidationDemo.tsx @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { ITableProps, kaReducer, Table } from '../../lib'; -import { DataType, EditingMode } from '../../lib/enums'; -import { DispatchFunc } from '../../lib/types'; +import { DataType, Table } from '../../lib'; +import { EditingMode } from '../../lib/enums'; const dataArray: any[] = [ { id: 1, name: 'Mike Wazowski', score: 80, passed: true }, @@ -13,61 +12,51 @@ const dataArray: any[] = [ { id: 6, name: 'Sunny Fox', score: 33, passed: false }, ]; -const tablePropsInit: ITableProps = { - columns: [ - { - dataType: DataType.String, - key: 'name', - width: '45%', - title: 'Name' - }, - { - dataType: DataType.Number, - key: 'score', - width: 110, - title: 'Score' - }, - { - dataType: DataType.Boolean, - key: 'passed', - title: 'Passed', - }, - ], - validation: ({ column, value }) => { - if (column.key === 'name'){ - if (!value) { - return `Value can't be empty`; - } - } - if (column.key === 'score'){ - if (value > 100) { - return `Value can't be more than 100`; - } - if (!value) { - return `Value can't be empty`; - } - } - }, - data: dataArray, - editableCells: [{ - columnKey: 'score', - rowKeyValue: 2, - }], - editingMode: EditingMode.Cell, - rowKeyField: 'id', -}; - const ValidationDemo: React.FC = () => { - const [tableProps, changeTableProps] = useState(tablePropsInit); - const dispatch: DispatchFunc = (action) => { - changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); - }; - return ( <>
{ + if (column.key === 'name'){ + if (!value) { + return `Value can't be empty`; + } + } + if (column.key === 'score'){ + if (value > 100) { + return `Value can't be more than 100`; + } + if (!value) { + return `Value can't be empty`; + } + } + }} + data={dataArray} + editableCells= {[{ + columnKey: 'score', + rowKeyValue: 2, + }]} + editingMode={EditingMode.Cell} + rowKeyField={'id'} /> ); diff --git a/src/lib/Components/PagingPages/PagingPages.tsx b/src/lib/Components/PagingPages/PagingPages.tsx index 9852ee87..044f4d31 100644 --- a/src/lib/Components/PagingPages/PagingPages.tsx +++ b/src/lib/Components/PagingPages/PagingPages.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { updatePageIndex } from '../../actionCreators'; -import defaultOptions from '../../defaultOptions'; -import { IPagingProps } from '../../props'; -import { getElementCustomization } from '../../Utils/ComponentUtils'; import { centerLength, getPagesArrayBySize, getPagesForCenter } from '../../Utils/PagingUtils'; + +import { IPagingProps } from '../../props'; import PagingIndex from '../PagingIndex/PagingIndex'; +import defaultOptions from '../../defaultOptions'; +import { getElementCustomization } from '../../Utils/ComponentUtils'; +import { updatePageIndex } from '../../actionCreators'; const PagingPages: React.FunctionComponent = (props) => { const { diff --git a/src/lib/Components/Table/Table.test.tsx b/src/lib/Components/Table/Table.test.tsx index d31d4284..1e5ef2b2 100644 --- a/src/lib/Components/Table/Table.test.tsx +++ b/src/lib/Components/Table/Table.test.tsx @@ -1,12 +1,11 @@ +import { ActionType, PagingPosition } from '../../enums'; import Enzyme, { mount } from 'enzyme'; -import React from 'react'; -import ReactDOM from 'react-dom'; import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; - -import { loadData } from '../../actionCreators'; -import { ActionType, PagingPosition } from '../../enums'; +import React from 'react'; +import ReactDOM from 'react-dom'; import { Table } from './Table'; +import { loadData } from '../../actionCreators'; Enzyme.configure({ adapter: new Adapter() }); @@ -39,10 +38,11 @@ it('should dispatch single action and clear it', () => { const div = document.createElement('div'); ReactDOM.render(
, div); ReactDOM.unmountComponentAtNode(div); - expect(dispatch).toHaveBeenCalledTimes(2); + expect(dispatch).toHaveBeenCalledTimes(3); expect(dispatch.mock.calls).toEqual([ + [{type: ActionType.ComponentDidMount}], [{type: ActionType.LoadData}], - [{type: ActionType.ClearSingleAction}] + [{type: ActionType.ClearSingleAction}], ]); }); @@ -56,7 +56,10 @@ it('should not dispatch in case of single action is undefined', () => { const div = document.createElement('div'); ReactDOM.render(
, div); ReactDOM.unmountComponentAtNode(div); - expect(dispatch).toHaveBeenCalledTimes(0); + expect(dispatch).toHaveBeenCalledTimes(1); + expect(dispatch.mock.calls).toEqual([ + [{type: ActionType.ComponentDidMount}] + ]); }); it('Paging position property', () => { diff --git a/src/lib/Components/Table/Table.tsx b/src/lib/Components/Table/Table.tsx index eddaa9ca..d7c8f558 100644 --- a/src/lib/Components/Table/Table.tsx +++ b/src/lib/Components/Table/Table.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as actionCreators from '../../actionCreators'; -import { DispatchFunc, FilterFunc, FormatFunc, OnDispatchFunc, SearchFunc, SortFunc, ValidationFunc } from '../../types'; +import { ControlledPropsKeys, DispatchFunc, FilterFunc, FormatFunc, OnDispatchFunc, SearchFunc, SortFunc, ValidationFunc } from '../../types'; import { EditableCell, PagingOptions } from '../../models'; import { EditingMode, FilteringMode, SortingMode } from '../../enums'; @@ -56,6 +56,7 @@ export interface ITableProps { validation?: ValidationFunc; virtualScrolling?: VirtualScrolling; width?: number | string; + controlledPropsKeys?: ControlledPropsKeys; } export interface ITableEvents { diff --git a/src/lib/Components/TableControlled/TableControlled.tsx b/src/lib/Components/TableControlled/TableControlled.tsx index 22c4ad3b..551155bb 100644 --- a/src/lib/Components/TableControlled/TableControlled.tsx +++ b/src/lib/Components/TableControlled/TableControlled.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; -import { clearSingleAction } from '../../actionCreators'; -import { PagingPosition } from '../../enums'; +import { ActionType, PagingPosition } from '../../enums'; +import { ITableAllProps, ITableProps } from '../Table/Table'; + import { ChildComponents } from '../../Models/ChildComponents'; import { DispatchFunc } from '../../types'; -import { getElementCustomization } from '../../Utils/ComponentUtils'; -import { isPagingShown } from '../../Utils/PagingUtils'; import Loading from '../Loading/Loading'; import Popup from '../Popup/Popup'; -import { ITableAllProps, ITableProps } from '../Table/Table'; import { TablePaging } from '../TablePaging/TablePaging'; import { TableWrapper } from '../TableWrapper/TableWrapper'; +import { clearSingleAction } from '../../actionCreators'; +import { getElementCustomization } from '../../Utils/ComponentUtils'; +import { isPagingShown } from '../../Utils/PagingUtils'; export interface ITableControlledProps extends ITableProps { childComponents?: ChildComponents; @@ -40,6 +41,11 @@ export const TableControlled: React.FunctionComponent = (props) }, props, childComponents?.rootDiv); elementAttributes.style = { width, height, ...elementAttributes.style } + React.useEffect(() => { + dispatch({ type: ActionType.ComponentDidMount }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + React.useEffect(() => { if (singleAction) { dispatch(singleAction); @@ -47,7 +53,6 @@ export const TableControlled: React.FunctionComponent = (props) } }); - return (
diff --git a/src/lib/Components/TableUncontrolled/TableUncontrolled.tsx b/src/lib/Components/TableUncontrolled/TableUncontrolled.tsx index 39598261..296c9e4e 100644 --- a/src/lib/Components/TableUncontrolled/TableUncontrolled.tsx +++ b/src/lib/Components/TableUncontrolled/TableUncontrolled.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { ITableInstance, ITableProps } from '../Table/Table'; +import { getControlledPropsKeys, getPropsToOverride } from './utils'; import { ChildComponents } from '../../Models/ChildComponents'; import { DispatchFunc } from '../../types'; @@ -8,45 +9,47 @@ import { TableControlled } from '../TableControlled/TableControlled'; import { getTable } from '../../hooks/UseTable'; import { kaReducer } from '../../Reducers/kaReducer'; -export interface ITableUncontrolledProps extends ITableProps { +export interface ITableUncontrolledPropsKeys extends ITableProps { childComponents?: ChildComponents; table?: ITableInstance; } export const TableInstanceContext = React.createContext({} as ITableInstance); -export const TableUncontrolled: React.FunctionComponent = (props) => { - const [tableProps, changeTableProps] = React.useState({ ...props, ...props.table?.props }); - const { table: _, ...tablePropsUncontrolled } = tableProps; - const contextTable = props.table || getTable(); +export const TableUncontrolled: React.FunctionComponent = (props) => { + const { table: _, ...tablePropsControlled } = props; + const [tableProps, changeTableProps] = React.useState({ ...tablePropsControlled, ...props.table?.props }); const dispatch: DispatchFunc = (action) => { changeTableProps((prevState: ITableProps) => { const nextState = kaReducer(prevState, action); setTimeout(() => { - contextTable.onDispatch?.(action, nextState); + props.table?.onDispatch?.(action, nextState); }, 0); return nextState; }); }; - contextTable.props = tablePropsUncontrolled; - contextTable.changeProps = changeTableProps; - contextTable.dispatch = dispatch; React.useEffect(() => { - if (props?.loading?.enabled !== tablePropsUncontrolled?.loading?.enabled) { - props?.loading?.enabled ? contextTable.showLoading() : contextTable.hideLoading(); - } - if (props?.data !== tableProps?.data) { - contextTable?.updateData(props?.data || []); + const controlledPropsKeys = getControlledPropsKeys(props); + const propsToOverride = getPropsToOverride(controlledPropsKeys, props, tableProps); + + if (Object.keys(propsToOverride).length){ + changeTableProps({...tableProps, ...propsToOverride}); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props?.loading?.enabled, props?.data]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props]); + + const contextTable = props.table || getTable(); + contextTable.props = tableProps; + contextTable.changeProps = changeTableProps; + contextTable.dispatch = dispatch; return ( { + it('getControlledPropsKeys', () => { + expect(getControlledPropsKeys({ + loading: { enabled: false } + } as ITableProps)).toEqual(['searchText', 'loading', 'data', 'paging']); + + expect(getControlledPropsKeys({ + loading: { enabled: true } + } as ITableProps)).toEqual(['searchText', 'loading']); + + expect(getControlledPropsKeys({ + loading: { enabled: true }, + controlledPropsKeys: ['height'], + } as ITableProps)).toEqual(['height']); + }); + + it('getPropsToOverride', () => { + const loading1 = { enabled: false }; + expect(getPropsToOverride(['searchText', 'loading', 'data', 'paging'], { + loading: loading1 + } as ITableProps, { + loading: loading1 + } as ITableProps)).toEqual({}); + + expect(getPropsToOverride(['loading', 'data'], { + loading: loading1, + data: [{ key: 1 }], + } as ITableProps, { + loading: loading1 + } as ITableProps)).toEqual({ data: [{ key: 1 }] }); + + expect(getPropsToOverride(['loading'], { + loading: loading1, + data: [{ key: 1 }], + } as ITableProps, { + loading: loading1 + } as ITableProps)).toEqual({}); + + expect(getPropsToOverride(['loading'], { + loading: loading1, + } as ITableProps, { + loading: loading1, + data: [{ key: 1 }], + } as ITableProps)).not.toHaveProperty('data'); + + expect(getPropsToOverride(['loading', 'data'], { + loading: loading1, + } as ITableProps, { + loading: loading1, + data: [{ key: 1 }], + } as ITableProps)).toHaveProperty('data'); + }); + +}); diff --git a/src/lib/Components/TableUncontrolled/utils.ts b/src/lib/Components/TableUncontrolled/utils.ts new file mode 100644 index 00000000..f63afa12 --- /dev/null +++ b/src/lib/Components/TableUncontrolled/utils.ts @@ -0,0 +1,21 @@ +import { ControlledPropsKeys } from '../../types'; +import { ITableProps } from '../Table/Table'; + +export const getControlledPropsKeys = (props: ITableProps) => { + const controlledPropsKeys: ControlledPropsKeys = props.controlledPropsKeys ? + props.controlledPropsKeys + : props.loading?.enabled + ? ['searchText', 'loading'] + : ['searchText', 'loading', 'data', 'paging']; + + return controlledPropsKeys; +} + +export const getPropsToOverride = (controlledPropsKeys: ControlledPropsKeys, props: ITableProps, tableProps: ITableProps) => { + return controlledPropsKeys.reduce((acc, item) => { + if (props[item] !== tableProps[item]){ + acc[item] = props[item]; + } + return acc; + }, {} as any); +} diff --git a/src/lib/enums.ts b/src/lib/enums.ts index 9b576ad0..a27369f2 100644 --- a/src/lib/enums.ts +++ b/src/lib/enums.ts @@ -23,6 +23,7 @@ export enum ActionType { ClearSingleAction = 'ClearSingleAction', CloseEditor = 'CloseEditor', CloseRowEditors = 'CloseRowEditors', + ComponentDidMount= 'ComponentDidMount', DeleteRow = 'DeleteRow', DeselectAllFilteredRows = 'DeselectAllFilteredRows', DeselectAllRows = 'DeselectAllRows', diff --git a/src/lib/types.ts b/src/lib/types.ts index 57a2ae6d..177a740f 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,6 +1,7 @@ -import { ITableProps } from './Components/Table/Table'; import { AttributeTableData, Column } from './models'; +import { ITableProps } from './Components/Table/Table'; + type AddParameters = T extends (e: infer E) => void ? ( (e: E, extendedEvent: AttributeTableData) => void @@ -13,6 +14,7 @@ type ElementAttributes = React.AllHTMLAttributes; export type ChildAttributesItem = WithExtraParameters, T> & { ref?: any }; export type DispatchFunc = (action: any) => void; export type OnDispatchFunc = (action: any, tableProps: ITableProps) => void; +export type ControlledPropsKeys = (keyof ITableProps)[]; export type Field = string; export type FormatFunc = (props: { value: any, column: Column }) => any; export type FilterFunc = (props: { column: Column }) => ((value: any, filterRowValue: any) => boolean) | void; diff --git a/yarn.lock b/yarn.lock index 8a4f9cca..485f1445 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1249,6 +1249,13 @@ dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2": + version "7.20.13" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b" + integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/template@^7.12.13", "@babel/template@^7.3.3": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" @@ -3686,6 +3693,11 @@ bfj@^7.0.2: hoopy "^0.1.4" tryer "^1.0.1" +big-integer@^1.6.16: + version "1.6.51" + resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686" + integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg== + big.js@^5.2.2: version "5.2.2" resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" @@ -3803,6 +3815,20 @@ braces@^3.0.1, braces@^3.0.2, braces@~3.0.2: dependencies: fill-range "^7.0.1" +broadcast-channel@^3.4.1: + version "3.7.0" + resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937" + integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg== + dependencies: + "@babel/runtime" "^7.7.2" + detect-node "^2.1.0" + js-sha3 "0.8.0" + microseconds "0.2.0" + nano-time "1.0.0" + oblivious-set "1.0.0" + rimraf "3.0.2" + unload "2.2.0" + browser-process-hrtime@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" @@ -4884,7 +4910,7 @@ detect-newline@^3.0.0: resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA== -detect-node@^2.0.4: +detect-node@^2.0.4, detect-node@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1" integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g== @@ -8170,6 +8196,11 @@ js-sdsl@^4.1.4: resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0" integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ== +js-sha3@0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840" + integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -8755,6 +8786,14 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +match-sorter@^6.0.2: + version "6.3.1" + resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda" + integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw== + dependencies: + "@babel/runtime" "^7.12.5" + remove-accents "0.4.2" + matchdep@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e" @@ -8873,6 +8912,11 @@ micromatch@^4.0.4, micromatch@^4.0.5: braces "^3.0.2" picomatch "^2.3.1" +microseconds@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39" + integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA== + mime-db@1.48.0, "mime-db@>= 1.43.0 < 2": version "1.48.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d" @@ -9013,6 +9057,13 @@ nan@^2.12.1: resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19" integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ== +nano-time@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef" + integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA== + dependencies: + big-integer "^1.6.16" + nanoid@^3.3.4: version "3.3.4" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" @@ -9377,6 +9428,11 @@ object.values@^1.1.5, object.values@^1.1.6: define-properties "^1.1.4" es-abstract "^1.20.4" +oblivious-set@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566" + integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw== + obuf@^1.0.0, obuf@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e" @@ -10646,6 +10702,15 @@ react-is@^18.0.0, react-is@^18.2.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-query@^3.39.3: + version "3.39.3" + resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35" + integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g== + dependencies: + "@babel/runtime" "^7.5.5" + broadcast-channel "^3.4.1" + match-sorter "^6.0.2" + react-redux@^7.2.0: version "7.2.4" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225" @@ -11025,6 +11090,11 @@ relateurl@^0.2.7: resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk= +remove-accents@0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5" + integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA== + remove-bom-buffer@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz#c2bf1e377520d324f623892e33c10cac2c252b53" @@ -11255,6 +11325,13 @@ rifm@^0.12.1: resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4" integrity sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg== +rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" + integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== + dependencies: + glob "^7.1.3" + rimraf@^2.4.3: version "2.7.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" @@ -11262,13 +11339,6 @@ rimraf@^2.4.3: dependencies: glob "^7.1.3" -rimraf@^3.0.0, rimraf@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" - integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== - dependencies: - glob "^7.1.3" - rollup-plugin-terser@^7.0.0: version "7.0.2" resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d" @@ -12704,6 +12774,14 @@ universalify@^2.0.0: resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717" integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ== +unload@2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7" + integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA== + dependencies: + "@babel/runtime" "^7.6.2" + detect-node "^2.0.4" + unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"