---
title: "Enhanced Tables plugin"
description: "Add enhanced functionality to tables."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advtable/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/advtable/index.md"
version: "7"
last_updated: "2026-06-15T05:48:07Z"
tokens: 3068
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/advtable/).
# Enhanced Tables plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).

> **Tip:** As of TinyMCE 7.0, the Advanced Tables plugin is now named Enhanced Tables. When using the Enhanced Tables plugin in your editor, continue to use advtable in the `plugins` list.
The `advtable` plugin is a premium plugin that extends the core [`table` plugin](../table/) by adding the following advanced functionality:

- Sort options for rows and columns.
- Row numbering column for tables.

## Try our Enhanced Tables Demo

**Example**

```js
tinymce.init({
  selector: 'textarea#advtable',
  height: '800px',
  plugins: 'table code advtable lists fullscreen',
  toolbar: 'undo redo | blocks | bold italic | ' +
    'alignleft aligncenter alignright alignjustify | indent outdent | ' +
    'table tableinsertdialog tablecellprops tableprops advtablerownumbering | fullscreen',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## Enabling the Enhanced Tables plugin

To enable the Enhanced Tables plugin, add `advtable` to the list of plugins. For example:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table advtable',
});
```

## Sorting table rows and columns

Tables can be sorted by row or column values using:

- The **Sort** options in the **Table** menu.
- The **Sort** options in the table contextual menu.
- The **Sort** options in the **Table** toolbar menu button.

**For example:**

| Sort rows based on the selected column | Advanced Sort Dialog |
| --- | --- |
| ![Enhanced Tables enhanced contextual menu for sorting rows based on the selected Column (Sort > Sort table by column ascending/descending).](../_images/advtable-context-menu-sort.png) | ![Enhanced Tables sort dialog (Sort > Advanced Sort…).](../_images/advtable-dialog-sort.png) |

The plugin is capable of sorting:

- Numerical data
- Text data

> **Note:** Currently, the sort function will treat cells with Alphanumeric data as Text data. This includes currency symbols which are text characters.

## Adding row numbering to a table

A row numbering column containing a series of values can be added to a table to help identify rows in a table. To allow row numbering on tables, the `advtablerownumbering` toolbar button and menu item can be used.

