Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to generate a flexible and sortable HTML table

Joe Robinson

January 19th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

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

  1. 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>
    
  2. 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).

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

  1. Confirm that your tinymce.init script has the Plugins, Toolbar, and Menubar references needed to include Advanced Tables.
  2. 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>
  3. Open the HTML file in a browser (or check the fiddle) and make sure that you can add a table with the menubar button.

The steps involved in adding an HTML table with TinyMCE

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.

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

  1. Place your cursor inside the second row, first column, and highlight all the cells underneath the header row.

  2. Right click, and select the Sort > Advanced sort.

  3. In the Advanced Sort window, set the Sort by to Column, and the Column selection to Column D (the Total Points Scored column).

  4. Set the Sort option to Selection, and the Order to Descending, and confirm.

  5. Note the transformation of the table:The sort by selection function is a deeper way to sort the HTML 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:

  1. Add the setup option to your TinyMCE init call back:
    setup: function (editor) {
    			}
  2. 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',
    		  }
    		});
    	}
    });
  3. 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' });
    		  }
    		});
    	}
  4. 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.

Adding the Lettering and Numbering for the rows in the HTML table.

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.

HTMLPlugins
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCE

    How to add an Emoji Picker to your Angular App

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing