widget.Table
What are widgets
This is a new feature designed to make DomWizard even easier to use — just as originally intended. Widgets are pluggable, highly customizable, styled components that users can easily integrate into their projects. The goal is to speed up development while maintaining flexibility and control.
Table
The Table widget should render a fully styled and responsive table element, providing customisation options for both structure and appearance. It must return a DomWizard element — nothing else should be returned.
Inputs
data: array of objects — the main table data where each object represents a rowcolumns: array of strings or objects — defines which columns to display (if objects, allow keys like { key: 'name', label: 'Full Name' })styles: object (optional) — allows overriding of default table stylesonRowClick: function (optional) — triggered when a row is clickedonCellClick: function (optional) — triggered when a specific cell is clickedcaption: string (optional) — adds a caption/title above the tableemptyMessage: string (optional) — text to display when data is empty
If you think an additional input is necessary, feel free to add it after styles and mark it as optional.
The data defines the content of the table, columns determine the structure, and any user-provided styles should override the default widget styles. The table should be designed to adapt gracefully to different screen sizes and data lengths.
widget.Table
What are widgets
This is a new feature designed to make DomWizard even easier to use — just as originally intended. Widgets are pluggable, highly customizable, styled components that users can easily integrate into their projects. The goal is to speed up development while maintaining flexibility and control.
Table
The Table widget should render a fully styled and responsive table element, providing customisation options for both structure and appearance. It must return a DomWizard element — nothing else should be returned.
Inputs
data: array of objects — the main table data where each object represents a rowcolumns: array of strings or objects — defines which columns to display (if objects, allow keys like{ key: 'name', label: 'Full Name' })styles: object (optional) — allows overriding of default table stylesonRowClick: function (optional) — triggered when a row is clickedonCellClick: function (optional) — triggered when a specific cell is clickedcaption: string (optional) — adds a caption/title above the tableemptyMessage: string (optional) — text to display whendatais emptyIf you think an additional input is necessary, feel free to add it after
stylesand mark it as optional.The
datadefines the content of the table,columnsdetermine the structure, and any user-providedstylesshould override the default widget styles. The table should be designed to adapt gracefully to different screen sizes and data lengths.