Table

📘 Developer Guide

With the Table Brick, you are able to implement a fully fletched Table into your Dashboards. The Table supports several features. Check the Configuration Properties for more information.

You are able to place several Table Components inside the table brick, to define a more customizable Table.

🔁 Example

Designer

Runtime

⚙️ Configuration Properties

config

Key	Label	Description	Default Value
`grid`	The Data Table Grid Definition	Holds the definition of header and body columns. Find out more under HeaderColumn and BodyColumn `{ header: HeaderColumn[][], body: BodyColumn[] }`	-
`defaultStyles`	Default Table Styles	Defines default styles for header and body `TableDefaultStyles`	-
`click.modus`	Defines if the table focuses specific sections of the table on click	Determines clickable area of the table `row` \| `cell` \| `none`	`none`
`select`	The selection configuration	Defines row or cell selection behavior. Find out more under SelectionConfig `SelectionConfig`	-
`sorting`	The sorting configuration	Defines how sorting is handled. Find out more under SortingConfig `SortingConfig`	-
`search`	The search configuration	Defines table search behavior. Find out more under SearchConfig `SearchConfig`	-
`pagination`	The pagination configuration	Defines paging behavior. Find out more under PaginationConfig `PaginationConfig`	-
`footerConfig`	The footer configuration	Configuration for the table’s footer. Find out more under FooterConfig `FooterConfig`	-
`toolbarConfig`	The toolbar configuration	Configuration for the table’s toolbar. Find out more under ToolbarConfig `ToolbarConfig`	-
data	The data of the table	Defines the data which is being processed by the table `any[]`	[]

HeaderDefaultStyles (config.defaultStyles.header)

Key	Label	Description	Default Value
`nowrap`	If text is text only single lined	If `true`, text will be in one line `boolean`	`false`
`height`	The height of the header	Accepts a string like `42px` `string`	`42px`
`minHeight`	The minimum height of the header	Accepts a string like `50px` `string`	`null`
`padding`	The padding of the header	Accepts a string like `12px 5px 12px 5px` (Top, Right, Bottom, Left) `string`	`0px`
`font.size`	The font size of the header	Accepts a string like `14px` `string`	`12px`
`font.weight`	The font weight of the header	Accepts a string like `400` or `bold` `string`	`normal`
`font.color`	The font color of the header	Accepts a string like `#000` or `rgb(0,0,0)` `string`	-
`outsideBorder`	Toggles the outside border visibility	Accepts either `true` or `false` `boolean`	`false`
`isVertical`	Toggles if the text is vertical	Accepts either `true` or `false` `boolean`	`false`
`sticky.active`	Toggles if the header is sticky	Accepts either `true` or `false` `boolean`	`false`
`sticky.position`	Defines the sticky header position	Accepts either `top` or `bottom`	`top`

BodyDefaultStyles (config.defaultStyles.body)

Key	Label	Description	Default Value
`nowrap`	If text is text only single lined	If `true`, text will be in one line `boolean`	`false`
`height`	The height of each body cell	Accepts a string like `42px` `string`	`42px`
`minHeight`	The minimum height of each body cell	Accepts a string like `50px` `string`	`null`
`padding`	The padding of each body cell	Accepts a string like `12px 5px 12px 5px` (Top, Right, Bottom, Left) `string`	`0px`
`font.size`	The font size of each body cell	Accepts a string like `14px` `string`	`12px`
`font.weight`	The font weight of each body cell	Accepts a string like `400` or `bold` `string`	`normal`
`font.color`	the font color of each body cell	Accepts a string like `#000` or `rgb(0,0,0)` `string`	-
`outsideBorder`	Toggles the outside border visibility of cells	Accepts either `true` or `false` `boolean`	`false`

ActionToolbarConfig (config.toolbarConfig.actionToolbarConfig)

Key	Label	Description	Default Value
`title`	The toolbar title	Title displayed in the action toolbar `string`	-
`sorting`	The sorting configuration	Defines how sorting is handled. Find out more under SortingConfig `SortingConfig`	-
`search`	The search configuration	Defines table search behavior. Find out more under SearchConfig `SearchConfig`	-
`headerColumns`	Defines the header columns	Array of header columns displayed in the toolbar `HeaderCell[]`	-
`actions.addButtonVisible`	Toggles the add button visibility	Accepts either `true` or `false` `boolean`	-
`actions.addButtonLabel`	Defines the add button label	`string`	-
`actions.addMoreButtonVisible`	Toggles the add more button visibility	Accepts either `true` or `false` `boolean`	-

FooterConfig (config.footerConfig)

