import type { ReactNode } from 'react';
/** Single-column sort descriptor consumed by the header. */
export interface DataTableSortState {
    id: string;
    desc: boolean;
}
export interface DataTableHeaderProps {
    className?: string;
    /** Keep the header visible while scrolling. */
    stickyHeader?: boolean;
    /** Tailwind top class for sticky offset, e.g. `'top-[56px]'`. */
    stickyHeaderOffset?: string;
    /**
     * Content rendered at the right edge of the header, on the same row as
     * column labels. Use for row-count, header-level toolbar buttons, etc.
     *
     * @example
     * <DataTable.Header rightSlot={<DataTable.RowCount itemName="device" />} />
     */
    rightSlot?: ReactNode;
    /**
     * Current sort descriptor. The header only renders the direction indicator
     * based on this value — it doesn't own the state. Pair with `onSortChange`
     * and let the consumer decide what a click means (server query, in-memory
     * sort, TanStack's row-model sort, …).
     */
    sort?: DataTableSortState | null;
    /**
     * Fires when a sortable column header is clicked. The consumer owns the
     * toggle cycle (e.g. none → asc → desc → none) and the actual data sort.
     */
    onSortChange?: (columnId: string) => void;
}
export declare function DataTableHeader({ className, stickyHeader, stickyHeaderOffset, rightSlot, sort, onSortChange, }: DataTableHeaderProps): import("react").JSX.Element | null;
/**
 * THE header label styling. Exported because a column may supply a NODE header
 * (an icon beside the text), and without this those headers rendered unstyled
 * beside the string ones — same row, two different type treatments.
 */
export declare const DATA_TABLE_HEADER_LABEL_CLASS = "whitespace-nowrap uppercase text-ods-text-secondary transition-colors duration-200 text-h5 group-hover:text-ods-text-primary";
//# sourceMappingURL=data-table-header.d.ts.map