Don't Miss Out! Our new update has been released.
Autofill Datatables
Keytable Integration
If you are looking to emulate the UI of spreadsheet programs such as Excel with DataTables, the combination of KeyTable and AutoFill will take you a long way there!
Multi-Level Collections
Keyboard navigation is essential for fast navigation of a table operations and also for good accessibility. Buttons provides the ability to give each button a key binding - i.e. a key combination that when pressed will activate the button's action. The key binding can be given as a single character if you wish to listen for an unmodified key press, or as an object if you wish it to only be activated when a modifier key such as shift, alt, etc, is pressed.
Header and Footer Fixed
When displaying tables with a particularly large amount of data shown on each page, it can be useful to have the table's header and footer fixed to the top or bottom of the scrolling window FixedHeader provides the ability to fix in place both. These are controlled by the options fixedHeader.header and fixedHeader.footer. Either can be optionally enabled, or as is the case in this example, both enabled.
HTML5 Export Buttons
| Name | Position | Assign To | Age | Start date | Salary | Action |
|---|---|---|---|---|---|---|
| Tiger Nixon | System Architect |  | 61 | 2011/04/25 | $320,800 | |
| Garrett Winters | Accountant |  | 63 | 2011/07/25 | $170,750 | |
| Ashton Cox | Junior Technical Author | | 66 | 2009/01/12 | $86,000 | |
| Cedric Kelly | Senior Javascript Developer |  | 22 | 2012/03/29 | $433,060 | |
| Airi Satou | Accountant |  | 33 | 2008/11/28 | $162,700 | |
| Brielle Williamson | Integration Specialist |  | 61 | 2012/12/02 | $372,000 | |
| Herrod Chandler | Sales Assistant |  | 59 | 2012/08/06 | $137,500 | |
| Rhona Davidson | Integration Specialist |  | 55 | 2010/10/14 | $327,900 | |
| Colleen Hurst | Javascript Developer |  | 39 | 2009/09/15 | $205,500 | |
| Sonya Frost | Software Engineer |  | 23 | 2008/12/13 | $103,600 | |
| Jena Gaines | Office Manager |  | 30 | 2008/12/19 | $90,560 | |
| Quinn Flynn | Support Lead |  | 22 | 2013/03/03 | $342,000 | |
| Charde Marshall | Regional Director |  | 36 | 2008/10/16 | $470,600 | |
| Haley Kennedy | Senior Marketing Designer | | 43 | 2012/12/18 | $313,500 | |
| Tatyana Fitzpatrick | Regional Director | | 19 | 2010/03/17 | $385,750 | |
| Michael Silva | Marketing Designer | | 66 | 2012/11/27 | $198,500 | |
| Paul Byrd | Chief Financial Officer (CFO) | | 64 | 2010/06/09 | $725,000 | |
| Gloria Little | Systems Administrator | | 59 | 2009/04/10 | $237,500 | |
| Bradley Greer | Software Engineer | | 41 | 2012/10/13 | $132,000 | |
| Dai Rios | Personnel Lead | | 35 | 2012/09/26 | $217,500 | |
| Jenette Caldwell | Development Lead | | 30 | 2011/09/03 | $345,000 | |
| Yuri Berry | Chief Marketing Officer (CMO) | | 40 | 2009/06/25 | $675,000 | |
| Caesar Vance | Pre-Sales Support | | 21 | 2011/12/12 | $106,450 | |
| Doris Wilder | Sales Assistant | | 23 | 2010/09/20 | $85,600 | |
| Angelica Ramos | Chief Executive Officer (CEO) | | 47 | 2009/10/09 | $1,200,000 | |
| Gavin Joyce | Developer | | 42 | 2010/12/22 | $92,575 | |
| Jennifer Chang | Regional Director | | 28 | 2010/11/14 | $357,650 | |
| Brenden Wagner | Software Engineer | | 28 | 2011/06/07 | $206,850 | |
| Fiona Green | Chief Operating Officer (COO) | | 48 | 2010/03/11 | $850,000 | |
| Shou Itou | Regional Marketing | | 20 | 2011/08/14 | $163,000 | |
| Michelle House | Integration Specialist | | 37 | 2011/06/02 | $95,400 | |
| Suki Burks | Developer | | 53 | 2009/10/22 | $114,500 | |
| Prescott Bartlett | Technical Author | | 27 | 2011/05/07 | $145,000 | |
| Gavin Cortez | Team Leader | | 22 | 2008/10/26 | $235,500 | |
| Martena Mccray | Post-Sales support | | 46 | 2011/03/09 | $324,050 | |
| Unity Butler | Marketing Designer | | 47 | 2009/12/09 | $85,675 | |
| Howard Hatfield | Office Manager | | 51 | 2008/12/16 | $164,500 | |
| Hope Fuentes | Secretary | | 41 | 2010/02/12 | $109,850 | |
| Vivian Harrell | Financial Controller | | 62 | 2009/02/14 | $452,500 | |
| Timothy Mooney | Office Manager | | 37 | 2008/12/11 | $136,200 | |
| Jackson Bradshaw | Director | | 65 | 2008/09/26 | $645,750 | |
| Olivia Liang | Support Engineer | | 64 | 2011/02/03 | $234,500 | |
| Bruno Nash | Software Engineer | | 38 | 2011/05/03 | $163,500 | |
| Sakura Yamamoto | Support Engineer | | 37 | 2009/08/19 | $139,575 | |
| Thor Walton | Developer | | 61 | 2013/08/11 | $98,540 | |
| Finn Camacho | Support Engineer | | 47 | 2009/07/07 | $87,500 | |
| Serge Baldwin | Data Coordinator | | 64 | 2012/04/09 | $138,575 | |
| Zenaida Frank | Software Engineer | | 63 | 2010/01/04 | $125,250 | |
| Zorita Serrano | Software Engineer | | 56 | 2012/06/01 | $115,000 | |
| Jennifer Acosta | Junior Javascript Developer | | 43 | 2013/02/01 | $75,650 | |
| Cara Stevens | Sales Assistant | | 46 | 2011/12/06 | $145,600 | |
| Hermione Butler | Regional Director | | 47 | 2011/03/21 | $356,250 | |
| Lael Greer | Systems Administrator | | 21 | 2009/02/27 | $103,500 | |
| Jonas Alexander | Developer | | 30 | 2010/07/14 | $86,500 | |
| Shad Decker | Regional Director | | 51 | 2008/11/13 | $183,000 | |
| Michael Bruce | Javascript Developer | | 29 | 2011/06/27 | $183,000 | |
| Donna Snider | Customer Support | | 27 | 2011/01/25 | $112,000 | |
| Name | Position | Assign To | Age | Start date | Salary | Action |
Immediately Show Hidden Details
Responsive has the ability to display the details that it has hidden in a variety of different ways. Its default is to allow the end user to toggle the the display by clicking on a row and showing the information in a DataTables child row. At times it can be useful not to require end user interaction to display the hidden data in a responsive manner, which can be done with the childRowImd-flexte display type.
Full Row Selection
The rowReorder.selector option provides the ability to define which element in a table row will provide the row reordering handle to the end user. By default only the first cell in the row will trigger the reordering action. This example shows the entire row being able to start the reorder. Simply click and drag anywhere on the row. Additionally, the column that defines the row order is hidden by default, making the table a simple orderable list.