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

# Table elements

Add structured table elements with rows and columns.

## Running this example

To run this example locally:

1. If you haven't already, create a new app in the [Developer Portal](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

   ```shell
   git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
   cd canva-apps-sdk-starter-kit
   ```

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example table_elements
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { useState, useCallback } from "react";
    import * as styles from "styles/components.css";
    import {
      Alert,
      Button,
      ColorSelector,
      Column,
      Columns,
      FormField,
      NumberInput,
      PlusIcon,
      Rows,
      Text,
      TextInput,
      Title,
    } from "@canva/app-ui-kit";
    import type { CellState, TableState } from "@canva/app-hooks";
    import { useFeatureSupport, useTable } from "@canva/app-hooks";
    import { addElementAtCursor, addElementAtPoint } from "@canva/design";

    // Demo table configuration with 4 rows, 5 columns, and sample cell customizations
    // including merged cells (colSpan/rowSpan), custom text, and fill colors
    const initialState: TableState = {
      rowCount: 4,
      columnCount: 5,
      cells: [
        {
          rowPos: 1,
          columnPos: 1,
          colSpan: 3,
          rowSpan: 2,
          text: "2x3",
          fillColor: "#deffdb",
        },
        {
          rowPos: 1,
          columnPos: 4,
          rowSpan: 2,
          text: "2x1",
          fillColor: "#dbf1ff",
        },
        { rowPos: 4, columnPos: 1, colSpan: 2, text: "1x2" },
        { rowPos: 3, columnPos: 5, fillColor: "#ffa000" },
      ],
    };

    const CellElement = ({
      index,
      value: state,
      onChange,
    }: {
      index: number;
      value: CellState;
      onChange: (value: CellState) => void;
    }) => {
      return (
        <Rows spacing="1u">
          <Title size="small">Cell #{index}</Title>
          <Columns spacing="1u">
            <Column width="1/2">
              <FormField
                label="Row position"
                value={state.rowPos}
                control={(props) => (
                  <NumberInput
                    {...props}
                    onChange={(value) => {
                      onChange({ ...state, rowPos: value });
                    }}
                  />
                )}
              />
            </Column>
            <Column width="1/2">
              <FormField
                label="Column position"
                value={state.columnPos}
                control={(props) => (
                  <NumberInput
                    {...props}
                    onChange={(value) => {
                      onChange({ ...state, columnPos: value });
                    }}
                  />
                )}
              />
            </Column>
          </Columns>
          <Columns spacing="1u">
            <Column width="1/2">
              <FormField
                label="rowSpan"
                value={state.rowSpan}
                control={(props) => (
                  <NumberInput
                    {...props}
                    onChange={(value) => {
                      onChange({
                        ...state,
                        rowSpan: value,
                      });
                    }}
                  />
                )}
              />
            </Column>
            <Column width="1/2">
              <FormField
                label="colSpan"
                value={state.colSpan}
                control={(props) => (
                  <NumberInput
                    {...props}
                    onChange={(value) => {
                      onChange({
                        ...state,
                        colSpan: value,
                      });
                    }}
                  />
                )}
              />
            </Column>
          </Columns>
          <Columns spacing="1u">
            <Column width="content">
              <FormField
                label="Text content"
                value={state.text}
                control={(props) => (
                  <TextInput
                    {...props}
                    onChange={(value) => {
                      onChange({
                        ...state,
                        text: value,
                      });
                    }}
                  />
                )}
              />
            </Column>
            <Column width="content">
              <FormField
                label="Fill color"
                control={(props) => (
                  <ColorSelector
                    {...props}
                    color={state.fillColor || "#FFFFFF"}
                    onChange={(value) => {
                      onChange({
                        ...state,
                        fillColor: value === "#FFFFFF" ? undefined : value,
                      });
                    }}
                  />
                )}
              />
            </Column>
          </Columns>
        </Rows>
      );
    };

    export const App = () => {
      const tableState = useTable(initialState);
      const [submissionError, setSubmissionError] = useState("");
      const isSupported = useFeatureSupport();
      const addElement = [addElementAtPoint, addElementAtCursor].find((fn) =>
        isSupported(fn),
      );

      // Handler to convert the table state to a TableElement and add it to the design
      const onClick = useCallback(async () => {
        if (!addElement) {
          return;
        }

        try {
          // Convert the current table configuration to a Canva TableElement
          // and add it to the design at the user's cursor position
          await addElement(tableState.build());
        } catch (e) {
          if (e instanceof Error) {
            setSubmissionError(e.message);
          }
        }
      }, [tableState, addElement]);

      const onAddCell = useCallback(() => {
        tableState.cells = [...(tableState.cells || []), {}];
      }, []);

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="3u">
            <Text>
              This example demonstrates how apps can add table elements to a design.
            </Text>
            {(tableState.error || submissionError) && (
              <Alert tone="critical">{tableState.error || submissionError}</Alert>
            )}
            <Columns spacing="3u">
              <Column width="1/2">
                <FormField
                  label="Total rows"
                  value={tableState.rowCount}
                  control={(props) => (
                    <NumberInput
                      {...props}
                      onChange={(value) => {
                        tableState.rowCount = value;
                      }}
                    />
                  )}
                />
              </Column>
              <Column width="1/2">
                <FormField
                  label="Total columns"
                  value={tableState.columnCount}
                  control={(props) => (
                    <NumberInput
                      {...props}
                      onChange={(value) => {
                        tableState.columnCount = value;
                      }}
                    />
                  )}
                />
              </Column>
            </Columns>
            <Title size="medium">Cell customizations</Title>
            {tableState.cells?.map((value, index) => (
              <CellElement
                key={`cell-${index}`}
                index={index}
                value={value}
                onChange={(value) => {
                  const cells = tableState.cells?.slice() || [];
                  cells[index] = value;
                  tableState.cells = cells;
                }}
              />
            ))}
            <Button variant="secondary" onClick={onAddCell} icon={PlusIcon}>
              New custom cell
            </Button>
            <Button
              variant="primary"
              onClick={onClick}
              disabled={!addElement}
              tooltipLabel={
                !addElement
                  ? "This feature is not supported in the current page"
                  : undefined
              }
              stretch
            >
              Add element
            </Button>
          </Rows>
        </div>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { AppUiProvider } from "@canva/app-ui-kit";
    import { createRoot } from "react-dom/client";
    import { App } from "./app";
    import "@canva/app-ui-kit/styles.css";
    import type { DesignEditorIntent } from "@canva/intents/design";
    import { prepareDesignEditor } from "@canva/intents/design";

    async function render() {
      const root = createRoot(document.getElementById("root") as Element);

      root.render(
        <AppUiProvider>
          <App />
        </AppUiProvider>,
      );
    }

    const designEditor: DesignEditorIntent = { render };
    prepareDesignEditor(designEditor);

    // Hot Module Replacement for development (automatically reloads the app when changes are made)
    if (module.hot) {
      module.hot.accept("./app", render);
    }
    ```
  </Tab>

  <Tab name="README.md">
    ```markdown
    # Table elements

    Demonstrates how to create table elements with configurable rows, columns, cell spans, and formatting. Shows table structure definition, cell customization, and table insertion patterns.

    For API reference docs and instructions on running this example, see: https://www.canva.dev/docs/apps/examples/table-elements/.

    NOTE: This example differs from what is expected for public apps to pass a Canva review:

    - Table structure and data are hardcoded for demonstration purposes only. Production apps should provide user input interfaces or dynamic content loading and table editing interfaces
    - Data import and cell validation capabilities are not implemented. Production apps should include data import capabilities and cell validation
    - Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
    - Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements
    - The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`addElementAtCursor`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-cursor/)
* [`addElementAtPoint`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-point/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)