Popularity
1.5
Growing
Activity
9.2
Declining
48
1
7

Description

Controllable MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more

Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Latest version: v5.1.0

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

The customizable, extendable, lightweight and free React Table Component

Site | Demos | Docs

Table Demo link

Installation

npm

npm install ka-table

yarn

yarn add ka-table

Usage

Basic example

import "ka-table/style.css";

import React, { useState } from 'react';

import { ITableProps, kaReducer, Table } from 'ka-table';
import { DataType, EditingMode, SortingMode } from 'ka-table/enums';
import { DispatchFunc } from 'ka-table/types';

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

const tablePropsInit: ITableProps = {
  columns: [
    { key: 'column1', title: 'Column 1', dataType: DataType.String },
    { key: 'column2', title: 'Column 2', dataType: DataType.String },
    { key: 'column3', title: 'Column 3', dataType: DataType.String },
    { key: 'column4', title: 'Column 4', dataType: DataType.String },
  ],
  data: dataArray,
  editingMode: EditingMode.Cell,
  rowKeyField: 'id',
  sortingMode: SortingMode.Single,
};

const OverviewDemo: React.FC = () => {
  const [tableProps, changeTableProps] = useState(tablePropsInit);
  const dispatch: DispatchFunc = (action) => {
    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
  };

  return (
    <Table
      {...tableProps}
      dispatch={dispatch}
    />
  );
};

export default OverviewDemo;

Example link


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