Robust, complex and sophisticated component for datagrid rendering.
- server side and client side sorting
- server side and client side filtering
- moving columns via drag and drop
- column grouping
- easy to be styled
- redux support for external control
- high level of customization
yarn add @mailstep/common-grid
const columnDefinitions = [
{ name: 'username', title: 'User name', flexBasis: 160 },
{ name: 'age', title: 'Age', flexBasis: 160, filteringType: 'number', },
{ name: 'isAdmin', title: 'Admin', flexBasis: 160, filteringType: 'flag', },
]
const data = [
{ id: 1, username: 'John deen', age: 27, isAdmin: true },
{ id: 2, username: 'Emily Watson', age: 22, isAdmin: false },
]
const gridActions = {
setPage: (number) => console.log('setPage', number),
setRowsPerPage: (number) => console.log('setRowsPerPage', number),
addFilter: (column, value, filterProps) => console.log('add filter for column', column ),
}
const gridSelectors = {
page: 1,
rowsPerPage: 10
}
const MyPage = () =>
<CommonGrid
columnsDefinitions={columnDefinitions}
rowsData={data}
gridActions={gridDummyActions}
gridSelectors={gridSelectors}
/>
Used to define the first column of the grid. This column usually contains buttons for displaying detail or editing data in a row and other features.
Object with keys:
Name | Type | Required | Description | Default |
---|---|---|---|---|
actionOptions | Array<BatchAction> |
no |
handlers for batch action on grid | [] |
canRowEdit | boolean |
no |
shows / hides the edit button | false |
canRowRead | boolean |
no |
shows / hides the read button | false |
createLink | (params) => string |
no |
callback for above buttons | - |
forceCheckboxes | boolean |
no |
displays checkboxes in each row | false |
addRowNumbers | boolean |
no |
displays index in each row | false |
addRowNumbersLabel | string |
no |
set the name of index column | # |
Object with keys:
Name | Type | Required | Description | Default |
---|---|---|---|---|
value | string |
yes |
- | |
label | string |
yes |
- | |
isEnabled | (checkedRows) => boolean |
no |
- |
Enable select a row by clicking.
Enable select a row by performing read or edit action.
Main className over the entire grid.
TODO
Used to define custom components in the grid. Object with keys:
Name | Type | Required | Description | Default |
---|---|---|---|---|
Translator | React.ComponentType |
no |
see TranslatorPublicInterfaceProps | - |
Checkbox | React.ComponentType |
no |
see CheckboxPublicInterfaceProps | - |
Button | React.ComponentType |
no |
see ButtonPublicInterfaceProps | - |
Switch | React.ComponentType |
no |
see SwitchPublicInterfaceProps | - |
Paginator | React.ComponentType |
no |
see PaginatorProps | - |
ColumnTitle | React.ComponentType |
no |
see ColumnTitleProps | - |
Its a component with props
Name | Type | Required | Description | Default |
---|---|---|---|---|
id | string |
no |
- | |
defaults | string |
no |
- |
Its a component with props
Name | Type | Required | Description | Default |
---|---|---|---|---|
name | string |
no |
- | |
label | string, JSX.Element |
no |
- | |
onChange | (event) => void |
no |
- | |
checked | boolean |
no |
- |
Its a component with props
Name | Type | Required | Description | Default |
---|---|---|---|---|
children | React.ReactNode |
no |
- | |
type | button, submit, reset |
no |
- | |
appearance | string |
no |
- | |
isLoading | boolean |
no |
- | |
disabled | boolean |
no |
- | |
margin | string |
no |
- | |
className | string |
no |
- | |
onClick | (event) => void |
no |
- |
Its a component with props
Name | Type | Required | Description | Default |
---|---|---|---|---|
name | string |
no |
- | |
label | string |
no |
- | |
onChange | (event) => void |
no |
- | |
checked | boolean |
no |
- |
Its a component with props
Name | Type | Required | Description | Default |
---|---|---|---|---|
page | number |
yes |
- | |
itemCount | number |
yes |
- | |
itemPerPage | number |
yes |
- | |
onPageChange | (number) => void |
no |
- |
Custom component to replace column title and sorting indicator
Name | Type | Required | Description | Default |
---|---|---|---|---|
title | string | JSX.Element |
no |
title of the column | - |
isSortable | boolean |
yes |
can column be sorted | - |
sortValue | asc | desc | null |
yes |
current applied sort on this column | - |
onSetSort | (sortValue) => void |
no |
set new sort value for column | - |
Defines the properties of each grid column.
Object with keys:
Name | Type | Required | Description | Default |
---|---|---|---|---|
name | string |
yes |
- | |
group | string |
no |
Divides columns into the same groups. | - |
systemName | string |
no |
- | |
systemFilter | string |
no |
- | |
title | string |
no |
- | |
filtering | boolean |
no |
- | |
filteringType | number, text, date, flag |
no |
- | |
filterExtraProps | FilterExtraProps |
no |
- | |
getFilterCriteria | (value: string) => {[column]: any} |
no |
- | |
filterOptions | Array<Option> |
no |
- | |
sorting | boolean |
no |
- | |
formatRowValue | (row) => React.node |
no |
- | |
cellComponent | React.ComponentType |
no |
see DataCellProps | - |
flexGrow | number |
no |
- | |
flexShrink | number |
no |
- | |
fixedSize | boolean |
no |
- | |
alwaysOn | boolean |
no |
- | |
defaultHidden | boolean |
no |
- |
Object with keys:
Name | Type | Required | Description | Default |
---|---|---|---|---|
isMulti | boolean |
no |
select filter is multiSelect | - |
comparators | any |
no |
overrides default grid comparators | - |
filterTime | boolean |
no |
filters time too | - |
decimals | number |
no |
how many decimals should be used | - |
isFloat | boolean |
no |
float filtering should be used | - |
isBigInt | boolean |
no |
big Int filtering should be used | - |
Name | Type | Required | Description | Default |
---|---|---|---|---|
rowData | T |
no |
- | |
onRowAction | `(id, field, value) => void | Promise` | no |
|
column | ColumnDefinition |
no |
- |
If an error occurs somewhere on the page, typically while loading data into the grid, we can display it in the grid where the rows are rendered.
Buttons for other user actions can be displayed around the grid.
Object with keys:
Name | Type | Required | Description | Default |
---|---|---|---|---|
node | React.ReactNode |
no |
- | |
onClick | () => void |
no |
- | |
onSelect | (value: string) => void |
no |
- | |
label | React.node |
no |
- | |
style | primary, secondary |
no |
- | |
options | Array<Option> |
no |
- | |
position | top-left, top-right, bottom-left, bottom-right |
no |
- | |
hide | boolean |
no |
- | |
hideChevron | boolean |
no |
- | |
disabled | boolean |
no |
- |
If set, only grid and paginator will be rendered. No other control above and below grid will be rended. Use if you want to handle grid configuration in custom way
Button for other user actions can be displayed inside the grid.