import React from "react";
import { WithPaginationProps } from "./WithPagination";
import type { CSSObject, SerializedStyles } from "@emotion/react";
import type { Theme } from "../theme";
export interface TableUIRenderCellProps<Row, Value> {
    cell: {
        value: Value;
    };
    row: Row;
}
export type TableUIColumn<Row> = {
    [Key in keyof Row]: {
        key: Key;
        title?: string;
        renderCell?: ({ cell, row, }: TableUIRenderCellProps<Row, Row[Key]>) => React.JSX.Element;
        sort?: (a: Row[Key], b: Row[Key]) => number;
        /**
         * この列の幅が全体に占める比を指定する。
         * columnRatio指定しない場合は、autoが指定されたものとして扱われます。
         * table要素本来の自動調整が効かなくなるので、注意して利用してください。
         */
        columnRatio?: number;
    };
}[keyof Row];
export interface TableUIPropsOnSelectArgs<Row> {
    row: Row;
    index: number;
    checked: boolean;
}
export interface TableUIPropsRenderActionsArgs<Row> {
    row: Row;
    index: number;
}
export interface TableUIPropsGetRowStyleArgs<Row> {
    row: Row;
    index: number;
    theme: Theme;
}
export interface TableUIProps<Row> extends WithPaginationProps {
    /**
     * テーブルをストライプ柄にするかどうか
     * @default false
     */
    striped?: boolean;
    /**
     * テーブルのヘッダーを固定するかどうか
     * @default false
     */
    stickyHeader?: boolean;
    /**
     * テーブルの列の情報
     */
    columns?: TableUIColumn<Row>[];
    /**
     * 空配列の場合は読み込み済み、undefinedの場合は読み込み中であると見なされます。
     * 基本的にJSONフレンドリーなオブジェクトを渡すようにしてください。ReactElementなどは非推奨です。
     * 代わりにcolumnsで定義できるrenderCellを利用するか、ReactComponentを渡してください。
     *
     * dataにはcolumnsに存在しないものも含められます。
     */
    data?: Row[];
    /**
     * 現在選択されている行のindexの配列
     */
    selectedIndex?: number[];
    /**
     * 行毎のチェックボックスが生える
     */
    onSelect?: ({ row, index, checked }: TableUIPropsOnSelectArgs<Row>) => void;
    /**
     * 全てをチェックするボタンが生える
     */
    onSelectAll?: ({ data, checked }: {
        data: Row[];
        checked: boolean;
    }) => void;
    /**
     * onSelectで生えるチェックボックスのname
     * formDataから取得できる値は選択された行のindexです。
     */
    name?: string;
    /**
     * 行の末尾にインタラクティブ要素を追加するためのメソッド
     */
    renderActions?: (args: TableUIPropsRenderActionsArgs<Row>) => React.JSX.Element;
    /**
     * 行のスタイルをカスタマイズするための関数
     * @param args - 行のデータ、インデックス、テーマオブジェクトを含むオブジェクト
     * @returns Emotion CSSオブジェクトまたはCSSオブジェクト
     */
    getRowStyle?: (args: TableUIPropsGetRowStyleArgs<Row>) => SerializedStyles | CSSObject | undefined;
}
export declare const TableUI: <Row extends Record<string, any>>(props: TableUIProps<Row>) => import("@emotion/react/jsx-runtime").JSX.Element;