Important changes to Tiny Cloud pricing > Find out more
Cart Checkout
Return to Website
Tiny logo Docs
Get Free API Key

Advanced Tables plugin

Add sorting 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 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({
  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:

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', 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')

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.