@dnb/eufemia/components/table/useTableKeyboardNavigation.d.ts

DNB Eufemia Design System UI Library

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>;