Config

Global (Provider)

Table

Properties

Name	Type	Required	Default	Description
config	object	Yes		See config prop
customFooter	Component	No		If defined, the component is mounted after the default tFooter. To hide the default Footer, set config.hasFooter to false
customHeader	Component	No		If defined, the component is mounted above the default Header. To hide the default Header, set config.hasHeader to false
data	array	Yes
defaultSelectedRows	array	No	[]	The rows selected on VirtualTable initialization.
handleRowsToDelete	func	No	() => {}	Callback fired when the Delete button is clicked. It returns the selected rows. If the function is async, resolving it'll unselect the rows, while rejecting it'll keep the selection intact.
handleValidateAdd	func	No	() => {}	Callback fired when the Save button is clicked. It returns the newly created rows.
handleValidateEdit	func	No	() => {}	Callback fired when the Save button is clicked. It returns the edited rows.
isEdit	func	No	() => {}	Callback fired when table's content changes, it returns a boolean based on whether at least once cell has been modified.
maxHeight	string | number	No	600px	The maximum height of the VirtualTable.
onColumnsChange	func	No		See Event
onFilterChange	func	No		See Event
onFocusChange	func	No		Callback fired when the focus changes inside the VT. It receives an object as only argument: { from: [ rowIndex, columnIndex], to: [ rowIndex, columnIdex ] }.
onRowClick	func	No		See Event
onRowContextMenu	func	No		See Event
selectRows	func	No	() => {}	Callback fired when a row is selected/unselected. It returns the list of selected rows.
tableKeyName	string	Yes		String used to created unique IDs in the VirtualTable components.
widthTable	string | number	No	100%	The width of the VirtualTable.
columnsConfig	object	No		See columnsConfig prop

Config prop

Name	Type	Required	Default	Description
actionsButton	array	No	[]	Array of actionButton passed to a MenuItem component
addOneByOne	bool	No	false	If true, only one "New line" can be created at a time.
addRowLabel	string	No	+ Ajouter une ligne	Define label of addRow button
alwaysInEdition	bool	No	false	If true, all line are selected to be editable.
columns	array	No	[]	Array of column.
customButtons	array	No	[]	Array of customButton passed to a InlineButton component.
customSelectionHeader	Component	No		Overrides the Toolbar component
defaultOrder	string	No		Define default order being key of one column sortable of the table
defaultOrderDirection	asc | desc	No	asc	Define default order direction
dynamicHeight	bool	No	true	Influences the table height calculation.
enableColumnEdition	bool	No	true	Enable the posibility to hide/display columns.
exportFilename	string	No	export	Name of the exported file.
fixedColumns	number	No	0	Number of right fixed columns.
footerStyle	object	No	{}	Object used to override the default style of the footerContainer.
hasFooter	bool	No	false	If true, the Footer is activated.
hasHeader	bool	No	true	If true, the Header is activated.
hasSearchbar	bool	No	false	If true, the SearchBar is activated.
headerHeight	number	No	32	Defines the Header component height. The wrapHeaderText prop need to be true.
hideCheckbox	bool | Func	No	false	If true, the checkbox column is hidden (even in interactive mode). If Func checkbox is visible in fuction of ({ rowIndex, row }))
hideStateActions	bool	No	false	If true, the save and cancel buttons are hidden.
hideToolbar	bool	No	false	If true, the toolbar is hidden (even in interactive mode).
insertPosition	top | bottom	No	top	Define the AddLine component position. It can be placed before or after the cells part.
minCellWidth	number	No	100	Minimum width of the cells.
modeAdd	bool	No	false	If true, the add mode is activated
modeDelete	bool	No	false	If true, the delete mode is activated
modeEdit	bool	No	false	If true, the edit mode is activated
modeGroup	bool	No	false	If true, the VirtualTable processes the data as group
onCustomAdd	func	No		Callback fired when the Add button is clicked.
onCustomOrderChange	func	No		Callback fired when we click on column header to sort the data.
onFocusChange	func	No		Callback fired when the focus changes inside the VT. It receives an object as only argument: { from: [ rowIndex, columnIndex], to: [ rowIndex, columnIdex ] }.
onKeyDown	func	No		Callback fired when a keydown event is triggered inside the VT. It receives an three arguments: the event object, the rowIndex and the columnIndex.
rowHeight	number	No	32	Defines the rows height.
selectableRowKey	string	No	id	The data array primary key.
selectableRow	bool	No	false	If true, a selection counter is displayed.
selectableOnlyOneRow	bool	No	false	If true, only one row can be selected at a time.
spaceBetween	number	No	2	The gutters size in px.
wrapHeaderText	bool	No	false	Activates text wrapping on header cells.
isHighlightOnHover	bool	No	false	Highlight editable cells on hover

