ka-table - npm Package Compare versions

Comparing version 2.4.1 to 2.5.1

Components/CellComponent/CellComponent.js

@@ -15,9 +15,10 @@ var __assign = (this && this.__assign) || function () {
 import { getField } from '../../Utils/ColumnUtils';
+import { getValueByColumn } from '../../Utils/DataUtils';
 import CellContent from '../CellContent/CellContent';
 import CellEditor from '../CellEditor/CellEditor';
 var CellComponent = function (props) {
-    var column = props.column, style = props.column.style, isEditableCell = props.isEditableCell;
-    return (React.createElement("td", { style: style, className: defaultOptions.css.cell }, isEditableCell ? (React.createElement(CellEditor, __assign({}, props, { field: getField(column) })))
-        : (React.createElement(CellContent, __assign({}, props, { field: getField(column) })))));
+    var column = props.column, rowData = props.rowData, style = props.column.style, isEditableCell = props.isEditableCell;
+    return (React.createElement("td", { style: style, className: defaultOptions.css.cell }, isEditableCell ? (React.createElement(CellEditor, __assign({}, props, { value: getValueByColumn(rowData, column), field: getField(column) })))
+        : (React.createElement(CellContent, __assign({}, props, { value: getValueByColumn(rowData, column), field: getField(column) })))));
 };
 export default CellComponent;

Components/CellEditorBoolean/CellEditorBoolean.js

@@ -1,12 +0,1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
@@ -16,9 +5,6 @@ import defaultOptions from '../../defaultOptions';
 import { isEmpty } from '../../Utils/CommonUtils';
+import { replaceValue } from '../../Utils/DataUtils';
 var CellEditorBoolean = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, field = _a.field, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
-    var value = rowData[field];
-    return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.checkbox, type: 'checkbox', ref: function (elem) { return elem && (elem.indeterminate = isEmpty(value)); }, checked: value || false, onChange: function (event) {
-            var _a;
-            return dispatch(ActionType.ChangeRowData, { newValue: __assign(__assign({}, rowData), (_a = {}, _a[field] = event.currentTarget.checked, _a)) });
-        }, onBlur: function () {
+    var column = _a.column, dispatch = _a.dispatch, rowData = _a.rowData, rowKeyField = _a.rowKeyField, value = _a.value;
+    return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.checkbox, type: 'checkbox', ref: function (elem) { return elem && (elem.indeterminate = isEmpty(value)); }, checked: value || false, onChange: function (event) { return dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, event.currentTarget.checked) }); }, onBlur: function () {
             var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };
@@ -25,0 +11,0 @@ dispatch(ActionType.CloseEditor, { cell: cell });

Components/CellEditorDate/CellEditorDate.js

@@ -1,24 +0,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import defaultOptions from '../../defaultOptions';
 import { ActionType } from '../../enums';
+import { getValueByColumn, replaceValue } from '../../Utils/DataUtils';
 import { getDateInputValue } from '../../Utils/DateUtils';
 var CellEditorDate = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, field = _a.field, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
-    var fieldValue = rowData[field];
+    var column = _a.column, dispatch = _a.dispatch, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
+    var fieldValue = getValueByColumn(rowData, column);
     var value = fieldValue && getDateInputValue(fieldValue);
     return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.dateInput, type: 'date', value: value || '', onChange: function (event) {
-            var _a;
             var targetValue = event.currentTarget.value;
-            dispatch(ActionType.ChangeRowData, { newValue: __assign(__assign({}, rowData), (_a = {}, _a[field] = targetValue ? new Date(targetValue) : null, _a)) });
+            var newValue = targetValue ? new Date(targetValue) : null;
+            dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, newValue) });
         }, onBlur: function () {
@@ -25,0 +15,0 @@ var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };

Components/CellEditorNumber/CellEditorNumber.js

@@ -1,22 +0,10 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import defaultOptions from '../../defaultOptions';
 import { ActionType } from '../../enums';
+import { replaceValue } from '../../Utils/DataUtils';
 var CellEditorNumber = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, field = _a.field, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
-    var value = rowData[field];
+    var column = _a.column, dispatch = _a.dispatch, field = _a.field, rowData = _a.rowData, value = _a.value, rowKeyField = _a.rowKeyField;
     return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.numberInput, type: 'number', value: value === null || value === undefined ? '' : value, onChange: function (event) {
-            var _a;
             var newValue = event.currentTarget.value !== '' ? Number(event.currentTarget.value) : null;
-            dispatch(ActionType.ChangeRowData, { newValue: __assign(__assign({}, rowData), (_a = {}, _a[field] = newValue, _a)) });
+            dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, newValue) });
         }, onBlur: function () {
@@ -23,0 +11,0 @@ var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };

Components/CellEditorState/CellEditorState.js

