import type { ReactElement, ReactNode } from 'react'; import type { ColDef, ColGroupDef, EditableCallbackParams, ICellEditorParams, ICellRendererParams, IHeaderParams, AgGridEvent, CheckboxSelectionCallback, ColumnState, IRowNode } from 'ag-grid-community'; import type { AgGridReactProps } from 'ag-grid-react'; import type { RuleItem, ValidateFieldsError } from 'async-validator/dist-types/interface'; import type { DateEditorParams } from './cell-editors/date'; import type { NumberEditorParams } from './cell-editors/number'; import type { RowEditorParams } from './cell-editors/row'; import type { SelectEditorParams } from './cell-editors/select'; import type { TextEditorParams } from './cell-editors/text'; import type { FieldCol } from './components/custom-panel/typings'; import type { DataGridRef } from './index'; export type { TextEditorParams } from './cell-editors/text'; export type { NumberEditorParams } from './cell-editors/number'; export type { DateEditorParams } from './cell-editors/date'; export type { SelectEditorParams } from './cell-editors/select'; export type { RowEditorParams } from './cell-editors/row'; export type { FieldCol } from './components/custom-panel/typings'; export declare type GetRowId = string | ((data: T) => string); export declare type PathType = string; export declare type ValidateRule = Pick & { validator?: (rule: any, val: any, record: T) => void | Promise; }; export declare type ValidateResult = { id: string; node: IRowNode; data: TData; index: number; fields: ValidateFieldsError; }[]; interface EditorParamsType> { type: T; params?: K; component?: string; } declare type EditorType = EditorParamsType<'text-editor', TextEditorParams> | EditorParamsType<'number-editor', NumberEditorParams> | EditorParamsType<'date-editor', DateEditorParams> | EditorParamsType<'select-editor', SelectEditorParams> | EditorParamsType<'row-editor', RowEditorParams>; export interface ColType extends Omit, 'editable'> { title?: ReactNode | ((params: IHeaderParams) => ReactNode); dataIndex?: string; className?: string; /** * @deprecated */ sorter?: boolean | ((a: TData, b: TData) => number); ellipsis?: boolean; /** * @description * @en cell renderer. it should be a pure function, do not use the state from the closure but from cellContext * @zh 单元格渲染函数. 需要是一个纯函数,不使用外部组件的状态变量,而是通过context引入 */ render?: (formattedValue: any, record: TData, index: number, params: ICellRendererParams) => ReactElement | string | number | null; /** * @description 可编辑单元格 */ editable?: { enable?: (params: EditableCallbackParams) => boolean; rules?: ValidateRule[]; valueSetter?: (val: any, data: TData) => Partial; renderer: EditorType | ((params: ICellEditorParams) => EditorType); }; /** * @description 是否使用格式化值作为复制导出 */ useValueFormatterForExport?: boolean; } export interface ColGroupType extends Omit, 'children'> { title?: ReactNode | ((params: IHeaderParams) => ReactNode); children: ColsType; key?: string; } export declare type ColsType = (ColType | ColGroupType)[]; export declare type RowSelectionType = { type?: 'checkbox' | 'radio'; selectedRowKeys?: string[]; /** * @description 数据源更改是否保留所选项,远程模式默认开启,非远程模式默认关闭 */ preserveSelectedRowKeys?: boolean; defaultSelectedRowKeys?: string[]; fixed?: boolean; checkboxSelection?: boolean | CheckboxSelectionCallback; onChange?: (selectedKeys: string[], selectedRows: T[]) => void; /** * @description 是否隐藏底部已选项 */ hideFooterSelected?: boolean; /** * @description 是否按页面显示的数据进行全选 */ headerCheckboxSelectionFilteredOnly?: boolean; }; export declare type PaginationType = { current?: number; pageSize?: number; defaultCurrent?: number; pageSizeOptions?: string[]; defaultPageSize?: number; total?: number; onChange?: (current: number, pageSize: number) => void; }; export declare type SelectionType = AgGridReactProps['rowSelection']; export declare type SortOrder = 'desc' | 'asc'; export declare type SortType = { field: string; order: SortOrder; }; export declare type DataGridState = { pagination: boolean; page: number; pageSize: number; total: number; loading: boolean; error?: Error; }; export declare type GridStore = { errors: Map>; context?: any; grid: DataGridRef; fetchError?: Error; }; export interface RowAction { /** * @description 当text不为字符串时,建议加上key属性 */ text: string | ReactElement; key?: string; onClick?: (row: T) => void; disabled?: boolean; dropDown?: (RowAction | null)[]; } export declare type RowActionsType = (RowAction | null)[] | ((record: T, params: ICellRendererParams) => (RowAction | null)[]); export declare type DetailCell> = { params?: Params; /** 这是一个render函数不是组件 */ render: (params: ICellRendererParams & Params) => ReactNode; }; export interface DataGridSearch { /** * @description * 不传入就根据所有字符类型的列数据搜索 */ searchFields?: string[]; placeholder?: string; /** * @description * true: 清除搜索前的选中数据,false: 保留搜索前的选中数据; 默认为true; */ clearSelection?: boolean; /** * @description * 搜索后聚焦到哪个单元格,一般情况不要使用 */ focusColumn?: string; /** * @description * 关键字默认值 */ defaultValue?: string; onValueChange?: (value: string) => void; /** * @description * 是否显示搜索结果 上下键快速定位 */ dropdownConfig?: { /** * label字段 */ label: string | ((item: TData) => ReactNode | string); }; } export interface DataGridSearchRef { reset: () => void; updateNode: (node: IRowNode) => void; update: (rows: number) => void; } export interface CustomColumnData { fields: FieldCol[]; columState: ColumnState[]; } export interface DataGridProps extends Omit, 'rowSelection' | 'pagination'> { dataSource?: TData[]; /** * @description 编辑表格数据后的回调 * @param value * @returns */ onDataSourceChange?: (value: TData[], params: AgGridEvent) => void; columns?: ColsType; rowKey: GetRowId; rowSelection?: RowSelectionType; pagination?: boolean | PaginationType; /** * @description 汇总行 */ summary?: Record[] | Record; /** * @description 是否初次加载远程数据 */ autoLoad?: boolean; /** * @description 远程加载数据 * @param params * @returns */ fetch?: (params: { current: number; pageSize: number; sort: SortType[]; }) => Promise<{ data: TData[]; summary?: any; total?: number; extra?: any; }>; /** * @description 远程加载数据成功后的回调,extra为fetch方法返回的extra * @param extra * @returns */ onLoad?: (extra: any) => void; /** * @description 远程加载数据loading发生变化 */ onLoading?: (loading: boolean) => void; /** * @description 行操作按钮组 */ rowActions?: RowActionsType; /** * * @description 行操作列属性 */ rowActionsColDef?: ColDef; /** * @description 加载动画 */ loading?: boolean; /** * @description 封装后的master-detail使用方式,传了这个参数默认开启master-detai,仅当context和data改变才会重新渲染 */ detailCell?: DetailCell; /** * @description 没有行数据时显示的文本 */ emptyText?: string; /** * @description 显示底部搜索栏,只支持非远程模式 */ showSearch?: boolean | DataGridSearch; /** * @description 单元格是否表现成弹性盒子,从而便于垂直,此时也会导致文本ellipsis失效 */ cellDisplayFlex?: boolean; /** * @description 自定义列保存 */ customColumnPanelStorage?: { suppressFieldValueGetter?: boolean; set: (data: CustomColumnData) => Promise | void; get: () => Promise | CustomColumnData | null | undefined; }; /** * @description 自定义列额外参数 */ customColumnPanelExtra?: { supportSelectDataFormat?: boolean; }; /** * @descriptioin 列定制启用汇总 */ enableCustomColumnSummary?: boolean; /** * @description 表格底部左侧额外的元素 */ extraFooterLeft?: ReactElement; /** * @description 自定义数据获取异常时渲染 */ renderFetchError?: (error: Error) => ReactNode; /** * */ defaultColDef?: ColDef & { useValueFormatterForExport?: boolean; }; }