Skip to main content

Table

📘 Developer Guide

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

You are able tocan place severalmultiple Table Components inside the tableTable brick,Brick to define a morehighly customizable Table.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. Find out more underSee SortingConfig
SortingConfig		 -
search The search configuration Defines table search behavior. Find out more underSee 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 underSee 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 trueEnables or false
disables the footer boolean		 -
pagingactionFooterConfig The paginationaction footer configuration Defines pagingthe action footer behavior. Find out more underSee PaginationConfigActionFooterConfig
-
PaginationConfigsticky.activeSticky FooterEnables sticky positioning boolean-
sticky.positionSticky PositionPosition 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 Find out more underSee SortingChangeEvent
SortingChangeEvent		 -
filteringQuery Defines the filtering query Find out more underSee 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 underSee ActionToolbarConfig
ActionToolbarConfig		 -
manipulationToolbarConfig The manipulation toolbar configuration Defines the manipulation toolbar behavior. Find out more underSee ManipulationToolbarConfig
ManipulationToolbarConfig		 -
sticky.active Toggles the sticky toolbar Accepts either true or false
 boolean		 -
sticky.position Sets the toolbarstoolbar'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 is visiblevisibility Shows or hides sorting UI
 boolean		 -
query Defines the sorting query Find out more underSee 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 underSee SearchChangeEvent
SearchChangeEvent		 -
searchPlaceholder Defines the search placeholder Placeholder text for the search input
 string		 -
globalSearchFilter Defines the global search filter Find out more underSee 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 underSee 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 underSee HeaderDefaultStyles
 HeaderDefaultStyles		 -
icon The icon configuration of the column Defines the icon of the column. Find out more underSee 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 underSee 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 underSee 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 enablesEnables 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 underSee 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 underSee TooltipOptions
 TooltipOptions		 -
computedTooltip The computed tooltip after computation of the TooltipFunction Defines the computed tooltip of the column. Find out more underSee TooltipOptions
 TooltipOptions		 -
component The Component, which isComponent used in the cell Define the component as string. Find out more underSee Table-Components. Defaults to a Default-Column if nothing isspecified 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. It enablesEnables 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 underSee 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 underSee 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 built-in configuration Inputsinputs in the right Side-Nav)

image.png

Config

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

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

2.⌨️ Programmatical Data

2.1 How to setSet initial table data of the table

This example shows ahow simpleto exampledefine ofan ainitial dataset,dataset whichdirectly in the tableconfiguration.
will use, directly added via the configuration
(To display the data in the runtime, use the Table Components)

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

2.2 How to update the data of the table via scripting

This example shows how to update the dataUpdate 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 change toupdate the desired table/behaviortable
fyzBrick.cRef.mergeConfig({
  ...config,
  data: [
    { firstname: "John", lastname: "Rambo", personalInfo: { age: 62, gender: "beast" } },
    { firstname: "John", lastname: "Wick", personalInfo: { age: 47, gender: "male" } },
  ]
});
Back to top