import { CSSResult, TemplateResult } from "lit";
import '../../define/ui/ui-divider.js';
export interface IDataTableOptions {
    /**
     * The name of the property that identifies the key. The key is inserted into each row as `data-key`.
     * Default to `key`.
     */
    key?: string;
    /**
     * The value of the aria-label to render on the table.
     */
    ariaLabel?: string;
    /**
     * When true it dispatches `activate` event when the user double click on a row.
     */
    active?: boolean;
    /**
     * When set it allows a single selection. A list item is highlighted and the `select` event is dispatched when the selection change.
     */
    selection?: 'single' | 'multi';
}
export type RenderContent = string | TemplateResult | TemplateResult[];
type CellCallback<T> = (item: T) => TemplateResult[];
type ActivateCallback<T> = (item: T) => void;
type SelectCallback = (item: string | string[]) => void;
type Callback = () => void;
export interface ICellOptions {
    /**
     * The list of CSS class names to add to the cell.
     */
    class?: string;
    /**
     * The list of data attributes to set on the cell.
     */
    data?: {
        [key: string]: number | string | boolean;
    };
    /**
     * The value of the aria-label to render on the cell.
     */
    ariaLabel?: string;
}
interface CellPosition {
    row: number;
    cell: number;
}
/**
 * A helper class that allows to build a data table in a programmatic way.
 *
 * Usage:
 *
 * const dt = new DataTable(arrayOfItems, { key: 'key' });
 * // or dt.items = arrayOfItems;
 * dt.addEventListener('header', () => {
 *  const c1 = dt.header('name', { class: 'name-column', data: {a: b} });
 *  const c2 = dt.header('created', { class: 'created-column', data: {a: b} });
 *  return [c1, c2];
 * });
 * dt.addEventListener('item', (item) => {
 *   const c1 = dt.cell(html`cell template content`, { class: 'a b c', data: {a: b} });
 *   const c2 = dt.cell(`cell text content`, { class: 'xyz', data: {key: 'value'} });
 *   return [c1, c2];
 * });
 * dt.addEventListener('empty', () => {
 *   return html`<p>The table has no records.</p>`;
 * });
 *
 * const template = dt.render();
 *
 * @fires header - An event dispatched when a table header row is being rendered.
 * @fires item - An event dispatched when a table item row is being rendered.
 * @fires empty - An event dispatched when a table has no rows to render.
 * @fires activate - An event dispatched when the user double click on a row.
 * @fires select - An event dispatched when the user selected a table item in a single or multi selection table.
 * @fires render - An event dispatched when the internal state changed and the table must be rendered again.
 */
export declare class DataTable<T> {
    #private;
    static get styles(): CSSResult;
    get items(): ArrayLike<T> | undefined;
    set items(value: ArrayLike<T> | undefined);
    options: IDataTableOptions;
    /**
     * The list of keys that correspond to the `key` set on the options of items that are currently selected.
     * Note, this is a common list for single and multi selection. In a single selection only the first is taken into account.
     */
    selected: string[];
    /**
     * Describes currently focused cell.
     * The `row` is the index of the focused row (starting with the header) and the `cell` is the index of the focused cell.
     */
    protected focused?: CellPosition;
    constructor(itemsCallback: () => ArrayLike<T>, options?: IDataTableOptions);
    addEventListener(type: 'header', listener: () => TemplateResult[]): void;
    addEventListener(type: 'render', listener: () => void): void;
    addEventListener(type: 'item', listener: CellCallback<T>): void;
    addEventListener(type: 'empty', listener: () => TemplateResult): void;
    addEventListener(type: 'activate', listener: ActivateCallback<T>): void;
    addEventListener(type: 'select', listener: SelectCallback): void;
    addEventListener(type: 'scrollend', listener: Callback): void;
    /**
     * Renders a header cell.
     *
     * @param content The content of the header cell to render.
     * @param options Cell rendering options
     */
    header(content: RenderContent, options?: ICellOptions): TemplateResult;
    /**
     * Renders a body cell.
     *
     * @param content The content of the header cell to render.
     * @param options Cell rendering options
     */
    cell(content: RenderContent, options?: ICellOptions): TemplateResult;
    render(): TemplateResult;
    protected rowFromEvent(e: Event): HTMLElement | undefined;
    protected tableFromEvent(e: Event): HTMLElement | undefined;
    protected cellPositionFromEvent(e: Event): CellPosition;
    protected cellRowFromEvent(e: Event): {
        column: HTMLElement;
        row: HTMLElement;
    } | undefined;
    protected handleFocus(e: Event): void;
    protected dblclickHandler(e: Event): void;
    protected handleClick(e: Event): void;
    protected handleKeyDown(e: KeyboardEvent): void;
    protected handleSingleSelection(key: string): void;
    protected handleMultiSelection(key: string): void;
    protected focusFirstCell(table: HTMLElement): void;
    protected focusCell(table: HTMLElement, rowIndex: number, colIndex: number): boolean;
    protected moveFocusRight(e: Event): void;
    protected moveFocusLeft(e: Event): void;
    protected moveFocusDown(e: Event): void;
    protected moveFocusUp(e: Event): void;
    protected handlePrimaryAction(e: Event): void;
    protected handleListScroll(e: Event): void;
    protected renderHeader(): TemplateResult;
    protected renderBody(): TemplateResult;
    protected renderItem(item: T): TemplateResult;
    protected renderEmpty(): TemplateResult;
    protected dispatchHeader(): TemplateResult[] | undefined;
    protected dispatchItem(item: T): TemplateResult[] | undefined;
    protected dispatchEmpty(): TemplateResult | undefined;
    protected dispatchRender(): void;
    protected dispatchSelected(selection: string | string[]): void;
    protected dispatchScrollEnd(): void;
}
export {};
//# sourceMappingURL=DataTable.d.ts.map