Key	Label	Description	Default Value
`active`	Toggles if the footer is active	Enables or disables the footer `boolean`	-
`actionFooterConfig`	The action footer configuration	Defines the action footer behavior. Find out more under ActionFooterConfig `ActionFooterConfig`	-
`sticky.active`	Sticky Footer	Enables sticky positioning `boolean`	-
`sticky.position`	Sticky Position	Position of sticky footer: `top` or `bottom`	-

ActionFooterConfig (config.footerConfig.actionFooterConfig)

Key	Label	Description	Default Value
`active`	Toggles if the action footer is active	Accepts either `true` or `false` `boolean`	-
`paging`	The pagination configuration	Defines paging behavior. Find out more under PaginationConfig `PaginationConfig`	-

ManipulationToolbarConfig (config.toolbarConfig.manipulationToolbarConfig)

Key	Label	Description	Default Value
`visible`	Toggles the toolbar visibility	Shows or hides the manipulation toolbar `boolean`	-
`headerColumns`	Defines the header columns	Columns displayed in the manipulation toolbar `HeaderCell[]`	-
`sortingQuery`	Defines the sorting query	Find out more under SortingChangeEvent `SortingChangeEvent`	-
`filteringQuery`	Defines the filtering query	Find out more under SearchChangeEvent `SearchChangeEvent`	-
`actions.saveVisible`	Toggles the save button visibility	Accepts either `true` or `false` `boolean`	-
`actions.saveMoreVisible`	Toggles the save more button visibility	Accepts either `true` or `false` `boolean`	-
`actions.resetVisible`	Toggles the reset button visibility	Accepts either `true` or `false` `boolean`	-

ToolbarConfig (config.toolbarConfig)

Key	Label	Description	Default Value
`active`	Toggles the toolbar	Accepts either `true` or `false` `boolean`	-
`headerColumns`	Defines the header columns	Columns displayed in the toolbar `HeaderCell[]`	-
`actionToolbarConfig`	The action toolbar configuration	Defines the action toolbar behavior. Find out more under ActionToolbarConfig `ActionToolbarConfig`	-
`manipulationToolbarConfig`	The manipulation toolbar configuration	Defines the manipulation toolbar behavior. Find out more under ManipulationToolbarConfig `ManipulationToolbarConfig`	-
`sticky.active`	Toggles the sticky toolbar	Accepts either `true` or `false` `boolean`	-
`sticky.position`	Sets the toolbars sticky position	`top` \| `bottom`	-

SelectionConfig (config.select)

Key	Label	Description	Default Value
`selectOnRowClick`	Toggles select on row click behavior	Accepts either `true` or `false` `boolean`	-
`identifier`	The selection identifier	Key of the object which is selected `string`	`'id'`

SortingConfig (config.sorting)

Key	Label	Description	Default Value
`mode`	Defines the data manipulation mode	Accepts either `local` or `remote` `DataManipulationMode`	-
`active`	Toggles sorting is active	Enables or disables sorting `boolean`	-
`visible`	Toggles sorting is visible	Shows or hides sorting UI `boolean`	-
`query`	Defines the sorting query	Find out more under SortingChangeEvent `SortingChangeEvent`	-

SearchConfig (config.search)

Key	Label	Description	Default Value
`mode`	Defines the data manipulation mode	Accepts either `local` or `remote` `DataManipulationMode`	-
`active`	Toggles if search is active	Accepts either `true` or `false` `boolean`	-
`visible`	Toggles if search is visible	Accepts either `true` or `false` `boolean`	-
`filterActive`	Toggles if filter is active	Accepts either `true` or `false` `boolean`	-
`filterVisible`	Toggles if filter is visible	Accepts either `true` or `false` `boolean`	-
`query`	Defines the filtering query	Find out more under SearchChangeEvent `SearchChangeEvent`	-
`searchPlaceholder`	Defines the search placeholder	Placeholder text for the search input `string`	-
`globalSearchFilter`	Defines the global search filter	Find out more under SearchChangeEvent `SearchChangeEvent`	-

PaginationConfig (config.pagination)

Key	Label	Description	Default Value
`mode`	Defines the data manipulation mode	Accepts either `local` or `remote` `DataManipulationMode`	-
`active`	Toggles if pagination is active	Enables or disables pagination `boolean`	-
`query`	Defines the filtering query	Find out more under PaginationChangeEvent `PaginationChangeEvent`	-
`pageSizeOptions`	Defines the page size options	List of page size options as an Array of `number` `number[]`	-
`showFirstLastButtons`	Toggles the first/last buttons	Shows buttons for first and last pages `boolean`	-
`showPageSizeOptions`	Toggles the page size options	Shows page size selector `boolean`	-
`showPageNumber`	Toggles the page number display	Shows current page number `boolean`	-
`showTotalPages`	Toggles the total pages display	Shows total number of pages `boolean`	-
`showTotalRecords`	Toggles the total records display	Shows total records count `boolean`	-
`maxPageButtonsCount`	Defines the maximum page buttons count	Maximum visible page buttons `number`	-
`totalItemsCount`	Defines the maximum of total items count	Total number of items `number`	-

