Skip to main content

​
Table

StacTable allows you to build the Flutter Table widget using JSON. To know more about the Table widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
columnWidthsMap<int, StacTableColumnWidth>?Determines the column width on a column by column basis, if a particular column entry has null width defaultColumnWidth is used. See StacTableColumnWidth
defaultColumnWidthStacTableColumnWidth?Determines the default column width. Defaults to flexColumnWidth. See StacTableColumnWidth
textDirectionTextDirection?Determines the direction in which the columns are ordered. Can be rtl or ltr. Defaults to rtl.
borderStacTableBorder?Defines the border style for StacTable. See StacTableBorder.
defaultVerticalAlignmentTableCellVerticalAlignment?Defines the verticalAlignment for the cells that don’t specify a verticalAlignment. Can be top, middle, bottom, baseline, fill & intrinsicHeight Defaults to top.
textBaseLineTextBaseline?Defines the text baseline to use when verticalAlignment is baseline. Can be alphabetic or ideographic. There is no default value.
childrenList<StacTableRow>Rows that will be populated in the table. See StacTableRow.

​
Example

{
      "type": "table",
      "columnWidths": {
        "1": {
          "type": "fixedColumnWidth",
          "value": 200
        }
      },
      "defaultColumnWidth": {
        "type": "flexColumnWidth",
        "value": 1
      },
      "textDirection": "ltr",
      "defaultVerticalAlignment": "bottom",
      "border": {
        "type": "tableBorder",
        "top": {
          "color": "#428AF5",
          "width": 1.0
        },
        "right": {
          "color": "#428AF5",
          "width": 1.0
        },
        "bottom": {
          "color": "#428AF5",
          "width": 1.0
        },
        "left": {
          "color": "#428AF5",
          "width": 1.0
        },
        "borderRadius": 16
      },
      "children": [
        {
          "type": "tableRow",
          "children": [
            {
              "type": "tableCell",
              "child": {
                "type": "container",
                "color": "#40000000",
                "height": 50.0,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Header 1"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "container",
                "color": "#40000000",
                "height": 50.0,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Header 2"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "container",
                "color": "#40000000",
                "height": 50.0,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Header 3"
                  }
                }
              }
            }
          ]
        },
        {
          "type": "tableRow",
          "children": [
            {
              "type": "tableCell",
              "child": {
                "type": "sizedBox",
                "height": 50.0,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Row 1, Cell 1"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "sizedBox",
                "height": 50.0,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Row 1, Cell 2"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "sizedBox",
                "height": 50.0,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Row 1, Cell 3"
                  }
                }
              }
            }
          ]
        },
      ]
    }
⌘I