Basic initialization
KeyTable allows you to use keyboard navigation on a DataTables enhanced table, like an Excel spreadsheet. The focused cell is shown through the CSS class (focus - configurable using keys.className) which in the case below is simply a blue outline. Use your keyboard's arrow keys and click the cells in the table to navigate.
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
Scrolling table
The following example demonstrates combination of Keytable extension and scrolling table feature. KeyTable supports DataTables' scrolling options (scrollX and scrollY) without required any additional configuration. As the navigation keys are used to alter the focus of the KeyTable, the DataTables scrolling position is altered to show the focused cell.
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
Focus cell custom styling
When KeyTable adds focus to a table's cell it adds a class (defined by keys.className - default focus). This class can be used to provide styling information to highlight the focused cell to the end user. The provided stylesheets use CSS outline to show focus, but any CSS property can be used. This example uses a thin outline with a green border color and a light green background to highlight the focused cell.
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
Key table events
Enabling KeyTable on a DataTable is trivial with the keys option, however, to have it perform a useful function you'll want to know when the end user performs interaction options with the table's focus. For this KeyTable has a number of events it can trigger: key - a key has been pressed while a cell has focus; key-focus - a cell has gained focus; key-blur - a cell has lost focus.
First Name Last Name Job Title DOB Status Actions
Marth Enright Traffic Court Referee 22 Jun 1972 Active
Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
Coy Wollard Customer Service Operator 12 Oct 1982 Active
Maxwell Maben Regional Representative 25 Feb 1988 Suspended
Cicely Sigler Senior Research Officer 15 Mar 1960 Pending

						
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless