import { Cre8Element } from '../cre8-element';
/**
 * One row in a data-driven table: either an object keyed by column `key`, or a
 * plain array of cell values positioned to match `columns`.
 */
export type Cre8TableRowData = Record<string, string | number> | Array<string | number>;
/** One column in a data-driven table. */
export interface Cre8TableColumn {
    /** Header text. Also stamped onto every cell beneath it as `dataHeader`. */
    label: string;
    /** Key to read each row's value from, when rows are objects. */
    key?: string;
    /** Inline width for the column, e.g. `"20%"`. */
    width?: string;
}
/**
 * @slot - The component content
 */
export declare class Cre8Table extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * Columns for a data-driven table. Set this with `rows` and the table builds
     * its own header, body, rows and cells — the same composition you would write
     * by hand, generated into the light DOM, so nothing about styling or
     * behaviour changes.
     *
     * Leave both unset to compose the table yourself with `cre8-table-header`,
     * `cre8-table-body` and friends. Do not do both on one table.
     */
    columns?: Cre8TableColumn[];
    /**
     * Rows for a data-driven table. Each row is either an object keyed by the
     * columns' `key`, or an array of values positioned to match `columns`.
     */
    rows?: Cre8TableRowData[];
    /**
     * Specifies the caption/title of the table, visible to all users.
     * Increases accessibility of table.
     */
    caption?: string;
    /**
     * Behavior variants
     * <cre8-text-passage size="sm">
     * <ul>
     * <li>**responsive** stacks column headers with respective table cells on small screens</li>
     * </ul>
     * </cre8-text-passage>
     */
    behavior?: 'responsive';
    /**
     * Hoverable rows variant
     * 1) Allows the table rows to be styled on hover
     */
    isHoverable?: boolean;
    /**
     * Style variants
     * <cre8-text-passage size="sm">
     * <ul>
     * <li>**striped** add zebra-striping to table rows within the `<tbody>`</li>
     * </ul>
     * </cre8-text-passage>
     */
    variant?: 'striped';
    /**
     * The composition `columns` and `rows` stand for. Kept as data rather than
     * markup so the reconciler can update a cell in place instead of rebuilding
     * the table under the user's cursor.
     */
    private buildComposition;
    protected updated(changed: Map<string, unknown>): void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-table': Cre8Table;
    }
}
export default Cre8Table;
//# sourceMappingURL=table.d.ts.map