Team table

A DataTable whose columns are declared inline and whose rows bind to an array in the data model.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "h",            "table"          ]        },        {          "id": "h",          "component": "Text",          "text": "Team",          "variant": "title"        },        {          "id": "table",          "component": "DataTable",          "columns": [            {              "key": "name",              "header": "Name"            },            {              "key": "role",              "header": "Role"            },            {              "key": "location",              "header": "Location"            }          ],          "rows": {            "path": "/people"          }        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "people": [          {            "name": "Ada Lovelace",            "role": "Engineer",            "location": "London"          },          {            "name": "Grace Hopper",            "role": "Admiral",            "location": "New York"          },          {            "name": "Katherine Johnson",            "role": "Mathematician",            "location": "Virginia"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "h",
            "table"
          ]
        },
        {
          "id": "h",
          "component": "Text",
          "text": "Team",
          "variant": "title"
        },
        {
          "id": "table",
          "component": "DataTable",
          "columns": [
            {
              "key": "name",
              "header": "Name"
            },
            {
              "key": "role",
              "header": "Role"
            },
            {
              "key": "location",
              "header": "Location"
            }
          ],
          "rows": {
            "path": "/people"
          }
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "people": [
          {
            "name": "Ada Lovelace",
            "role": "Engineer",
            "location": "London"
          },
          {
            "name": "Grace Hopper",
            "role": "Admiral",
            "location": "New York"
          },
          {
            "name": "Katherine Johnson",
            "role": "Mathematician",
            "location": "Virginia"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Team


Ada Lovelace	Engineer	London
Grace Hopper	Admiral	New York
Katherine Johnson	Mathematician	Virginia