Table

Name Type                                                                         Description
childComponents ChildComponents customization logic for ka-table parts (cells, rows, editors, etc.) (Demo: Events, Custom Cell)
columnReordering boolean Enables columns reordering using drag and drop
columnResizing boolean Enables columns resizing
columns Column[] Columns in table and their look and behaviour
controlledPropsKeys (keyof ITableProps)[] is used to specify controlled properties in uncontrolled mode default: [‘searchText’, ‘loading’] if loading is enabled, [‘searchText’, ‘loading’, ‘data’, ‘paging’] if loading is disabled
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. dispatch enables controlled mode 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)
note: when EditingMode.Cell is enabled table calls CloseEditor action each time editor loses focus
extendedFilter (data: any[]) => boolean adds additional filtering layer Demo
filter (props: {
column: Column
}) => ((value: any, filterRowValue: any, rowData?: any) => boolean) | void;		 Returns filter function
filteringMode ‘filterRow’
‘headerFilter’
‘filterRowAndHeaderFilter’
‘none’		 Show filter UI elements in Table (Demo: Filter Row Example)
focused {
cell?: {
columnKey: string,
rowKeyValue: any
},
cellEditorInput?: {
columnKey: string,
rowKeyValue: any
},
}		 stores information about the currently focused element (Demo: Keyboard navigation)
format (props: {
value: any,
rowData: any,
column: Column
}) => any		 Returns formated cell string (Demo: Example)
gropedColumns GroupedColumn[] Demo: Grouped Columns
groups Group[] Group’s in the table (Demo: Grouping Example)
groupsExpanded any[][] Expanded groups - array of group keys
groupPanel {
enabled?: boolean;
public text?: string;
public deep?: number;
}		 Allows users to select grouping columns in the UI. Demo: Grouping
height string | number height of the component
loading {
enabled?: boolean,
text?: string
}		 Loading indicator options (Demo: Loading)
noData {
text?: string,
hideHeader?: boolean
}		 no data settings (for deeper UI customization childComponents.noDataRow also) (Demo: Search)
oddEvenRows boolean enables rows alternation styles (Demo: Demo)
paging {
enabled?: boolean;
pageIndex?: number;
pageSize?: number;
pagesCount?: number;
position: ('bottom'|'top'|'topAndBottom')
}		 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)
singleAction any dispathes only ones after Table render (Demo: Remote Data), after this action ka-table will dispatch ‘ClearSingleAction’ to set singleAction as undefined
sort (props: {
column: Column</br> }) => ((value1: any, value2: any) => 0 | 1 | -1) | void;		 Returns sorting function (Demo: Sorting Custom Logic)
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)
table {
props: ITableProps;
changeProps: React.Dispatch;
onDispatch: OnDispatchFunc;
dispatch: DispatchFunc;
...actionCreators
}		 object is used only by uncontrolled mode to get/set table props, use useTable() to create your own instance and handle changes using onDispatch, and use useTableInstance() to get instance of table from context
treeExpandButtonColumnKey string sets the column key where tree expanded button will be rendered, by default it is rendered in the first column of the table
treeGroupsExpanded any[] array of ids of expanded rows, if it is undefined - all rows are expanded (Demo: Tree Mode)
treeGroupKeyField string group key field (Demo: Tree Mode)
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
colGroup React.ColHTMLAttributes</code> Sets attributes for col element in table colGroup
dataType ‘boolean’
‘date’
‘number’
‘object’
‘string’		 Specifies the type of column
filter (value: any, filterValue: any, rowData?: any) => boolean; Returns filter function for particular column (Demo: Filter Custom Logic)
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
headerFilterListItems (props: { data?: any[] }) => string[] Returns array of header filter items (Demo: Header Filter - Logic)
headerFilterSearch (value: any, searchValue: any, rowData?: any) => boolean; used to customize header filter search logic (Demo: Header Filter - Logic)
headerFilterSearchValue string stores value for search by headerFilterValues (Demo: Header Filter - Logic)
headerFilterValues any[] Array of selected values
headerFilterPopupPosition { x: number; y: number; } Header filter popup position
isDraggable boolean Specifies can a column be dragged or not
isEditable boolean Specifies can a column be editable or not
isFilterable boolean If false then header filter cell content will not be shown for a column
isHeaderFilterPopupShown boolean Shows/hides header filter popup for specific column
isHeaderFilterSearchable boolean enables search in header filter
isResizable boolean Specifies can a column be resized or not (Demo: Column Resizing)
isSortable boolean Specifies can a column be sorted 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
visible boolean Shows/Hides columns
width number | string column width

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
cellEditorInput ChildComponent<ICellEditorProps> input Demo
cellText ChildComponent<ICellTextProps> div Demo
dataRow ChildComponent<IDataRowProps> tr Demo
detailsRow ChildComponent<IDataRowProps> tr Demo
detailsCell ChildComponent<IDataRowProps> td Demo
filterRowCell ChildComponent<IFilterRowEditorProps> td Demo
filterRowCellInput ChildComponent<IFilterRowEditorProps> td  
groupCell ChildComponent<IGroupRowProps> td Demo
groupExpandButton ChildComponent<IGroupRowProps> div  
groupPanel ChildComponent<IGroupPanelProps> tr Demo
groupPanelCell ChildComponent<IGroupPanelCellProps> tr Demo
groupRow ChildComponent<IGroupRowProps> tr Demo
groupSummaryCell ChildComponent<IGroupSummaryCellProps> td Demo
groupSummaryRow ChildComponent<IGroupSummaryRowProps> tr  
headCell ChildComponent<IHeadCellProps> th Demo
headCellContent ChildComponent<IHeadCellProps> div Demo
headCellResize ChildComponent<IHeadCellResizeProps> div  
headerFilterButton ChildComponent<IHeaderFilterButtonProps> tr  
headerFilterPopupSearchInput ChildComponent<IHeaderFilterButtonProps> tr  
headRow ChildComponent<IHeadRowProps> tr  
loading ChildComponent<ILoadingProps> div  
emptyCell ChildComponent<IEmptyCellProps> tr  
noDataRow ChildComponent<INoDataRowProps> tr Demo
pagingIndex ChildComponent<IPagingIndexProps> div Demo
pagingPages ChildComponent<IPagingPagesProps> div Demo
headerFilterPopupContent ChildComponent<IPopupContentProps> div  
headerFilterPopupRow ChildComponent<IDataRowProps> div  
headerFilterPopupTextCell ChildComponent<ICellProps> div  
rootDiv ChildComponent<ITableProps> .ka div  
sortIcon ChildComponent<ISortIconProps> td Demo
summaryCell ChildComponent<ISummaryCellProps> td Demo
summaryRow ChildComponent<ISummaryRowProps> tr  
table ChildComponent<ITableProps> table  
tableBody ChildComponent<ITableBodyProps> tbody  
tableFoot ChildComponent<ITableFootProps> tfoot  
tableHead ChildComponent<ITableHeadProps> thead  
tableWrapper ChildComponent<ITableProps> div  

