Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Advanced Tables plugin

Add advanced functionality to tables.

Contribute to this page

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
Advanced Tables enhanced contextual menu for sorting rows based on the selected Column (Sort > Sort table by column ascending/descending). Advanced Tables sort dialog (Sort > Advanced Sort…).

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.

Table with numeric row numbering column and row numbering menu open (Numeric item checked)

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

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

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.

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

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:

Toolbar button identifier Description
advtablerownumbering Adds or removes (toggles) a row numbering column on the selected table. > Note: This feature is only available for TinyMCE 5.9 and later.

These toolbar buttons can be added to the editor using:

Menu items

The Advanced Tables plugin provides the following menu items:

Menu item identifier Default Menu Location Description
advtablesort Table Advanced tables sort menu item with related controls.
advtablerownumbering Not Applicable Adds or removes (toggles) a row numbering column on the selected table. > Note: This feature is only available for TinyMCE 5.9 and later.

These menu items can be added to the editor using:

Commands

The Advanced Tables plugin provides the following JavaScript commands.

Command Description
mceAdvancedTableSort Opens the Advanced Table Sort Dialog for the current selection or cursor location.
mceSortTableAdvanced Performs an Advanced Table Sort. For details, see 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. > Note: This feature is only available for TinyMCE 5.9 and later.

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:

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.

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.