Inventi Common Grid

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

Installation

yarn add @inventi/mailstep-common-grid

Usage

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}
    />

Props

actionColumnDefinition: ActionColumn

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.

ActionColumn:

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 |

BatchAction

Object with keys: | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | value | string | yes | | - |
| label | string | yes | | - |
| isEnabled | (checkedRows) => boolean | no | | - |

allowRowSelect: boolean, default: false

Enable select a row by clicking.

className: string, default: ''

Main className over the entire grid.

columnLayout: 'normal' | 'no-scroll', default: normal

TODO

components: Components

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 | - |

TranslatorPublicInterfaceProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | id | string | no | | - |
| defaults | string | no | | - |

CheckboxPublicInterfaceProps

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 | | - |

ButtonPublicInterfaceProps

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 | | - |

SwitchPublicInterfaceProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | name | string | no | | - |
| label | string | no | | - | | onChange | (event) => void | no | | - | | checked | boolean | no | | - |

PaginatorProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | page | number | yes | | - |
| itemCount | number | yes | | - | | itemPerPage | number | yes | | - | | onPageChange | (number) => void | no | | - |

ColumnTitleProps

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 | - |

columnsDefinitions: Array

Defines the properties of each grid column.

ColumnDefinition type

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 | | - |

FilterExtraProps

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 | - |

DataCellProps

| Name | Type | Required | Description | Default | | ------------------- | --------------------------------------------- | :--------: | :------------------------------------ | :-------- | | rowData | T | no | | - |
| onRowAction | (id, field, value) => void | Promise<any> | no | | - |
| column | ColumnDefinition | no | | - |

errorMessage: string

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.

extraControlButtons: Array

Buttons for other user actions can be displayed around the grid.

ExtraControlButton

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 | | - |

filters: FiltersConfig

gridActions: GridActionsType

gridSelectors: GridSelectorsType

hideAllControls: boolean, default: false

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

hideColumnConfig: boolean, default: false

isLoading: boolean, default: isLoading

minColumnWidth: number, default: 30

onBatchAction: (action: batchAction, affectedRows: T[]) => void

onRowAction: (id: string, field: string, value: any) => void

onRowEditClick: (id: string, row: TData) => void

onRowReadClick: (id: string, row: TData) => void

onRowClick: (id: string, row: TData) => void

rowsData: RowProps[]

totalRowsCount: number, default: 0

getRowClass: (row: TData) => string

Optionally callback that add a classname on each row for a given result

    const getRowClass = (row) => {
        if (row.count > 100) {
            return 'warning'
        }
        return ''
    }

Contributors

License

MIT