> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Table extension

export const SourceCodeLink = ({extension, path}) => {
  const githubPath = path || `packages/super-editor/src/editors/v1/extensions/${extension.toLowerCase()}`;
  const githubUrl = `https://github.com/superdoc-dev/superdoc/tree/main/${githubPath}`;
  return <div>
      <p>
        <a href={githubUrl} target="_blank" rel="noopener noreferrer">
          View on GitHub →
        </a>
      </p>
    </div>;
};

export const SuperDocEditor = ({html = '<p>Start editing...</p>', height = '400px', maxHeight = '400px', onReady = null, showExport = true, customButtons = null}) => {
  const [ready, setReady] = useState(false);
  const editorRef = useRef(null);
  const containerIdRef = useRef(`editor-${Math.random().toString(36).substr(2, 9)}`);
  const DEV_DIST_URL = 'http://localhost:9094/dist';
  const UNPKG_DIST_URL = 'https://unpkg.com/superdoc@latest/dist';
  const getBaseUrl = async () => {
    const isDev = typeof window !== 'undefined' && window.location.hostname === 'localhost';
    if (isDev) {
      try {
        const res = await fetch(`${DEV_DIST_URL}/superdoc.min.js`, {
          method: 'HEAD'
        });
        if (res.ok) {
          console.info('[SuperDoc Docs] Using local build from', DEV_DIST_URL);
          return DEV_DIST_URL;
        }
        console.warn('[SuperDoc Docs] Local dev server returned', res.status, '- falling back to unpkg');
      } catch (err) {
        console.warn('[SuperDoc Docs] Local dev server not reachable: falling back to unpkg.', 'Run `pnpm dev:docs` from the repo root to use your local build.', err.message);
      }
    }
    return UNPKG_DIST_URL;
  };
  const ensureStyle = baseUrl => {
    const styleHref = `${baseUrl}/style.css`;
    if (document.querySelector(`link[href="${styleHref}"]`)) return;
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = styleHref;
    document.head.appendChild(link);
  };
  const loadSuperDoc = baseUrl => {
    if (window.SuperDoc) return Promise.resolve();
    const scriptSrc = `${baseUrl}/superdoc.min.js`;
    const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
    if (existingScript) {
      if (window.SuperDoc) return Promise.resolve();
      return new Promise((resolve, reject) => {
        existingScript.addEventListener('load', resolve, {
          once: true
        });
        existingScript.addEventListener('error', reject, {
          once: true
        });
      });
    }
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = scriptSrc;
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  };
  const initEditor = () => {
    setTimeout(() => {
      if (!window.SuperDoc) return;
      if (!document.getElementById(containerIdRef.current)) return;
      if (editorRef.current) return;
      editorRef.current = new window.SuperDoc({
        selector: `#${containerIdRef.current}`,
        html,
        rulers: true,
        contained: true,
        onReady: () => {
          setReady(true);
          if (onReady) onReady(editorRef.current);
        }
      });
    }, 100);
  };
  useEffect(() => {
    let cancelled = false;
    const boot = async () => {
      try {
        const baseUrl = await getBaseUrl();
        ensureStyle(baseUrl);
        await loadSuperDoc(baseUrl);
        if (!cancelled) initEditor();
      } catch (error) {
        console.error('Failed to boot SuperDoc:', error);
      }
    };
    boot();
    return () => {
      cancelled = true;
      editorRef.current?.destroy?.();
      editorRef.current = null;
    };
  }, []);
  const exportDocx = () => {
    if (editorRef.current?.export) {
      editorRef.current.export();
    }
  };
  return <div className="border rounded-lg bg-white overflow-hidden">
      {ready && (showExport || customButtons) && <div className="px-3 py-2 bg-gray-50 border-b">
          {customButtons && <div className="space-y-1 mb-2">
              {customButtons.map((row, rowIndex) => <div key={rowIndex} className="flex gap-1">
                  {row.map((btn, i) => <button key={i} onClick={() => btn.onClick(editorRef.current)} className={btn.className || 'flex-1 px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded hover:bg-gray-200'}>
                      {btn.label}
                    </button>)}
                </div>)}
            </div>}
          {showExport && <div className="text-right">
              <button onClick={exportDocx} className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600">
                Export DOCX
              </button>
            </div>}
        </div>}
      <div id={containerIdRef.current} style={{
    height,
    maxHeight,
    paddingLeft: '5px'
  }} />
      <style jsx>{`
        #${containerIdRef.current} .superdoc__layers {
          max-width: 660px !important;
        }
        #${containerIdRef.current} .super-editor {
          max-width: 100% !important;
          width: 100% !important;
          color: #000;
        }
        #${containerIdRef.current} .editor-element {
          width: 100% !important;
          min-width: unset !important;
          transform: none !important;
        }
        #${containerIdRef.current} .editor-element {
          h1,
          h2,
          h3,
          h4,
          h5,
          strong {
            color: #000;
          }
        }
      `}</style>
    </div>;
};

