The customizable, extendable, lightweight and free React Table Component

Demo link

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;

Example link

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

Describes column of table its look and behaviour Properties

Describes the position of a cell in the table

Properties

Describes the attributes for a specific child component It is possible to override default behaviour just specify particular handler Events Demo

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.

Properties

Properties

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

(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

Properties

Properties

Properties

Properties

Properties