import { Theme } from '@mui/material';
import { Link } from '@perses-dev/spec';
import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, FilterFn, PaginationState, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
import { ReactNode } from 'react';
export declare const DEFAULT_COLUMN_WIDTH = 150;
export declare const DEFAULT_COLUMN_HEIGHT = 40;
export type TableDensity = 'compact' | 'standard' | 'comfortable';
export type SortDirection = 'asc' | 'desc' | undefined;
export type TableRowEventOpts = {
    /**
     * Unique identifier for the row.
     */
    id: string;
    /**
     * Index of the row in the original data.
     */
    index: number;
};
export interface TableProps<TableData> {
    /**
     * Height of the table.
     */
    height: number;
    /**
     * Width of the table.
     */
    width: number | string;
    /**
     * Array of data to render in the table. Each entry in the array will be
     * rendered as a row in the table.
     */
    data: TableData[];
    /**
     * Array of column configuration for the table. Each entry in the array will
     * be rendered as a column header and impact the rendering of cells within
     * table rows.
     */
    columns: Array<TableColumnConfig<TableData>>;
    /**
     * Custom render cell configurations. Each entry of the object should be an
     * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color
     * and background color.
     */
    cellConfigs?: TableCellConfigs;
    /**
     * The density of the table layout. This impacts the size and space taken up
     * by content in the table (e.g. font size, padding).
     */
    density?: TableDensity;
    /**
     *  When using "auto", the table will try to automatically adjust the width of columns to fit without overflowing.
     *  If there is not enough width for each column, the display can unreadable.
     */
    defaultColumnWidth?: 'auto' | number;
    /**
     *  When using "auto", the table will calculate the cell height based on the line height of the theme and the density setting of the table.
     */
    defaultColumnHeight?: 'auto' | number;
    /**
     * When `true`, the first column of the table will include checkboxes.
     */
    checkboxSelection?: boolean;
    /**
     * Determines the behavior of row selection.
     *
     * - `standard`: clicking a checkbox will toggle that rows's selected/unselected
     *    state and will not impact other rows.
     * - `legend`: clicking a checkbox will "focus" that row by selecting it and
     *    unselecting other rows. Clicking a checkbox with a modifier key pressed,
     *    will change this behavior to behave like `standard`.
     *
     * @default 'standard'
     */
    rowSelectionVariant?: 'standard' | 'legend';
    /**
     * State of selected rows in the table when `checkboxSelection` is enabled.
     *
     * Selected row state is a controlled value that should be managed using a
     * combination of this prop and `onRowSelectionChange`.
     */
    rowSelection?: RowSelectionState;
    /**
     * Callback fired when the mouse is moved over a table row.
     */
    onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
    /**
     * Callback fired when the mouse is moved out of a table row.
     */
    onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
    /**
     * State of the column sorting in the table.
     *
     * The column sorting is a controlled value that should be managed using a
     * combination fo this prop and `onSortingChange`.
     */
    sorting?: SortingState;
    /**
     * Callback fired when the selected rows in the table changes.
     */
    onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
    /**
     * Callback fired when the table sorting changes.
     */
    onSortingChange?: (sorting: SortingState) => void;
    /**
     * State of the pagination in the table.
     * Default: undefined, i.e. pagination is disabled.
     */
    pagination?: PaginationState;
    /**
     * Callback fired when the table pagination changes.
     */
    onPaginationChange?: (pagination: PaginationState) => void;
    /**
     * Function used to determine the unique identifier used for each row. This
     * value is used to key `rowSelection`. If this value is not set, the index
     * is used as the unique identifier.
     */
    getRowId?: CoreOptions<TableData>['getRowId'];
    /**
     * Function used to determine the color of the checkbox when `checkboxSelection`
     * is enabled. If not set, a default color is used.
     */
    getCheckboxColor?: (rowData: TableData) => string;
    /**
     * Item actions to render for each row.
     */
    getItemActions?: ({ id, data }: {
        id: string;
        data: unknown;
    }) => ReactNode[];
    /**
     * Item actions should be created
     */
    hasItemActions?: boolean;
    /**
     * Returns the sub rows for a given row, or `undefined` if there are none.
     */
    getSubRows?: (originalRow: TableData, index: number) => undefined | TableData[];
    /**
     * List of column ids that should be hidden when the table is initially rendered.
     */
    hiddenColumns?: string[];
    /**
     * Configuration for the table toolbar at the top of table, which includes the search input and column filter button.
     * If not provided, the toolbar will not be rendered.
     */
    tableToolbarConfig?: TableToolbarConfig;
}
export type TableToolbarConfig = {
    /**
     * When `true`, a search bar will be rendered above the table that allows
     * the user to filter rows using a fuzzy global filter.
     */
    isSearchEnabled?: boolean;
    /**
     * When `true`, a "Columns" button will be rendered above the table that
     * opens a dropdown allowing the user to toggle column visibility.
     */
    isColumnFilterEnabled?: boolean;
    /**
     * Max height for the column filter menu.
     */
    columnFilterMenuMaxHeight?: number | string;
};
type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
    height: number;
};
type GetTableCellLayoutOpts = {
    isHeader?: boolean;
    isLastColumn?: boolean;
    isFirstColumn?: boolean;
    defaultColumnHeight?: 'auto' | number;
};
/**
 * Returns the properties to lay out the content of table cells based on the
 * theme and density.
 */
export declare function getTableCellLayout(theme: Theme, density: TableDensity, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }?: GetTableCellLayoutOpts): TableCellLayout;
export type TableCellAlignment = 'left' | 'right' | 'center';
export interface TableCellConfigs {
    [id: string]: TableCellConfig;
}
export interface TableCellConfig {
    text?: string;
    textColor?: string;
    backgroundColor?: string;
}
declare module '@tanstack/table-core' {
    interface ColumnMeta<TData extends RowData, TValue> {
        align?: TableColumnConfig<TData>['align'];
        headerDescription?: TableColumnConfig<TData>['headerDescription'];
        cellDescription?: TableColumnConfig<TData>['cellDescription'];
        dataLink?: TableColumnConfig<TData>['dataLink'];
    }
}
declare module '@tanstack/react-table' {
    interface FilterFns {
        fuzzy: FilterFn<unknown>;
    }
}
export type DataLink = Omit<Link, 'name'>;
export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn' | 'id'> {
    /**
     * Text to display in the header for the column.
     */
    header: string;
    /**
     * Alignment of the content in the cell.
     */
    align?: TableCellAlignment;
    /**
     * Text to display when hovering over a cell. This can be useful for
     * providing additional information about the column when the content is
     * ellipsized to fit in the space.
     *
     * If set to `true`, it will use the value generated by the `cell` prop if it
     * can be treated as a string.
     */
    cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;
    /**
     * When `true`, the column will be sortable.
     * @default false
     */
    enableSorting?: boolean;
    /**
     * Text to display when hovering over the header text. This can be useful for
     * providing additional information about the column when you want to keep the
     * header text relatively short to manage the column width.
     */
    headerDescription?: string;
    /**
     * Width of the column when rendered in a table. It should be a number in pixels
     * or "auto" to allow the table to automatically adjust the width to fill
     * space.
     * @default 'auto'
     */
    width?: number | 'auto';
    /**
     * Dynamic link setting. If available the the cell content should turn into
     * a link with the value of the cell as the dynamic section
     */
    dataLink?: DataLink;
}
/**
 * Takes in a perses table column and transforms it into a tanstack column.
 */
export declare function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>): Array<ColumnDef<TableData>>;
export {};
//# sourceMappingURL=table-model.d.ts.map