---
url: /documentation/input-types/table.md
description: >-
  Configure two-dimensional table inputs with text, textarea, or visualtext
  cells and fixed or variable dimensions.
---

# Table Input

Table input for arbitrary or structured two-dimensional tabular data.

```js
{
  input: {
    type: 'table', // [!code focus:5]
    columns: {
      name: 'Name',
      email: 'Email'
    }
  }
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `inputType`  | `'text' \| 'textarea' \| 'visualtext'` | `'text'` | Edit method of the individual cells: single-line plain text, multi-line plain text or WYSIWYG editor. |
| `rows` | `RowOrColumn` | `[0, 1000]` | How table rows behave. |
| `columns` | `RowOrColumn` | `[0, 1000]` | How table columns behave. |
| `clearLabel` | `string` | `"Tabelle leeren"` | The label for the clearing button. |

with

```ts
type RowOrColumn =
  // Arbitrary number of rows/columns
  | undefined

  // Fixed number of rows/columns
  | number

  // Arbitrary number of rows/columns
  | [lower: number, upper: number]

  // Fixed number of rows/columns referenced by unique keys
  | string[]

  // Fixed number of rows/columns referenced by unique keys and accompanied by user-facing labels in the editor
  | Record<string, string>
```

## Example Configurations and Results

Below are examples of configurations and according outcomes. Results are formatted in a JSON-like way for better readability, `"value"` being a placeholder for the string held by the cell:

***

### Fixed Number of Rows, Fixed Number of Columns

**`rows`:** `2`

**`columns`:** `1`

**Excerpt of possible results:**

* 2x1 table: Nested array, exactly two rows with one cell per row (the only possible result structure):

  ```js
  [
    ["value"],
    ["value"]
  ]
  ```

***

### Arbitrary Number of Rows, Restricted Number of Columns

**`rows`:** –

**`columns`:** `[1, 5]`

**Excerpt of possible results:**

* 2x1 table: Nested array, two rows with one cell per row:

  ```js
  [
    ["value"],
    ["value"]
  ]
  ```

* 4x2 table: Nested array, four rows with two cells each:

  ```js
  [
    ["value", "value"],
    ["value", "value"],
    ["value", "value"],
    ["value", "value"]
  ]
  ```

* No table: Empty array, zero rows:

  ```js
  []
  ```

***

### Arbitrary Number of Rows, Keyed Columns

**`rows`:** –

**`columns`:** `['name', 'email', 'address]`

**Excerpt of possible results:**

* 2x3 table: Two rows with a fixed object structure for each:

  ```js
  [
    {
      name: "value",
      email: "value",
      address: "value"
    },
    {
      name: "value",
      email: "value",
      address: "value"
    }
  ]
  ```

***

### Arbitrary Number of Rows, Keyed & Labeled Columns

**`rows`:** –

**`columns`:** `{ name: 'Name', email: 'Email', address: 'Post address' }`

**Excerpt of possible results:**

* 2x3 table: Two rows with a fixed object structure for each (possible results are exactly the same as for the previous example):

  ```js
  [
    {
      name: "value",
      email: "value",
      address: "value"
    },
    {
      name: "value",
      email: "value",
      address: "value"
    }
  ]
  ```

***

### Keyed Rows, Arbitrary Number of Columns

**`rows`:** `['primary', 'secondary']`

**`columns`:** –

**Excerpt of possible results:**

* 2x3 table: A fixed object structure with an array of three cells for each property:

  ```js
  {
    primary: ["value", "value", "value"],
    secondary: ["value", "value", "value"]
  }
  ```

***

### Keyed Rows, Keyed Columns

**`rows`:** `['primary', 'secondary']`

**`columns`:** `['zip', 'city']`

**Excerpt of possible results:**

* 2x2 table: A fixed object (the only possible result structure):

  ```js
  {
    primary: {
      zip: "value",
      city: "value"
    },
    secondary: {
      zip: "value",
      city: "value"
    }
  }
  ```

## Conditions

The `table` input type supports the following conditions for [dynamic visibility](/documentation/concepts/elements/definition#dynamic-visibility):

| Condition | Payload | Description |
| - | - | - |
| `hasDimensions` | `boolean`defaults to `true` | Checks whether the table already has its dimensions selected. |