ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Vi...

TableReactVirtual list
komarovalexander/ka-tableka-table.comka-table

README

The customizable, extendable, lightweight and free React Table Component

Site | Demos | Docs

Table
Demo link

Installation


npm

  1. ```sh
  2. npm install ka-table
  3. ```

yarn

  1. ```sh
  2. yarn add ka-table
  3. ```

Usage


Basic example


  1. ```js
  2. import 'ka-table/style.css';

  4. import React from 'react';

  6. import { Table } from 'ka-table';
  7. import { DataType, EditingMode, SortingMode } from 'ka-table/enums';

  9. const dataArray = Array(10)
  10.   .fill(undefined)
  11.   .map((_, index) => ({
  12.     column1: `column:1 row:${index}`,
  13.     column2: `column:2 row:${index}`,
  14.     column3: `column:3 row:${index}`,
  15.     column4: `column:4 row:${index}`,
  16.     id: index,
  17.   }));

  19. const OverviewDemo: React.FC = () => {
  20.   return (
  21.     <Table
  22.       columns={[
  23.         { key: 'column1', title: 'Column 1', dataType: DataType.String },
  24.         { key: 'column2', title: 'Column 2', dataType: DataType.String },
  25.         { key: 'column3', title: 'Column 3', dataType: DataType.String },
  26.         { key: 'column4', title: 'Column 4', dataType: DataType.String },
  27.       ]}
  28.       data={dataArray}
  29.       editingMode={EditingMode.Cell}
  30.       rowKeyField={'id'}
  31.       sortingMode={SortingMode.Single}
  32.     />
  33.   );
  34. };

  36. export default OverviewDemo;
  37. ```

Example link