UISchema layout as a table

General
1

Hi,

I want the grid to display as a table, not a group. How can I do that?

I want it like this:

TableRender
TableRender2537×325 33.4 KB

I can do that if I remove the “type” in “options.detail” but that will invalid my disable rule.

Any ideas? Thanks

UI Schema:

{
“type”: “HorizontalLayout”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/configData”,
“options”: {
“detail”: {
“type”: “HorizontalLayout”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/DateFieldTest”
},
{
“type”: “Control”,
“scope”: “#/properties/CarPayGroup”
},
{
“type”: “Control”,
“scope”: “#/properties/XRefCode”
}
],
“rule”: {
“effect”: “DISABLE”,
“condition”: {
“scope”: “#/properties/XRefCode”,
“schema”: { “const”: “cartypetwotest” }
}
}
}
}
}
]
}

Schema:

{
“type”: “object”,
“properties”: {
“configData”: {
“type”: “array”,
“items”: {
“type”: “object”,
“properties”: {
“DateFieldTest”: {
“type”: “string”,
“title”: “Date Field”,
“format”: “date”
},
“IsGoodCar”: {
“type”: “boolean”,
“title”: “Is Good Car”
},
“CarPayGroup”: {
“type”: “string”,
“title”: “Pay Group”,
“oneOf”: [
{
“const”: “Hourly”,
“title”: “Hourly”
},
{
“const”: “Salary”,
“title”: “Salary”
}
]
},
“XRefCode”: {
“type”: “string”,
“title”: “XRefCode”
}
}
}
}
}
}

Data:

{
“configData”: [
{
“IsGoodCar”: false,
“CarPayGroup”: “Hourly”,
“XRefCode”: “cartypeonetest”,
“DateFieldTest”: “2023-08-04”
},
{
“XRefCode”: “cartypetwotest”,
“IsGoodCar”: true,
“DateFieldTest”: “2023-06-06”,
“CarPayGroup”: “Hourly”
}
]
}

2

HI @minhnguyenlinknode ,
there is not much special you have to do.
First of all depending on the renderer-set you use, a table renderer might be missing: Renderer sets - JSON Forms
Further you can check this example: Array Example - JSON Forms
Basically for a table you should not define any options but just let JSONForms render.

Best,
Eugen

3

To expand on @eneufeld’s answer: We don’t offer any table customization via the UI Schema. Which is why you end up with the alternative list/group renderer when you try to customize them.

For customized table behavior you need to implement custom cells.

4

Thanks. As mentioned if I remove the “type: HorizontalLayout” in “options.detail” in UI Schema then the rule effect Disable won’t work?
My aim is to disable a row in the grid including the “delete” button when a specific field’s value is true. I am using React component JsonForms.

5

If you remove the whole options.detail then you will have the table renderer coming in, but then you obviously can’t add any rules.

If you want the table renderer but still disable full rows then you need to provide a custom cell renderer set which supports that feature. The table renderer of JSON forms is very simplistic on purpose while allowing to register custom cells to support all potential features if they are needed.