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

DNB Eufemia Design System UI Library

export type UseTableHighlightOptions = {
    /**
     * Whether column highlighting is enabled.
     * Default: `true`
     */
    enabled?: boolean;
};
/**
 * A hook that highlights entire columns when their `Th` has `highlight`,
 * and adds borders between vertically adjacent highlighted cells.
 *
 * @example
 * ```tsx
 * import { useTableHighlight } from '@dnb/eufemia/components/table'
 *
 * function MyTable() {
 *   const highlightRef = useTableHighlight()
 *
 *   return (
 *     <Table ref={highlightRef} outline border>
 *       <thead>
 *         <Tr>
 *           <Th highlight>Column A</Th>
 *           <Th>Column B</Th>
 *         </Tr>
 *       </thead>
 *       <tbody>
 *         <Tr>
 *           <Td>Row 1</Td>
 *           <Td>Row 1</Td>
 *         </Tr>
 *       </tbody>
 *     </Table>
 *   )
 * }
 * ```
 */
export declare function useTableHighlight({ enabled, }?: UseTableHighlightOptions): import("react").RefObject<HTMLElement>;