Cannot create React table form using react-jsonschema-form-extras

user_6010267 0
Viewed 1222

I am trying to display a React form as a table using react-jsonschema-form-extras and get the following error:

"TypeError: Cannot read property 'tableCols' of undefined"

I am creating a React form using react-jsonschema-form and react-jsonschema-form-extras. All the features work perfectly for me except ""ui:field": "table"". See GitHub documentation.

const schema = {
  "type": "object",
  "properties": {
    "listOfStrings": {
      "type": "array",
      "title": "A list of strings",
      "items": {
        "type": "string",
        "default": "bazinga"
      }
    }
  }
}

const uiSchema = {
  "listOfStrings": {
    "ui:field": "table"
  }
}

const formData = {
  "listOfStrings": [
    "foo",
    "bar"
  ]
}

According to the docs, you can use table without any additional predefined configuration. I also tried defining the table column:

const uSchema = {
  "listOfStrings": {
    "ui:field": "table",
    "table": {
      "tableCols": [
        {
        "dataField": "listOfStrings"
        }
      ]
    }
  }
}

Results in the folowing error:

"TypeError: Cannot convert undefined or null to object"
react-jsonschema-forms reactjs
1 Answers

You haven't defined the schema properly. The items in type object is in turn of type object which has properties of how you want your attributes.

Sandbox: https://codesandbox.io/s/silly-satoshi-jt4jw

-- 

const schema = {
  "type": "object",
  "properties": {
    "listOfStrings": {
      "type": "array",
      "title": "A list of strings",
      "items": {
       "type": "object",
        "properties": {
          string1: { type: "string", default: "bazinga" },
          string2: { type: "string" }
        }
      }
    }
  }
}

const uiSchema = {
  "listOfStrings": {
    "ui:field": "table"
  }
}

const formData = {
  "listOfStrings": [
    "foo",
    "bar"
  ]
}
user_13214990
Related