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

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 - Most 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
columns	Column[]	Columns in table and their look and behaviour
data	any[]	The Table's data
dataRow	DataRowFunc	Returns Data Row Template [Custom Data Row Example](https://komarovalexander.github.io/ka-table/#/custom-data-row
editableCells	Cell[]	Array of cells that are in edit mode Editing Example
editingMode	EditingMode	Sets the table's editing mode Editing Example
filterRow	FilterCondition[]	Sets filters for columns Filter Row Example
groups	Group[]	Group's in the table Grouping Example
onDataChange	(data: any[]) => void	This function is called each time when data going to change, use it to override current data Editing Example
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 Example
onEvent	(type: string, data: any) => void	Use this function to track events in Table Events Example
groupsExpanded	any[][]	Groups that are expanded in the grid
rowKeyField	string	Data's field which is used to identify row
search	string	Specifies the text which are used for search by data Search Example
selectedRows	any[]	Array of rows keys which are marked as selected Selection Example
sortingMode	SortingMode	Sorting mode Sorting Example
virtualScrolling	VirtualScrolling	Virtual scrolling options - set it as empty object {} to enable virtual scrolling and auto calculate its parameters 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 Custom Cell
dataType	DataType	Specifies the type of column
editor	EditorFunc	Returns an editor if cell is in editable mode Custom Editor Example
filterCell	EditorFunc	Returns an editor for filter row cell Filter Row Custom Editor
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
format	FormatFunc	Returns formated cell string Example
headCell	HeaderCellFunc	Returns a custom header cell 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 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 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

FilterCondition

Properties

Name	Type	Description
field	string	The filtered column's field
operator	string	Operator which will be applied for filtering
value	any	Filtered value

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

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

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.

FormatFunc

(value: any) => any;

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

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	settings of the column in which editor is shown
rowData	any	data of the row in which editor is shown
close	() => void	call this method to close editor
onValueChange	(newValue: any) => void	call this method to change value of the row: onValueChange({ ...rowData, ...{ [field]: value } })

ICellEditorProps

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