ChildComponent<T>

Name Type Element
elementAttributes (props: PropsWithChildren<T>) => ChildAttributesItem<T> Events Demo
content (props: PropsWithChildren<TProps>) => any 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
enableSummary boolean Enable summary row for the group

GroupedColumn

Demo: Grouped Columns

Name Type Description
key string unique identifier
title string Used to show text in the cell
columnsKeys string List of chicdren’s keys

VirtualScrolling

Properties

Name Type Description
enabled boolean Enables virtual scrolling
scrollPosition number Current scroll top position
itemHeight ((data: any) => number) | number Returns height of specific row
tbodyHeight number tbody height
topInvisibleCount number amount of rows which should be rendered over visible area (usefull for scrolling - in that case some items will be already visible and it will be more smoth)
bottomInvisibleCount number amount of rows which should be rendered under visible area

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

useTable()

Returns a value to pass to table property of the component

import { Table, useTable } from 'ka-table';

const table = useTable({
  onDispatch: (action, tableState, prevState) => { // subscription to all actions in the table (optional) 

  },
  customReducer: (nextState, action, prevState) => { // add additional actions or override current behavior (optional) 
    //...
    return newState;
  }
});

return <Table 
        table={table} 
        rowKeyId="id"
        data={[]} />

useTableInstance()

Returns a value which was passed to table property of the component, can be used if table is in uncontrolled mode

import { useTableInstance } from 'ka-table';

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 props (Demo: Get Data By Props)

  const data = kaPropsUtils.getData(tableProps);

kaPropsUtils.getFilteredData(tableProps)

Obtains filtered data

  const data = kaPropsUtils.getFilteredData(tableProps);

kaPropsUtils.getSelectedData(tableProps)

Obtains selected data for table according to current props (Demo: Selection - Single)

  const data = kaPropsUtils.getSelectedData(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);