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!

Employee NameJob DesignationCompany NameInvoice No.Credit/DebitDatePriorityBudgetAction
Airi Satou Accountant Google Inc. #TY33 2.5% 2020/11/28 Urgent $162.700,00
Angelica Ramos Chief Executive Officer (CEO) Tata Co. #VC47 2.8% 2021/10/09 Low $1.200.000,00
Ashton Cox Junior Technical Author Mphasis Ltd #GH66 1.4% 2021/01/12 Medium $86.000,00
Bradley Greer Software Engineer Tata Co. #JH41 9.8% 2024/10/13 High $132.000,00
Brenden Wagner Software Engineer Google Co. #CV28 2.8% 2024/06/07 Medium $206.850,00
Brielle Williamson Integration Specialist Microsoft #TS61 2.5% 2024/12/02 Low $372.000,00
Bruno Nash Software Engineer Tata Co. #UY38 1.4% 2024/05/03 Medium $163.500,00
Caesar Vance Pre-Sales Support New York #CV21 2.8% 2024/12/12 Low $106.450,00
Cara Stevens Sales Assistant New York #TY46 2.5% 2024/12/06 High $145.600,00
Cedric Kelly Senior Javascript Developer Edinburgh #UH22 1.4% 2024/03/29 Low $433.060,00
Employee NameJob DesignationCompany NameInvoice No.Credit/DebitDatePriorityBudgetAction
Showing 1 to 10 of 57 entries

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.

IdTheme NameTask ListStatusDue dateReviewAction
#1000 Rica-Ecommerce Template Update Resolved 2024/04/25 $320,800
#1001 Viho-React Report Pending 2024/07/25 $170,750
#1002 Tivo-admin Update Pending 2024/01/12 $86,000
#1003 Koho-Laravel Changes Open 2024/03/29 $433,060
#1004 Wingo-React Js Changes Resolved 2024/11/28 $162,700
#1005 yuri-Angular Update Resolved 2024/12/02 $372,000
#1006 Zeta Template Update Pending 2024/08/06 $137,500
#1007 Xolo-admin Html Testing Pending 2021/10/14 $327,900
#1012 Tivo-admin Report Open 2024/10/13 $132,000
#1013 Viho-React Update Resolved 2021/09/26 $217,500
IdTheme NameTask ListStatusDue dateReviewAction
Showing 1 to 10 of 57 entries

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

NamePositionAssign ToAgeStart dateSalaryAction
Airi Satou Accountant 33 2020/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) 47 2021/10/09 $1,200,000
Ashton Cox Junior Technical Author 66 2021/01/12 $86,000
Bradley Greer Software Engineer 41 2024/10/13 $132,000
Brenden Wagner Software Engineer 28 2024/06/07 $206,850
Brielle Williamson Integration Specialist 61 2024/12/02 $372,000
Bruno Nash Software Engineer 38 2024/05/03 $163,500
Caesar Vance Pre-Sales Support 21 2024/12/12 $106,450
Cara Stevens Sales Assistant 46 2024/12/06 $145,600
Cedric Kelly Senior Javascript Developer 22 2024/03/29 $433,060
NamePositionAssign ToAgeStart dateSalaryAction
Showing 1 to 10 of 57 entries

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.

PositionEmailOfficeAgeProgressStart dateSalaryAction
Accountant bdthomas@optonline.net Tokyo 33
2020/11/28 $162,700
Chief Executive Officer (CEO) terribleBrent88@zonnet.nl London 47
2021/10/09 $1,200,000
Junior Technical Author tubesteak@mac.com San Francisco 66
2021/01/12 $86,000
Software Engineer eric.olsen@gmail.com London 41
2024/10/13 $132,000
Software Engineer ashamedDanny@att.net San Francisco 28
2024/06/07 $206,850
Integration Specialist mccurley@aol.com New York 61
2024/12/02 $372,000
Software Engineer shinySergio@tin.it London 38
2024/05/03 $163,500
Pre-Sales Support luciferashish@gmail.com New York 21
2024/12/12 $106,450
Senior Javascript Developer kostas@yahoo.ca Edinburgh 22
2024/03/29 $433,060
Regional Director adityabose7@gmail.com San Francisco 36
2020/10/16 $470,600
PositionEmailOfficeAgeProgressStart dateSalaryAction
Showing 1 to 10 of 48 entries
NamePositionOfficeAgeStart dateSalaryAction