How can I create a html table on the screen with x rows and y colums where x & y are variable depending on the data that needs to be displayed.
The table will have no input fields by default, but when the users press a ‘Change’ button, some fields needs to be changed to an input field that can be used when the user press the ‘Submit’ button.
Other fields will need a tooltip.
The header (top row) needs to be in a color.
Do you have examples for this?
Hello!
To integrate HTML content to Jmix Screen you can use HtmlBox component: HtmlBoxLayout :: Jmix Documentation.
Example of usage: (UI samples::htmlboxlayout-template)[https://demo.jmix.io/sampler/#main/2/sample?id=htmlboxlayout-template].
However, it applies only static content from template and I don’t think the cells in table can be changed to fields in this case.
Could you clarify why Table component doesn’t suit you? It can be configured to edit values in cells: UI samples::table-editable.
You can also use DataGrid with inline editing: UI samples::datagrid-editor.
I need the header of the table to be something like this:
With html this is easy using colspan and rowspan.
I already tried datagrid:
The background of the header does not look good.
It should be all blue.
Any tips?
This is what I got now:
How can I add cell spacing/padding?
How to give the header a background color?
How can I add cell spacing/padding?
How to give the header a background color?
To manage CSS you should extend existing theme in application, see Creating a Custom Theme :: Jmix Documentation.
Then you can add your selectors and assign them to the components. For instance, to add background-color to DataGrid's header cells, you can add the following selectors:
.v-grid-header .v-grid-row .v-grid-cell {
background-color: #7373fd;
}