@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
39 lines (38 loc) • 958 B
TypeScript
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>;