ka-table - npm Package Compare versions

Comparing version 2.2.4 to 2.3.1

Components/CellText/CellText.js

@@ -16,3 +16,3 @@ var __assign = (this && this.__assign) || function () {
 import { isEmpty } from '../../Utils/CommonUtils';
-import { mergeProps } from '../../Utils/PropsUtils';
+import { extendProps } from '../../Utils/PropsUtils';
 var CellText = function (props) {
@@ -32,8 +32,5 @@ var childAttributes = props.childAttributes, column = props.column, format = props.column.format, dispatch = props.dispatch, editingMode = props.editingMode, rowData = props.rowData, rowKeyField = props.rowKeyField;
     };
-    var divProps = componentProps;
-    if (childAttributes && childAttributes.cell) {
-        divProps = mergeProps(componentProps, props, childAttributes.cell);
-    }
+    var divProps = extendProps(componentProps, props, childAttributes.cell, props.dispatch);
     return (React.createElement("div", __assign({}, divProps), formatedValue || React.createElement(React.Fragment, null, "\u00A0")));
 };
 export default CellText;

Components/Table/Table.js

@@ -17,2 +17,3 @@ var __assign = (this && this.__assign) || function () {
 import { filterData, searchData } from '../../Utils/FilterUtils';
+import { extendProps } from '../../Utils/PropsUtils';
 import { sortData } from '../../Utils/SortUtils';
@@ -24,3 +25,3 @@ import { convertToColumnTypes } from '../../Utils/TypeUtils';
 export var Table = function (props) {
-    var _a = props.editableCells, editableCells = _a === void 0 ? [] : _a, _b = props.editingMode, editingMode = _b === void 0 ? EditingMode.None : _b, filteringMode = props.filteringMode, groups = props.groups, search = props.search, _c = props.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = props.sortingMode, sortingMode = _d === void 0 ? SortingMode.None : _d;
+    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;
@@ -39,4 +40,8 @@ data = search ? searchData(columns, data, search) : data;
     var dispatch = wrapDispatch(props);
+    var componentProps = {
+        className: defaultOptions.css.table,
+    };
+    var tableProps = extendProps(componentProps, props, childAttributes.table, dispatch);
     return (React.createElement("div", { className: 'ka' },
-        React.createElement("table", { className: defaultOptions.css.table },
+        React.createElement("table", __assign({}, tableProps),
             React.createElement("thead", { className: defaultOptions.css.thead },
@@ -46,3 +51,3 @@ React.createElement(HeadRow, { groupColumnsCount: groupColumnsCount, columns: columns, dispatch: dispatch, sortingMode: sortingMode }),
                     (React.createElement(FilterRow, { columns: columns, dispatch: dispatch, groupColumnsCount: groupColumnsCount }))),
-            React.createElement(TableBody, __assign({}, props, { columns: columns, data: data, editableCells: editableCells, editingMode: editingMode, groupColumnsCount: groupColumnsCount, groupedColumns: groupedColumns, dispatch: dispatch, selectedRows: selectedRows })))));
+            React.createElement(TableBody, __assign({}, props, { columns: columns, childAttributes: childAttributes, data: data, editableCells: editableCells, editingMode: editingMode, groupColumnsCount: groupColumnsCount, groupedColumns: groupedColumns, dispatch: dispatch, selectedRows: selectedRows })))));
 };

models.js

 export * from './Models/AttributeTableData';
-export * from './Models/AttributeTableData';
 export * from './Models/Cell';
@@ -4,0 +3,0 @@ export * from './Models/ChildAttributes';

models.ts

@@ -0,3 +1,3 @@
+
 export * from './Models/AttributeTableData';
-export * from './Models/AttributeTableData';
 export * from './Models/Cell';
@@ -4,0 +4,0 @@ export * from './Models/ChildAttributes';

Models/AttributeTableData.ts

 import { HTMLAttributes } from 'react';
 
-import { ChildProps, DispatchFunc } from '../types';
+import { DispatchFunc } from '../types';
 
