rtable-1 v0.2.4
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-controlyarn
yarn add react-table-controlUsage
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 |
4 years ago