komarov-alexander-test v0.0.2

Overview

The customizable, extendable, lightweight and free React Table Component

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 - Customize group cell

Grouping - Customize group row

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

Column

Describes column of table its look and behaviour Properties

Cell

Describes the position of a cell in the table

Properties

ChildAttributes

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

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.

Group

Properties

VirtualScrolling

Properties

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

DataType

EditingMode

FilteringMode

FilterOperatorName

SortDirection

SortingMode

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

IFilterRowEditorProps

Properties

ICellContentProps

Properties

IDataRowProps

Properties

IGroupRowProps

Properties