HeaderColumn

Key	Label	Description	Default Value
`propPath`	The property path	Optional property path identifier `string`	-
`title` *	The title of the header column	`string`	-
`width`	The width of the column	Width of the column `string`	-
`defaultStyles`	The default styles of the column	Defines the style of the column. Find out more under HeaderDefaultStyles `HeaderDefaultStyles`	-
`icon`	The icon configuration of the column	Defines the icon of the column. Find out more under FyzSbIconConfig `FyzSbIconConfig`	-

BodyColumn

Key	Label	Description	Default Value
`propPath` *	The property path	Property path identifier `string`	-
`defaultStyles`	The default styles of the column	Defines the style of the column. Find out more under BodyDefaultStyles `BodyDefaultStyles`	-
`data`	The attached data	Data to attach to the column `any`	-
`tooltip`	The tooltip options	Defines the tooltip of the column. Find out more under TooltipOptions `TooltipOptions`	-

TooltipOptions (BodyColumn.tooltip, BodyCell.tooltip)

Key	Label	Description	Default Value
`tooltipProp`	The tooltip property of which the text is taken	Accepts a string `string`	-
`tooltipFunction`	The tooltip function which computes the tooltip	Provide a function as `string` which returns the tooltip as `string` `string`	-

BodyCell

Key	Label	Description	Default Value
`propPath` *	The property path	Property path identifier. It enables the Column to access table data under that propPath `string`	-
`defaultStyles`	The default styles of the column	Defines the style of the column. Find out more under BodyDefaultStyles `BodyDefaultStyles`	-
`isClicked`	Defines if the Cell is clicked	Accepts either `true` or `false` `boolean`	-
`data.row`	The data which is used in the row of the cell	Accepts every form of data `any`	-
`data.column`	The data which is used in the column of the cell	Accepts every form of data `any`	-
`tooltip`	The tooltip options	Defines the tooltip of the column. Find out more under TooltipOptions `TooltipOptions`	-
`computedTooltip`	The computed tooltip after computation of the TooltipFunction	Defines the computed tooltip of the column. Find out more under TooltipOptions `TooltipOptions`	-
`component`	The Component, which is used in the cell	Define the component as string. Find out more under Table-Components `string`	-
`x`	The x-Position of the Cell	`number`	-
`y`	The y-Position of the Cell	`number`	-
`colspan`	The vertical size of the cell	`number`	-
`rowspan`	The horizontal size of the cell	`number`	-
`styles`	The style of the cell	`Partial<CSSStyleDeclaration>`	-

HeaderCell

Key	Label	Description	Default Value
`propPath`	The property path	Optional property path identifier. It enables the Column to access table data under that propPath `string`	-
`title`	The title of the header column	`string`	-
`defaultStyles`	The default styles of the column	Defines the style of the column. Find out more under BodyDefaultStyles `BodyDefaultStyles`	-
`width`	The width of the header cell	Accepts a string like `25px` `string`	-
`icon`	The icon configuration of the cell	Defines the icon of the cell. Find out more under FyzSbIconConfig `FyzSbIconConfig`	-
`x`	The x-Position of the Cell	`number`	-
`y`	The y-Position of the Cell	`number`	-
`colspan`	The vertical size of the cell	`number`	-
`rowspan`	The horizontal size of the cell	`number`	-
`styles`	The style of the cell	`Partial<CSSStyleDeclaration>`	-

🛠️ Usage

Designer

(Use the build in configuration Inputs in the right Side-Nav)

Config

(Edit the whole configuration of the Table to your liking)

2. Programmatical Data

2.1 How to set initial data of the table

This example shows a simple example of a dataset, which the table will use, directly added via the configuration
(To display the data in the runtime, use the Table Components)

2.2 How to update the data of the table via scripting

This example shows how to update the data table data via scripting

// ⚙️ Retrieve the current configuration of the Brick
const config = fyzBrick.cRef.getConfig();

// 💱 Modify and merge the config to change to the desired table/behavior
fyzBrick.cRef.mergeConfig({
    ...config,
    data: [
        { firstname: "John", lastname: "Rambo", personalInfo: { age: 62, gender: "beast" } },
        { firstname: "John", lastname: "Wick", personalInfo: { age: 47, gender: "male" } },
    ]
})