Important changes to Tiny Cloud pricing > Find out more

Advanced Tables plugin

Add sorting functionality to tables.

Contribute to this page

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

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

Enabling the Advanced Tables plugin

To enable the Advanced Tables plugin, add advtable to the list of plugins. For example:

tinymce.init({
  plugins: 'table advtable',
  menubar: 'table'
});

Commands

The Table 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', { sortby: 'row' ; roworcol: '2' ; sort: 'table' ; order: 'ascending' ; })
tinymce.activeEditor.execCommand('mceSortTableByColumnAsc')
tinymce.activeEditor.execCommand('mceSortTableByColumnDesc')
tinymce.activeEditor.execCommand('mceSortTableByRowAsc')
tinymce.activeEditor.execCommand('mceSortTableByRowDesc')

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.