Create structured data with full Word table compatibility.

Professional tables with merge/split capabilities, preserving all formatting through Word import/export.

<SuperDocEditor
  html={`<table>
<tr>
  <th>Product</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Total</th>
</tr>
<tr>
  <td>Revenue</td>
  <td>$45,000</td>
  <td>$52,000</td>
  <td><strong>$97,000</strong></td>
</tr>
<tr>
  <td>Costs</td>
  <td>$30,000</td>
  <td>$28,000</td>
  <td><strong>$58,000</strong></td>
</tr>
</table>`}
  height="350px"
  customButtons={[
[
    {
    label: 'Insert 3x3',
    onClick: (superdoc) => {
        const editor = superdoc?.activeEditor || superdoc?.editor
        if (!editor?.commands) return

        editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
    }
    },
    {
    label: 'Add Row',
    onClick: (superdoc) => {
        const editor = superdoc?.activeEditor || superdoc?.editor
        if (!editor?.commands) return
        
        editor.commands.addRowAfter()
    }
    },
    {
    label: 'Add Column',
    onClick: (superdoc) => {
        const editor = superdoc?.activeEditor || superdoc?.editor
        if (!editor?.commands) return
        
        editor.commands.addColumnAfter()
    }
    },
    {
    label: 'Merge Cells',
    onClick: (superdoc) => {
        const editor = superdoc?.activeEditor || superdoc?.editor
        if (!editor?.commands) return
        
        editor.commands.mergeCells()
    }
    },
    {
    label: 'Split Cell',
    onClick: (superdoc) => {
        const editor = superdoc?.activeEditor || superdoc?.editor
        if (!editor?.commands) return
        
        editor.commands.splitCell()
    }
    },
    {
    label: 'Color Cell',
    onClick: (superdoc) => {
        const editor = superdoc?.activeEditor || superdoc?.editor
        if (!editor?.commands) return
        
        editor.commands.setCellBackground('#E3F2FD')
    }
    }
]
]}
/>

## OOXML Structure

```xml theme={null}
<w:tbl>
  <w:tblPr>
    <w:tblBorders>
      <w:top w:val="single" w:sz="4"/>
      <w:left w:val="single" w:sz="4"/>
      <w:bottom w:val="single" w:sz="4"/>
      <w:right w:val="single" w:sz="4"/>
      <w:insideH w:val="single" w:sz="4"/>
      <w:insideV w:val="single" w:sz="4"/>
    </w:tblBorders>
  </w:tblPr>
  <w:tr>
    <w:tc>
      <w:tcPr>
        <w:tcW w:w="2880" w:type="dxa"/>
      </w:tcPr>
      <w:p><w:r><w:t>Cell content</w:t></w:r></w:p>
    </w:tc>
  </w:tr>
</w:tbl>
```

## Use case

* **Financial reports** - Quarterly data with totals
* **Comparison matrices** - Feature/pricing tables
* **Schedules** - Time-based planning with merged headers
* **Data organization** - Structured content that needs alignment
* **Complex layouts** - Merged cells for sophisticated designs

