Blog
On the DataTables blog you will find news, announcements and tutorials about DataTables and its suite of extensions.
Latest posts
Landing page demo breakdown
The DataTables landing page has an example table that demonstrates a range of the capabilities that the software has. The initialisation code for this example is quite interesting and I thought it would be instructive to do a line-by-line breakdown explaining the options used and the decisions behind the use of each option.
In this post, I'll work through a number of iterations, building up the full example and explaining each step as part of an implementation process. While this post will cover a lot of the basics of DataTables, touching on installation and initialisation, it is not intended to be a Javascript from first principles post. I'll assume you know how to use querySelector, addEventListener, what objects are, etc.
Goals
As with all landing page demos, the goal here is to quickly show some of what DataTables is capable of, look attractive, be functional and also approachable. As such there is a balance to be struck between the wide range of options that DataTables and its extensions provide and not overwhelming those new to the software.
Based on that I've elected to use a table which:
- Uses the core DataTables features
- Paging and page length
- Search
- Ordering
- Table summary
- Localise data display
- Is "responsive" - i.e. automatically adjusts the number of columns in the table based on the screen width so it works well on mobile and desktop screens)
- Provides some advanced search options.
Introducing ColumnControl
Please welcome the latest member of the DataTables family: ColumnControl! This new extension adds column-specific controls to the header and footer cells of a table and has a comprehensive set of built-in content types that provide control over columns - e.g. search, ordering and visibility. This new extension has been my primary focus for the last three months and it gives me real pleasure to introduce it to you.
Example table
Let's take a look at a table with ColumnControl configured:
| Name | Position | Office | Salary |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | $320,800 |
| Garrett Winters | Accountant | Tokyo | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| Airi Satou | Accountant | Tokyo | $162,700 |
| Brielle Williamson | Integration Specialist | New York | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | $103,600 |
| Jena Gaines | Office Manager | London | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | $342,000 |
| Charde Marshall | Regional Director | San Francisco | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | $385,750 |
| Michael Silva | Marketing Designer | London | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
| Gloria Little | Systems Administrator | New York | $237,500 |
| Bradley Greer | Software Engineer | London | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | $217,500 |
| Jenette Caldwell | Development Lead | New York | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | $106,450 |
| Doris Wilder | Sales Assistant | Sydney | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | $92,575 |
| Jennifer Chang | Regional Director | Singapore | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | $163,000 |
| Michelle House | Integration Specialist | Sydney | $95,400 |
| Suki Burks | Developer | London | $114,500 |
| Prescott Bartlett | Technical Author | London | $145,000 |
| Gavin Cortez | Team Leader | San Francisco | $235,500 |
| Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
| Unity Butler | Marketing Designer | San Francisco | $85,675 |
| Howard Hatfield | Office Manager | San Francisco | $164,500 |
| Hope Fuentes | Secretary | San Francisco | $109,850 |
| Vivian Harrell | Financial Controller | San Francisco | $452,500 |
| Timothy Mooney | Office Manager | London | $136,200 |
| Jackson Bradshaw | Director | New York | $645,750 |
| Olivia Liang | Support Engineer | Singapore | $234,500 |
| Bruno Nash | Software Engineer | London | $163,500 |
| Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
| Thor Walton | Developer | New York | $98,540 |
| Finn Camacho | Support Engineer | San Francisco | $87,500 |
| Serge Baldwin | Data Coordinator | Singapore | $138,575 |
| Zenaida Frank | Software Engineer | New York | $125,250 |
| Zorita Serrano | Software Engineer | San Francisco | $115,000 |
| Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
| Cara Stevens | Sales Assistant | New York | $145,600 |
| Hermione Butler | Regional Director | London | $356,250 |
| Lael Greer | Systems Administrator | London | $103,500 |
| Jonas Alexander | Developer | San Francisco | $86,500 |
| Shad Decker | Regional Director | Edinburgh | $183,000 |
| Michael Bruce | Javascript Developer | Singapore | $183,000 |
| Donna Snider | Customer Support | New York | $112,000 |
The features displayed over a plain DataTable are an order control button and dropdown in the first row of the header and search in the second row.
If you are keen to get started with ColumnControl, it is available immediately and can be configured with the download builder for installation via the DataTables CDN, download, NPM or Nuget.
DataTables 2.3
I'm delighted to announce the release of DataTables 2.3.0. This release adds a number of new options and updates, plus a number of patches for issues discovered in previous versions. There is a particular focus on how the column headers of the table are drawn and controlled, as this sets out the groundwork for a new extension to the DataTables family which will be released soon, ColumnControl (keep an eye on this blog for more details when it is released)!
If you are keen to get going with DataTables 2.3 it is available now:
Full release notes are available here.
Example table
Let's take a look at a table rendered by DataTables 2.3:
| Name | Position | Office | Salary |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | $320,800 |
| Garrett Winters | Accountant | Tokyo | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| Airi Satou | Accountant | Tokyo | $162,700 |
| Brielle Williamson | Integration Specialist | New York | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | $103,600 |
| Jena Gaines | Office Manager | London | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | $342,000 |
| Charde Marshall | Regional Director | San Francisco | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | $385,750 |
| Michael Silva | Marketing Designer | London | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
| Gloria Little | Systems Administrator | New York | $237,500 |
| Bradley Greer | Software Engineer | London | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | $217,500 |
| Jenette Caldwell | Development Lead | New York | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | $106,450 |
| Doris Wilder | Sales Assistant | Sydney | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | $92,575 |
| Jennifer Chang | Regional Director | Singapore | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | $163,000 |
| Michelle House | Integration Specialist | Sydney | $95,400 |
| Suki Burks | Developer | London | $114,500 |
| Prescott Bartlett | Technical Author | London | $145,000 |
| Gavin Cortez | Team Leader | San Francisco | $235,500 |
| Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
| Unity Butler | Marketing Designer | San Francisco | $85,675 |
| Howard Hatfield | Office Manager | San Francisco | $164,500 |
| Hope Fuentes | Secretary | San Francisco | $109,850 |
| Vivian Harrell | Financial Controller | San Francisco | $452,500 |
| Timothy Mooney | Office Manager | London | $136,200 |
| Jackson Bradshaw | Director | New York | $645,750 |
| Olivia Liang | Support Engineer | Singapore | $234,500 |
| Bruno Nash | Software Engineer | London | $163,500 |
| Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
| Thor Walton | Developer | New York | $98,540 |
| Finn Camacho | Support Engineer | San Francisco | $87,500 |
| Serge Baldwin | Data Coordinator | Singapore | $138,575 |
| Zenaida Frank | Software Engineer | New York | $125,250 |
| Zorita Serrano | Software Engineer | San Francisco | $115,000 |
| Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
| Cara Stevens | Sales Assistant | New York | $145,600 |
| Hermione Butler | Regional Director | London | $356,250 |
| Lael Greer | Systems Administrator | London | $103,500 |
| Jonas Alexander | Developer | San Francisco | $86,500 |
| Shad Decker | Regional Director | Edinburgh | $183,000 |
| Michael Bruce | Javascript Developer | Singapore | $183,000 |
| Donna Snider | Customer Support | New York | $112,000 |
Historic blog posts
2025
- Download builder updates 12th Feb 2025
- Editor 2.4 and DataTables 2.2 8th Jan 2025
2024
- Address auto-complete with Editor 20th Sep 2024
- DataTables React component 21st Aug 2024
- Ordering sequence plugin 26th Jul 2024
- DataTables 2.1 19th Jul 2024
- Input Paging plugin 28th May 2024
- DataTables 2! 15th Mar 2024
2023
- Experiment: Import Maps 7th Mar 2023
- Loaders for plug-ins 28th Feb 2023
- Editor 2.1 10th Feb 2023
2022
- Vue3 component 22nd Jun 2022
- RequireJS anyone? 20th Jun 2022
- DataTables 1.12 13th May 2022
- Social Media for DataTables and CloudTables 14th Feb 2022
2021
- Introducing StateRestore 26th Nov 2021
- Fuzzy Search Plug-in 17th Sep 2021
- Cascading lists in Editor (part 2!) 8th Jul 2021
- Bootstrap 5 and Bulma styling 10th Jun 2021
- Type Detection Library 17th May 2021
- Internationalisation Contributions 9th Apr 2021
- Editor 2 9th Mar 2021
- Bootstrapped Podcast 29th Jan 2021
2020
- Highcharts Integration 1st Oct 2020
- Introducing SearchBuilder 15th Sep 2020
- Editor QR Scanner Integration 10th Jul 2020
- Introducing CloudTables 1st Jun 2020
- Using Editor's libraries for server-side processing 12th May 2020
- SearchPanes Release 13th Jan 2020
- RowGroup Tricks and Tips 5th Jan 2020
2019
- October releases - 2019 2nd Oct 2019
- DataTables download statistics - 2019 29th Jul 2019
- Scroll To Top 21st Jun 2019
- Refreshing data before editing 15th Apr 2019
- Installing Editor in WordPress 15th Feb 2019
- Parent / child editing in child rows 11th Jan 2019
2018
- Debugger update 12th Jul 2018
- SearchFade 8th May 2018
2017
- Vertical scroll fitting 31st Dec 2017
- Experiment: SearchPane 30th Nov 2017
- Queuing changes in Editor 24th Oct 2017
- Cascading lists in Editor 1st Sep 2017
- Editor and NPM 31st Aug 2017
- Deep linking into DataTables 24th Jul 2017
- Always visible editing panel 30th Jun 2017
- Iterators in DataTables 31st May 2017
- RowGroup - new extension 7th Apr 2017
- Ajax loaded row details 31st Mar 2017
- Locale based sorting 28th Feb 2017
- Search highlighting with mark.js 19th Jan 2017
2016
- Sorting with absolute positioned data 23rd Dec 2016
- Editor 1.6 16th Dec 2016
- Dynamic enum sorting 16th Jun 2016
- Spring updates - 2016 24th May 2016
- Parent / child editing with Editor 25th Mar 2016
- Ellipsis renderer 26th Feb 2016
- Generator update 21st Jan 2016
2015
- Download statistics 31st Dec 2015
- NPM and Bower 9th Nov 2015
- Editor's server-side events 2nd Oct 2015
- Multi-row bulk editing 11th Sep 2015
- Update extravaganza 13th Aug 2015
- Git repo structure update 2nd Jun 2015
- DataTables 1.10.7 30th Apr 2015
- Vertical page fitting 10th Apr 2015
- Editor 1.4 / DataTables 1.10.5 12th Feb 2015
2014
- Ultimate date / time sorting plug-in 18th Dec 2014
- Editor 1.4 beta - .NET 4th Dec 2014
- Table captions 7th Nov 2014
- Search result highlighting 22nd Oct 2014
- DataTables 1.10.3 9th Oct 2014
- Sliding child rows 2nd Oct 2014
- Alphabet input search - Part III 22nd Sep 2014
- Permanent inline checkboxes 9th Sep 2014
- Alphabet input search - Part II 2nd Sep 2014
- Alphabet input search - Part I 26th Aug 2014
- Business: UK VAT exchange rates 8th Aug 2014
- Duplicate buttons in Editor 25th Jul 2014
- Introducing Responsive for DataTables 16th Jul 2014
- DataTables 1.10.1, Editor 1.3.2 and more 15th Jul 2014
- Nominet Internet Awards shortlist 17th Jun 2014
- Font Awesome integration 6th Jun 2014
- Support and forums updates 26th May 2014
- DataTables 1.10.0 released 1st May 2014
- DataTables 1.10.0 release candidate 25th Apr 2014
- DataTables 1.10 beta 4th Feb 2014
- HTML 5 Clipboard and File APIs 31st Jan 2014
- JS Bin update 24th Jan 2014
2012
- Orthogonal data 9th Jul 2012
- Inline editing 31st May 2012
- Introducing Editor 4th May 2012
- DataTables debugger 26th Feb 2012
- Twitter Bootstrap 2 1st Feb 2012
- Microsoft CDN 28th Jan 2012
- localStorage for state saving 16th Jan 2012
2011
- Twitter Bootstrap 8th Dec 2011
- Site updates - JS Bin and more 1st Nov 2011
- Getting started with DataTables 27th Aug 2011
- DataTables support 29th Jun 2011
- Drill-down rows 19th Jun 2011
- Introducing Scroller 11th Jun 2011
- DataTables 1.8 4th Jun 2011
- Creating beautiful and functional tables with DataTables 10th May 2011
- Extended data source options with DataTables 1st May 2011