> ## 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.

# TableRow

> Documentation for TableRow

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

export const tableRowPreviewJson = {
  "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"
        }
      }
    }
  }]
};
export const tableRowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

StacTableRow allows you to define the Flutter TableRow widget using JSON.
To know more about the TableRow widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/TableRow-class.html).

## Properties

| Property   | Type                         | Description                                                                                                                                            |
| ---------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| decoration | `StacDecoration?`            | Defines the decoration to be painted behind this row. See `StacDecoration`.                                                                            |
| children   | `List<Map<String, dynamic>>` | Defines the widgets the comprise the cells in this row. Use [`StacTableCell`](./table_cell) to control the individual alignment of each cell in a row. |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    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')),
          ),
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "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"
              }
            }
          }
        }
      ]
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={tableRowPreviewSrc}
        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: tableRowPreviewJson
      };

      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>