@@ -14,2 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { ActionType } from '../../enums';
+import { getValueByColumn, replaceValue } from '../../Utils/DataUtils';
 import { addEscEnterKeyEffect } from '../../Utils/EffectUtils';
@@ -20,5 +21,5 @@ import { getValidationValue } from '../../Utils/Validation';
 var CellEditorState = function (props) {
-    var column = props.column, field = props.field, key = props.column.key, rowData = props.rowData, rowKeyField = props.rowKeyField, dispatch = props.dispatch;
-    var _a = useState(rowData), value = _a[0], changeValue = _a[1];
-    var validationValue = getValidationValue(value, field, column.validation);
+    var column = props.column, rowData = props.rowData, rowKeyField = props.rowKeyField, dispatch = props.dispatch;
+    var _a = useState(rowData), rowDataState = _a[0], changeValue = _a[1];
+    var validationValue = getValidationValue(rowDataState, column);
     var onValueStateChange = function (rowValue) {
@@ -32,10 +33,10 @@ changeValue(rowValue);
     var closeHandler = useCallback(function () {
-        var _a;
         if (!validationValue) {
-            if (rowData[key] !== value[key]) {
-                dispatch(ActionType.ChangeRowData, { newValue: __assign(__assign({}, rowData), (_a = {}, _a[key] = value[key], _a)) });
+            var newValue = getValueByColumn(rowDataState, column);
+            if (getValueByColumn(rowData, column) !== newValue) {
+                dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, newValue) });
             }
             close();
         }
-    }, [validationValue, dispatch, close, value, key, rowData]);
+    }, [validationValue, dispatch, close, rowDataState, column, rowData]);
     useEffect(function () {
@@ -57,3 +58,4 @@ return addEscEnterKeyEffect(close, closeHandler);
         dispatch: dispatchHandler,
-        rowData: value,
+        rowData: rowDataState,
+        value: getValueByColumn(rowDataState, column),
     });
