@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
37 lines (36 loc) • 1.04 kB
TypeScript
export type UseTableKeyboardNavigationOptions = {
/**
* Whether keyboard navigation is enabled.
* Default: `true`
*/
enabled?: boolean;
};
/**
* A plugin hook that adds arrow-key navigation to a Table component.
*
* Wrap the Table in the returned ref to enable keyboard navigation
* between cells. If a cell contains a focusable element (input, button,
* anchor, etc.), that element receives focus. Otherwise, the cell itself
* is focused.
*
* @example
* ```tsx
* import { useTableKeyboardNavigation } from '@dnb/eufemia/components/table'
*
* function MyTable() {
* const navRef = useTableKeyboardNavigation()
*
* return (
* <Table ref={navRef}>
* <tbody>
* <tr>
* <Table.Td><input /></Table.Td>
* <Table.Td><input /></Table.Td>
* </tr>
* </tbody>
* </Table>
* )
* }
* ```
*/
export declare function useTableKeyboardNavigation({ enabled, }?: UseTableKeyboardNavigationOptions): import("react").RefObject<HTMLElement>;