The customizable, extendable, lightweight and free React Table Component
npm
npm install ka-table
yarn
yarn add ka-table
import React, { useState } from 'react';
import { ITableOption, Table } from 'ka-table';
import { DataType, SortDirection, SortingMode } from 'ka-table/enums';
import { OptionChangeFunc } from 'ka-table/types';
const dataArray: any[] = [
{ id: 1, name: 'Mike Wazowski', score: 80, passed: true },
{ id: 2, name: 'Billi Bob', score: 55, passed: false },
{ id: 3, name: 'Tom Williams', score: 45, passed: false },
{ id: 4, name: 'Kurt Cobain', score: 75, passed: true },
{ id: 5, name: 'Marshall Bruce', score: 77, passed: true },
{ id: 6, name: 'Sunny Fox', score: 33, passed: false },
];
const tableOption: ITableOption = {
columns: [
{
dataType: DataType.String,
key: 'name',
sortDirection: SortDirection.Descend,
style: { width: '33%' },
title: 'Name',
},
{ key: 'score', title: 'Score', style: { width: '10%' }, dataType: DataType.Number },
{ key: 'passed', title: 'Passed', dataType: DataType.Boolean },
],
rowKeyField: 'id',
sortingMode: SortingMode.Single,
};
const SortingDemo: React.FC = () => {
const [option, changeOptions] = useState(tableOption);
const onOptionChange: OptionChangeFunc = (value) => {
changeOptions({...option, ...value });
};
return (
<Table
{...option}
data={dataArray}
onOptionChange={onOptionChange}
/>
);
};
export default SortingDemo;
Overview - combination of main features in one demo
Command Column - Functional columns which are not bound to data and used to add custom command to table
Custom Cell - Best way to customise look of every column in table
Custom DataRow - Customise look of a row in the table
Custom Editor - Table supports user created editors
Custom Header Cell - Customisation of header cell
Editing - Editing out of the box
Events - All events are trackable
Filter Extended - Easy filtered by extended filters
Filter Row - Built-in filter row
Filter Row - Custom Editor - Customise filter cell every way you want
Grouping - Group data for most convenient work with it
Grouping Custom Cell - Customize group cell
Grouping Custom Row - Customize group row
Hover Row - Get row data by hover
Many Columns - Grid works fine with big amount of columns
25000 Rows - Virtualisation are supported
10000 Grouped Rows - Virtualisation work well with grouping
Search - Search by the whole Table is easy
Selection - Multiple - Select multiple row clickeng by checkboxes
Selection - Single - Single row selection by click
Sorting - Sorting by specific column
State Storing - Save Table's state and restore it after page reload
Validation - Validate editor value before apply it
Properties
Name | Type | Description |
---|---|---|
childAttributes | ChildAttributes |
Object describes attributes for data grid child components (Demo: Events) |
columns | Column[] |
Columns in table and their look and behaviour |
data | any[] |
The Table's data |
dataRow | DataRowFunc |
Returns Data Row Template (Demo: Custom Data Row Example) |
editableCells | Cell[] |
Array of cells currently editing (Demo: Editing Example) |
editingMode | EditingMode |
Sets the table's editing mode (Demo: Editing Example) |
filteringMode | FilteringMode |
Show filter UI elements in Table (Demo: Filter Row Example) |
groupRow | GroupRowFunc |
Returns Group Row Template |
groups | Group[] |
Group's in the table (Demo: Grouping Example) |
groupsExpanded | any[][] |
Expanded groups - array of group keys |
noDataRow | () => any |
The function returns string or a component which should appear when there are no data to show |
onDataChange | (data: any[]) => void |
This function is called each time when data going to change, use it to override current data (Demo: Editing Example) |
onEvent | (type: string, data: any) => void |
Executes each time when dispatch is called (Demo: Events) |
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 (Demo: Example) |
rowKeyField | string |
Data's field which is used to identify row |
search | string |
Specifies the text for search by data (Demo: Search Example) |
selectedRows | any[] |
Array of selected rows keys (Demo: Selection Example) |
sortingMode | SortingMode |
Sorting mode (Demo: Sorting Example) |
virtualScrolling | VirtualScrolling |
Virtual scrolling options (Demo: Many Rows Example) |
Describes column of table its look and behaviour Properties
Name | Type | Description |
---|---|---|
cell | CellFunc |
Returns a custom cell if Table is not in editable mode (Demo: Custom Cell) |
dataType | DataType |
Specifies the type of column |
editor | EditorFunc |
Returns an editor if cell is in editable mode (Demo: Custom Editor Example) |
filterRowCell | FilterRowFunc |
Returns an editor for filter row cell (Demo: Filter Row Custom Editor) |
filterRowOperator | string |
Sets filter row operator (Demo: Filter Row Custom Editor). See the list of predefined filter operators FilterOperatorName |
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 |
fieldParents | string[] |
Array contains names of parents for specific field (Demo: Overview Demo) |
format | FormatFunc |
Returns formated cell string (Demo: Example) |
groupCell |
|
Returns a custom group cell |
headCell |
|
Returns a custom header cell (Demo: Custom Head Cell Example) |
isEditable | boolean |
Specifies can column be editable or not |
key | string |
Mandatory field, specifies unique key for the column |
search | SearchFunc |
Overrides the default search method for the cell. Executes if (Demo: Table.search) option is set |
sortDirection | 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 |
validation | ValidationFunc |
Returns the validation error string or does not return anything in case of passed validation (Demo: Validation Example) |
Describes the position of a cell in the table
Properties
Name | Type | Description |
---|---|---|
field | string |
The field of specific column |
rowKeyValue | any |
Data's key value of every specific row |
Describes the attributes for a specific child component It is possible to override default behaviour just specify particular handler Events Demo
Name | Type | Description |
---|---|---|
cell | ChildAttributesItem<ICellContentProps> |
Sets custom attributes for cell element |
dataRow | ChildAttributesItem<IDataRowProps> |
Sets custom attributes for table element |
table | ChildAttributesItem<Table> |
Sets custom attributes for table element |
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
.
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 |
Properties
Name | Type | Description |
---|---|---|
field | string |
The grouped column's field |
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
Property | String value |
---|---|
Boolean | 'boolean' |
Date | 'date' |
Number | 'number' |
Object | 'object' |
String | 'string' |
Property | String value | Description |
---|---|---|
None | 'none' | Editing is disabled |
Cell | 'cell' | Data is edited by cell to cell, click by cell activates editing |
Property | String value | Description |
---|---|---|
None | 'none' | All filtering elements are hidden |
FilterRow | 'filterRow' | Filter row is shown |
Property | String value |
---|---|
Equal | '=' |
MoreThan | '>' |
LessThan | '<' |
MoreThanOrEqual | '>=' |
LessThanOrEqual | '<=' |
Contains | 'contains' |
Property | String value |
---|---|
Ascend | 'ascend' |
Descend | 'descend' |
Property | String value |
---|---|
None | 'none' |
Single | 'single' |
(props: ICellContentProps) => any;
Function which obtains ICellContentProps
as parameter and returns React component which should be shown instead of cell content.
(props: IDataRowProps) => any;
Function which obtains IDataRowProps
as parameter and returns React component which should be shown instead of Row content.
(props: ICellEditorProps) => any;
Function which obtains ICellEditorProps
as parameter and returns React component which should be shown instead of default editor.
(props: IFilterRowEditorProps) => any;
Function which obtains IFilterRowEditorProps
as parameter and returns React component which should be shown instead of default filter row's editor.
(value: any) => any;
Function which obtains value as parameter and returns formated value which will be shown in cell.
(props:
IGroupRowProps
) => any;
Function which obtains IGroupRowProps
as parameter and returns group cell content.
(props:
IGroupRowProps
) => any;
Function which obtains IGroupRowProps
as parameter and returns group row content.
(props:
IHeadCellProps
) => any;
Function which obtains IHeadCellProps
as parameter and returns header cell content.
(searchText?: string, rowData?: any, column?: Column) => boolean;
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.
(value: any, rowData: any) => string | void;
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.
Properties
Name | Type | Description |
---|---|---|
column | 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 |
isSelectedRow | boolean |
selection state of the current row |
rowData | any |
data of the row in which editor is shown |
rowKeyField | string |
field which is used to identify row |
rowKeyValue | any |
value of the field which is used to identify row |
Properties
Name | Type | Description |
---|---|---|
column | Column |
column of the editor |
dispatch | (type: string, data: any) => void |
can forse Table make change in filter data and other actions |
Properties
Name | Type | Description |
---|---|---|
childAttributes | ChildAttributes |
Object describes attributes for data grid child components (Demo: Events) |
column | Column |
column of the cell |
dispatch | (type: string, data: any) => void |
can forse Table make change in data, open the editor, and other actions |
editingMode | EditingMode |
Editing mode of cell column |
field | string |
field name of cell column |
isSelectedRow | boolean |
selection state of the cell row |
rowData | any |
data of the row in which editor is shown |
rowKeyField | string |
field which is used to identify row |
rowKeyValue | any |
value of the field which is used to identify cell row |
value | any |
value of the cell |
Properties
Name | Type | Description |
---|---|---|
columns | Column[] |
Columns in table and their look and behaviour |
dispatch | (type: string, data: any) => void |
Executes specific action with specific data |
editableCells | Cell[] |
Array of cells that are in edit mode |
editingMode | 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 |
Properties
Name | Type | Description |
---|---|---|
column | Column |
Grouped column |
contentColSpan | number |
colSpan for content cell |
dispatch | (type: string, data: any) => void |
Executes specific action with specific data |
groupIndex | number |
grouped column index relative another grouped columns |
groupKey | any[] |
key of current row, array because group could be inner for another: ['parentGroupKey', 'currentGroupKey'] |
isExpanded | boolean |
Expanded state of current group |
text | string |
Formatted text of group row |
Properties
Name | Type | Description |
---|---|---|
areAllRowsSelected | boolean |
Indicates selection state of all columns |
column | Column |
Grouped column |
sortingMode | number |
SortingMode of current cell column |
dispatch | (type: string, data: any) => void |
Executes specific action with specific data |