import { ReactElement, ReactNode } from 'react';
import { Column, Row, Filters, IdType, SortingRule } from 'react-table';
import { CommonProps } from '../common';
export interface TableProps<D extends Record<string, unknown>> extends CommonProps {
    /**
     * Array of table columns. Some notes when you provide this prop:
     * * Must be memoized.
     * * Column must be an object of:
     *     * Cell?: a React component to render the cell at column. Checkout this example http://hero-design.surge.sh/components/table#example-cell-customisation for further information.
     *     * Filter?: @deprecated - a React component to render the column filter.
     *     * Header?: a string or React component to render the column header.
     *     * accessor?: a string as the path of the data element's property.
     *     * align?: one of 'left' | 'right' to handle the text alignment.
     *     * disableSortBy?: a boolean to enable/disable column sorting (default is false)
     *     * displayAtBreakpoint?: one of 'sm' | 'md' | 'lg' | 'xl' to handle the column rendering depending on media query breakpoints.
     *     * width?: a string to specify an explicit width of the column.
     */
    columns: Column<D>[];
    /**
     * Array of D (D is the generic type of data element you pass in).
     */
    data: D[];
    /**
     * Controlled expanded rows state, expandedRows is an object of:
     * - key: row index.
     * - value: boolean. True means the row at index is expanded.
     */
    expandedRows?: Record<IdType<D>, boolean>;
    /**
     * Whether the table has expanded rows. When expansion is available, its data shape must be an object of:
     * - expandedRowRenderer: a render function '(rowData: D) => ReactElement' to render the expanded row.
     * - rowExpandable: a predicate function '(rowData: D) => boolean' to decide a row is expandable or not.
     */
    expansion?: {
        expandedRowRenderer: (rowData: D) => ReactElement;
        rowExpandable: (rowData: D) => boolean;
    };
    /**
     * Controlled filters value, Filters is an array of:
     * - id: column id, this matches with accessor configuration.
     * - value: filter value
     */
    filters?: Filters<D>;
    /**
     * Whether the table's first column(s) sticks to the left when scroll horizontally on small screen size devices.
     */
    horizontallySticky?: boolean;
    /**
     * Controlled items per page, itemsPerPages is an object of:
     * - options: array of [Select](http://hero-design.surge.sh/components/select#select-1) options.
     * - value: selected items per page value.
     */
    itemsPerPage?: {
        options: {
            text: string;
            value: string | number;
        }[];
        value?: string | number;
    };
    /**
     * Loading state of Table, which will render a spinner in the center of table.
     */
    loading?: boolean;
    /**
     * Content to render when there is no data in the table.
     */
    noData?: ReactNode;
    /**
     * Callback invoked when any row is expanded or collapsed. expandedRows is an object of:
     * - key: row index.
     * - value: boolean. True means the row at index is expanded.
     */
    onExpandedRowsChange?: (expandedRows: Record<IdType<D>, boolean>) => void;
    /**
     * Callback invoked when filters are changed. Filters is an array of:
     * - id: column id, this matches with accessor configuration.
     * - value: filter value
     */
    onFiltersChange?: (filters: Filters<D>) => void;
    /**
     * Callback invoked when items per page selection is changed.
     */
    onItemsPerPageChange?: (itemsPerPage: string | number) => void;
    /**
     * Callback invoked when a page in pagination is changed.
     */
    onPaginationChange?: (page: number) => void;
    /**
     * Callback invoked when any row is selected or deselected. selectedRows is an object of:
     * - key: row index.
     * - value: boolean. True means the row at index is selected.
     */
    onSelectedRowsChange?: (selectedRows: Record<IdType<D>, boolean>) => void;
    /**
     * Callback invoked when sorting is changed. sortBy is an array of:
     * - id: column id, this matches with accessor configuration.
     * - desc: boolean, true means sorting descendingly.
     */
    onSortByChange?: (sortBy: SortingRule<D>[]) => void;
    /**
     * Whether the table has pagination. When pagination is ON, its data shape must be an object of:
     * - current: a number which is 1-based indexing to indicate the current selected page.
     * - total: a number indicates the total of pages.
     */
    pagination?: {
        current: number;
        total: number;
    };
    /**
     * An object for rows configuration, it must be memoized.
     */
    rows?: {
        generateClassName?: (row: Row<D>) => string | undefined;
    };
    /**
     * Whether the table is allowed using checkbox to select table rows.
     */
    selectable?: boolean;
    /**
     * Controlled selected rows state, selectedRows is an object of:
     * - key: row index.
     * - value: boolean. True means the row at index is selected.
     */
    selectedRows?: Record<IdType<D>, boolean>;
    /**
     * Controlled sortBy state, sortBy is an array of:
     * - id: column id, this matches with accessor configuration.
     * - desc: boolean, true means sorting descendingly.
     */
    sortBy?: SortingRule<D>[];
    /**
     * Whether the table's header sticks to the top.
     */
    sticky?: boolean;
}
export declare const hasFixedLayout: <D extends Record<string, unknown>>(columns: Column<D>[]) => boolean;
declare function Table<D extends Record<string, unknown>>({ columns, data, loading, sticky, horizontallySticky, selectable, selectedRows, onSelectedRowsChange, expansion, expandedRows, onExpandedRowsChange, pagination, rows: rowsConfig, onPaginationChange, itemsPerPage, onItemsPerPageChange, filters, onFiltersChange, sortBy, onSortByChange, id, className, style, sx, 'data-test-id': dataTestId, noData, }: TableProps<D>): ReactElement;
export default Table;