@inventi/common-grid

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