react-table-control

This project is on pre-alpha stage. Stable version with documentation and finished styles will be available no later than January of 2020

React Table Control

The customizable, extendable, lightweight and free React Table Component

Can easily be included in react projects, never mind ts or js

// TODO Demo

Installation

npm

npm install react-table-control

yarn

yarn add react-table-control

Usage

A basic example

// TODO

API

Table

Properties

Name	Type	Description
columns	Column[]	Columns in table and their look and behaviour
data	any[]	The data which is shown in Table's rows
editableCells	Cell[]	This property contains the array of cells which are being edited
editingMode	EditingMode	Sets the table's editing mode
filterRow	FilterCondition[]	Sets filters for columns
groups	Group[]	Group's in the table
groupsExpanded	TODO	Contains groups which are expanded in the grid
rowKey	string	Property of data's item which is used to identitify row
sortingMode	SortingMode[]	Sorting mode
search	string	Specifies the text which should be found in the data

Column

Describes column of table its look and behaviour Properties

Name	Type	Description
field	string	Specifies the property of data's object which value will be used in column
title	string	Specifies the text of the header
dataType	DataType	Specifies the type of column
sortDirection	SortDirection	Sets the direction of sorting for the column
editor	EditorFunc	Returns an editor if cell is in editable mode
cell	CellFunc	Returns an custom cell if it is not in editable mode
width	number | string	Sets the width of the column
textAlign	TextAlign	Sets column's text alignment
search	SearchFunc	Overrides the default search method for the cell. Executes if Table.search option is set
validation	ValidationFunc	Returns the validation error string or does not return anything in case of passed validation

Cell

Describes the position of a cell in the table

Properties

Name	Type	Description
field	string	The field of
specific column
rowKeyValue	any	Data's key value of еру specific row

FilterCondition

Properties

Name	Type	Description
field	string	The filtered column's field
operator	string	Operator which will be applied for filtering
value	any	Filtered value

Group

Properties

Name	Type	Description
field	string	The grouped column's field

DataType

Property	String value
Boolean	'boolean'
Date	'date'
Number	'number'
Object	'object'
String	'string'

EditingMode

Property	String value	Description
None	'none'	Editing is disabled
Cell	'cell'	Data is edited by cell to cell, click by cell activates editing

SortDirection

Property	String value
Ascend	'ascend'
Descend	'descend'

SortingMode

Property	String value
None	'none'
Single	'single'

TextAlign

Property	String value
Center	'center'
Left	'left'
Right	'right'

EditorFunc

(props: ICellEditorProps) => any;

Function which obtains ICellEditorProps as parameter and returns React component which should be shown instead of default editor.

CellFunc

(props: ICellContentProps) => any;

Function which obtains ICellContentProps as parameter and returns React component which should be shown instead of cell 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

Name	Type	Description
column	Column	settings of the column in which editor is shown
rowData	any	data of the row in which editor is shown
close	() => void	call this method to close editor
onValueChange	(newValue: any) => void	call this method to change value of the row: onValueChange({ ...rowData, ...{ [field]: value } })

ICellEditorProps

Properties

Name	Type	Description
column	Column	settings of the column in which editor is shown
openEditor	() => void	call this method to open editor of the cell
rowData	any	data of the row in which editor is shown