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 Name | Job Designation | Company Name | Invoice No. | Credit/Debit | Date | Priority | Budget | Action |
---|---|---|---|---|---|---|---|---|
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 Name | Job Designation | Company Name | Invoice No. | Credit/Debit | Date | Priority | Budget | Action |
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.
Id | Theme Name | Task List | Status | Due date | Review | Action |
---|---|---|---|---|---|---|
#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 | |
Id | Theme Name | Task List | Status | Due date | Review | Action |
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.
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.
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.
Position | Office | Age | Progress | Start date | Salary | Action | |
---|---|---|---|---|---|---|---|
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 | |
Position | Office | Age | Progress | Start date | Salary | Action |
Name | Position | Office | Age | Start date | Salary | Action |
---|