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.

The advtable plugin is a premium plugin that extends the core table plugin 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:

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

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.

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:

{
  // 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”:

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

Series configuration

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. 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.

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

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

GeneratorResult

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

Example: Using advtable_value_series

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
        };
      }
    },
  }
});

Toolbar buttons

The Advanced Tables plugin provides the following toolbar buttons:

These toolbar buttons can be added to the editor using:

• The toolbar configuration option.
• The quickbars_insert_toolbar configuration option.
• Custom Context toolbars.

Menu items

The Advanced Tables plugin provides the following menu items:

These menu items can be added to the editor using:

• The menu configuration option.
• The contextmenu configuration option.
• Custom Menu toolbar buttons.

Commands

The Advanced Tables plugin provides the following JavaScript commands.

Examples

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:

Using mceTableToggleSeries

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

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.

Events

For events applicable to the Advanced Tables plugin, see: Table plugin - Events.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.