---
title: "Advanced Tables plugin"
description: "Add advanced functionality to tables."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advtable/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/advtable/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 1684
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/advtable/).
# Advanced Tables plugin

> **Note:** This feature is only available for TinyMCE 5.1 and later.

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing).
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.

NOTE: This feature is only available for TinyMCE 5.9 and later.

## Enabling the Advanced Tables plugin

To enable the Advanced 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',
  menubar: 'table'
});
```

## 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 |
| --- | --- |
| ![Advanced 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) | ![Advanced 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

> **Note:** This feature is only available for TinyMCE 5.9 and later.
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)

## Configuration options

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

## `advtable_value_series`

> **Note:** This feature is only available for TinyMCE 5.9 and later.
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](#creatingavalueseriesgenerator). |

#### 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',
  menubar: 'table',
  toolbar: 'advtablerownumbering',
  advtable_value_series: {
    numeric: {
      title: 'Numeric',
      update: true,
      resizable: false,
      generator: function (info, rowIndex, columnIndex) {
        return {
          value: rowIndex + 1
        };
      }
    },
  }
});
```