import { Table as ReactTable, Row } from "@tanstack/react-table";
import { CommonProps, EmptyStateProps, RelayPagination, type Styleable } from "@trackunit/react-components";
import { ReactElement, ReactNode } from "react";
import "./table-animations.css";
export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps, Styleable {
    /**
     * Relay-style pagination object for infinite scroll. Use with `usePaginationQuery` hook
     * to automatically handle fetching more data as the user scrolls.
     */
    pagination?: RelayPagination;
    /**
     * ReactNode rendered on the left side of the table header area.
     * Commonly used for column settings, search inputs or filter controls.
     */
    headerLeftActions?: ReactNode;
    /**
     * ReactNode rendered on the right side of the table header area.
     * Commonly used for primary actions for the table.
     */
    headerRightActions?: ReactNode;
    /**
     * ReactNode rendered below the header actions row and above the column headers.
     * Useful for contextual banners like bulk selection indicators. See SelectAllBanner component for an example.
     */
    subHeaderActions?: ReactNode;
    /**
     * ReactNode rendered on the right side of the table footer.
     * Commonly used for export actions.
     */
    footerRightActions?: ReactNode;
    /**
     * Callback fired when a row is clicked. Receives the full Tanstack Row object
     * which includes the original data via `row.original`.
     */
    onRowClick?: (row: Row<TData>) => void;
    /**
     * Custom message or element shown when the table has no data.
     * If not provided, a default empty state with search icon is displayed.
     */
    noDataMessage?: ReactElement | string;
    /**
     * Shows a centered loading spinner when true. Use for initial data loading
     * or when refreshing the entire table.
     */
    loading?: boolean;
    /**
     * Height of each row in pixels. Used by the virtual scroll to estimate row sizes.
     *
     * @default 50
     */
    rowHeight?: number;
    /**
     * Hides the footer that shows row count when true.
     * Useful for compact tables or when count information isn't needed.
     */
    hideFooter?: boolean;
    /**
     * Props passed to the EmptyState component shown when there's no data.
     * Allows customizing the empty state image, title, and description.
     */
    emptyState?: EmptyStateProps;
    /**
     * Column ID used to identify the selection checkbox column.
     * When set, clicking on this column won't trigger `onRowClick`.
     */
    selectionColId?: string;
    /**
     * Function to render custom filter buttons in column headers.
     * Receives the filter key(s) from column meta and should return filter UI.
     */
    renderFilterButton?: (filterKey: string | Array<string>) => ReactNode;
    /**
     * Function to determine if a specific row should be clickable.
     * When provided, only rows returning true will have pointer cursor and trigger `onRowClick`.
     */
    isRowClickable?: (row: TData) => boolean;
    /**
     * Callback fired when a column drag operation begins. Receives the column ID being dragged.
     * Used for custom column reorder logic or analytics.
     */
    onColumnDragStart?: (columnId: string) => void;
    /**
     * Callback fired when the topmost visible row changes during scroll.
     * Receives the data index of the new top row. Useful for syncing scroll
     * position to a URL cursor via `useCursorUrlSync`.
     */
    onTopItemChange?: (index: number) => void;
}
/**
 * Table displays large data sets with virtual scrolling, column sorting, filtering, resizing, drag-and-drop column reordering,
 * and row selection. It extends `@tanstack/react-table` and uses `useTable` to create the table instance.
 * Infinite scroll pagination is handled via `RelayPagination` from `usePaginationQuery`.
 *
 * For the full TanStack Table API, see [TanStack Table docs](https://tanstack.com/table/v8/docs/guide/introduction).
 *
 * ### When to use
 * Use Table for displaying structured data with sorting, pagination, or row actions — for example, asset lists, event logs, or user management views.
 *
 * ### When not to use
 * Do not use Table for simple key-value displays — use a layout with `Text` components.
 * Do not use Table for small card-based lists — use `List`.
 *
 * @param {TableProps} props - The props for the Table component
 * @returns {ReactElement} Table component
 * @example
 * ```tsx
 * import { createColumnHelper, Table, useTable } from "@trackunit/react-table";
 * import { TextCell } from "@trackunit/react-table-base-components";
 * import { useMemo } from "react";
 *
 * interface DataType {
 *   id: string;
 *   name: string;
 *   assetType: string;
 *   brand: string;
 * }
 *
 * const MyTable = () => {
 *   const defaultData: DataType[] = useMemo(
 *     () => [
 *       { id: "1", name: "SM Smoketest Asset 1", assetType: "machine", brand: "Manitou" },
 *       { id: "2", name: "3219", assetType: "machine", brand: "Skyjack" },
 *       { id: "3", name: "3226", assetType: "machine", brand: "Skyjack" },
 *     ],
 *     []
 *   );
 *
 *   const columns = useMemo(() => {
 *     const columnHelper = createColumnHelper<Partial<DataType>>();
 *
 *     return [
 *       columnHelper.accessor(row => row?.name, {
 *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
 *           <TextCell content={original?.name} />
 *         ),
 *         header: "Name",
 *         id: "name",
 *         size: 250,
 *       }),
 *       columnHelper.accessor(row => row?.assetType, {
 *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
 *           <TextCell content={original?.assetType} />
 *         ),
 *         header: "Asset Type",
 *         id: "assetType",
 *       }),
 *       columnHelper.accessor(row => row?.brand, {
 *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
 *           <TextCell content={original?.brand} />
 *         ),
 *         header: "Brand",
 *         id: "brand",
 *       }),
 *     ];
 *   }, []);
 *
 *   const pagination = useMemo(
 *     () => ({
 *       nextPage: () => {}, // Handle next page
 *       previousPage: () => {}, // Handle previous page
 *       isLoading: false,
 *       pageInfo: {
 *         count: defaultData.length,
 *       },
 *     }),
 *     [defaultData.length]
 *   );
 *
 *   const { table } = useTable<Partial<DataType>>({
 *     data: defaultData,
 *     columns,
 *     enableSorting: false,
 *   });
 *
 *   return <Table<Partial<DataType>> {...table} pagination={pagination} />;
 * };
 *
 * ```
 */
export declare const Table: <TData extends object>({ rowHeight, loading, hideFooter, style, ...props }: TableProps<TData>) => ReactElement;