tango-ui-cw/dist/component/TTable/index.d.ts

A lightweight ui library with ClayW

import type { CSSProperties, ReactNode } from "react";
import type { SxValue } from "../CSSFab";

/** 列定义 */
export interface TableColumn<T = Record<string, unknown>> {
  title: string;
  dataIndex: string;
  key?: string | number;
  width?: string | number;
  hide?: boolean;
  render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
}

/** 分页配置 */
export interface TablePagination {
  /** 翻页栏位置，默认 "bottom" */
  placement?: "top" | "bottom";
  /** 每页条数，默认 10 */
  pageSize?: number;
  /** 每页条数选项，默认 [10, 20, 50, 100] */
  pageSizeOptions?: number[];
  /** 是否显示总数，默认 true */
  showTotal?: boolean;
  /** 是否显示条/页切换，默认 true */
  showSizeChanger?: boolean;
}

/** i18n 覆盖字段 */
export interface TableLocaleText {
  empty?: string;
  prev?: string;
  next?: string;
  page?: string;
  total?: string;
  perPage?: string;
  [key: string]: string | undefined;
}

export interface TableProps {
  /** 数据源 */
  dataSource?: Record<string, unknown>[];
  /** 列定义 */
  columns?: TableColumn[];
  /** sx 样式扩展 */
  sx?: SxValue;
  /** 行内样式 */
  style?: CSSProperties;
  /** 额外 CSS 类名 */
  className?: string;
  /** 分页配置，不传或 false 不分页 */
  pagination?: TablePagination | false | null;
  /** 隐藏列，支持 dataIndex 数组或单个字符串 */
  hide?: string[] | string;
  /** 行 className，支持函数 (row, rowIndex, rowParity) => string */
  rowClassName?: ((row: Record<string, unknown>, rowIndex: number, rowParity: "even" | "odd") => string) | string;
  /** 行 style，支持函数 (row, rowIndex, rowParity) => CSSProperties */
  rowStyle?: ((row: Record<string, unknown>, rowIndex: number, rowParity: "even" | "odd") => CSSProperties) | CSSProperties;
  /** 单元格 className，支持函数 (row, col, rowIndex, colIndex, rowParity, colParity) => string */
  cellClassName?:
    | ((row: Record<string, unknown>, col: TableColumn, rowIndex: number, colIndex: number, rowParity: "even" | "odd", colParity: "even" | "odd") => string)
    | string;
  /** 单元格 style，支持函数 */
  cellStyle?:
    | ((row: Record<string, unknown>, col: TableColumn, rowIndex: number, colIndex: number, rowParity: "even" | "odd", colParity: "even" | "odd") => CSSProperties)
    | CSSProperties;
  /** 自定义 hover 颜色（覆盖默认主题 hover） */
  hoverColor?: string;
  /** i18n key */
  i18nKey?: string;
  /** 覆盖内置文案 */
  localeText?: TableLocaleText;
}

declare function Table(props: TableProps): JSX.Element;

export default Table;