ka-table

Overview

The customizable, extendable, lightweight and free React Table Component

Demo link

Installation

npm

npm install ka-table

yarn

yarn add ka-table

Usage

Basic example

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;

Demo link

Examples

Overview

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

25000 Rows - Virtualisation are supported

10000 Grouped Rows - Virtualisation work well with grouping

Search - Search by the whole Table is easy

Selection - Select and process specific rows

Sorting

State Storing - Save Table's state and restore it after page reload

Validation

API

Table

Properties

Name	Type	Description
childAttributes	ChildAttributes	Object describes attributes for data grid child components Events Demo
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)

Column

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	GroupCellFunc	Returns a custom group cell
headCell	HeaderCellFunc	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)

Cell

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

ChildAttributes

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
table	ChildAttributesItem<Table>	Sets custom attributes for table element

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

Properties

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

DataType

Property	String value
Boolean	'boolean'
Date	'date'
Number	'number'
Object	'object'
String	'string'

EditingMode

Property	String value	Description
None	'none'	Editing is disabled
Cell	'cell'	Data is edited by cell to cell, click by cell activates editing

FilteringMode

Property	String value	Description
None	'none'	All filtering elements are hidden
FilterRow	'filterRow'	Filter row is shown

FilterOperatorName

Property	String value
Equal	'='
MoreThan	'>'
LessThan	'<'
MoreThanOrEqual	'>='
LessThanOrEqual	'<='
Contains	'contains'

SortDirection

Property	String value
Ascend	'ascend'
Descend	'descend'

SortingMode

Property	String value
None	'none'
Single	'single'

CellFunc

(props: ICellContentProps) => any;

Function which obtains ICellContentProps as parameter and returns React component which should be shown instead of cell content.

DataRowFunc

(props: IDataRowProps) => any;

Function which obtains IDataRowProps as parameter and returns React component which should be shown instead of Row content.

EditorFunc

(props: ICellEditorProps) => any;

Function which obtains ICellEditorProps as parameter and returns React component which should be shown instead of default editor.

FilterRowFunc

(props: IFilterRowEditorProps) => any;

Function which obtains IFilterRowEditorProps as parameter and returns React component which should be shown instead of default filter row's editor.

FormatFunc

(value: any) => any;

Function which obtains value as parameter and returns formated value which will be shown in cell.

GroupCellFunc

(props:IGroupRowProps) => any;

Function which obtains IGroupRowProps as parameter and returns returns group cell content.

Function which obtains props as parameter and returns group row content.

GroupRowFunc

(props:IGroupRowProps) => any;

Function which obtains IGroupRowProps as parameter and returns returns group row content.

Function which obtains props as parameter and returns group row content.

SearchFunc

(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.

ValidationFunc

(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.

ICellEditorProps

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
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

IFilterRowEditorProps

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

ICellContentProps

Properties

Name	Type	Description
column	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

IDataRowProps

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

IGroupRowProps

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