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.
<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 }'
});
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.
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.
For information on:
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.
