> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Table

> Documentation for Table

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const tablePreviewJson = {
  "type": "table",
  "columnWidths": {
    "1": {
      "type": "fixedColumnWidth",
      "value": 200
    }
  },
  "defaultColumnWidth": {
    "type": "flexColumnWidth",
    "value": 1
  },
  "textDirection": "ltr",
  "defaultVerticalAlignment": "bottom",
  "border": {
    "color": "#428AF5",
    "width": 1,
    "style": "solid",
    "borderRadius": {
      "topLeft": 16,
      "topRight": 16,
      "bottomLeft": 16,
      "bottomRight": 16
    }
  },
  "children": [{
    "type": "tableRow",
    "children": [{
      "type": "tableCell",
      "child": {
        "type": "container",
        "color": "#40000000",
        "height": 50,
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Header 1"
          }
        }
      }
    }, {
      "type": "tableCell",
      "child": {
        "type": "container",
        "color": "#40000000",
        "height": 50,
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Header 2"
          }
        }
      }
    }, {
      "type": "tableCell",
      "child": {
        "type": "container",
        "color": "#40000000",
        "height": 50,
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Header 3"
          }
        }
      }
    }]
  }, {
    "type": "tableRow",
    "children": [{
      "type": "tableCell",
      "child": {
        "type": "sizedBox",
        "height": 50,
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Row 1, Cell 1"
          }
        }
      }
    }, {
      "type": "tableCell",
      "child": {
        "type": "sizedBox",
        "height": 50,
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Row 1, Cell 2"
          }
        }
      }
    }, {
      "type": "tableCell",
      "child": {
        "type": "sizedBox",
        "height": 50,
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Row 1, Cell 3"
          }
        }
      }
    }]
  }]
};
export const tablePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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](https://api.flutter.dev/flutter/widgets/Table-class.html).

## Properties

| Property                 | Type                             | Description                                                                                                                                                                                                    |
| ------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| columnWidths             | `Map<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`](./../styles_and_attributes/table_column_width) |
| defaultColumnWidth       | `StacTableColumnWidth`           | Determines the  default column width. Defaults to `flexColumnWidth`. See [`StacTableColumnWidth`](./../styles_and_attributes/table_column_width)                                                               |
| textDirection            | `StacTextDirection`              | Determines the direction in which the columns are ordered. Can be `rtl` or `ltr`. Defaults to `rtl`.                                                                                                           |
| border                   | `StacTableBorder`                | Defines the border style for `StacTable`. See [`StacTableBorder`](./../styles_and_attributes/table_border).                                                                                                    |
| defaultVerticalAlignment | `StacTableCellVerticalAlignment` | Defines the verticalAlignment for the cells that don't specify a verticalAlignment. Can be `top`, `middle`, `bottom`, `baseline`, `fill` & `intrinsicHeight` Defaults to `top`.                                |
| textBaseLine             | `StacTextBaseline`               | Defines the text baseline to use when verticalAlignment is `baseline`. Can be `alphabetic` or `ideographic`. There is no default value.                                                                        |
| children                 | `List<StacTableRow>`             | Rows that will be populated in the table. See [`StacTableRow`](./table_row).                                                                                                                                   |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacTable(
      columnWidths: {
        1: StacFixedColumnWidth(value: 200),
      },
      defaultColumnWidth: StacFlexColumnWidth(value: 1),
      textDirection: StacTextDirection.ltr,
      defaultVerticalAlignment: StacTableCellVerticalAlignment.bottom,
      border: StacTableBorder(
        color: '#428AF5',
        width: 1.0,
        style: StacBorderStyle.solid,
        borderRadius: StacBorderRadius.all(16.0),
      ),
      children: [
        StacTableRow(
          children: [
            StacTableCell(
              child: StacContainer(
                color: '#40000000',
                height: 50.0,
                child: StacCenter(child: StacText(data: 'Header 1')),
              ),
            ),
            StacTableCell(
              child: StacContainer(
                color: '#40000000',
                height: 50.0,
                child: StacCenter(child: StacText(data: 'Header 2')),
              ),
            ),
            StacTableCell(
              child: StacContainer(
                color: '#40000000',
                height: 50.0,
                child: StacCenter(child: StacText(data: 'Header 3')),
              ),
            ),
          ],
        ),
        StacTableRow(
          children: [
            StacTableCell(
              child: StacSizedBox(
                height: 50.0,
                child: StacCenter(child: StacText(data: 'Row 1, Cell 1')),
              ),
            ),
            StacTableCell(
              child: StacSizedBox(
                height: 50.0,
                child: StacCenter(child: StacText(data: 'Row 1, Cell 2')),
              ),
            ),
            StacTableCell(
              child: StacSizedBox(
                height: 50.0,
                child: StacCenter(child: StacText(data: 'Row 1, Cell 3')),
              ),
            ),
          ],
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "table",
      "columnWidths": {
        "1": {
          "type": "fixedColumnWidth",
          "value": 200
        }
      },
      "defaultColumnWidth": {
        "type": "flexColumnWidth",
        "value": 1
      },
      "textDirection": "ltr",
      "defaultVerticalAlignment": "bottom",
      "border": {
        "color": "#428AF5",
        "width": 1,
        "style": "solid",
        "borderRadius": {
          "topLeft": 16,
          "topRight": 16,
          "bottomLeft": 16,
          "bottomRight": 16
        }
      },
      "children": [
        {
          "type": "tableRow",
          "children": [
            {
              "type": "tableCell",
              "child": {
                "type": "container",
                "color": "#40000000",
                "height": 50,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Header 1"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "container",
                "color": "#40000000",
                "height": 50,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Header 2"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "container",
                "color": "#40000000",
                "height": 50,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Header 3"
                  }
                }
              }
            }
          ]
        },
        {
          "type": "tableRow",
          "children": [
            {
              "type": "tableCell",
              "child": {
                "type": "sizedBox",
                "height": 50,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Row 1, Cell 1"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "sizedBox",
                "height": 50,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Row 1, Cell 2"
                  }
                }
              }
            },
            {
              "type": "tableCell",
              "child": {
                "type": "sizedBox",
                "height": 50,
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "Row 1, Cell 3"
                  }
                }
              }
            }
          ]
        }
      ]
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={tablePreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: tablePreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>