import { IPagination } from '../pagination/types';
import React, { FC, Ref } from 'react';

export type IRender = (params: { value: any; index: number; row: any; onChange: any; key?: string }) => React.ReactNode;

export type IColumn = {
    // 单元格的对齐方式
    align?: 'left' | 'right' | 'center';
    // 标题栏，可以是字符串或者返回一个ReactElement的函数
    title: string | (() => React.ReactNode);
    // 列左对齐或者右对齐
    fixed?: 'left' | 'right';
    // 过滤选项
    filter?: { label: string; value: number | string }[];
    // 是否允许过滤多选
    filterMultiple?: boolean;
    // 默认过滤的项目
    defaultFiltered?: number | string | (number | string)[];
    // 本地过滤函数
    filterLocal?: (filtered: number | string | (number | string)[], row: any, index: number) => boolean;
    // 排序，true 开启远程排序，若为函数则依据此函数本地排序
    sorter?: boolean | ((rowA: any, rowB: any) => number);
    // 默认排序方向，所有的columns中，只能指定一个默认排序的列
    defaultSortDirection?: 'ascend' | 'descend';
    // 对应的字段名
    key?: string;
    // 列宽度
    width?: number | string;
    // 自定义列渲染
    render?: IRender;
};
export type IOnChange = (params: {
    pagination?: Partial<IPagination>;
    sorter?: any;
    filter?: any;
    checked?: number | string[];
}) => void;

export type ITable = {
    /** table的数据源 */
    dataSource?: any[];
    /** 定义列的相关属性 */
    columns: (IColumn | boolean)[];
    /** 是否显示分页 */
    showPagination?: boolean;
    /** 定义table分页的相关属性 */
    pagination?: Partial<IPagination>;
    /** 是否分色显示行 */
    alternative?: boolean;
    /** 是否显示汇总数据 */
    showSummary?: boolean;
    /** 汇总数据对象 */
    summaryData?: any;
    /** table的分页、排序、过滤发生变化时的回调函数 */
    onChange?: IOnChange;
    /** 是否显示选中框 */
    showChecker?: boolean;
    /** 是否显示表头 */
    showHeader?: boolean;
    /** 最多选中个数 */
    maxChecked?: number;
    /** 默认选中的项目（rowId） */
    defaultChecked?: (string | number)[];
    /** 每一行的唯一标识符 */
    rowId: string | number;
    /** 可滚动table的宽度 */
    scroll?: number;
    /** 固定行，可以固定标题或者汇总行 */
    fixRow?: 'header' | 'summary';
    /** 固定行模式下table的高度，默认auto */
    height?: string | number;
    /** 悬浮操作栏 */
    actionHover?: (row: any, index: number) => React.ReactNode;
    /** 无数时候据显示的界面 */
    noData?: React.ReactNode;
    style?: React.CSSProperties;
    className?: string;
    ref?: Ref<any>;
    /** 加载中状态指示器 */
    loading?: boolean;
};

declare const Table: FC<ITable>;
export { Table };