ArrayRenderer: Disable Add, Remove and add a "column" label

General
1

image
image1920×663 25.1 KB

I would like to know if it’s possible to:

  1. Render the first column as a label (or at least as a readonly input)
  2. Hide the “Add” and “Remove” button

Will I have to create my custom renderer? This is what I’m trying to achieve:

image
image1690×830 145 KB

And this is my schema:

{
                "schema": {
                    "type": "object",
                    "properties": {
                      "brands_ranking": {
                        "type": "array",
                        "items": {
                          "type": "object",
                          "readonly": true,
                          "properties": {
                            "brand": {
                                "type": "string",
                                "readOnly": true
                            },
                            "most_favorite": {
                              "type": "string"
                            },
                            "second_favorite": {
                              "type": "string"
                            },
                            "third_favorite": {
                              "type": "string"
                            }
                          }
                        }
                      }
                    }
                },
                "uischema": {
                    "type": "VerticalLayout",
                    "elements": [
                      {
                        "type": "Control",
                        "scope": "#/properties/brands_ranking",
                        "label": "Ranking"
                      }
                    ]
                },
                "data": {
                    "brands_ranking": [
                        {
                            "brand": "Brand 1",
                            "most_favorite": "",
                            "second_favorite": "",
                            "third_favorite": ""
                        },
                        {
                            "brand": "Brand 2",
                            "most_favorite": "",
                            "second_favorite": "",
                            "third_favorite": ""
                        },
                        {
                            "brand": "Brand 3",
                            "most_favorite": "",
                            "second_favorite": "",
                            "third_favorite": ""
                        }
                    ]
                
                }
            }
2

Ok it was pretty easy.

  • I just overrided the MaterialTableControl to force disableRemove=true and disableAdd=true
  • I create a custom cell that just render a <Box> mui component when schema has readOnly property to true

I didn’t understand how one can control disableRemove and disableAdd from schema.

3

Hi @paulSerre,
I’m glad you found a solution :slight_smile:
You can also disable the add and remove buttons without a custom renderer by configuring this in the UI Schema. For this, you can set the disableAdd and/or disableRemove options in the Control like this:

{
  "type": "Control",
  "scope": "#/properties/brands_ranking",
  "label": "Ranking",
  "options": {
    "disableAdd": true,
    "disableRemove": true
  }
}
4

Yes I’ve tried that one but for some reason it doesn’t work.

5

Ok I wasn’t looking at the good version.
The current release doesn’t have this option (3.3.0), only the new one.