## Options

Configure the extension behavior:

<ParamField path="htmlAttributes" type="Object" default="{'aria-label':'Table node'}">
  Default HTML attributes for all tables
</ParamField>

<ParamField path="resizable" type="boolean" default="true">
  Enable column resizing functionality
</ParamField>

<ParamField path="handleWidth" type="number" default="5">
  Width of resize handles in pixels
</ParamField>

<ParamField path="cellMinWidth" type="number" default="10">
  Minimum cell width constraint in pixels
</ParamField>

<ParamField path="lastColumnResizable" type="boolean" default="true">
  Allow resizing of the last column
</ParamField>

<ParamField path="allowTableNodeSelection" type="boolean" default="false">
  Enable selecting the entire table node
</ParamField>

## Attributes

Node attributes that can be set and retrieved:

<ParamField path="tableIndent" type="TableIndent">
  Table indentation configuration
</ParamField>

<ParamField path="borders" type="any" required>
  Border styling for this table
</ParamField>

<ParamField path="borderCollapse" type="string" default="collapse">
  CSS border-collapse property
</ParamField>

<ParamField path="justification" type="string">
  Table alignment ('left', 'center', 'right')
</ParamField>

<ParamField path="tableCellSpacing" type="number">
  Cell spacing in pixels for this table
</ParamField>

## Commands

### `insertTable`

Insert a new table into the document

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.insertTable()
  editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.insertTable()
      editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="config" type="TableConfig" required>
  Table configuration options
</ParamField>

### `deleteTable`

Delete the entire table containing the cursor

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.deleteTable()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.deleteTable()
    },
  });
  ```
</CodeGroup>

### `addColumnBefore`

Add a column before the current column

<Note>
  Preserves cell attributes from current column
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.addColumnBefore()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.addColumnBefore()
    },
  });
  ```
</CodeGroup>

### `addColumnAfter`

Add a column after the current column

<Note>
  Preserves cell attributes from current column
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.addColumnAfter()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.addColumnAfter()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `deleteColumn`

Delete the column containing the cursor

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.deleteColumn()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.deleteColumn()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `addRowBefore`

Add a row before the current row

<Note>
  Preserves cell attributes from current row
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.addRowBefore()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.addRowBefore()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `addRowAfter`

Add a row after the current row

<Note>
  Preserves cell attributes from current row
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.addRowAfter()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.addRowAfter()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `deleteRow`

Delete the row containing the cursor

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.deleteRow()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.deleteRow()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `mergeCells`

Merge selected cells into one

<Note>
  Content from all cells is preserved
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.mergeCells()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.mergeCells()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `splitCell`

Split a merged cell back into individual cells

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.splitCell()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.splitCell()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command - true if split, false if position invalid

### `splitSingleCell`

Split a single unmerged cell into two cells horizontally

<Note>
  Different from splitCell which splits merged cells back to original cells
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.splitSingleCell()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.splitSingleCell()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command - true if split, false if position invalid

### `mergeOrSplit`

Toggle between merge and split cells based on selection

<Note>
  Merges if multiple cells selected, splits if merged cell selected
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.mergeOrSplit()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.mergeOrSplit()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `toggleHeaderColumn`

Toggle the first column as header column

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.toggleHeaderColumn()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.toggleHeaderColumn()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `toggleHeaderRow`

Toggle the first row as header row

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.toggleHeaderRow()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.toggleHeaderRow()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `toggleHeaderCell`

Toggle current cell as header cell

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.toggleHeaderCell()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.toggleHeaderCell()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `setCellAttr`

Set an attribute on selected cells

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.setCellAttr('background', { color: 'ff0000' })
  setCellAttr('verticalAlign', 'middle')
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.setCellAttr('background', { color: 'ff0000' })
      editor.commands.setCellAttr('verticalAlign', 'middle')
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="name" type="string" required>
  Attribute name
