Table

Name Type                                                                         Description
childComponents ChildComponents Object describes contains customization logic for child components (Demo: Events, Custom Cell)
columnReordering boolean Enables columns reordering using drag and drop
columns Column[] Columns in table and their look and behaviour
data any[] The Table’s data
dispatch (action) => any The function takes action as an argument, is used as a notification about any changes and events in the Table
editableCells EditableCell[] Array of cells currently editing (Demo: Editing Example)
editingMode ‘cell’
‘none’
Sets the table’s editing mode (Demo: Editing Example)
filteringMode ‘filterRow’
‘none’
Show filter UI elements in Table (Demo: Filter Row Example)
format (props: {
value: any,
column: Column
}) => any
Returns formated cell string (Demo: Example)
groups Group[] Group’s in the table (Demo: Grouping Example)
groupsExpanded any[][] Expanded groups - array of group keys
height string | number height of the component
loading {
enabled?: boolean,
text?: string
}
Loading indicator options (Demo: Loading)
paging {
enabled?: boolean;
pageIndex?: number;
pageSize?: number;
pagesCount?: number;
}
Paging settings (Demo: Paging)
rowKeyField string Data’s field which is used to identify row
rowReordering boolean Enables rows reordering using drag and drop
search (props: {
searchText: string,
rowData: any,
column: Column
}) => boolean
Overrides the default search method for the cell. Executes if Table.search option is set
searchText string Specifies the text for search by data (Demo: Search Example)
selectedRows any[] Array of selected rows keys (Demo: Selection Example)
sortingMode ‘single’
‘singleTripleState’
‘singleRemote’
‘singleTripleStateRemote’
‘multipleRemote’
‘multipleTripleStateRemote’
‘none’
Sorting mode.
Remote - means only grid elements are updated but data should be sorted outside of the grid.
TripleState - means: “ascend - descend - no sorting”
(Demo: Sorting Example)
validation (props: {
value: any,
rowData: any,
column: Column
}) => (string | void)
Returns the validation error string or does not return anything in case of passed validation (Demo: Validation Example)
virtualScrolling VirtualScrolling Virtual scrolling options (Demo: Many Rows Example)
width string | number width of the component

Column

Name Type                                                             Description
dataType ‘boolean’
‘date’
‘number’
‘object’
‘string’
Specifies the type of column
filterRowOperator string Sets filter row operator (Demo: Filter Row Custom Editor). Predefined filter operators are: ‘=’, ‘>’, ‘<’, ‘>=’, ‘<=’, ‘contains’
filterRowValue any Sets filter row value (Demo: 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
isEditable boolean Specifies can a column be editable or not
isResizable boolean Specifies can a column be resized or not (Demo: Column Resizing)
key string Mandatory field, specifies unique key for the column
sortDirection ‘ascend’
‘descend’
Sets the direction of sorting for the column (Demo: Sorting)
sortIndex number The priority of the column for sorting (Demo: Sorting)
style React.CSSProperties Sets the style options of the elements
title string Specifies the text of the header

EditableCell

Describes the editor of a cell in the table

Name Type Description
columnKey string the key of specific column
rowKeyValue any data’s key value of every specific row
editorValue any value of the editor
validationMessage any validation message of the column

ChildComponents

Provides ability to customize grid inner components

Demos: Events Demo, Custom Cell

Name Type Element Demo
cell ChildComponent<ICellProps> td  
cellEditor ChildComponent<ICellEditorProps> div Demo
cellText ChildComponent<ICellTextProps> div Demo
dataRow ChildComponent<IDataRowProps> tr Demo
detailsRow ChildComponent<IDataRowProps> tr Demo
filterRowCell ChildComponent<IFilterRowEditorProps> td Demo
pagingIndex ChildComponent<IPagingIndexProps> div Demo
pagingPages ChildComponent<IPagingPagesProps> div Demo
groupCell ChildComponent<IGroupRowProps> td Demo
groupRow ChildComponent<IGroupRowProps> tr Demo
headCell ChildComponent<IHeadCellProps> th Demo
headCellContent ChildComponent<IHeadCellProps> div Demo
noDataRow ChildComponent<INoDataRowProps> tr Demo
rootDiv ChildComponent<ITableProps> .ka div  
table ChildComponent<ITableProps> table  
tableBody ChildComponent<ITableBodyProps> tbody  
tableHead ChildComponent<ITableHeadProps> thead  
tableWrapper ChildComponent<ITableProps> div  

ChildComponent<T>

Name Type Element
elementAttributes (props: PropsWithChildren<T>) => ChildAttributesItem<T> Events Demo
content (props: PropsWithChildren) => any</code> Custom Cell

ChildAttributesItem<T>

This object is an extension for React HTMLAttributes. It contains all attributes and all react Synthetic Events, but in each event it adds a second parameter which contains additional data with AttributeTableData type.

AttributeTableData<T>

A second parameter in each react Synthetic Event. Contains component-related information.

Name Type Description
baseFunc any Contains default function for overrided function - it is easy to add additional logic and execute default behaviour where you want it
childElementAttributes HTMLAttributes<HTMLElement> Default HTMLAttributes of the component
childProps T Props of the component
dispatch (type: string, data: any) => void Executes specific action with specific data

Group

Name Type Description
field string The grouped column’s field

VirtualScrolling

Properties

Name Type Description
scrollPosition number Current scroll top position
itemHeight ((data: any) => number) | number Returns height of specific row
tbodyHeight number tbody height

You can set VirtualScrolling as empty object {} to enable virtual scrolling and auto calculate its parameters

kaPropsUtils

Set of specific functions used for parsing table props

import { kaPropsUtils } from 'ka-table/utils';

kaPropsUtils.getData(tableProps)

Obtains sorted, filtered, grouped, paged data for table according to current properties (Demo: Get Data By Props)

  const data = kaPropsUtils.getData(tableProps);

kaPropsUtils.areAllFilteredRowsSelected(tableProps)

returns true if all filtered rows are selected

  const data = kaPropsUtils.areAllFilteredRowsSelected(tableProps);

kaPropsUtils.areAllVisibleRowsSelected(tableProps)

returns true if all visible rows are selected

  const data = kaPropsUtils.areAllVisibleRowsSelected(tableProps);

kaPropsUtils.getSortedColumns(tableProps)

returns array of columns with sortDirection only, and they are sorted by sortIndex (if it is set)

  const data = kaPropsUtils.getSortedColumns(tableProps);