Note: This feature is only available for TinyMCE 5.1 and later.
Advanced Tables adds advanced functionality to tables in TinyMCE, including:
- sorting rows and columns.
- inserting a row numbering column to identify rows. > Note: This feature is only available for TinyMCE 5.9 and later.
Try our Advanced Tables Demo
<textarea id="advtable">
<p>Try sorting by a Student's Assessment Results:</p>
<ol>
<li>Select a student's <em>Assessment 1</em> result.</li>
<li>Right-click and select <strong>Sort</strong> > <strong>Advanced Sort…</strong></li>
<li>In the <strong>Advanced Sort</strong> dialog, set:
<ul>
<li><strong>Sort by</strong>: Row</li>
<li><strong>Row</strong>: <em>leave unchanged</em></li>
<li><strong>Sort</strong>: Table</li>
<li><strong>Order</strong>: Ascending</li>
</ul>
</li>
<li>Click <strong>Sort</strong>.</li>
</ol>
<p>Try sorting by <em>Final Mark</em>:</p>
<ol>
<li>Selecting the <em>Final Mark</em> column.</li>
<li>Right-click and select <strong>Sort</strong> > <strong>Sort table by column descending</strong>.</li>
</ol>
<p>Try adding a numeric row numbering column:</p>
<ol>
<li>Select any cell in the table</li>
<li>Click the <strong>Row numbering</strong> button in the toolbar</li>
<li>Select <strong>Numeric</strong></li>
</ol>
<table style="border-collapse: collapse; width: 100%; height: 352px;" border="1">
<thead>
<tr style="height: 24px;">
<th style="width: 14.2857%; border-color: #000000; border-style: groove; text-align: center; height: 24px; background-color: #c2e0f4;">Student ID</th>
<th style="width: 14.2857%; border-color: #000000; border-style: groove; text-align: center; height: 24px; background-color: #c2e0f4;">Last Name</th>
<th style="width: 14.2857%; border-color: #000000; border-style: groove; text-align: center; height: 24px; background-color: #c2e0f4;">First Name</th>
<th style="width: 14.2857%; border-color: #000000; border-style: groove; text-align: center; background-color: #c2e0f4;">Assessment 1 (30%)</th>
<th style="width: 14.2857%; border-color: #000000; border-style: groove; text-align: center; height: 24px; background-color: #c2e0f4;">Assessment 2 (20%)</th>
<th style="width: 14.2857%; border-color: #000000; border-style: groove; text-align: center; height: 24px; background-color: #c2e0f4;">Assessment 3 (50%)</th>
<th style="width: 14.2857%; border-color: #000000; border-style: groove; text-align: center; height: 24px; background-color: #c2e0f4;">Final Grade</th>
</tr>
</thead>
<tbody>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">41297</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Hisakawa</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Ekin</th>
<td style="width: 14.2857%; text-align: center;">11</td>
<td style="width: 14.2857%; text-align: center;">2</td>
<td style="width: 14.2857%; text-align: center;">41</td>
<td style="width: 14.2857%; text-align: center;">54</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">71215</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Newman</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Logan</th>
<td style="width: 14.2857%; text-align: center;">24</td>
<td style="width: 14.2857%; text-align: center;">4</td>
<td style="width: 14.2857%; text-align: center;">40</td>
<td style="width: 14.2857%; text-align: center;">68</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">53249</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Wilkins</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Kagiso</th>
<td style="width: 14.2857%; text-align: center;">23</td>
<td style="width: 14.2857%; text-align: center;">12</td>
<td style="width: 14.2857%; text-align: center;">46</td>
<td style="width: 14.2857%; text-align: center;">81</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">13965</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Romà</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Chibueze</th>
<td style="width: 14.2857%; text-align: center;">5</td>
<td style="width: 14.2857%; text-align: center;">20</td>
<td style="width: 14.2857%; text-align: center;">40</td>
<td style="width: 14.2857%; text-align: center;">65</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">24559</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Jacobs</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Celestine</th>
<td style="width: 14.2857%; text-align: center;">2</td>
<td style="width: 14.2857%; text-align: center;">11</td>
<td style="width: 14.2857%; text-align: center;">26</td>
<td style="width: 14.2857%; text-align: center;">39</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">78321</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Seabrooke</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Agam</th>
<td style="width: 14.2857%; text-align: center;">5</td>
<td style="width: 14.2857%; text-align: center;">18</td>
<td style="width: 14.2857%; text-align: center;">17</td>
<td style="width: 14.2857%; text-align: center;">40</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">19271</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">McKay</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Oluwayemisi</th>
<td style="width: 14.2857%; text-align: center;">16</td>
<td style="width: 14.2857%; text-align: center;">8</td>
<td style="width: 14.2857%; text-align: center;">2</td>
<td style="width: 14.2857%; text-align: center;">26</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">63992</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Takala</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Oyibo</th>
<td style="width: 14.2857%; text-align: center;">6</td>
<td style="width: 14.2857%; text-align: center;">20</td>
<td style="width: 14.2857%; text-align: center;">22</td>
<td style="width: 14.2857%; text-align: center;">48</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">57415</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Abbasi</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Dallas</th>
<td style="width: 14.2857%; text-align: center;">28</td>
<td style="width: 14.2857%; text-align: center;">14</td>
<td style="width: 14.2857%; text-align: center;">7</td>
<td style="width: 14.2857%; text-align: center;">49</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">17804</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Fonda</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Apoorva</th>
<td style="width: 14.2857%; text-align: center;">30</td>
<td style="width: 14.2857%; text-align: center;">9</td>
<td style="width: 14.2857%; text-align: center;">18</td>
<td style="width: 14.2857%; text-align: center;">57</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">11380</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Steffensen</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Oghenekaro</th>
<td style="width: 14.2857%; text-align: center;">12</td>
<td style="width: 14.2857%; text-align: center;">2</td>
<td style="width: 14.2857%; text-align: center;">31</td>
<td style="width: 14.2857%; text-align: center;">45</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">92756</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Palomo</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Emerson</th>
<td style="width: 14.2857%; text-align: center;">16</td>
<td style="width: 14.2857%; text-align: center;">11</td>
<td style="width: 14.2857%; text-align: center;">28</td>
<td style="width: 14.2857%; text-align: center;">55</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">66195</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Falk</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Nalani</th>
<td style="width: 14.2857%; text-align: center;">13</td>
<td style="width: 14.2857%; text-align: center;">1</td>
<td style="width: 14.2857%; text-align: center;">49</td>
<td style="width: 14.2857%; text-align: center;">63</td>
</tr>
<tr style="height: 22px;">
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">88853</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Butler</th>
<th style="width: 14.2857%; text-align: center; background-color: #ecf0f1;">Lian</th>
<td style="width: 14.2857%; text-align: center;">1</td>
<td style="width: 14.2857%; text-align: center;">20</td>
<td style="width: 14.2857%; text-align: center;">49</td>
<td style="width: 14.2857%; text-align: center;">70</td>
</tr>
</tbody>
</table>
</textarea>
tinymce.init({
selector: 'textarea#advtable',
height: '800px',
plugins: 'table code advtable lists fullscreen',
toolbar: 'undo redo | formatselect | bold italic | ' +
'alignleft aligncenter alignright alignjustify | indent outdent | ' +
'table tableinsertdialog tablecellprops tableprops advtablerownumbering | fullscreen',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
Getting started with TinyMCE Advanced Tables
Creating an account
Try the Advanced Tables plugin and the Tiny Cloud with a free Tiny Account. New accounts receive a 14-day trial of the Tiny premium plugins, skins, and icon packs; with no credit card information or commitment required.
Get TinyMCE Advanced Tables
The Advanced Tables plugin is included in the following Tiny Cloud plans:
A 14-day free trial is also available for the Tiny Cloud Essential Plan and the Tiny Cloud Professional Plan.
Further information
For information on:
- Tiny Cloud plans, see: Tiny Pricing Plans.
- Configuring the Advanced Tables plugin, see: The Advanced Tables plugin documentation.
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.