As a Sales Engineer, I am constantly interacting with various customers. During demonstrations, I have the opportunity to hear directly from users about their pain points or even features they would like to see more of within MadCap Flare. A big request that I hear is the ability to sort tables in a Flare generated HTML5 output. This piqued my interest, so I began looking into ways that users can implement sortable tables into their Flare projects. In my research, I found a free jQuery plug-in called DataTables that is fairly quick and rather easy to setup within Flare with only a few steps. What are DataTables? This plugin allows you to sort tables, search within your tables using dynamic filtering capabilities, as well as, paginate your tables in your HTML5 outputs.
Note: The DataTables plug-in requires tables to have a header row (thead) for them to be sortable.
Preliminary Step:
First, download the DataTables library from the following link: DataTables Download.
I recommend keeping the default options. On Step 3, select the Download tab, then click “Download files.”

Implementing the jQuery Plug-in
Once the ZIP archive has finished downloading, right-click on the zip and extract the files to a folder on your machine. Follow these steps to get the jQuery plugin into your Flare project:
- Copy the DataTables folder that you extracted.
- Navigate to the Content Explorer of your Flare project
- Right-click the Resources folder and select Open Folder in Windows
- Paste the DataTables folder into the Resources folder
Once this is done, we will need to add a reference to the CSS file, as well as the JS file in the master page of the project. The following steps should be done for any master page that is applied to a topic that contains a table.
- Go to Resources > MasterPages. Open the master page and switch to the Text Editor.
- Inside the <head> tags, add a <link /> tag with the relative path to the jquery.dataTables.css file as the value of the src attribute, for example:
<link rel="stylesheet" type="text/css" href="../DataTables/DataTables-1.10.20/css/jquery.dataTables.css" />
- Just before the closing </body> tag, add the following <script> tag:
<script type="text/javascript" charset="utf8" src="../DataTables/DataTables-1.10.20/js/jquery.dataTables.js"></script>
- Following the closing </script> tag, we will need to call a function. Add the following <script> tag:
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>

Note: This example of the function is calling an ID of “myTable”. This allows you to select which tables you would like to sort in your output, and it allows you to use your custom Table Styles. However, there are a few different options. For instance, you could edit this script so that every table using a specific Table Style will be sortable, or so that every table in your output will be sortable.
ID Method
If you would like to use the ID method, please follow these steps:
- Open your stylesheet
- Right-click the table element and select Add Selector
- In the Add Selector dialog, select Advanced Options
- Enter myTable into the Identifier (ID) field

- Open a topic with a table you would like to sort
- Right-click the table element from the structure bar and click Select > Table
- Select table#myTable from the Style drop-down on the Home Ribbon, or from the Styles Window

Table Style Method
If you would like to have all tables that are using a specific Table Style to be sortable, you can replace ‘#myTable’ from the script with the name of your Table Stylesheet class. For example, if your Table Stylesheet is named Basic.css, the script would be as follows:
<script>
$(document).ready( function () {
$('.TableStyle-Basic').DataTable();
} );
</script>
Every Table Method
If you would like every table in your output to be sortable, use the following script:
<script>
$(document).ready( function () {
$('table').DataTable();
} );
</script>
And there you have it! Build your HTML5 output, and you’ll notice that you now have sortable tables!

For reference, a copy of a sample project is available here.
If you have used table sorting in creative ways to expand
the functionality of your MadCap Flare output, let us know in the comments
below!
Hi,
It states at the end of the article that:
“For reference, a copy of a sample project is available here.”
However, there’s no link. Could you provide one please?
Thanks.
Sorry about that! It should now be available, you can also go here: https://assets.madcapsoftware.com/blog/TableSort.flprjzip.
Hi Keaton – I love the sortable tables! I am having an issue with it though. When I sort, the horizontal line between the first and second row disappears. Do you have any idea why this would happen or what I can do to prevent this from happening?
Any help is appreciated, I’m looking to start using these in my project, but I need that line to stay put!
Hi Michelle,
I’m glad to hear you like it! It would be best if I could get a copy of your project to take a look at this behavior on my end. Feel free to email me directly.
klullo@madcapsoftware.com
Hi Keaton,
the missing horizontal line appears in the TableSort sample project!
Simply sort the first column and the row containing “Ut placerat orci nulla pellentesque. Arcu dui vivamus arcu felis bibendum ut.” is not followed by a white line…
Notice that thi is the last line in the unsorted table!
Hi Firmin,
We have gone in and updated the example project within the blog! Let us know if you have any other questions.
Thanks, for your copy of a sample project.
– It is very clear
– I see that it works, a nice feature, top!
– Now in my own topic (copy/paste)…
I’m excited to see this topic, as I tried and failed to make DataTables work before. However, even when I download and build the sample project, it still doesn’t work (I tried several browsers). The Chrome developer console shows errors like this:
JQMIGRATE: Migrate is installed, version 1.4.1
Topic.htm:304 Uncaught TypeError: $(…).DataTable is not a function
at HTMLDocument. (Topic.htm:304)
at i (jquery.min.js:4)
at Object.fireWith [as resolveWith] (jquery.min.js:4)
at Function.ready (jquery.min.js:4)
at HTMLDocument.K (jquery.min.js:4)
require.min.js:13 Uncaught Error: Mismatched anonymous define() module: function ( $ ) {
return factory( $, window, document );
}
http://requirejs.org/docs/errors.html#mismatch
at C (require.min.js:13)
at L (require.min.js:41)
at Object.g [as require] (require.min.js:104)
at requirejs (require.min.js:126)
at MadCap.WebHelp.HelpSystem.LoadBreakpoints (MadCapAll.js:57)
at MadCap.WebHelp.HelpSystem. (MadCapAll.js:57)
at HTMLScriptElement.l (MadCapAll.js:29)
at HTMLScriptElement.dispatch (jquery.min.js:8)
at HTMLScriptElement.r.handle (jquery.min.js:8)
Any idea what’s going on and why I can’t get it to work? I’ll be eternally grateful if you can identify the problem so I can get it working!
Hi Eric,
I’d be happy to take a look at this behavior on a screen share. Feel free to email me directly.
klullo@madcapsoftware.com
Hi,
I can’t get the arrows to show up in the header. How is this done? My table sorts great, however.
Thank you
Hi Joshua,
Is an Images folder located in the Resources > DataTables> DataTables-1.10.20 folder? These arrows are images that are inserted using CSS in jquery.dataTables.css. I would be happy to take a look at your project on my end to get to the bottom of this. Feel free to email me directly. klullo@madcapsoftware.com
Dear Keaton. I am hopeless at tables and have spent countless hours trying to figure out how to deal with our lists which are long for our scientific software, even though the content is straight forward.
I thought I had finally figured something out that would be an improvement using this great blog post but I am stuck again. I managed to apply the instructions (or so I thought) but instead of sorting a table I get a “Show entries” drop down (which got me excited) plus a Search field, but neither work nor does the sorting. I tried a variety of things and compared the sample project to mine, but I think over time I have messed it all up in the project by trying so many other fixes to tables. I particularly also want to add a scrolling option, which I have on other tables. Help!
Hi Amanda,
I’m sorry to hear that you are experiencing issues! I’ll create a ticket and send you an email so that we can get this figured out.
Hi,
Great topic.
I’ve followed your instructions, but can’t seem to get the table sorting to work at all. I’d really like to use the table sorting as we have a number of long tables which would benefit from this. Could I please get some help?
Thanks, Vilma
Hi Vilma,
I’d be happy to take a look at your project to figure out what could be going wrong. Feel free to email me directly. klullo@madcapsoftware.com