Skip to content

komarovalexander/ka-table

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
January 23, 2023 21:40
March 20, 2021 19:53
src
May 18, 2023 20:40
January 19, 2023 23:13
January 5, 2023 11:42
June 1, 2021 19:13
September 25, 2019 20:21
January 19, 2023 23:33
March 16, 2023 22:57
March 16, 2023 22:57
June 1, 2021 19:13
January 5, 2023 11:33
March 16, 2023 22:57

The customizable, extendable, lightweight and free React Table Component

GitHub license npm version Coverage Status Build Status minzipped size

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 from 'react';

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

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 OverviewDemo: React.FC = () => {
  return (
    <Table
      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}
    />
  );
};

export default OverviewDemo;

Example link