import { type ReactNode, type HTMLAttributes, type ReactElement } from 'react';
import { type WrapperProps } from './data-loader';
import '../styles/components/data-table.scss';
type BasicDatum = Record<string, unknown>;
export type CommonColumn<Datum> = {
    label?: ReactNode;
    name: string;
    render: (datum: Datum) => ReactNode;
    tooltip?: ReactNode;
    width?: string;
};
export interface SortableColumn<Datum> extends CommonColumn<Datum> {
    sortable?: true;
    sorted?: 'ascend' | 'descend';
}
export interface NonSortableColumn<Datum> extends CommonColumn<Datum> {
    sortable?: false | undefined;
    sorted?: never;
}
type SharedProps<Datum> = {
    /**
     * An array of objects which specifies attributes about each column of your
     * data. Each object has label, name and render attributes.
     */
    columns: Array<SortableColumn<Datum> | NonSortableColumn<Datum>>;
    /**
     * Table fixed layout
     */
    fixedLayout?: boolean;
};
type HeadProps<Datum> = {
    /**
     * Optional event handler called when a sortable column header gets clicked
     * Make sure that it doesn't change unecessarily by wrapping it in useCallback
     */
    onHeaderClick?: (columnName: SortableColumn<Datum>['name']) => void;
};
type RowsProps<Datum> = {
    /**
     * The data to be displayed
     */
    data: Datum[];
    loading?: boolean;
    /**
     * A function that returns a unique ID for each of the data objects.
     * Same function signature as a map function.
     */
    getIdKey: (datum: Datum, index: number, data: Datum[]) => string;
    /**
     * A callback that is called whenever a user selects or unselects a row.
     */
    onSelectionChange?: (event: MouseEvent | KeyboardEvent) => void;
};
type TableProps = {
    /**
     * Display density of the table (default is 'normal')
     */
    density?: 'normal' | 'compact';
    /**
     * Choose to activate optimised rendering (default: false). Do not use if
     *  - height of row is really tall or variable (scroll bar will jump)
     *  - column width changes (should be fine with "fixedLayout")
     */
    optimisedRendering?: boolean;
};
export interface Props<Datum> extends TableProps, RowsProps<Datum>, Omit<HeadProps<Datum>, 'selectable'>, SharedProps<Datum> {
}
export declare const DataTable: <Datum extends BasicDatum>({ data, loading, columns, getIdKey, onHeaderClick, onSelectionChange, density, fixedLayout, optimisedRendering, className, ...props }: Props<Datum> & HTMLAttributes<HTMLTableElement>) => ReactElement;
export declare const DataTableWithLoader: <Datum extends BasicDatum>(props: WrapperProps<Datum> & Props<Datum> & HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=data-table.d.ts.map