A numeric and alpha value series are available by default. The available value series can be configured using the [`advtable_value_series` option](#advtable_value_series).

![Table with numeric row numbering column and row numbering menu open (Numeric item checked)](../_images/advtable-row-numbering.png)
A commonly desired customisation of the row-numbering column is that a table’s header and footer rows not be included in the numbering.

This can be done using the [`advtable_value_series` option](#advtable_value_series) to specify a custom generator.

## Options

The following configuration options affect the behavior of the Enhanced Tables plugin.

### `advtable_value_series`

The `advtable_value_series` option configures one or more series of values for populating cells in a table. This option can be used to create row identifiers.

**Type:** `Object`

**Default value:**

```js
{
  // Natural number series
  numeric: {
    title: 'Numeric',
    update: true,
    resizable: false,
    generator: `GeneratorFunction` // For details, see: 'Creating a value series generator'
  },
  // English alphabetic series
  alpha: {
    title: 'Alpha',
    update: true,
    resizable: false,
    generator: `GeneratorFunction` // For details, see: 'Creating a value series generator'
  },
}
```
Both default series are configured to update on table changes and not resize when using the resize bars.

Each top-level properties of the `advtable_value_series` object are used as the name of the value series and its configuration. In the following example, there are two value series named `"numbers"` and `"letters"`:

```js
{
  numbers: {
    title: 'Numbered',
    generator: `GeneratorFunction`
  },
  letters: {
    title: 'Lettered',
    generator: `GeneratorFunction`
  },
}
```

#### Series configuration

| Name | Value | Requirement | Description |
| --- | --- | --- | --- |
| title | `string` | Required | The text shown in the UI for the series. |
| update | `boolean` | Optional | default: `false` - When `true`, the series values will be updated when changes are made to the table. |
| resizable | `boolean` | Optional | default: `true` - When `true`, table cells containing the series values can be resized using a mouse or touch device. |
| generator | `(info: GeneratorInfo, rowIndex: number, columnIndex: number) => GeneratorResult` | Required | For details on creating a value series generator, see: [Creating a value series generator](#creating-a-value-series-generator). |

##### Creating a value series generator

The `generator` is a callback function used to specify how a table cell of a value series will update. The callback is passed information relating to: the generator and table cell, the row index, and column index of the table cell. For details, see: [GeneratorInfo](#generatorinfo). The callback should return an object containing the value and optionally, any classes and attributes to be applied to the table cell. For details, see: [GeneratorResult](#generatorresult).

If the "state" of the series needs to be kept between generator iterations, additional properties can be added to the generator result. The state can be accessed through the `prev` property of the `info` parameter. For details, see: [GeneratorInfo](#generatorinfo).

###### GeneratorInfo

An object with the following properties is passed to the generator callback function as the `info` parameter.

| Name | Value | Description |
| --- | --- | --- |
| sectionType | `'thead'`, `'tbody'` or `'tfoot'` | The section of the table cell. |
| cellType | `'td'` or `'th'` | The type of the table cell. |
| getRowType | `() => 'header' \| 'body' \| 'footer'` | A function that returns the type of row the table cell is part of. A 'header' row is either a row that is part of a `thead` section or contains all `th` cells. |
| classes | `string[]` | The classes present on the table cell. |
| direction | `'row'` or `'column'` | The direction of the generator. |
| prev | `GeneratorResult` | The generator result from the previous iteration. |

###### GeneratorResult

The generator callback function should return an object with the following properties.

| Name | Value | Requirement | Description |
| --- | --- | --- | --- |
| classes | `string[]` | Optional | The classes to be applied to the table cell. |
| attributes | `Object` | Optional | The attributes to be applied to the table cell. The `attributes` should be provided as an object where each key is an attribute and each value is of type `string`, `boolean`, `number`, or `null`. A value of `null` for an attribute will remove the attribute from the table cell. |
| value | `string`, `number` or `undefined` | Optional | The value of the table cell. If the value is `undefined`, the editor will use the previous value of the table cell. |

#### Example: using `advtable_value_series`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'table advtable',
  toolbar: 'advtablerownumbering',
  advtable_value_series: {
    numeric: {
      title: 'Numeric',
      update: true,
      resizable: false,
      generator: (info, rowIndex, columnIndex) => ({
        value: rowIndex + 1
      })
    },
  }
});
```

#### Example: using a custom generator to exclude header and footer rows from row numbering

```js
tinymce.init({
  selector: "textarea",  // change this value according to your html
  plugins: 'table advtable',
  toolbar: "table advtablerownumbering",
  advtable_value_series: {
    numbers: {
      update: true,
      resizable: false,
      generator: function(info, rowIndex, colIndex) {
        var prevCount = info.prev ? info.prev.count : 0;
        if (info.sectionType === 'tbody' && info.cellType === 'td') {
          var newCount = prevCount + 1;
          return {
            value: newCount,
            count: newCount
          };
        } else {
          return {
            count: prevCount
          };
        }
      }
    }
  }
});
```
With this custom generator, when a table with a header and footer row already set has row numbers added via the `advtablerownumbering` toolbar item, row numbers are not added to the header and footer rows.

![Row-numbered table with un-numbered header and footer rows](../_images/advtable-row-numbered-table-with-un-numbered-header-and-footer-rows.png)

> **Note:** This simple custom generator is a demonstration. It has limitations. Perhaps most significant, it requires the header and footer rows be set *before* row numbers are added to a table. If row numbers are added and then a header row, or a footer row, or both, are set, this generator will *not* remove existing row numbers from the now-set header and footer rows.

## Toolbar buttons

The Enhanced Tables plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `advtablerownumbering` | Adds or removes (toggles) a row numbering column on the selected table. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Enhanced Tables plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `advtablesort` | Table | Enhanced Tables sort menu item with related controls. |
| `advtablerownumbering` | *Not Applicable* | Adds or removes (toggles) a row numbering column on the selected table. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Enhanced Tables plugin provides the following TinyMCE commands.

| Command | Description |
| --- | --- |
| mceAdvancedTableSort | Opens the Enhanced Table Sort Dialog for the current selection or cursor location. |
| mceSortTableAdvanced | Performs an Enhanced Table Sort. For details, see [Using `mceSortTableAdvanced`](#using-mcesorttableadvanced). |
| mceSortTableByColumnAsc | Sorts the current table ascending by column based on the current cursor position or selection. |
| mceSortTableByColumnDesc | Sorts the current table descending by column based on the current cursor position or selection. |
| mceSortTableByRowAsc | Sorts the current table ascending by row based on the current cursor position or selection. |
| mceSortTableByRowDesc | Sorts the current table descending by row based on the current cursor position or selection. |
| mceTableToggleSeries | Toggles a series column on the selected table. For details, see [Using `mceTableToggleSeries`](#using-mcetabletoggleseries). |

Examples
```js
tinymce.activeEditor.execCommand('mceAdvancedTableSort');
tinymce.activeEditor.execCommand('mceSortTableAdvanced', false, { sortby: 'row', roworcol: '2', sort: 'table', order: 'ascending' });
tinymce.activeEditor.execCommand('mceSortTableByColumnAsc');
tinymce.activeEditor.execCommand('mceSortTableByColumnDesc');
tinymce.activeEditor.execCommand('mceSortTableByRowAsc');
tinymce.activeEditor.execCommand('mceSortTableByRowDesc');
tinymce.activeEditor.execCommand('mceTableToggleSeries', false, { name: 'numeric' });
```

### Using `mceSortTableAdvanced`

`mceSortTableAdvanced` accepts an object with the following key-value pairs:

| Name | Value | Requirement | Description |
| --- | --- | --- | --- |
| sortby | `'row'` or `'column'` | Required |  |
| roworcol | `number` | Required | A zero-indexed integer in a string representing the row from the top of the table or column from the left of the table. |
| sort | `'row'`, `'column'`, `'selection'`, or `'table'` | Required |  |
| order | `'ascending'` or `'descending'` | Required |  |

### Using `mceTableToggleSeries`

`mceTableToggleSeries` accepts an object with the following key-value pairs:

| Name | Value | Requirement | Description |
| --- | --- | --- | --- |
| name | `string` | Required | Specifies the series to toggle. Series and their associated names are configured using the [`advtable_value_series` option](#advtable_value_series). |

If the table already has a series column that uses the series specified in `name`, the series column will be removed from the table. Otherwise, a new series column will be created, replacing any other series column that may already be in the table.