ka-table - npm Package Compare versions

Comparing version 1.1.1 to 1.2.1

Components/CellComponent/CellComponent.js

@@ -14,2 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import defaultOptions from '../../defaultOptions';
+import { Events } from '../../enums';
 import { getField } from '../../Utils/ColumnUtils';
@@ -19,6 +20,6 @@ import CellContent from '../CellContent/CellContent';
 var CellComponent = function (props) {
-    var column = props.column, style = props.column.style, isEditableCell = props.isEditableCell, onRowDataChanged = props.onRowDataChanged;
-    return (React.createElement("td", { style: style, className: defaultOptions.css.cell }, isEditableCell ? (React.createElement(CellEditor, __assign({}, props, { field: getField(column), onValueChange: onRowDataChanged })))
+    var column = props.column, style = props.column.style, dispatch = props.dispatch, isEditableCell = props.isEditableCell;
+    return (React.createElement("td", { style: style, className: defaultOptions.css.cell }, isEditableCell ? (React.createElement(CellEditor, __assign({}, props, { field: getField(column), onValueChange: function (newValue) { dispatch(Events.RowDataChanged, { newValue: newValue }); } })))
         : (React.createElement(CellContent, __assign({}, props, { field: getField(column) })))));
 };
 export default CellComponent;

Components/DataRow/DataRow.js

@@ -14,13 +14,11 @@ var __assign = (this && this.__assign) || function () {
 import defaultOptions from '../../defaultOptions';
-import { getRowEditableCells } from '../../Utils/FilterUtils';
 import DataRowContent from '../DataRowContent/DataRowContent';
 import EmptyCells from '../EmptyCells/EmptyCells';
 var DataRow = function (props) {
-    var editableCells = props.editableCells, groupColumnsCount = props.groupColumnsCount, height = props.height, rowData = props.rowData, rowKeyField = props.rowKeyField, dataRow = props.dataRow, _a = props.selectedRows, selectedRows = _a === void 0 ? [] : _a, trRef = props.trRef;
+    var groupColumnsCount = props.groupColumnsCount, rowData = props.rowData, rowKeyField = props.rowKeyField, dataRow = props.dataRow, _a = props.selectedRows, selectedRows = _a === void 0 ? [] : _a, trRef = props.trRef;
     var rowKeyValue = rowData[rowKeyField];
-    var rowEditableCells = getRowEditableCells(rowKeyValue, editableCells);
     var isSelectedRow = selectedRows.some(function (s) { return s === rowKeyValue; });
-    var dataRowProps = __assign(__assign({}, props), { isSelectedRow: isSelectedRow, rowEditableCells: rowEditableCells, rowKeyValue: rowKeyValue });
+    var dataRowProps = __assign(__assign({}, props), { isSelectedRow: isSelectedRow, rowKeyValue: rowKeyValue });
     var dataRowContent = dataRow && dataRow(dataRowProps);
-    return (React.createElement("tr", { ref: trRef, style: { height: height }, className: defaultOptions.css.row + " " + (isSelectedRow ? defaultOptions.css.rowSelected : '') },
+    return (React.createElement("tr", { ref: trRef, className: defaultOptions.css.row + " " + (isSelectedRow ? defaultOptions.css.rowSelected : '') },
         React.createElement(EmptyCells, { count: groupColumnsCount }),
@@ -27,0 +25,0 @@ dataRowContent

Components/DataRowContent/DataRowContent.js

 import React from 'react';
 import { isEditableCell } from '../../Utils/CellUtils';
+import { getRowEditableCells } from '../../Utils/FilterUtils';
 import CellComponent from '../CellComponent/CellComponent';
 var DataRowContent = function (_a) {
-    var columns = _a.columns, rowEditableCells = _a.rowEditableCells, editingMode = _a.editingMode, isSelectedRow = _a.isSelectedRow, dispatch = _a.dispatch, onRowDataChanged = _a.onRowDataChanged, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
-    return (React.createElement(React.Fragment, null, columns.map(function (column) { return (React.createElement(CellComponent, { column: column, editingMode: editingMode, isEditableCell: isEditableCell(editingMode, column, rowEditableCells), isSelectedRow: isSelectedRow, key: column.key, dispatch: dispatch, onRowDataChanged: onRowDataChanged, rowData: rowData, rowKeyField: rowKeyField })); })));
+    var columns = _a.columns, dispatch = _a.dispatch, editableCells = _a.editableCells, editingMode = _a.editingMode, isSelectedRow = _a.isSelectedRow, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
+    var rowKeyValue = rowData[rowKeyField];
+    var rowEditableCells = getRowEditableCells(rowKeyValue, editableCells);
+    return (React.createElement(React.Fragment, null, columns.map(function (column) { return (React.createElement(CellComponent, { column: column, editingMode: editingMode, isEditableCell: isEditableCell(editingMode, column, rowEditableCells), isSelectedRow: isSelectedRow, key: column.key, dispatch: dispatch, rowData: rowData, rowKeyField: rowKeyField })); })));
 };
 export default DataRowContent;

Components/VirtualizedRows/VirtualizedRows.js

@@ -13,3 +13,2 @@ var __assign = (this && this.__assign) || function () {
 import React, { useEffect, useRef } from 'react';
-import { Events } from '../../enums';
 import { getGroupMark } from '../../Utils/GroupUtils';
@@ -20,3 +19,3 @@ import { getVirtualized } from '../../Utils/Virtualize';
 var VirtualizedRows = function (props) {
-    var columns = props.columns, data = props.data, dispatch = props.dispatch, _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, _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();
@@ -44,3 +43,2 @@ var firstRowRef = useRef(null);
     }
-    var rowDataChangedEvent = dispatch && dispatch.bind(null, Events.RowDataChanged);
     var rowRefLink = firstRowRef;
@@ -54,3 +52,3 @@ return (React.createElement(React.Fragment, null,
             else {
-                var dataRow = (React.createElement(DataRow, __assign({}, props, { trRef: rowRefLink, key: d[rowKeyField], rowData: d, onRowDataChanged: rowDataChangedEvent })));
+                var dataRow = (React.createElement(DataRow, __assign({}, props, { trRef: rowRefLink, key: d[rowKeyField], rowData: d })));
                 rowRefLink = undefined;
@@ -57,0 +55,0 @@ return dataRow;

package.json

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

README.md

@@ -76,2 +76,39 @@ [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/komarovalexander/ka-table/blob/master/LICENSE)
 
+## Examples
+[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
+
+[Custom Cell](https://komarovalexander.github.io/ka-table/#/custom-cell) - Best way to customise look of every column in table
+
+[Custom DataRow](https://komarovalexander.github.io/ka-table/#/custom-data-row) - Customise look of a row in the table
+
+[Custom Editor](https://komarovalexander.github.io/ka-table/#/custom-editor) - Table supports user created editors
+
+[Custom Header Cell](https://komarovalexander.github.io/ka-table/#/custom-header-cell) - Customisation of header cell
+
+[Editing](https://komarovalexander.github.io/ka-table/#/editing) - Editing out of the box
+
+[Events](https://komarovalexander.github.io/ka-table/#/events) - Most events are trackable
+
+[Filter Extended](https://komarovalexander.github.io/ka-table/#/filter-extended) - Easy filtered by extended filters
+
+[Filter Row](https://komarovalexander.github.io/ka-table/#/filter-row) - Built-in filter row
+
+[Filter Row - Custom Editor](https://komarovalexander.github.io/ka-table/#/filter-row-custom-editor) - Customise filter cell every way you want
+
+[Grouping](https://komarovalexander.github.io/ka-table/#/grouping) - Group data for most convenient work with it
+
+[25000 Rows](https://komarovalexander.github.io/ka-table/#/many-rows) - Virtualisation are supported
+
+[10000 Grouped Rows](https://komarovalexander.github.io/ka-table/#/many-rows-grouping) - Virtualisation work well with grouping
+
+[Search](https://komarovalexander.github.io/ka-table/#/search) - Search by the whole Table is easy
+
+[Selection](https://komarovalexander.github.io/ka-table/#/selection) - Select and process specific rows
+
+[Sorting](https://komarovalexander.github.io/ka-table/#/sorting)
+
+[State Storing](https://komarovalexander.github.io/ka-table/#/state-storing) - Save Table's state and restore it after page reload
+
+[Validation](https://komarovalexander.github.io/ka-table/#/validation)
+
 ## API
@@ -85,14 +122,15 @@ <a name="Table"></a>
 | columns | [<code>Column[]</code>](#Column) | Columns in table and their look and behaviour |
-| data | <code>any\[\]</code> | The data which is shown in Table's rows |
-| editableCells | [<code>Cell[]</code>](#Cell) | This property contains the array of cells which are being edited [Editing Example](https://komarovalexander.github.io/ka-table/#/editing) |
+| data | <code>any\[\]</code> | The Table's data |
+| dataRow | [<code>DataRowFunc</code>](#DataRowFunc) | Returns Data Row Template [Custom Data Row Example](https://komarovalexander.github.io/ka-table/#/custom-data-row |
+| editableCells | [<code>Cell[]</code>](#Cell) | Array of cells that are in edit mode [Editing Example](https://komarovalexander.github.io/ka-table/#/editing) |
 | editingMode | [<code>EditingMode</code>](#EditingMode) | Sets the table's editing mode [Editing Example](https://komarovalexander.github.io/ka-table/#/editing) |
 | filterRow | [<code>FilterCondition[]</code>](#FilterCondition) | Sets filters for columns [Filter Row Example](https://komarovalexander.github.io/ka-table/#/filter-row) |
 | groups | [<code>Group[]</code>](#Group) | Group's in the table [Grouping Example](https://komarovalexander.github.io/ka-table/#/grouping) |
-| onDataChange | (data: any[]) => void | This function is executed each time when data going to change, use it to override current data [Editing Example](https://komarovalexander.github.io/ka-table/#/editing) |
+| onDataChange | (data: any[]) => void | This function is called each time when data going to change, use it to override current data [Editing Example](https://komarovalexander.github.io/ka-table/#/editing) |
 | onOptionChange | (value: any) => void | This is mandatory function, this executes each time when grid going to change its state, use it to override current state [Example](https://komarovalexander.github.io/ka-table/#/editing) |
 | onEvent | (type: string, data: any) => void | Use this function to track events in Table [Events Example](https://komarovalexander.github.io/ka-table/#/events) |
-| groupsExpanded | any[][] | Contains groups which are expanded in the grid |
-| rowKeyField | string | Property of data's item which is used to identitify row |
-| search <a name="Table.search"></a> | string | Specifies the text which should be found in the data [Search Example](https://komarovalexander.github.io/ka-table/#/search) |
-| selectedRows | any[] | Specifies the array of rows keys which are should be marked as selected [Selection Example](https://komarovalexander.github.io/ka-table/#/selection) |
+| groupsExpanded | any[][] | Groups that are expanded in the grid |
+| rowKeyField | string | Data's field which is used to identify row |
+| search <a name="Table.search"></a> | string | Specifies the text which are used for search by data [Search Example](https://komarovalexander.github.io/ka-table/#/search) |
+| selectedRows | any[] | Array of rows keys which are marked as selected [Selection Example](https://komarovalexander.github.io/ka-table/#/selection) |
 | sortingMode | [<code>SortingMode</code>](#SortingMode)  | Sorting mode [Sorting Example](https://komarovalexander.github.io/ka-table/#/sorting) |
@@ -219,2 +257,9 @@ | virtualScrolling | [<code>VirtualScrolling</code>](#VirtualScrolling) | Virtual scrolling options - set it as empty object {} to enable virtual scrolling and auto calculate its parameters [Many Rows Example](https://komarovalexander.github.io/ka-table/#/many-rows) |
 
+<a name="DataRowFunc"></a>
+### DataRowFunc
+
+(props: [<code>IDataRowProps</code>](#IDataRowProps)) => any;
+
+Function which obtains [<code>IDataRowProps</code>](#IDataRowProps) as parameter and returns React component which should be shown instead of Row content.
+
 <a name="EditorFunc"></a>
@@ -272,1 +317,17 @@ ### EditorFunc
 | rowData | any | data of the row in which editor is shown |
+
+
+<a name="IDataRowProps"></a>
+### IDataRowProps
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| columns | [<code>Column[]</code>](#Column) | Columns in table and their look and behaviour |
+| dispatch | (type: string, data: any) => void | Executes specific event with specific data |
+| editableCells | [<code>Cell[]</code>](#Cell) | Array of cells that are in edit mode |
+| editingMode | [<code>EditingMode</code>](#EditingMode) | Table's editing mode |
+| rowData | any | Data of current row |
+| isSelectedRow | boolean | Describes selected state of current row |
+| rowKeyField | string | Data's field which is used to identify row |
+| selectedRows | any[] | Array of rows keys which are marked as selected |

types.ts

@@ -21,5 +21,4 @@ import { PropsWithChildren } from 'react';
 export type OptionChangeFunc = (value: any) => void;
-export type RowDataChangedFunc = (data: any) => void;
 export type SearchFunc = (searchText?: string, rowData?: any, column?: Column) => boolean;
 export type ValidationFunc = (value: any, rowData: any) => string | void;
 export type ValueChangeFunc = (newValue: any) => void;

Utils/EventUtils.js

@@ -34,3 +34,3 @@ var __assign = (this && this.__assign) || function () {
             case Events.RowDataChanged:
-                var newData = getCopyOfArrayAndInsertOrReplaceItem(eventData, rowKeyField, data);
+                var newData = getCopyOfArrayAndInsertOrReplaceItem(eventData.newValue, rowKeyField, data);
                 onDataChange(newData);
@@ -37,0 +37,0 @@ break;

Utils/EventUtils.ts

@@ -34,3 +34,3 @@
       case Events.RowDataChanged:
-          const newData = getCopyOfArrayAndInsertOrReplaceItem(eventData, rowKeyField, data);
+          const newData = getCopyOfArrayAndInsertOrReplaceItem(eventData.newValue, rowKeyField, data);
           onDataChange(newData);
@@ -37,0 +37,0 @@ break;

No alert changes

Improved metrics

Total package byte prevSize

165119

increased by1.46%

Number of lines in readme file

330

increased by22.68%

Worsened metrics

Lines of code

2681

decreased by-0.52%

No dependency changes