</ParamField>

<ParamField path="value" type="any" required>
  Attribute value
</ParamField>

**Returns:** `Function` Command

### `goToNextCell`

Navigate to the next cell (Tab behavior)

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.goToNextCell()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.goToNextCell()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `goToPreviousCell`

Navigate to the previous cell (Shift+Tab behavior)

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.goToPreviousCell()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.goToPreviousCell()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `fixTables`

Fix table structure inconsistencies

<Note>
  Repairs malformed tables and normalizes structure
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.fixTables()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.fixTables()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

### `setCellSelection`

Set cell selection programmatically

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.setCellSelection({ anchorCell: 10, headCell: 15 })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.setCellSelection({ anchorCell: 10, headCell: 15 })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="pos" type="CellSelectionPosition" required>
  Cell selection coordinates
</ParamField>

**Returns:** `Function` Command

### `setCellBackground`

Set background color for selected cells

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.setCellBackground('#ff0000')
  editor.commands.setCellBackground('ff0000')
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.setCellBackground('#ff0000')
      editor.commands.setCellBackground('ff0000')
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="value" type="string" required>
  Color value (hex with or without #)
</ParamField>

### `appendRowsWithContent`

Append rows with content to an existing table.

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.appendRowsWithContent({
    valueRows: [['Cell A', 'Cell B'], ['Cell C', 'Cell D']],
    copyRowStyle: true
  })
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.appendRowsWithContent({
        valueRows: [['Cell A', 'Cell B'], ['Cell C', 'Cell D']],
        copyRowStyle: true
      })
    },
  });
  ```
</CodeGroup>

**Parameters:**

<ParamField path="options" type="Object" required>
  Object with `tablePos`, `tableNode`, `valueRows` (array of row arrays), and optional `copyRowStyle` boolean
</ParamField>

### `deleteCellAndTableBorders`

Remove all borders from table and its cells

<Note>
  Sets all border sizes to 0
</Note>

**Example:**

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.deleteCellAndTableBorders()
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      editor.commands.deleteCellAndTableBorders()
    },
  });
  ```
</CodeGroup>

**Returns:** `Function` Command

## Keyboard shortcuts

| Command                    | Shortcut        | Description                          |
| -------------------------- | --------------- | ------------------------------------ |
| goToNextCell/addRowAfter() | `Tab`           | Navigate to next cell or add row     |
| goToPreviousCell()         | `Shift-Tab`     | Navigate to previous cell            |
| deleteTableWhenSelected()  | `Backspace`     | Delete table when all cells selected |
| deleteTableWhenSelected()  | `Mod-Backspace` | Delete table when all cells selected |
| deleteTableWhenSelected()  | `Delete`        | Delete table when all cells selected |
| deleteTableWhenSelected()  | `Mod-Delete`    | Delete table when all cells selected |

## Types

### `ThemeColor`

Theme color options

### `ShadingPattern`

Shading pattern options

### `ShadingProperties`

Shading properties