actionsButton

Name	Type	Required	Default	Description
label	string	Yes		String passed as a children to the MenuItem component.
onClick	func	Yes		Callback fired when the MenuItem is clicked. It receives the rows as only argument.
disabled	bool	no	false	If true, the MenuItem is disabled.
icon	Component	no		If defined, the component is inserted before the label.

customButton

The customButton extends the InlineButton buttons property shape. The following properties are intercepted to pass arguments.

Name	Type	Required	Default	Description
isDisable	func	No	() => false	Function whose returned value is passed to the disabled prop. It receives an object as only argument.
onClick	func	No	() => {}	Callback fired when the button is clicked. It receives the rows as only argument.

Column common properties

Name	Type	Required	Default	Description
alignText	left | center | right	No	left	The cell content alignment. This is applied to the header, body and footer part.
alignVertical	top | center | bottom	No	center	The cell content vertical alignment. This is applied to the header, body and footer part.
editable	bool	No	false	If true, the cell content can be edited in edit mode.
footerStyle	object	No	{}	Object used to override the default style of the footer cell.
footerValue	string | func	No		Element to display inside the footerCell or a function that returns a Element. This function receives the whole data object as unique argument.
hasContextMenu	bool	No	false	If true, activated the ContextMenu wrapper component.
header	string	No	''	The column title.
isDisabled	func	No	() => false	If the function returns true, the input is disabled. The function receives the row data as uniq argument
key	string	Yes		Unique key used as a column identifier.
listActionContextMenu	array	No	[]	List used to fill the ContextMenu component.
noFooter	bool	No	false	If true, the footer cell is not rendered.
showLockInfo	bool	No	false	If true, the cell content is still displayed when the line is secured.
size	number	No		The grid column value.
sortable	bool	No		If true, the column is sortable with a basic algorythm. If false, the column is not sortable. If not undefined, the column is sortable when the type is one of the following: amount, number, string.
onMouseLeave	func	No		Apply the onMouseLeave handler to the column cells
onMouseEnter	func	No		Apply the onMouseEnter handler to the column cells
tooltipDetail	func	No		Display the returned string as a tooltip. Is overridden by tooltipError if defined.
tooltipError	func	No		Display the returned string as a error tooltip.
tooltipFooter	string	No		If defined, the footerCell is wrapped into a Tooltip with the value of tooltipFooter as text.
typeCell	TypeCell | func	No	string	Rendered cell type. If a function is passed, it receives the rowData as unique argument.
typeFooter	sum | amount	No		Apply the predefined cell type to the footer.
width	number	No		The width of the column in px.
withLockIcon	bool	No	false	If true, a locker icon appears at on the left of the cell when the line is secured.

ListActionContextMenu

Name	Type	Required	Default	Description
label	string	Yes		The displayed label.
action	func	Yes		Function called on item click.
disabled	(object) => bool	No	false	Function used to dynamically and conditionnaly disabled option.
itemProps	object	No	{}	Object spreads to the MenuItem component.

columnsConfig prop

Name	Type	Required	Default	Description
draggable	bool	No	false	If true, the columns is draggable
config	array	Yes		Array of column.
data	array	Yes
handleValidate	() => {}	No		Callback fired when the Save button is clicked. It returns updated rows
columnCreation	bool	No	false	Enable the column creation mode
columnSelection	bool	No	false	Enable the column selection mode, work with 'selectable' columns