TinyMCE
MoxieManager
Drive
Tables are an important tool that can be used to make complex information easier to understand. And considering how much information rains down on readers online, anything that reduces complexity… well that’s definitely a high value strategy.
So what are we attempting to make less complex? While a static html table is good, a dynamic html table represents something far more useful.
That’s where the ability to generate html tables that are sortable, and can transform for your customers, show their power.. Designing a table that can dynamically transform for a customer doesn’t have to be difficult to configure.
The advanced Tables plugin extends the functions provided in the tables plugin. It’s possible to quickly set up a textarea HTML tag, and then install the TinyMCE rich text editor with the advanced tables plugin.
Getting the advanced table plugin
- Set up a pair of script tags in an index.html file inside the <head> tags.
<script src="<a href="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key">https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key</a>"></script> - Replace your_API_key with the API key available from your TinyMCE account dashboard. Remember, replace the text your_API_key with the key provided when you signed up for Tiny Cloud or purchased one of our Premium Plugins.(you can sign up for a free API key if you don’t have one already).
- Set up another pair of script tags, and place the tinymce.init script inside it.
<script> tinymce.init({ selector: "textarea", plugins: "advtable", toolbar: "table" }); </script>
A HTML table generator with TinyMCE
Start by using the HTML table sort function. This capability allows you to organize the content from ascending to descending sorting on the values in a specific column (labeled A, B, C, D and so on, from right to left) or from a specific, highlighted selection of the table.
In the recent TinyMCE 5.9 release, the advanced table plugin gained a new feature – the ability to add row numbering. With a button press from the TinyMCE toolbar or from the menu, you can add a column that labels each row with a number starting from 1, or even with the letters of the alphabet starting from A.
Configuring a dynamic html table
To set up and generate a sortable html table, first start a new instance of TInyMCE. You can follow these configuration steps with this TinyMCE fiddle (advanced tables setup and running).
The Advanced Tables plugin is a premium plugin. You can sign up for a free API key and generate html tables as part of the 14 day premium trial.
- Confirm that your tinymce.init script has the Plugins, Toolbar, and Menubar references needed to include Advanced Tables.
- Include the insertNumber and insertAlpha toolbar options into the toolbar. These options will be important later on.
<script src="<a href="https://cdn.tiny.cloud/1add-your-api-key-here/tinymce/5/tinymce.min.js">https://cdn.tiny.cloud/1add-your-api-key-here/tinymce/5/tinymce.min.js</a>" referrerpolicy="origin"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", plugins: [ "table advtable" ], toolbar: "undo redo insertNumber insertAlpha table ", menubar: “table”, height: '400px', width: '999px', </script> - Open the HTML file in a browser (or check the fiddle) and make sure that you can add a table with the menubar button.
Testing a sortable HTML table with TinyMCE
With a table configured, you can now add some data, and try out the sort capability. For this procedure, the goal is to test out the sort function by rearranging the rows so that the highest total points scored is first.
- Copy the following numbered information into a new table (4 rows, 4 columns) using your TinyMCE project, or with the fiddle:
|
Name |
Game 1 |
Game 2 |
Total Points Scored |
|
Fitzgerald |
96 |
230 |
326 |
|
Hemmingway |
99 |
500 |
599 |
|
Joyce |
82 |
275 |
357 |
Note that the table has a row of headings. The HTML sort capability for the TinyMCE advanced table plugin works best when the heading information is placed in a column, and not as a heading row. It’s recommended that you highlight the selection you want to sort first, and then sort by selection in the Advanced sort options.
-
Place your cursor inside the second row, first column, and highlight all the cells underneath the header row.
-
Right click, and select the Sort > Advanced sort.
-
In the Advanced Sort window, set the Sort by to Column, and the Column selection to Column D (the Total Points Scored column).
-
Set the Sort option to Selection, and the Order to Descending, and confirm.
-
Note the transformation of the table:
Adding row numbering to your HTML table
Introducing the row numbering capability involves making some adjustments to the TinyMCE init callback – adding in the following:
- A setup option
- A button added with the ui registry option
- A function that enables the TinyMCE mcetoggle series command when the button is clicked.
This will enable row numbering, or row labeling with letters. Here’s how it’s done:
- Add the setup option to your TinyMCE init call back:
setup: function (editor) { } - Name the two buttons with the text option ‘Row Lettering’ and ‘Row Numbering’ respectively:
setup: function (editor) { editor.ui.registry.addButton('insertAlpha', { text: 'Row Lettering', } }); editor.ui.registry.addButton('insertNumber', { text: 'Row Numbering', } }); } }); - Add in an onAction function, and include the ‘mceTableToggleSeries’ command. Ensure the Lettering button name is set to alpha, and the Numbering button name is set to numeric:
setup: function (editor) { editor.ui.registry.addButton('insertAlpha', { text: 'Row Lettering', onAction: function (_) { editor.execCommand('mceTableToggleSeries', false, { name: 'alpha' }); } }); editor.ui.registry.addButton('insertNumber', { text: 'Row Numbering', onAction: function (_) { editor.execCommand('mceTableToggleSeries', false, { name: 'numeric' }); } }); } - Save and reload the TinyMCE project. You should now be able to add row lettering and numbering by clicking the new buttons.
As you add new rows to the table, the letters and numbers will increment for each row added.
What’s next for generating html tables?
This procedure covers the steps to set up and use the sort tables function, for dynamic and sortable html tables. It also covers how to configure a button for applying the row lettering and row numbering features.
The buttons were introduced using editorUI commands and the TinyMCE advanced table plugin toggle commands. There are several other commands documented that you can try out to shape the ideal, dynamic html table for your project and customers.
Sign up for a free API key to give the advanced table plugin commands a try now for your html tables.
