1.0.8 • Published 6 years ago
@adler-it/webstack-datagrid v1.0.8
Classes
SortConfig
Construtor
(id: string)
FilterConfig
Construtor
(id: string)
Method
| Name | Arguments | Return Type | Description |
|---|---|---|---|
| number | FilterConfig | Make it Number filter. | |
| date | FilterConfig | Make it Date filter. | |
| string | FilterConfig | Make it String filter. | |
| select | (options: T[], value: (option: T) => string | number, label: (option: T) => string | number, multi: boolean) | FilterConfig | Make it select filter. |
| autoComplete | (options: T[], pathToValue: string, pathToText: string) | FilterConfig | Make it autocomplete filter. |
| autoCompleteSimple | (options: string[]) | FilterConfig | Make it autocomplete filter. |
DataGridConfig
Constructor
(selectable: boolean = false, multiSelectable: boolean = false, striped: boolean = false, hover: boolean = false)
Method
| Name | Arguments | Return Type | Description |
|---|---|---|---|
| addColumn | (label: string, style: object, value: (row: object) => string, sortConfig: SortConfig = false, filterConfig: FilterConfig = false) | DataGridConfig | Add column to dataGridConfig. |
| addSpace | (width: string) | DataGridConfig | Add blank column of given width. |
| addButtonAction | (onClick: (index: number, row: T) => void, element: JSX) | DataGridConfig | Add ActionButton to row. |
| addTranslation | (filter: string, sort: string, operation: string, value: string, values: string, ok: string, clear: string, close: string) | DataGridConfig | Add translation. |
Components
DataGrid
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| rows* | T[] | Data to display. | |
| config* | DataGridConfig | DataGrid Config. | |
| actionPlacement | string | "left" | Placement of action buttons in rows. |
| paging | { page: number, pageSize: number, count: number} | Pagination to display. | |
| onUpdate* | (paging, sort, filter) => void | Update Callback. | |
| fetching | boolean | false | Loading indication. |
| pageSizes | number[] | 15,30,50,100 | PageSize for Pagination. |
Usage
import DataGrid, { DataGridConfig, FilterConfig, SortConfig } from '@adler-it/webstack-datagrid';
import { IconButton } from 'material-ui';
import Remove from 'material-ui/svg-icons/action/highlight-off';
import moment from 'moment';
const genders = [
{
id: 1,
name: "female"
},
{
id: 2,
name: "male"
}
]
const data = [
{
_id: "7"
firstName: "John",
lastName: "Doe",
birthday: "1993-06-16T00:00:00.000Z",
gender: 1,
mother: 5,
},
{
_id: "5"
firstName: "Jane",
lastName: "Doe",
birthday: "1970-06-16T00:00:00.000Z",
gender: 2,
mother: null,
},...
]
const lastNames = data.map(person => person.lastName);
const config = new DataGridConfig(false, false, true, true)
.addTranslation('Filter', 'Sort', 'Operation', 'Value', 'Values', 'OK', 'Clear', 'Close')
.addColumn('ID', { width: '0px' }, row => row.id, new SortConfig('_id'), new FilterConfig('_id').number())
.addColumn('First Name', { width: '90px' }, row => row.firstName, new SortConfig('firstName'), new FilterConfig('firstName').string())
.addColumn('First Name', { width: '90px' }, row => row.firstName, new SortConfig('firstName'), new FilterConfig('firstName').autoCompleteSimple(lastNames))
.addColumn('Birthday', { width: '50px' }, row => moment(row.birthday).format('DD.MM.YYYY'), false, new FilterConfig('birthday').date())
.addColumn('Gender', {width: '0px'}, row => genders.find(item => item.id === row.gender), false, new FilterConfig('gender').select(genders, item => item.id, item => item.name, false))
.addColumn('Mother', {width: '150px'}, row => data.find(item => item._id === row.mother), false, new FilterConfig('mother').autoComplete(data, item => item._id, item => `${item.firstName} ${item.lastName}`))
.addButtonAction((index, item) => console.log('You clicked on row number ${index}, item with id ${item._id}', <IconButton><Remove /></IconButton>))
...
render() {
return (
<div>
<DataGrid
rows={data}
config={config}
onUpdate={(newState) => console.log(newState)}
>
</div>
)
}