-export class AttributeTableData {
+export class AttributeTableData<T> {
   public baseFunc!: any;
   public childElementAttributes!: HTMLAttributes<HTMLElement>;
-  public childProps!: ChildProps;
   public dispatch!: DispatchFunc;
+  public childProps!: T;
 }

Models/ChildAttributes.ts

@@ -0,5 +1,9 @@
+
+import { ITableAllProps } from '../';
+import { ICellContentProps } from '../Components/CellContent/CellContent';
 import { ChildAttributesItem } from '../types';
 
 export class ChildAttributes {
-  public cell?: ChildAttributesItem;
+  public cell?: ChildAttributesItem<ICellContentProps>;
+  public table?: ChildAttributesItem<ITableAllProps>;
 }

package.json

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

README.md

@@ -122,2 +122,3 @@ [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/komarovalexander/ka-table/blob/master/LICENSE)
 | columns | [<code>Column[]</code>](#Column) | Columns in table and their look and behaviour |
+| childAttributes | <code>[ChildAttributes](#ChildAttributes)</code> | Object describes attributes for data grid child components [Events Demo](https://komarovalexander.github.io/ka-table/#/events) |
 | data | <code>any\[\]</code> | The Table's data |
@@ -129,9 +130,9 @@ | dataRow | [<code>DataRowFunc</code>](#DataRowFunc) | Returns Data Row Template [Custom Data Row Example](https://komarovalexander.github.io/ka-table/#/custom-data-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 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 | Executes each time when dispatch is called [Events](https://komarovalexander.github.io/ka-table/#/events) |
-| 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) |
+| onDataChange | <code>(data: any[]) => void</code> | 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 | <code>(value: any) => void</code> | 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 | <code>(type: string, data: any) => void</code> | Executes each time when dispatch is called [Events](https://komarovalexander.github.io/ka-table/#/events) |
+| groupsExpanded | <code>any[][]</code> | Groups that are expanded in the grid |
+| rowKeyField | <code>string</code> | Data's field which is used to identify row |
+| search <a name="Table.search"></a> | <code>string</code> | Specifies the text which are used for search by data [Search Example](https://komarovalexander.github.io/ka-table/#/search) |
+| selectedRows | <code>any[]</code> | 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) |
@@ -152,13 +153,13 @@ | 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) |
 | filterRowCell | [<code>FilterRowFunc</code>](#FilterRowFunc) | Returns an editor for filter row cell [Filter Row Custom Editor](https://komarovalexander.github.io/ka-table/#/filter-row-custom-editor) |
-| filterRowOperator | string | Sets filter row operator [Filter Row Custom Editor](https://komarovalexander.github.io/ka-table/#/filter-row-custom-editor). See the list of predefined filter operators [<code>FilterOperatorName</code>](#FilterOperatorName) |
-| filterRowValue | any | Sets filter row value [Filter Row](https://komarovalexander.github.io/ka-table/#/filter-row) |
-| field | string | Specifies the property of data's object which value will be used in column, if null value from key option will be used |
+| filterRowOperator | <code>string</code> | Sets filter row operator [Filter Row Custom Editor](https://komarovalexander.github.io/ka-table/#/filter-row-custom-editor). See the list of predefined filter operators [<code>FilterOperatorName</code>](#FilterOperatorName) |
+| filterRowValue | <code>any</code> | Sets filter row value [Filter Row](https://komarovalexander.github.io/ka-table/#/filter-row) |
+| 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 |
 | format | [<code>FormatFunc</code>](#FormatFunc) | Returns formated cell string [Example](https://komarovalexander.github.io/ka-table/#/custom-cell) |
-| headCell | HeaderCellFunc | Returns a custom header cell [Custom Head Cell Example](https://komarovalexander.github.io/ka-table/#/custom-header-cell) |
-| isEditable | boolean | Specifies can column be editable or not |
-| key | string | Mandatory field, specifies unique key for the column |
+| headCell | <code>HeaderCellFunc</code> | Returns a custom header cell [Custom Head Cell Example](https://komarovalexander.github.io/ka-table/#/custom-header-cell) |
+| isEditable | <code>boolean</code> | Specifies can column be editable or not |
+| key | <code>string</code> | Mandatory field, specifies unique key for the column |
 | search | [<code>SearchFunc</code>](#SearchFunc) | Overrides the default search method for the cell. Executes if [Table.search](#Table.search) option is set |
 | sortDirection | [<code>SortDirection</code>](#SortDirection) | Sets the direction of sorting for the column |
-| style | React.CSSProperties | Sets the style options of the elements |
-| title | string | Specifies the text of the header |
+| style | <code>React.CSSProperties</code> | Sets the style options of the elements |
+| title | <code>string</code> | Specifies the text of the header |
 | validation | [<code>ValidationFunc</code>](#ValidationFunc) | Returns the validation error string or does not return anything in case of passed validation [Validation Example](https://komarovalexander.github.io/ka-table/#/validation) |
@@ -176,5 +177,32 @@
 | --- | --- | --- |
-| field | string | The field of specific column |
-| rowKeyValue | any | Data's key value of every specific row |
+| field | <code>string</code> | The field of specific column |
+| rowKeyValue | <code>any</code> | Data's key value of every specific row |
 
+
+<a name="ChildAttributes"></a>
+### ChildAttributes
+Describes the attributes for a specific child component
+It is possible to override default behaviour just specify particular handler [Events Demo](https://komarovalexander.github.io/ka-table/#/events)
+
+| Name | Type | Description |
+| --- | --- | --- |
+| cell | <code>[ChildAttributesItem](#ChildAttributesItem)<[ICellContentProps](#ICellContentProps)></code> | Sets custom attributes for cell element |
+| table | <code>[ChildAttributesItem](#ChildAttributesItem)<[Table](#Table)></code> | Sets custom attributes for table element |
+
+
+<a name="ChildAttributesItem"></a>
+#### ChildAttributesItem
+This object is an extension for React HTMLAttributes. It contains all attributes and all [react Synthetic Events](https://reactjs.org/docs/events.html), but in each event it adds a second parameter which contains additional data with <code>[AttributeTableData type](#AttributeTableData)</code>.
+
+<a name="AttributeTableData"></a>
+#### AttributeTableData
+A second parameter in each [react Synthetic Event](https://reactjs.org/docs/events.html). Contains component-related information.
+
+| Name | Type | Description |
+| --- | --- | --- |
+| baseFunc | <code>any</code> | Contains default function for overrided function - it is easy to add additional logic and execute default behaviour where you want it |
+| childElementAttributes | <code>HTMLAttributes&lt;HTMLElement&gt;</code> | Default HTMLAttributes of the component |
+| childProps | <code>any</code> | Props of the component |
+| dispatch | <code>(type: string, data: any) => void</code> | Executes specific action with specific data |
+
 <a name="Group"></a>
@@ -187,3 +215,3 @@ ### Group
 | --- | --- | --- |
-| field | string | The grouped column's field |
+| field | <code>string</code> | The grouped column's field |
 
@@ -198,5 +226,5 @@
 | --- | --- | --- |
-| scrollPosition | number | Current scroll top position |
-| itemHeight | ((data: any) => number) \| number | Returns height of specific row |
-| tbodyHeight | number | tbody height |
+| scrollPosition | <code>number</code> | Current scroll top position |
+| itemHeight | <code>((data: any) => number)</code> \| <code>number</code> | Returns height of specific row |
+| tbodyHeight | <code>number</code> | tbody height |
 
@@ -269,3 +297,3 @@
 
-(props: [<code>ICellContentProps</code>](#ICellContentProps)) => any;
+<code>(props: [ICellContentProps](#ICellContentProps)) => any;</code>
 
@@ -277,3 +305,3 @@ Function which obtains [<code>ICellContentProps</code>](#ICellContentProps) as parameter and returns React component which should be shown instead of cell content.
 
-(props: [<code>IDataRowProps</code>](#IDataRowProps)) => any;
+<code>(props: [IDataRowProps](#IDataRowProps)) => any;</code>
 
@@ -285,3 +313,3 @@ Function which obtains [<code>IDataRowProps</code>](#IDataRowProps) as parameter and returns React component which should be shown instead of Row content.
 
-(props: [<code>ICellEditorProps</code>](#ICellEditorProps)) => any;
+<code>(props: [ICellEditorProps](#ICellEditorProps)) => any;</code>
 
@@ -293,3 +321,3 @@ Function which obtains [<code>ICellEditorProps</code>](#ICellEditorProps) as parameter and returns React component which should be shown instead of default editor.
 
-(props: [<code>IFilterRowEditorProps</code>](#IFilterRowEditorProps)) => any;
+<code>(props: [IFilterRowEditorProps](#IFilterRowEditorProps)) => any;</code>
 
@@ -301,3 +329,3 @@ Function which obtains [<code>IFilterRowEditorProps</code>](#IFilterRowEditorProps) as parameter and returns React component which should be shown instead of default filter row's editor.
 
-(value: any) => any;
+<code>(value: any) => any;</code>
 
@@ -310,5 +338,5 @@ Function which obtains value as parameter and returns formated value which will be shown in cell.
 
-(searchText?: string, rowData?: any, column?: Column) => boolean;
+<code>(searchText?: string, rowData?: any, column?: Column) => boolean;</code>
 
-Function which obtains searchText?: string, rowData?: any, column?: Column - as parameters and returns boolean value which is true if cell's value is matched with searched value and false otherwise.
+Function which obtains <code>searchText?: string, rowData?: any, column?: Column</code> - as parameters and returns <code>boolean</code> value which is true if cell's value is matched with searched value and false otherwise.
 
@@ -319,3 +347,3 @@
 
-(value: any, rowData: any) => string | void;
+<code>(value: any, rowData: any) => string | void;</code>
 
@@ -332,7 +360,7 @@ Function which obtains value of specific cell and row - as parameters and returns validation error string or does not return anything in case of passed validation.
 | column | [<code>Column</code>](#Column) | column of the editor |
-| dispatch | (type: string, data: any) => void | can forse Table make change in data, close the editor, and other actions |
-| field | string | field name of current column |
-| rowData | any | data of the row in which editor is shown |
-| isSelectedRow | boolean | selection state of the current row |
-| rowKeyField | string | field which is used to identify row |
+| dispatch | <code>(type: string, data: any) => void</code> | can forse Table make change in data, close the editor, and other actions |
+| field | <code>string</code> | field name of current column |
+| rowData | <code>any</code> | data of the row in which editor is shown |
+| isSelectedRow | <code>boolean</code> | selection state of the current row |
+| rowKeyField | <code>string</code> | field which is used to identify row |
 
@@ -346,3 +374,3 @@ <a name="IFilterRowEditorProps"></a>
 | column | [<code>Column</code>](#Column) | column of the editor |
-| dispatch | (type: string, data: any) => void |  can forse Table make change in filter data and other actions  |
+| dispatch | <code>(type: string, data: any) => void</code> |  can forse Table make change in filter data and other actions  |
 
@@ -357,4 +385,4 @@
 | column | [<code>Column</code>](#Column) | settings of the column in which editor is shown |
-| openEditor | () => void | call this method to open editor of the cell |
-| rowData | any | data of the row in which editor is shown |
+| openEditor | <code>() => void</code> | call this method to open editor of the cell |
+| rowData | <code>any</code> | data of the row in which editor is shown |
 
@@ -369,8 +397,8 @@
 | columns | [<code>Column[]</code>](#Column) | Columns in table and their look and behaviour |
-| dispatch | (type: string, data: any) => void | Executes specific action with specific data |
+| dispatch | <code>(type: string, data: any) => void</code> | Executes specific action 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 |
+| rowData | <code>any</code> | Data of current row |
+| isSelectedRow | <code>boolean</code> | Describes selected state of current row |
+| rowKeyField | <code>string</code> | Data's field which is used to identify row |
+| selectedRows | <code>any[]</code> | Array of rows keys which are marked as selected |

types.ts

@@ -7,17 +7,15 @@ import { PropsWithChildren } from 'react';
 import { IHeadCellProps } from './Components/HeadCell/HeadCell';
-import { Column } from './models';
-import { AttributeTableData } from './Models/AttributeTableData';
+import { AttributeTableData, Column } from './models';
 
-type AddParameters<T> =
+type AddParameters<T, I> =
 T extends (e: infer E) => void ? (
-    (e: E, extendedEvent: AttributeTableData) => void
+    (e: E, extendedEvent: AttributeTableData<I>) => void
 ) : T;
-
-type WithExtraParameters<T> = {
-  [P in keyof T ] : AddParameters<T[P]>;
+type WithExtraParameters<T, I> = {
+  [P in keyof T ] : AddParameters<T[P], I>;
 };
 
-export type ChildProps = ICellContentProps;
 export type CellFunc = (props: CellFuncPropsWithChildren) => any;
 export type CellFuncPropsWithChildren = PropsWithChildren<ICellContentProps>;
+export type ChildAttributesItem<T> = WithExtraParameters<React.HTMLAttributes<HTMLElement>, T>;
 export type DataChangeFunc = (data: any[]) => void;
@@ -33,3 +31,2 @@ export type DataRowFunc = (props: DataRowFuncPropsWithChildren) => any;
 export type FormatFunc = (value: any) => any;
-export type ChildAttributesItem = WithExtraParameters<React.HTMLAttributes<HTMLElement>>;
 export type HeaderCellFunc = (props: HeaderCellFuncPropsWithChildren) => any;
@@ -36,0 +33,0 @@ export type HeaderCellFuncPropsWithChildren = PropsWithChildren<IHeadCellProps>;

Utils/FilterUtils.js

@@ -6,3 +6,3 @@ import defaultOptions from '../defaultOptions';
 export var getRowEditableCells = function (rowKeyValue, editableCells) {
-    return editableCells ? editableCells.filter(function (c) { return c.rowKey === rowKeyValue; }) : [];
+    return editableCells.filter(function (c) { return c.rowKey === rowKeyValue; });
 };
@@ -9,0 +9,0 @@ export var searchData = function (columns, data, searchText) {

Utils/FilterUtils.ts

@@ -9,4 +9,4 @@ import defaultOptions from '../defaultOptions';
 
-export const getRowEditableCells = (rowKeyValue: any, editableCells?: Cell[]): Cell[] => {
-  return editableCells ? editableCells.filter((c) => c.rowKey === rowKeyValue) : [];
+export const getRowEditableCells = (rowKeyValue: any, editableCells: Cell[]): Cell[] => {
+  return editableCells.filter((c) => c.rowKey === rowKeyValue);
 };
@@ -13,0 +13,0 @@

Utils/PropsUtils.js

@@ -13,4 +13,11 @@ var __assign = (this && this.__assign) || function () {
 import { isFunction } from 'util';
+export var extendProps = function (childElementAttributes, childProps, childCustomAttributes, dispatch) {
+    var resultProps = childElementAttributes;
+    if (childCustomAttributes) {
+        resultProps = mergeProps(childElementAttributes, childProps, childCustomAttributes, dispatch);
+    }
+    return resultProps;
+};
 var emptyFunc = function () { };
-export var mergeProps = function (childElementAttributes, childProps, childCustomAttributes) {
+export var mergeProps = function (childElementAttributes, childProps, childCustomAttributes, dispatch) {
     var customPropsWithEvents = {};
@@ -28,3 +35,3 @@ var _loop_1 = function (prop) {
                         childProps: childProps,
-                        dispatch: childProps.dispatch,
+                        dispatch: dispatch,
                     });
@@ -31,0 +38,0 @@ };

Utils/PropsUtils.ts

 import { HTMLAttributes } from 'react';
 import { isFunction } from 'util';
 
-import { ChildAttributesItem, ChildProps } from '../types';
+import { ChildAttributesItem } from '../types';
 
+export const extendProps = (
+  childElementAttributes: HTMLAttributes<HTMLElement>,
+  childProps: any,
+  childCustomAttributes: ChildAttributesItem<any> | undefined,
+  dispatch: any): React.HTMLAttributes<HTMLElement> => {
+    let resultProps = childElementAttributes;
+    if (childCustomAttributes) {
+      resultProps = mergeProps(childElementAttributes, childProps, childCustomAttributes, dispatch);
+    }
+    return resultProps;
+};
+
 const emptyFunc = () => {};
 export const mergeProps = (
   childElementAttributes: HTMLAttributes<HTMLElement>,
-  childProps: ChildProps,
-  childCustomAttributes: ChildAttributesItem): React.HTMLAttributes<HTMLElement> => {
+  childProps: any,
+  childCustomAttributes: ChildAttributesItem<any>,
+  dispatch: any): React.HTMLAttributes<HTMLElement> => {
   const customPropsWithEvents: any = {};
@@ -23,3 +36,3 @@ for (const prop in childCustomAttributes) {
             childProps,
-            dispatch: childProps.dispatch,
+            dispatch,
           });
@@ -26,0 +39,0 @@ };

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

189313

increased by1.93%

Lines of code

3176

increased by0.79%

Number of lines in readme file

388

increased by7.78%

No dependency changes