Popularity
0.5
Growing
Activity
9.4
Growing
11
1
1

Monthly Downloads: 0
Programming language: TypeScript
Latest version: v2.9.4

ka-table alternatives and similar libraries

Based on the "Table / Data Grid" category

Do you think we are missing an alternative of ka-table or a related project?

Add another 'Table / Data Grid' Library

README

GitHub license npm version Coverage Status Build Status

Overview

The customizable, extendable, lightweight and free React Table Component

Table 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

Grouping Custom Cell - Customize group cell

Grouping Custom Row - Customize group row

Many Columns

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

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


*Note that all licence references and agreements mentioned in the ka-table README section above are relevant to that project's source code only.