Changelog History
Page 2
-
v4.1.0 Changes
July 26, 2020rowReordering: true
Demo: https://komarovalexander.github.io/ka-table/#/row-reordering
And also:
- Export Demo: https://komarovalexander.github.io/ka-table/#/export
- ๐ Fixes for Mozilla firefox
-
v4.0.1 Changes
July 19, 2020What was done
- childComponents setting for customization (instead of childAttributes)
this is a list of child components which user can override at this time (list can be extended by request):
export class ChildComponents { public cell?: ChildComponent<ICellProps>; public cellEditor?: ChildComponent<ICellEditorProps>; public cellText?: ChildComponent<ICellTextProps>; public dataRow?: ChildComponent<IDataRowProps>; public detailsRow?: ChildComponent<IDataRowProps>; public filterRowCell?: ChildComponent<IFilterRowEditorProps>; public groupCell?: ChildComponent<IGroupRowProps>; public groupRow?: ChildComponent<IGroupRowProps>; public headCell?: ChildComponent<IHeadCellProps>; public noDataRow?: ChildComponent<INoDataRowProps>; public table?: ChildComponent<ITableProps>; public tableHead?: ChildComponent<ITableHeadProps>; }
ChildComponent is a class with two settings:
export class ChildComponent<TProps> { public elementAttributes?: (props: PropsWithChildren<TProps>) => ChildAttributesItem<TProps>; public content?: (props: PropsWithChildren<TProps>) => any; }
elementAttributes - function which returns attributes for particular component element
childComponents={{ table: { elementAttributes: (props: ITableProps) => ({ className: 'table table-striped table-hover table-bordered' }) } }}
content - function overrides component content
childComponents={{ cellEditor: { content: (props) => { switch (props.column.key) { case 'passed': return <CustomLookupEditor {...props}/>; case 'name': return <CustomEditor {...props}/>; } } } }}
the ability to set up nested fields in one property using the dots #62
tableProps.search option renamed to tableProps.searchText
๐ฅ Breaking Changes
Because childComponents covers almost all cases for grid elements customization, API has been reworked.
- component customization properties in columns moved to childComponents
Before:
columns:[{ key: 'columnKey', cell: (props) => <AlertCell {...props}/> ... }]`
After:
childComponents={{ cellText: { content: (props) => { switch (props.column.key) { case 'columnKey': return <AlertCell {...props}/>; } // don't return anything for using default value } } }}
there is a list of settings which were in the column and their names in childComponents:
- cell -> cellText (cell in childComponents is a parent for cellText & cellEditor)
- editor -> cellEditor
- filterRowCell -> filterRowCell
- groupCell -> groupCell
- headCell -> headCell
- component customization properties in ITableProps also moved to childComponents (the same way as in (1)):
- dataRow -> dataRow
- groupRow -> groupRow
- detailsRow -> detailsRow
column.fieldParents were removed
before:key: 'field', fieldParents: ['parent1', 'parent2']
after:
key: 'parent1.parent2.field',
column.format & column.search & column.validation functions were moved to ITableProps. params became one object, and column option was added to this object
before:columns: [{ key: 'price', format: (value: number) => { return
$${value}
; }, validation: (value) => { return value ? '' : 'value must be specified'; } }, { dataType: DataType.Boolean, key: 'passed', search: (searchText?: string, rowData?: any) => { return (searchText === 'false' && !rowData.passed) || (searchText === 'true' && rowData.passed); }, }]
after:
format: ({ column, value }) => { if (column.key === 'price'){ return `$${value}`; } }, search: ({ searchText, rowData, column }) => { if (column.key === 'passed'){ return (searchText === 'false' && !rowData.passed) || (searchText === 'true' && rowData.passed); } }, validation: ({ column, value }) => { if (column.key === 'price'){ return value ? '' : 'value must be specified'; } },
search was renamed to searchText, (because search is used for another purpose - see (4))
childAttributes were removed, use childComponents.[componentName].elementAttributes instead.
before:childAttributes={{ table: { className: 'custom-editor-demo-table' } }}
after:
childComponents={{ table: { elementAttributes:{ className: 'custom-editor-demo-table' } } }}
๐ 1. All component props moved to /props directory (except for ITableProps - they are in root) ๐ 2. A lot of Redundant types were removed (old way -> new way to use):
- CellFunc -> React.FC<ICellContentProps>
- React.FC<PropsWithChildren<ICellContentProps>> -> React.FC<ICellContentProps>
- DataRowFunc -> React.FC<IDataRowProps>
- React.FC<PropsWithChildren<IDataRowProps>> -> React.FC<IDataRowProps>
- EditorFunc -> React.FC<ICellEditorProps>
- React.FC<PropsWithChildren<ICellEditorProps>> -> React.FC<ICellEditorProps>
- FilterRowFunc -> React.FC<IFilterRowEditorProps>
- React.FC<PropsWithChildren<IFilterRowEditorProps>> -> React.FC<IFilterRowEditorProps>
- GroupCellFunc -> React.FC<IGroupRowProps>
- React.FC<PropsWithChildren<IGroupRowProps>> -> React.FC<IGroupRowProps>
- GroupRowFunc -> React.FC<IGroupRowProps>
- HeaderCellFunc -> React.FC<IHeadCellProps>
- React.FC<PropsWithChildren<IHeadCellProps>> -> React.FC<IHeadCellProps>
Signatures for the next functions were changed:
type FormatFunc = (value: any) => any; // changed to: type FormatFunc = (props: { value: any, column: Column }) => any;
type SearchFunc = (searchText?: string, rowData?: any, column?: Column) => boolean; // changed to: type SearchFunc = (props: { searchText: string, rowData: any, column: Column }) => boolean;
type ValidationFunc = (value: any, rowData?: any) => string | void; // changed to: type ValidationFunc = (props: { value: any, rowData: any, column: Column }) => string | void;
columnUtils, dateUtils & typeUtils were renamed to kaColumnUtils, kaDateUtils, kaTypeUtils
.ka-group-column* classes were renamed to .ka-group-cell*
IPagingProps for settings was renamed to PagingOptions
-
v3.8.1 Changes
July 11, 2020 -
v3.7.1 Changes
May 31, 2020pagesCount sets the count of pages for specific data and disables local data pagination:
paging: { pagesCount?: number; // .... }
โก๏ธ also the action creator to update pagesCount value was added:
updatePagesCount(pagesCount: number)
-
v3.6.1 Changes
May 31, 2020 -
v2.10.1 Changes
February 23, 2020 -
v2.9.4 Changes
February 16, 2020#29
๐ Horizontal scroll bar works with header and body starting from this release
https://komarovalexander.github.io/ka-table/#/many-columns -
v2.6.1 Changes
February 11, 2020๐ New Feature: #32
๐ Fix: #33๐ new options for group customization have been added:
groupRow
Option customizes whole group row and allows to control empty spaces and override a group arrow
Demo
๐ Docs
column.groupCell
Option customizes only a group text cell, it does not change empty spaces and a group arrow
Demo
๐ Docs
-
v2.5.4 Changes
January 27, 2020 -
v2.5.3 Changes
January 25, 2020fieldParents option has been added for this purpose
const data = [{ representative: { name: 'Alex' } }, { representative: { name: 'Mike' } }] const tableOption: ITableOption = { columns: [{ field: 'name', // field name key: 'representative.name', // just an unique value fieldParents: ['representative'] // this value contains names of parent fields (for acces to nested field) } ], //... }; <Table {...tableOption} data={data} />