@@ -60,0 +62,0 @@ return (React.createElement(React.Fragment, null,

Components/CellEditorString/CellEditorString.js

@@ -1,20 +0,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import defaultOptions from '../../defaultOptions';
 import { ActionType } from '../../enums';
+import { replaceValue } from '../../Utils/DataUtils';
 var CellEditorString = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, field = _a.field, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
-    return (React.createElement("input", { autoFocus: true, type: 'text', className: defaultOptions.css.textInput, value: rowData[field] || '', onChange: function (event) {
-            var _a;
-            return dispatch(ActionType.ChangeRowData, { newValue: __assign(__assign({}, rowData), (_a = {}, _a[field] = event.currentTarget.value, _a)) });
+    var column = _a.column, dispatch = _a.dispatch, rowData = _a.rowData, value = _a.value, rowKeyField = _a.rowKeyField;
+    return (React.createElement("input", { autoFocus: true, type: 'text', className: defaultOptions.css.textInput, value: value || '', onChange: function (event) {
+            dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, event.currentTarget.value) });
         }, onBlur: function () {
@@ -21,0 +10,0 @@ var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };

Components/CellText/CellText.js

@@ -14,9 +14,6 @@ var __assign = (this && this.__assign) || function () {
 import { ActionType, EditingMode } from '../../enums';
-import { getField } from '../../Utils/ColumnUtils';
 import { isEmpty } from '../../Utils/CommonUtils';
 import { extendProps } from '../../Utils/PropsUtils';
 var CellText = function (props) {
-    var childAttributes = props.childAttributes, column = props.column, format = props.column.format, dispatch = props.dispatch, editingMode = props.editingMode, rowData = props.rowData, rowKeyField = props.rowKeyField;
-    var field = getField(column);
-    var value = rowData[field];
+    var childAttributes = props.childAttributes, column = props.column, format = props.column.format, dispatch = props.dispatch, editingMode = props.editingMode, rowData = props.rowData, rowKeyField = props.rowKeyField, value = props.value;
     var formatedValue = format ? format(value) : !isEmpty(value) && value.toString();
@@ -23,0 +20,0 @@ var componentProps = {

Components/GroupRow/GroupRow.js

 import React from 'react';
 import defaultOptions from '../../defaultOptions';
-import { groupClick } from '../../Utils/GroupUtils';
+import { ActionType } from '../../enums';
+import { getGroupText, updateExpandedGroups } from '../../Utils/GroupUtils';
 import EmptyCells from '../EmptyCells/EmptyCells';
 var GroupRow = function (_a) {
-    var columns = _a.columns, emptyColumnsCount = _a.emptyColumnsCount, groupRowData = _a.groupRowData, groups = _a.groups, groupsExpanded = _a.groupsExpanded, onOptionChange = _a.onOptionChange;
+    var columns = _a.columns, emptyColumnsCount = _a.emptyColumnsCount, groupRowData = _a.groupRowData, groupedColumns = _a.groupedColumns, groups = _a.groups, groupsExpanded = _a.groupsExpanded, dispatch = _a.dispatch;
+    var group = groups && groups[emptyColumnsCount];
+    var column = group && groupedColumns.find(function (c) { return c.key === group.columnKey; });
     return (React.createElement("tr", { className: defaultOptions.css.groupRow },
@@ -12,7 +15,8 @@ React.createElement(EmptyCells, { count: emptyColumnsCount }),
                 React.createElement("div", { onClick: function () {
-                        groupClick(groupsExpanded, groupRowData, onOptionChange);
+                        var updatedGroupsExpanded = updateExpandedGroups(groupsExpanded, groupRowData);
+                        dispatch(ActionType.UpdateGroupsExpanded, { newValue: { groupsExpanded: updatedGroupsExpanded } });
                     }, className: groupsExpanded.some(function (ge) { return JSON.stringify(ge) === JSON.stringify(groupRowData.key); })
                         ? defaultOptions.css.iconGroupArrowExpanded : defaultOptions.css.iconGroupArrowCollapsed }),
-                React.createElement("div", { className: 'ka-group-text' }, groupRowData.value.toString())))));
+                React.createElement("div", { className: 'ka-group-text' }, getGroupText(groupRowData.value, column))))));
 };
 export default GroupRow;

Components/Table/Table.js

@@ -19,3 +19,3 @@ var __assign = (this && this.__assign) || function () {
 import { sortData } from '../../Utils/SortUtils';
-import { convertToColumnTypes } from '../../Utils/TypeUtils';
+import { convertToColumnTypes, getColumnsWithWrongType } from '../../Utils/TypeUtils';
 import FilterRow from '../FilterRow/FilterRow';
@@ -26,5 +26,6 @@ import HeadRow from '../HeadRow/HeadRow';
     var _a = props.childAttributes, childAttributes = _a === void 0 ? {} : _a, _b = props.editableCells, editableCells = _b === void 0 ? [] : _b, _c = props.editingMode, editingMode = _c === void 0 ? EditingMode.None : _c, filteringMode = props.filteringMode, groups = props.groups, search = props.search, _d = props.selectedRows, selectedRows = _d === void 0 ? [] : _d, _e = props.sortingMode, sortingMode = _e === void 0 ? SortingMode.None : _e;
-    var columns = props.columns, data = props.data;
+    var columns = props.columns, _f = props.data, data = _f === void 0 ? [] : _f;
     data = search ? searchData(columns, data, search) : data;
-    data = convertToColumnTypes(data, columns);
+    var columnsWithWrongType = getColumnsWithWrongType(data, columns);
+    data = columnsWithWrongType.length ? convertToColumnTypes(data, columnsWithWrongType) : data;
     data = filterData(data, columns);
@@ -31,0 +32,0 @@ data = sortData(columns, data);

Components/VirtualizedRows/VirtualizedRows.js

@@ -18,3 +18,3 @@ var __assign = (this && this.__assign) || function () {
 var VirtualizedRows = function (props) {
-    var columns = props.columns, data = props.data, _a = props.groups, groups = _a === void 0 ? [] : _a, _b = props.groupsExpanded, groupsExpanded = _b === void 0 ? [] : _b, onOptionChange = props.onOptionChange, rowKeyField = props.rowKeyField, virtualScrolling = props.virtualScrolling;
+    var columns = props.columns, data = props.data, dispatch = props.dispatch, groupedColumns = props.groupedColumns, _a = props.groups, groups = _a === void 0 ? [] : _a, _b = props.groupsExpanded, groupsExpanded = _b === void 0 ? [] : _b, onOptionChange = props.onOptionChange, rowKeyField = props.rowKeyField, virtualScrolling = props.virtualScrolling;
     var groupMark = getGroupMark();
@@ -47,3 +47,3 @@ var firstRowRef = useRef(null);
             if (d.groupMark === groupMark) {
-                return (React.createElement(GroupRow, { key: d.key, groupRowData: d, columns: columns, emptyColumnsCount: d.key.length - 1, groups: groups, groupsExpanded: groupsExpanded, onOptionChange: onOptionChange }));
+                return (React.createElement(GroupRow, { columns: columns, dispatch: dispatch, emptyColumnsCount: d.key.length - 1, groupRowData: d, groupedColumns: groupedColumns, groups: groups, groupsExpanded: groupsExpanded, key: d.key }));
             }
@@ -50,0 +50,0 @@ else {

enums.js

@@ -16,10 +16,11 @@ export var DataType;
 (function (ActionType) {
-    ActionType["CloseEditor"] = "CloseEditor";
     ActionType["ChangeFilterRow"] = "ChangeFilterRow";
-    ActionType["OpenEditor"] = "OpenEditor";
     ActionType["ChangeRowData"] = "ChangeRowData";
+    ActionType["ChangeSorting"] = "ChangeSorting";
+    ActionType["CloseEditor"] = "CloseEditor";
     ActionType["DeselectRowData"] = "DeselectRowData";
+    ActionType["OpenEditor"] = "OpenEditor";
+    ActionType["ScrollTable"] = "ScrollTable";
     ActionType["SelectRow"] = "SelectRow";
-    ActionType["ScrollTable"] = "ScrollTable";
-    ActionType["ChangeSorting"] = "ChangeSorting";
+    ActionType["UpdateGroupsExpanded"] = "UpdateGroupsExpanded";
 })(ActionType || (ActionType = {}));
@@ -26,0 +27,0 @@ export var KeyboardEnum;

enums.ts

@@ -15,10 +15,11 @@ export enum DataType {
 export enum ActionType {
-  CloseEditor = 'CloseEditor',
   ChangeFilterRow = 'ChangeFilterRow',
-  OpenEditor = 'OpenEditor',
   ChangeRowData = 'ChangeRowData',
+  ChangeSorting = 'ChangeSorting',
+  CloseEditor = 'CloseEditor',
   DeselectRowData = 'DeselectRowData',
+  OpenEditor = 'OpenEditor',
+  ScrollTable = 'ScrollTable',
   SelectRow = 'SelectRow',
-  ScrollTable = 'ScrollTable',
-  ChangeSorting = 'ChangeSorting',
+  UpdateGroupsExpanded = 'UpdateGroupsExpanded',
 }
@@ -25,0 +26,0 @@

Models/Column.ts

 import { DataType, SortDirection } from '../enums';
 import {
-  CellFunc, EditorFunc, FilterRowFunc, FormatFunc, HeaderCellFunc, SearchFunc, ValidationFunc,
+  CellFunc, EditorFunc, Field, FilterRowFunc, FormatFunc, HeaderCellFunc, SearchFunc,
+  ValidationFunc,
 } from '../types';
@@ -16,3 +17,4 @@
   public filterRowOperator?: any;
-  public field?: string;
+  public field?: Field;
+  public fieldParents?: Field[];
   public format?: FormatFunc;
@@ -19,0 +21,0 @@ public headCell?: HeaderCellFunc;

package.json

 {
   "name": "ka-table",
-  "version": "2.4.1",
+  "version": "2.5.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "repository": "github:komarovalexander/ka-table",

README.md

@@ -10,3 +10,3 @@ [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/komarovalexander/ka-table/blob/master/LICENSE)
 ![Table](https://komarovalexander.github.io/ka-table/static/demos-screenshots/command-column.png)
-[Demo link](https://komarovalexander.github.io/ka-table/#/command-column)
+[Demo link](https://komarovalexander.github.io/ka-table/#/overview)
 
@@ -79,2 +79,4 @@ ## Installation
 ## Examples
+[Overview](https://komarovalexander.github.io/ka-table/#/command-column) - Main features on one page
+
 [Command Column](https://komarovalexander.github.io/ka-table/#/command-column) - Functional columns which are not bound to data and used to add custom command to table
@@ -156,2 +158,3 @@
 | field | <code>string</code> | Specifies the property of data's object which value will be used in column, if null value from key option will be used |
+| fieldParents | <code>string[]</code> | Array contains names of parents for specific field. I.e. to set field company.representative.name column's option should be { key: 'company.representative.name', field: 'name', fieldParents: ['company', 'representative'] } |
 | format | [<code>FormatFunc</code>](#FormatFunc) | Returns formated cell string [Example](https://komarovalexander.github.io/ka-table/#/custom-cell) |
@@ -158,0 +161,0 @@ | headCell | <code>HeaderCellFunc</code> | Returns a custom header cell [Custom Head Cell Example](https://komarovalexander.github.io/ka-table/#/custom-header-cell) |

types.ts

@@ -27,2 +27,3 @@ import { PropsWithChildren } from 'react';
 export type EventFunc = (type: string, data: any) => void;
+export type Field = string;
 export type FilterRowFunc = (props: FilterRowFuncPropsWithChildren) => any;
@@ -29,0 +30,0 @@ export type FilterRowFuncPropsWithChildren = PropsWithChildren<IFilterRowEditorProps>;

Utils/ActionUtils.js

@@ -59,2 +59,5 @@ var __assign = (this && this.__assign) || function () {
                 break;
+            case ActionType.UpdateGroupsExpanded:
+                onOptionChange(actionData.newValue);
+                break;
         }
@@ -61,0 +64,0 @@ onEvent(action, actionData);

Utils/ActionUtils.ts

@@ -59,2 +59,5 @@
           break;
+      case ActionType.UpdateGroupsExpanded:
+        onOptionChange(actionData.newValue);
+        break;
     }
@@ -61,0 +64,0 @@ onEvent(action, actionData);

Utils/ColumnUtils.ts

 import { Column } from '../models';
+import { Field } from '../types';
 
@@ -7,4 +8,4 @@ export const compareColumns = (column1: Column, column2: Column) => {
 
-export const getField = (column: Column) => {
+export const getField = (column: Column): Field => {
   return column.field || column.key;
 };

Utils/FilterUtils.js

 import defaultOptions from '../defaultOptions';
 import { DataType, FilterOperatorName } from '../enums';
-import { getField } from './ColumnUtils';
 import { isEmpty } from './CommonUtils';
+import { getValueByColumn } from './DataUtils';
 export var getRowEditableCells = function (rowKeyValue, editableCells) {
@@ -12,3 +12,3 @@ return editableCells.filter(function (c) { return c.rowKey === rowKeyValue; });
             return c.search ? c.search(searchText, item, c) : initialData.indexOf(item) < 0
-                && item[getField(c)].toString().toLowerCase().includes(searchText.toLowerCase());
+                && getValueByColumn(item, c).toString().toLowerCase().includes(searchText.toLowerCase());
         };
@@ -31,3 +31,3 @@ return initialData.concat(data.filter(filterFunction));
         return initialData.filter(function (d) {
-            var fieldValue = d[getField(column)];
+            var fieldValue = getValueByColumn(d, column);
             var conditionValue = column.filterRowValue;
@@ -34,0 +34,0 @@ if (column.dataType === DataType.Date) {

Utils/FilterUtils.ts

@@ -6,4 +6,4 @@ import defaultOptions from '../defaultOptions';
 import { FilterOperator } from '../Models/FilterOperator';
-import { getField } from './ColumnUtils';
 import { isEmpty } from './CommonUtils';
+import { getValueByColumn } from './DataUtils';
 
@@ -15,6 +15,6 @@ export const getRowEditableCells = (rowKeyValue: any, editableCells: Cell[]): Cell[] => {
 export const searchData = (columns: Column[], data: any[], searchText: string): any[] => {
-  return columns.reduce((initialData: any[], c) => {
+  return columns.reduce((initialData: any[], c: Column) => {
     const filterFunction = (item: any) => {
       return c.search ? c.search(searchText, item, c) : initialData.indexOf(item) < 0
-        && item[getField(c)].toString().toLowerCase().includes(searchText.toLowerCase());
+        && getValueByColumn(item, c).toString().toLowerCase().includes(searchText.toLowerCase());
     };
@@ -36,3 +36,3 @@ return initialData.concat(data.filter(filterFunction));
     return initialData.filter((d: any) => {
-      let fieldValue = d[getField(column)];
+      let fieldValue = getValueByColumn(d, column);
       let conditionValue = column.filterRowValue;
@@ -39,0 +39,0 @@ if (column.dataType === DataType.Date) {

Utils/GroupUtils.js

@@ -8,5 +8,5 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 };
-import { getField } from './ColumnUtils';
+import { getValueByColumn } from './DataUtils';
 var groupMark = {};
-export var groupClick = function (groupsExpanded, groupRowData, onOptionChange) {
+export var updateExpandedGroups = function (groupsExpanded, groupRowData) {
     var newGroupsExpanded = groupsExpanded.filter(function (ge) { return JSON.stringify(ge) !== JSON.stringify(groupRowData.key); });
@@ -16,18 +16,11 @@ if (newGroupsExpanded.length === groupsExpanded.length) {
     }
-    onOptionChange({ groupsExpanded: newGroupsExpanded });
+    return newGroupsExpanded;
 };
 export var getExpandedGroups = function (groupedData) {
-    var groupsExpanded = [];
-    for (var _i = 0, groupedData_1 = groupedData; _i < groupedData_1.length; _i++) {
-        var value = groupedData_1[_i];
-        if (value.groupMark === groupMark) {
-            groupsExpanded.push(value.key);
-        }
-    }
-    return groupsExpanded;
+    return groupedData
+        .filter(function (g) { return g.groupMark === groupMark; })
+        .map(function (g) { return g.key; });
 };
 export var getGroupedData = function (data, groups, groupedColumns, groupsExpanded) {
-    var columnMap = {};
-    groupedColumns.forEach(function (c) { return columnMap[c.key] = getField(c); });
-    var grouped = getGroupedStructure(data, groups, columnMap, 0, groupsExpanded);
+    var grouped = getGroupedStructure(data, groups, groupedColumns, 0, groupsExpanded);
     return convertToFlat(grouped);
@@ -42,14 +35,7 @@ };
         result.push({ groupMark: groupMark, key: groupKey, value: groupValue });
-        if (Array.isArray(value)) {
-            value.forEach(function (item) {
-                result.push(item);
-            });
-        }
-        else {
-            result = result.concat(convertToFlat(value, groupKey));
-        }
+        result = __spreadArrays(result, (Array.isArray(value) ? value : convertToFlat(value, groupKey)));
     });
     return result;
 };
-export var getGroupedStructure = function (data, groups, columnMap, expandedDeep, groupsExpanded) {
+export var getGroupedStructure = function (data, groups, groupedColumns, expandedDeep, groupsExpanded) {
     if (expandedDeep === void 0) { expandedDeep = 0; }
@@ -59,18 +45,21 @@ groups = __spreadArrays(groups);
     if (group) {
-        var grouped_1 = groupBy(data, function (item) { return item[columnMap[group.columnKey]]; });
-        grouped_1.forEach(function (value, key) {
-            var groupExpandedItems = groupsExpanded && groupsExpanded.filter(function (ge) { return ge[expandedDeep] === key; });
-            var isThisGroupExpanded = !groupExpandedItems
-                || groupExpandedItems.some(function (ge) { return ge.length === expandedDeep + 1; });
-            if (isThisGroupExpanded) {
-                var newStructure = getGroupedStructure(value, groups, columnMap, expandedDeep + 1, groupExpandedItems && groupExpandedItems.filter(function (ge) { return ge.length > expandedDeep + 1; }));
-                if (newStructure) {
-                    grouped_1.set(key, newStructure);
+        var column_1 = groupedColumns && groupedColumns.find(function (g) { return g.key === group.columnKey; });
+        if (column_1) {
+            var grouped_1 = groupBy(data, function (item) { return getValueByColumn(item, column_1); });
+            grouped_1.forEach(function (value, key) {
+                var groupExpandedItems = groupsExpanded && groupsExpanded.filter(function (ge) { return ge[expandedDeep] === key; });
+                var isThisGroupExpanded = !groupExpandedItems
+                    || groupExpandedItems.some(function (ge) { return ge.length === expandedDeep + 1; });
+                if (isThisGroupExpanded) {
+                    var newStructure = getGroupedStructure(value, groups, groupedColumns, expandedDeep + 1, groupExpandedItems && groupExpandedItems.filter(function (ge) { return ge.length > expandedDeep + 1; }));
+                    if (newStructure) {
+                        grouped_1.set(key, newStructure);
+                    }
                 }
-            }
-            else {
-                grouped_1.set(key, []);
-            }
-        });
-        return grouped_1;
+                else {
+                    grouped_1.set(key, []);
+                }
+            });
+            return grouped_1;
+        }
     }
@@ -98,2 +87,6 @@ };
 };
-export var getGroupMark = function () { return groupMark; };
+export var getGroupMark = function () { return groupMark; };
+export var getGroupText = function (value, column) {
+    var format = column && column.format;
+    return format ? format(value) : "" + (column && column.title && (column.title + ': ')) + value;
+};

Utils/GroupUtils.ts

 import { Column } from '../models';
 import { Group } from '../Models/Group';
 import { GroupRowData } from '../Models/GroupRowData';
-import { OptionChangeFunc } from '../types';
-import { getField } from './ColumnUtils';
+import { getValueByColumn } from './DataUtils';
 
 const groupMark = {};
-export const groupClick = (groupsExpanded: any[][], groupRowData: GroupRowData, onOptionChange: OptionChangeFunc) => {
+export const updateExpandedGroups = (groupsExpanded: any[][], groupRowData: GroupRowData): any[][] => {
   const newGroupsExpanded =
@@ -14,13 +13,9 @@ groupsExpanded.filter((ge) => JSON.stringify(ge) !== JSON.stringify(groupRowData.key));
   }
-  onOptionChange({ groupsExpanded: newGroupsExpanded });
+  return newGroupsExpanded;
 };
 
 export const getExpandedGroups = (groupedData: any[]): any[][] => {
-  const groupsExpanded: any[][] = [];
-  for (const value of groupedData) {
-    if (value.groupMark === groupMark) {
-      groupsExpanded.push(value.key);
-    }
-  }
-  return groupsExpanded;
+  return groupedData
+    .filter((g) => g.groupMark === groupMark)
+    .map((g) => g.key);
 };
@@ -33,9 +28,7 @@
   groupsExpanded?: any[]): any[] => {
-  const columnMap: any = {};
-  groupedColumns.forEach((c) => columnMap[c.key] = getField(c));
-  const grouped = getGroupedStructure(data, groups, columnMap, 0, groupsExpanded);
+  const grouped = getGroupedStructure(data, groups, groupedColumns, 0, groupsExpanded) as Map<any, any>;
   return convertToFlat(grouped);
 };
 
-export const convertToFlat = (grouped: any, key: any[] = []) => {
+export const convertToFlat = (grouped: Map<any, any>, key: any[] = []) => {
   let result: any[] = [];
@@ -46,9 +39,3 @@ grouped.forEach((value: any, groupValue: any) => {
     result.push({ groupMark, key: groupKey, value: groupValue });
-    if (Array.isArray(value)) {
-      value.forEach((item) => {
-        result.push(item);
-      });
-    } else {
-      result = result.concat(convertToFlat(value, groupKey));
-    }
+    result = [...result, ...(Array.isArray(value) ? value : convertToFlat(value, groupKey))];
   });
@@ -61,30 +48,33 @@ return result;
   groups: Group[],
-  columnMap: any,
+  groupedColumns: Column[],
   expandedDeep: number = 0,
   groupsExpanded?: any[],
-): any => {
+): Map<any, any> | void => {
   groups = [...groups];
   const group = groups.shift();
   if (group) {
-    const grouped = groupBy(data, (item: any) => item[columnMap[group.columnKey]]);
-    grouped.forEach((value, key) => {
-      const groupExpandedItems = groupsExpanded && groupsExpanded.filter((ge) => ge[expandedDeep] === key);
-      const isThisGroupExpanded = !groupExpandedItems
-        || groupExpandedItems.some((ge) => ge.length === expandedDeep + 1);
-      if (isThisGroupExpanded) {
-        const newStructure = getGroupedStructure(
-          value,
-          groups,
-          columnMap,
-          expandedDeep + 1,
-          groupExpandedItems && groupExpandedItems.filter((ge) => ge.length > expandedDeep + 1),
-        );
-        if (newStructure) {
-          grouped.set(key, newStructure);
+    const column = groupedColumns && groupedColumns.find((g) => g.key === group.columnKey);
+    if (column) {
+      const grouped = groupBy(data, (item: any) => getValueByColumn(item, column));
+      grouped.forEach((value, key) => {
+        const groupExpandedItems = groupsExpanded && groupsExpanded.filter((ge) => ge[expandedDeep] === key);
+        const isThisGroupExpanded = !groupExpandedItems
+          || groupExpandedItems.some((ge) => ge.length === expandedDeep + 1);
+        if (isThisGroupExpanded) {
+          const newStructure = getGroupedStructure(
+            value,
+            groups,
+            groupedColumns,
+            expandedDeep + 1,
+            groupExpandedItems && groupExpandedItems.filter((ge) => ge.length > expandedDeep + 1),
+          );
+          if (newStructure) {
+            grouped.set(key, newStructure);
+          }
+        } else {
+          grouped.set(key, []);
         }
-      } else {
-        grouped.set(key, []);
-      }
-    });
-    return grouped;
+      });
+      return grouped;
+    }
   }
@@ -112,1 +102,6 @@ };
 export const getGroupMark = () => groupMark;
+
+export const getGroupText = (value: any, column?: Column) => {
+  const format = column && column.format;
+  return format ? format(value) : `${column && column.title && (column.title + ': ')}${value}`;
+};

Utils/SortUtils.js

@@ -9,2 +9,3 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 import { SortDirection } from '../enums';
+import { getValueByColumn } from './DataUtils';
 export var sortData = function (columns, data) {
@@ -15,8 +16,7 @@ var sortedColumn = columns.find(function (column) { return column.sortDirection; });
     }
-    var columnKey = sortedColumn.key;
     var sortFunc = sortedColumn.sortDirection === SortDirection.Ascend ?
-        (function (a, b) { return a[columnKey] < b[columnKey] ? -1 : 1; })
-        : (function (a, b) { return a[columnKey] > b[columnKey] ? -1 : 1; });
+        (function (a, b) { return getValueByColumn(a, sortedColumn) < getValueByColumn(b, sortedColumn) ? -1 : 1; })
+        : (function (a, b) { return getValueByColumn(a, sortedColumn) > getValueByColumn(b, sortedColumn) ? -1 : 1; });
     var newData = __spreadArrays(data).sort(sortFunc);
     return newData;
 };

Utils/SortUtils.ts

 import { SortDirection } from '../enums';
 import { Column } from '../Models/Column';
+import { getValueByColumn } from './DataUtils';
 
@@ -7,8 +8,7 @@ export const sortData = (columns: Column[], data: any): any[] => {
   if (!sortedColumn) { return data; }
-  const columnKey = sortedColumn.key;
   const sortFunc = sortedColumn.sortDirection === SortDirection.Ascend ?
-    ((a: any, b: any) => a[columnKey] < b[columnKey] ? -1 : 1)
-    : ((a: any, b: any) => a[columnKey] > b[columnKey] ? -1 : 1);
+    ((a: any, b: any) => getValueByColumn(a, sortedColumn) < getValueByColumn(b, sortedColumn) ? -1 : 1)
+    : ((a: any, b: any) => getValueByColumn(a, sortedColumn) > getValueByColumn(b, sortedColumn) ? -1 : 1);
   const newData = [...data].sort(sortFunc);
   return newData;
 };

Utils/TypeUtils.js

@@ -14,2 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { getField } from './ColumnUtils';
+import { getValueByColumn, replaceValue } from './DataUtils';
 export var convertToColumnTypes = function (data, columns) {
@@ -23,12 +24,12 @@ var newData = data.map(function (d) {
                     case DataType.String:
-                        nd[field] = nd[field].toString();
+                        nd = replaceValue(nd, c, getValueByColumn(nd, c).toString());
                         break;
                     case DataType.Number:
-                        nd[field] = Number(nd[field]);
+                        nd = replaceValue(nd, c, Number(getValueByColumn(nd, c)));
                         break;
                     case DataType.Date:
-                        nd[field] = new Date(nd[field]);
+                        nd = replaceValue(nd, c, new Date(getValueByColumn(nd, c)));
                         break;
                     case DataType.Boolean:
-                        nd[field] = toBoolean(nd[field]);
+                        nd = replaceValue(nd, c, toBoolean(getValueByColumn(nd, c)));
                         break;
@@ -42,2 +43,23 @@ }
 };
+export var getColumnsWithWrongType = function (data, columns) {
+    if (!data.length) {
+        return [];
+    }
+    var item = data[0];
+    var columnsWithWrongType = columns.filter(function (c) {
+        var field = getField(c);
+        var value = item[field];
+        if (value != null) {
+            switch (c.dataType) {
+                case DataType.String: return value.constructor !== String;
+                case DataType.Number: return value.constructor !== Number;
+                case DataType.Date: return value.constructor !== Date;
+                case DataType.Boolean: return value.constructor !== Boolean;
+                case DataType.Object: return value.constructor !== Object;
+            }
+        }
+        return true;
+    });
+    return columnsWithWrongType;
+};
 export var toBoolean = function (value) {
@@ -44,0 +66,0 @@ if (typeof value === 'string') {

Utils/TypeUtils.ts

 import { DataType } from '../enums';
 import { Column } from '../Models/Column';
 import { getField } from './ColumnUtils';
+import { getValueByColumn, replaceValue } from './DataUtils';
 
 export const convertToColumnTypes = (data: any[], columns: Column[]) => {
   const newData: any[] = data.map((d) => {
-    const nd = {...d};
+    let nd = {...d};
     columns.forEach((c) => {
@@ -12,6 +13,6 @@ const field = getField(c);
         switch (c.dataType) {
-          case DataType.String: nd[field] = nd[field].toString(); break;
-          case DataType.Number: nd[field] = Number(nd[field]); break;
-          case DataType.Date: nd[field] = new Date(nd[field]); break;
-          case DataType.Boolean: nd[field] = toBoolean(nd[field]); break;
+          case DataType.String: nd = replaceValue(nd, c, getValueByColumn(nd, c).toString()); break;
+          case DataType.Number: nd = replaceValue(nd, c, Number(getValueByColumn(nd, c))); break;
+          case DataType.Date: nd = replaceValue(nd, c, new Date(getValueByColumn(nd, c))); break;
+          case DataType.Boolean: nd = replaceValue(nd, c, toBoolean(getValueByColumn(nd, c))); break;
         }
@@ -25,2 +26,24 @@ }
 
+export const getColumnsWithWrongType = (data: any[], columns: Column[]): Column[] => {
+  if (!data.length) {
+    return [];
+  }
+  const item = data[0];
+  const columnsWithWrongType = columns.filter((c) => {
+    const field = getField(c);
+    const value = item[field];
+    if (value != null) {
+      switch (c.dataType) {
+        case DataType.String: return value.constructor !== String;
+        case DataType.Number: return value.constructor !== Number;
+        case DataType.Date: return value.constructor !== Date;
+        case DataType.Boolean: return value.constructor !== Boolean;
+        case DataType.Object: return value.constructor !== Object;
+      }
+    }
+    return true;
+  });
+  return columnsWithWrongType;
+};
+
 export const toBoolean = (value: any) => {
@@ -27,0 +50,0 @@ if (typeof value === 'string') {

Utils/Validation.js

@@ -1,5 +0,8 @@
-export var getValidationValue = function (rowData, field, validation) {
+import { getValueByColumn } from './DataUtils';
+export var getValidationValue = function (rowData, column) {
+    var validation = column.validation;
     if (validation) {
-        return validation(rowData[field], rowData);
+        var value = getValueByColumn(rowData, column);
+        return validation(value, rowData);
     }
 };

Utils/Validation.ts

@@ -1,7 +0,10 @@
-import { ValidationFunc } from '../types';
+import { Column } from '../models';
+import { getValueByColumn } from './DataUtils';
 
-export const getValidationValue = (rowData: any, field: string, validation?: ValidationFunc) => {
+export const getValidationValue = (rowData: any, column: Column) => {
+  const { validation } = column;
   if (validation) {
-    return validation(rowData[field], rowData);
+    const value = getValueByColumn(rowData, column);
+    return validation(value, rowData);
   }
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200742

increased by4.66%

Number of package files

138

increased by1.47%

Lines of code

3411

increased by5.02%

Number of lines in readme file

391

increased by0.77%

No dependency changes