<Expandable title="Properties">
  <ResponseField name="color" type="string | any">
    Shading color (hex without # or "auto" for automatic)
  </ResponseField>

  <ResponseField name="fill" type="string | any">
    Shading fill color (hex without # or "auto" for automatic)
  </ResponseField>

  <ResponseField name="themeColor" type="ThemeColor">
    Theme color name
  </ResponseField>

  <ResponseField name="themeFill" type="ThemeColor">
    Theme fill name
  </ResponseField>

  <ResponseField name="themeFillShade" type="string">
    Theme fill shade (0-255 in hex format without #)
  </ResponseField>

  <ResponseField name="themeFillTint" type="string">
    Theme fill tint (0-255 in hex format without #)
  </ResponseField>

  <ResponseField name="themeShade" type="string">
    Theme shade (0-255 in hex format without #)
  </ResponseField>

  <ResponseField name="themeTint" type="string">
    Theme tint (0-255 in hex format without #)
  </ResponseField>

  <ResponseField name="val" type="ShadingPattern">
    Shading pattern
  </ResponseField>
</Expandable>

### `TableMeasurement`

Table width options

<Expandable title="Properties">
  <ResponseField name="value" type="number" required>
    Width value in twips
  </ResponseField>

  <ResponseField name="type" type="any | any | any">
    Table width type (dxa=twips, pct=percentage, auto=automatic)
  </ResponseField>
</Expandable>

### `TableLook`

Table look options

<Expandable title="Properties">
  <ResponseField name="firstColumn" type="boolean">
    Specifies that the first column conditional formatting should be applied
  </ResponseField>

  <ResponseField name="firstRow" type="boolean">
    Specifies that the first row conditional formatting should be applied
  </ResponseField>

  <ResponseField name="lastColumn" type="boolean">
    Specifies that the last column conditional formatting should be applied
  </ResponseField>

  <ResponseField name="lastRow" type="boolean">
    Specifies that the last row conditional formatting should be applied
  </ResponseField>

  <ResponseField name="noHBand" type="boolean">
    Specifies that no horizontal banding conditional formatting should be applied
  </ResponseField>

  <ResponseField name="noVBand" type="boolean">
    Specifies that no vertical banding conditional formatting should be applied
  </ResponseField>
</Expandable>

### `FloatingTableProperties`

Floating table properties

<Expandable title="Properties">
  <ResponseField name="leftFromText" type="number">
    Specifies the minimum distance in twips which shall be maintained between the current floating table and the edge of text in the paragraph which is to the left of this floating table.
  </ResponseField>

  <ResponseField name="rightFromText" type="number">
    Specifies the minimum distance in twips which shall be maintained between the current floating table and the edge of text in the paragraph which is to the right of this floating table.
  </ResponseField>

  <ResponseField name="topFromText" type="number">
    Specifies the minimum distance in twips which shall be maintained between the current floating table and the bottom edge of text in the paragraph which is above this floating table.
  </ResponseField>

  <ResponseField name="bottomFromText" type="number">
    Specifies the minimum distance in twips which shall be maintained between the current floating table and the top edge of text in the paragraph which is below this floating table.
  </ResponseField>

  <ResponseField name="tblpX" type="number">
    Specifies and absolute horizontal position for the floating table. The position is measured from the horizontal anchor point (horzAnchor) in twips.
  </ResponseField>

  <ResponseField name="tblpY" type="number">
    Specifies and absolute vertical position for the floating table. The position is measured from the vertical anchor point (vertAnchor) in twips.
  </ResponseField>

  <ResponseField name="horzAnchor" type="any | any | any">
    Horizontal anchor point for tblpX
  </ResponseField>

  <ResponseField name="vertAnchor" type="any | any | any">
    Vertical anchor point for tblpY
  </ResponseField>

  <ResponseField name="tblpXSpec" type="any | any | any | any | any">
    Specifies a relative horizontal position for the floating table. Supercedes tblpX if both are specified.
  </ResponseField>

  <ResponseField name="tblpYSpec" type="any | any | any | any | any | any">
    Specifies a relative vertical position for the floating table. Supercedes tblpY if both are specified.
  </ResponseField>
</Expandable>

### `TableBorderSpec`

Table border specification

<Expandable title="Properties">
  <ResponseField name="val" type="string">
    Border style (e.g., 'single', 'double', 'dashed', etc.)
  </ResponseField>

  <ResponseField name="color" type="string">
    Border color (hex without #, e.g., 'FF0000' for red)
  </ResponseField>

  <ResponseField name="themeColor" type="ThemeColor">
    Theme color name
  </ResponseField>

  <ResponseField name="themeTint" type="string">
    Theme tint (0-255 in hex format without #)
  </ResponseField>

  <ResponseField name="themeShade" type="string">
    Theme shade (0-255 in hex format without #)
  </ResponseField>

  <ResponseField name="size" type="number">
    Border size in eighths of a point (e.g., 8 = 1pt, 16 = 2pt)
  </ResponseField>

  <ResponseField name="space" type="number">
    Space in points between border and text
  </ResponseField>

  <ResponseField name="shadow" type="boolean">
    Whether the border has a shadow
  </ResponseField>

  <ResponseField name="frame" type="boolean">
    Whether the border is a frame
  </ResponseField>
</Expandable>

### `TableBorders`

Table borders properties

<Expandable title="Properties">
  <ResponseField name="bottom" type="TableBorderSpec">
    Bottom border specification
  </ResponseField>

  <ResponseField name="end" type="TableBorderSpec">
    End (right in LTR, left in RTL) border specification
  </ResponseField>

  <ResponseField name="insideH" type="TableBorderSpec">
    Inside horizontal border specification
  </ResponseField>

  <ResponseField name="insideV" type="TableBorderSpec">
    Inside vertical border specification
  </ResponseField>

  <ResponseField name="left" type="TableBorderSpec">
    Left border specification
  </ResponseField>

  <ResponseField name="right" type="TableBorderSpec">
    Right border specification
  </ResponseField>

  <ResponseField name="start" type="TableBorderSpec">
    Start (left in LTR, right in RTL) border specification
  </ResponseField>

  <ResponseField name="top" type="TableBorderSpec">
    Top border specification
  </ResponseField>
</Expandable>

### `TableBorders`

Table borders object

<Expandable title="Properties">
  <ResponseField name="top" type="TableBorder">
    Top border configuration
  </ResponseField>

  <ResponseField name="right" type="TableBorder">
    Right border configuration
  </ResponseField>

  <ResponseField name="bottom" type="TableBorder">
    Bottom border configuration
  </ResponseField>

  <ResponseField name="left" type="TableBorder">
    Left border configuration
  </ResponseField>

  <ResponseField name="insideH" type="TableBorder">
    Inside horizontal borders
  </ResponseField>

  <ResponseField name="insideV" type="TableBorder">
    Inside vertical borders
  </ResponseField>
</Expandable>

### `TableCellMargins`

Table cell margin properties

<Expandable title="Properties">
  <ResponseField name="top" type="TableMeasurement">
    Top cell margin
  </ResponseField>

  <ResponseField name="left" type="TableMeasurement">
    Left cell margin
  </ResponseField>

  <ResponseField name="bottom" type="TableMeasurement">
    Bottom cell margin
  </ResponseField>

  <ResponseField name="start" type="TableMeasurement">
    Start cell margin (left in LTR, right in RTL)
  </ResponseField>

  <ResponseField name="end" type="TableMeasurement">
    End cell margin (right in LTR, left in RTL)
  </ResponseField>

  <ResponseField name="right" type="TableMeasurement">
    Right cell margin
  </ResponseField>
</Expandable>

### `TableProperties`

Table properties

<Expandable title="Properties">
  <ResponseField name="rightToLeft" type="boolean">
    Specifies that the cells with this table shall be visually represented in a right to left direction
  </ResponseField>

  <ResponseField name="justification" type="any | any | any | any | any">
    The alignment of the set of rows which are part of the current table.
  </ResponseField>

  <ResponseField name="shading" type="ShadingProperties">
    Shading properties for the table
  </ResponseField>

  <ResponseField name="caption" type="string">
    Caption text for the table
  </ResponseField>

  <ResponseField name="description" type="string">
    Description text for the table
  </ResponseField>

  <ResponseField name="tableCellSpacing" type="TableMeasurement">
    Cell spacing
  </ResponseField>

  <ResponseField name="tableIndent" type="TableMeasurement">
    Table indentation
  </ResponseField>

  <ResponseField name="tableLayout" type="any | any">
    Table layout algorithm
  </ResponseField>

  <ResponseField name="tableLook" type="TableLook">
    Various boolean flags that affect the rendering of the table
  </ResponseField>

  <ResponseField name="overlap" type="any | any">
    Specifies whether the current table should allow other floating tables to overlap its extents when the tables are displayed in a document
  </ResponseField>

  <ResponseField name="tableStyleId" type="string">
    Reference to table style ID
  </ResponseField>

  <ResponseField name="tableStyleColBandSize" type="number">
    Number of columns for which the table style is applied
  </ResponseField>

  <ResponseField name="tableStyleRowBandSize" type="number">
    Number of rows for which the table style is applied
  </ResponseField>

  <ResponseField name="tableWidth" type="TableMeasurement">
    Table width
  </ResponseField>

  <ResponseField name="floatingTableProperties" type="FloatingTableProperties">
    Floating table properties
  </ResponseField>

  <ResponseField name="borders" type="TableBorders">
    Table border configuration
  </ResponseField>
</Expandable>

### `ColWidth`

Column width definition

<Expandable title="Properties">
  <ResponseField name="col" type="number" required>
    Column width in twips
  </ResponseField>
</Expandable>

### `TableGrid`

Table grid definition

<Expandable title="Properties">
  <ResponseField name="colWidths" type="Array<ColWidth>">
    Array of column widths in twips
  </ResponseField>
</Expandable>

### `TableConfig`

Table configuration options

<Expandable title="Properties">
  <ResponseField name="rows" type="number">
    Number of rows to create
  </ResponseField>

  <ResponseField name="cols" type="number">
    Number of columns to create
  </ResponseField>

  <ResponseField name="withHeaderRow" type="boolean">
    Create first row as header row
  </ResponseField>
</Expandable>

### `TableIndent`

Table indentation configuration

<Expandable title="Properties">
  <ResponseField name="width" type="number" required>
    Indent width in pixels
  </ResponseField>

  <ResponseField name="type" type="string">
    Indent type
  </ResponseField>
</Expandable>

### `CellSelectionPosition`

Cell selection position

<Expandable title="Properties">
  <ResponseField name="anchorCell" type="number" required>
    Starting cell position
  </ResponseField>

  <ResponseField name="headCell" type="number" required>
    Ending cell position
  </ResponseField>
</Expandable>

### `CurrentCellInfo`

Current cell information

<Expandable title="Properties">
  <ResponseField name="rect" type="Object" required>
    Selected rectangle information
  </ResponseField>

  <ResponseField name="cell" type="any" required>
    The cell node
  </ResponseField>

  <ResponseField name="attrs" type="Object" required>
    Cell attributes
  </ResponseField>
</Expandable>

### `CellBorder`

Cell border configuration

<Expandable title="Properties">
  <ResponseField name="size" type="number">
    Border width in pixels
  </ResponseField>

  <ResponseField name="color" type="string">
    Border color
  </ResponseField>

  <ResponseField name="style" type="string">
    Border style
  </ResponseField>
</Expandable>

### `CellBorders`

Cell borders object

<Expandable title="Properties">
  <ResponseField name="top" type="CellBorder">
    Top border
  </ResponseField>

  <ResponseField name="right" type="CellBorder">
    Right border
  </ResponseField>

  <ResponseField name="bottom" type="CellBorder">
    Bottom border
  </ResponseField>

  <ResponseField name="left" type="CellBorder">
    Left border
  </ResponseField>
</Expandable>

### `TableBorder`

Table border configuration

<Expandable title="Properties">
  <ResponseField name="size" type="number">
    Border width in pixels
  </ResponseField>

  <ResponseField name="color" type="string">
    Border color (hex or CSS color)
  </ResponseField>

  <ResponseField name="style" type="string">
    Border style (solid, dashed, dotted)
  </ResponseField>
</Expandable>

### `BorderOptions`

Border creation options

<Expandable title="Properties">
  <ResponseField name="size" type="number">
    Border width in pixels
  </ResponseField>

  <ResponseField name="color" type="string">
    Border color (hex)
  </ResponseField>
</Expandable>

## Source code

<SourceCodeLink path="packages/super-editor/src/editors/v1/extensions/table/table.js" />