import type React from 'react';
import type { EmptyStateConfig, FilterState, FooterRow, KeyboardDetail, PageDetail, PaginationConfig, ResizeDetail, ScrollDetail, SortDetail, SortState, TableColumn, TableExpandDetail, TableRow, TableSelectDetail, VirtualScrollConfig } from './types.js';
export interface TableRef extends HTMLElement {
    /** Navigates to a specific page (1-indexed). Works in both controlled and auto-pagination modes. */
    goToPage(page: number): void;
}
/**
 * Pass `columns` and `rows` as typed array properties, not as children or JSON text.
 * For auto-pagination, set `pageSize` to 10 — the table handles page state internally.
 * For controlled pagination, pass the full `pagination` config object.
 * Sort/select/expand events return row IDs, not row data.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<TableRef>(null)`, pass `ref={api}`, then `api.current?.goToPage()`.
 * Available: goToPage().
 *
 * @csspart base
 */
export interface TableOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Caption text displayed below the main content.
     * @example 'Results'
     */
    caption: string;
    /**
     * Typed table-column array. Bind as a property; do not stringify it or use `<th>` children.
     * @example [{ id: 'name', header: 'Name' }]
     */
    columns?: TableColumn[];
    /**
     * Typed table-row array. Bind as a property; do not stringify it or use `<tr>` children.
     * @example [{ id: 'row-1', cells: { name: 'Ada' } }]
     */
    rows?: TableRow[];
    /**
     * Visual style variant. Allowed values: `plain`, `striped`, `bordered`.
     * @example 'plain'
     */
    variant?: 'plain' | 'striped' | 'bordered';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Enables row selection with checkboxes. Allowed values: `none`, `single`, `multiple`.
     * @example 'none'
     */
    selectable?: 'none' | 'single' | 'multiple';
    /**
     * Currently selected item ID(s).
     * @example ['item-1']
     */
    selected?: string[];
    /**
     * Column sort configuration. Array of sort definitions with column ID and direction.
     * @example [{ column_id: 'name', direction: 'asc' }]
     */
    sorts?: SortState[];
    /**
     * Column filter configuration. Array of active filters with column ID and value.
     * @example [{ column_id: 'name', operator: 'contains', value: 'Ada' }]
     */
    filters?: FilterState[];
    /**
     * Full pagination config object for external pagination control.
     * @example { current_page: 1, page_size: 10, total_items: 42 }
     */
    pagination?: PaginationConfig;
    /**
     * Enables hover highlighting on table rows.
     * @defaultValue true
     * @example true
     */
    hoverable?: boolean;
    /**
     * Pins the table header row when scrolling.
     * @defaultValue false
     * @example true
     */
    stickyHeader?: boolean;
    /**
     * Pre-rendered HTML for the table footer row.
     * @example [{ cells: { total: '42' } }]
     */
    footer?: FooterRow[];
    /**
     * Content displayed when the table has no rows.
     * @example { title: 'No results', description: 'Try another query' }
     */
    emptyState?: EmptyStateConfig;
    /**
     * Array of column IDs defining the display order.
     * @example ['name', 'email']
     */
    columnOrder?: string[];
    /**
     * Virtual scrolling window configuration with total count, render count, and start index.
     * @example { total_count: 1000, render_count: 40, start_index: 0 }
     */
    virtualScroll?: VirtualScrollConfig;
    /**
     * Rows per page for auto-pagination. Set this alone and the table handles pagination internally — no need to manage current_page or total_items. For full control, use the pagination prop instead.
     * @defaultValue 0
     * @example 10
     */
    pageSize?: number;
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Number of skeleton rows to render while data loads. 0 renders the real rows.
     * @defaultValue 0
     * @example 5
     */
    loading?: number;
    /**
     * Error message text. When set, shows validation error styling.
     * @example 'This field is invalid'
     */
    error?: string;
    /**
     * Fires when the requested table sort changes. Detail: `SortDetail`.
     * @example (event) => console.log(event.detail.sorts)
     */
    onSort?: (event: CustomEvent<SortDetail>) => void;
    /**
     * Fires when the user selects an item or data node. Detail: `TableSelectDetail`.
     * @example (event) => console.log(event.detail.selected)
     */
    onSelect?: (event: CustomEvent<TableSelectDetail>) => void;
    /**
     * Fires when expandable content changes state. Detail: `TableExpandDetail`.
     * @example (event) => console.log(event.detail.row_id)
     */
    onExpand?: (event: CustomEvent<TableExpandDetail>) => void;
    /**
     * Fires when the requested table page changes. Detail: `PageDetail`.
     * @example (event) => console.log(event.detail.page)
     */
    onPage?: (event: CustomEvent<PageDetail>) => void;
    /**
     * Fires when a key is pressed inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
    /**
     * Fires when a key is released inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
    /**
     * Fires when a resizable table column changes width. Detail: `ResizeDetail`.
     * @example (event) => console.log(event.detail.column_id)
     */
    onResize?: (event: CustomEvent<ResizeDetail>) => void;
    /**
     * Fires when the virtualized table viewport changes. Detail: `ScrollDetail`.
     * @example (event) => console.log(event.detail.scrollTop)
     */
    onScroll?: (event: CustomEvent<ScrollDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Table>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-table>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type TableProps = TableOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TableOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Table: React.ForwardRefExoticComponent<TableOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof TableOwnProps> & React.RefAttributes<TableRef>>;