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!
Employee NameJob DesignationCompany NameInvoice No.Credit/DebitDatePriorityBudgetAction
Airi Satou Accountant Google Inc. #TY33 2.5% 2008/11/28 Urgent $162.700,00
Angelica Ramos Chief Executive Officer (CEO) Tata Co. #VC47 2.8% 2009/10/09 Low $1.200.000,00
Ashton Cox Junior Technical Author Mphasis Ltd #GH66 1.4% 2009/01/12 Medium $86.000,00
Bradley Greer Software Engineer Tata Co. #JH41 9.8% 2012/10/13 High $132.000,00
Brenden Wagner Software Engineer Google Co. #CV28 2.8% 2011/06/07 Medium $206.850,00
Brielle Williamson Integration Specialist Microsoft #TS61 2.5% 2012/12/02 Low $372.000,00
Bruno Nash Software Engineer Tata Co. #UY38 1.4% 2011/05/03 Medium $163.500,00
Caesar Vance Pre-Sales Support New York #CV21 2.8% 2011/12/12 Low $106.450,00
Cara Stevens Sales Assistant New York #TY46 2.5% 2011/12/06 High $145.600,00
Cedric Kelly Senior Javascript Developer Edinburgh #UH22 1.4% 2012/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 2022/04/25 $320,800
#1001 Viho-React Report Pending 2022/07/25 $170,750
#1002 Tivo-admin Update Pending 2022/01/12 $86,000
#1003 Koho-Laravel Changes Open 2022/03/29 $433,060
#1004 Wingo-React Js Changes Resolved 2022/11/28 $162,700
#1005 Cuba-Angular Update Resolved 2022/12/02 $372,000
#1006 Zeta Template Update Pending 2022/08/06 $137,500
#1007 Xolo-admin Html Testing Pending 2021/10/14 $327,900
#1012 Tivo-admin Report Open 2023/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 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author 66 2009/01/12 $86,000
Bradley Greer Software Engineer 41 2012/10/13 $132,000
Brenden Wagner Software Engineer 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
Bruno Nash Software Engineer 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support 21 2011/12/12 $106,450
Cara Stevens Sales Assistant 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer 22 2012/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
2008/11/28 $162,700
Chief Executive Officer (CEO) terribleBrent88@zonnet.nl London 47
2009/10/09 $1,200,000
Junior Technical Author tubesteak@mac.com San Francisco 66
2009/01/12 $86,000
Software Engineer eric.olsen@gmail.com London 41
2012/10/13 $132,000
Software Engineer ashamedDanny@att.net San Francisco 28
2011/06/07 $206,850
Integration Specialist mccurley@aol.com New York 61
2012/12/02 $372,000
Software Engineer shinySergio@tin.it London 38
2011/05/03 $163,500
Pre-Sales Support luciferashish@gmail.com New York 21
2011/12/12 $106,450
Senior Javascript Developer kostas@yahoo.ca Edinburgh 22
2012/03/29 $433,060
Regional Director adityabose7@gmail.com San Francisco 36
2008/10/16 $470,600
PositionEmailOfficeAgeProgressStart dateSalaryAction
Showing 1 to 10 of 48 entries
Preview Settings

Try It Real Time

Layout Type
    • LTR
    • RTL
    • Box
Sidebar Type
Sidebar Icon
Unlimited Color
Light layout
Dark Layout
Mix Layout
NamePositionOfficeAgeStart dateSalaryAction