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 sort options for 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.
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'
});
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. |
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. See below for details. |
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. |
mceSortTableAdvanced
accepts an object with the following value pairs:
sortby
-'row'
or'column'
roworcol
- 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'
order
-'ascending'
or'descending'
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')
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.