Skip to main content

Table

📘 Developer Guide

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

You can place multiple Table Components inside the Table Brick to define a highly customizable layout.

🔁 Example

Designer

Screenshot From 2025-10-10 14-11-45.png

Runtime

image.png

⚙️ 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. See SortingConfig -
search The search configuration Defines table search behavior. See 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. See 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 footer is active Enables or disables the footer boolean -
actionFooterConfig The action footer configuration Defines the action footer behavior. See ActionFooterConfig -
sticky.active Sticky Footer Enables sticky positioning boolean -
sticky.position Sticky Position Position of sticky footer: top or bottom -
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 See SortingChangeEvent -
filteringQuery Defines the filtering query See 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. See ActionToolbarConfig -
manipulationToolbarConfig The manipulation toolbar configuration Defines the manipulation toolbar behavior. See ManipulationToolbarConfig -
sticky.active Toggles the sticky toolbar Accepts either true or false boolean -
sticky.position Sets the toolbar's 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 visibility Shows or hides sorting UI boolean -
query Defines the sorting query See 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 See SearchChangeEvent -
searchPlaceholder Defines the search placeholder Placeholder text for the search input string -
globalSearchFilter Defines the global search filter See 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 See PaginationChangeEvent -
pageSizeOptions Defines the page size options List of page size options as an Array of 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. See HeaderDefaultStyles HeaderDefaultStyles -
icon The icon configuration of the column Defines the icon of the column. See 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. See BodyDefaultStyles BodyDefaultStyles -
data The attached data Data to attach to the column any -
tooltip The tooltip options Defines the tooltip of the column. See 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 -
BodyCell
Key Label Description Default Value
propPath * The property path Property path identifier. Enables the Column to access table data under that propPath string -
defaultStyles The default styles of the column Defines the style of the column. See BodyDefaultStyles BodyDefaultStyles -
isClicked Defines if the Cell is clicked Accepts either true or false boolean -
data.row The data used in the row of the cell Accepts every form of data any -
data.column The data used in the column of the cell Accepts every form of data any -
tooltip The tooltip options Defines the tooltip of the column. See TooltipOptions TooltipOptions -
computedTooltip The computed tooltip after computation of the TooltipFunction Defines the computed tooltip of the column. See TooltipOptions TooltipOptions -
component The Component used in the cell Define the component as string. See Table-Components. Defaults to a Default-Column if nothing specified { component: string, config: any } -
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. 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. See 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. See 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 built-in configuration inputs in the right Side-Nav)

image.png

Config

(Edit the configuration of the Table to your liking)

Screenshot From 2025-10-10 14-12-13.png

⌨️ Programmatical Data

Set initial table data

This example shows how to define an initial dataset directly in the configuration.
(To display the data in runtime, use Table Components)

Screenshot From 2025-10-13 07-21-12.png

Update table data via scripting

Example script to update table data dynamically:

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

// 💱 Modify and merge the config to update the table
fyzBrick.cRef.mergeConfig({
  ...config,
  data: [
    { firstname: "John", lastname: "Rambo", personalInfo: { age: 62, gender: "beast" } },
    { firstname: "John", lastname: "Wick", personalInfo: { age: 47, gender: "male" } },
  ]
});
No Comments
Back to top