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
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:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
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:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
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.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.