es-grid-template
Version:
es-grid-template
813 lines (812 loc) • 29.4 kB
TypeScript
import type { CheckboxProps, ColorPickerProps, TablePaginationConfig } from 'rc-master-ui';
import type { ItemType } from 'rc-master-ui/es/menu/interface';
import type { Cell, Header, OnChangeFn } from '@tanstack/react-table';
import type { CSSProperties, ReactElement, ReactNode } from 'react';
import type { TableLocale } from "rc-master-ui/lib/table/interface";
import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
import type { BaseTableCSSVariables } from '../ali-table/base-table/styles';
declare module "@tanstack/table-core" {
interface ColumnMeta<any, any> extends ColumnTable {
rowSpan?: number;
}
}
export type ExtendedColumnFilter = {
id: string;
value: string;
operator?: FilterOperator;
};
export type OpetorState = ColumnOperator[];
export interface OpetorTableState {
operator: OpetorState;
}
export interface ColumnOperator {
id: string;
operator: string;
}
export interface DensityOptions {
enableOperator?: boolean;
onOperatorChange?: OnChangeFn<OpetorState>;
}
export type Key = React.Key;
export type GridTableLocale = TableLocale & {
ok_btn?: string;
cancel_btn?: string;
add_rows?: string;
add_rows_before?: string;
add_rows_after?: string;
add_1?: string;
add_10?: string;
add_50?: string;
add_100?: string;
add_children?: string;
delete_content?: string;
delete_rows?: string;
custom?: string;
filterTitle?: string;
filterConfirm?: React.ReactNode;
filterReset?: React.ReactNode;
filterEmptyText?: React.ReactNode;
filterCheckall?: React.ReactNode;
filterSearchPlaceholder?: string;
emptyText?: React.ReactNode | (() => React.ReactNode);
selectAll?: React.ReactNode;
selectNone?: React.ReactNode;
selectInvert?: React.ReactNode;
selectionAll?: React.ReactNode;
sortTitle?: string;
expand?: string;
collapse?: string;
triggerDesc?: string;
triggerAsc?: string;
cancelSort?: string;
fullScreen?: string;
minimized?: string;
setting?: string;
groupData?: string;
textPlaceholder?: string;
selectPlaceholder?: string;
};
export type PagingLocale = PaginationLocale & {
items?: string;
};
export type Locale = {
table?: GridTableLocale;
pager?: PagingLocale;
};
export type PaginationConfig = Omit<TablePaginationConfig, 'locale' | 'current'> & {
currentPage?: number;
locale?: PagingLocale;
};
export type AnyObject = Record<PropertyKey, any>;
export type IFormat = {
thousandSeparator?: string;
decimalSeparator?: string;
decimalScale?: number | undefined;
allowNegative?: boolean;
prefix?: string | undefined;
suffix?: string | undefined;
fixedDecimalScale?: boolean;
dateFormat?: string;
datetimeFormat?: string;
timeFormat?: string;
weekFormat?: string;
monthFormat?: string;
yearFormat?: string;
};
export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'treeSelect' | 'file';
export type ITextAlign = 'center' | 'left' | 'right';
export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
export type FilterOperator = 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal' | 'startswith' | 'endswith' | 'contains';
export type FixedType = 'left' | 'right' | boolean;
export type SelectMode = 'checkbox' | 'radio' | undefined;
type IGrid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
export interface FieldNames {
value?: string;
label?: string;
groupLabel?: string;
options?: string;
}
export interface CommandItem {
id: string;
type?: string;
visible?: boolean | ((record: any) => boolean);
title: string;
color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
tooltip?: string;
icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
template?: ReactNode | ReactElement | ((record: any) => ReactNode | ReactElement);
client?: boolean;
confirmDialog?: boolean;
}
export type ColumnTemplate<RecordType> = {
value: any;
rowData: RecordType;
index: number;
field: string;
};
export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
export type CellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
export interface SpanRect {
top: number;
bottom: number;
left: number;
right: number;
}
export type ColumnTable<RecordType = AnyObject> = {
/** Field key dùng để mapping dữ liệu */
field: string;
/** Text hiển thị ở header */
headerText?: string;
/** Field gốc trước khi transform */
fieldOriginal?: string;
/** Độ rộng column */
width?: number;
/** Độ rộng tối đa */
maxWidth?: number;
/** Độ rộng tối thiểu */
minWidth?: number;
/** Hiển thị trong popup chọn column */
showInColumnChoose?: boolean;
/** Kiểu dữ liệu của column */
type?: IColumnType;
/** Format hiển thị dữ liệu column type = number */
format?: IFormat | ((rowData: any) => IFormat);
/**
* @deprecated Please use `isSummary` instead.
* @since 1.7.25
*/
haveSum?: boolean;
/** Có tính tổng column type = number hay không
*
* Mặc định = true
*/
isSummary?: boolean;
/** Có tính tổng theo group */
sumGroup?: boolean;
/** Template custom cho ô summary */
summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
/**
* @deprecated Please use `allowSortering` instead.
* @since 1.7.25
*/
sorter?: boolean;
/** Cho phép filter
*
* Mặc định = true
*/
allowFiltering?: boolean;
/** Cho phép sort dữ liệu
*
* Mặc định = true
* */
allowSortering?: boolean;
/** Kiểu filter */
typeFilter?: TypeFilter;
/** Toán tử filter mặc định */
operator?: FilterOperator;
/** Ẩn phần chọn toán tử filter
* mặc đinh = false
*/
hideOperator?: boolean;
/** Custom Placeholder cho input/ Select/ Date.... filter */
placeholder?: string;
/** Data source cho select/filter */
source?: any[];
/** Hiển thị ô search trong select filter */
showFilterSearch?: boolean;
/**
* @deprecated Please use `visible` instead.
* @since 1.7.33
*/
hidden?: boolean;
/** Hiển thị / ẩn column
* mặc định = true
* */
visible?: boolean;
/** Tooltip cho header */
headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
/** Tên group header */
columnGroupText?: string;
/** Canh lề nội dung header */
headerTextAlign?: ITextAlign;
/** Template custom render header */
headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
/**
* @deprecated Please use `fixed` instead.
* @since 1.7.25
*/
fixedType?: FixedType;
/** Fixed column trái/phải */
fixed?: FixedType;
/**
* @deprecated Please use `wrapSettings` on Table instead.
* @since 1.7.34
*/
headerTextWrap?: boolean;
/** Hiển thị dấu ... khi text overflow */
ellipsis?: boolean;
/** Cho phép resize column
*
* Mặc định = true
*/
allowResizing?: boolean;
/**
* @deprecated Please use `textAlign` instead.
* @since 1.7.34
*/
align?: ITextAlign;
/** Canh lề nội dung cell */
textAlign?: ITextAlign;
/** Template custom render cell */
template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
/** Hiển thị tooltip cell */
showTooltip?: boolean;
/** Nội dung tooltip của cell */
tooltipDescription?: string | ((args: {
value: any;
rowData: RecordType;
}) => ReactNode | ReactElement);
/**
* @deprecated Please use `getCellProps` instead.
* @since 1.7.34
*/
onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
/**
* @deprecated Please use `headerCellProps` instead.
* @since 1.7.34
*/
onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
/**
* @deprecated Please use `getCellProps` instead.
* @since 1.7.34
*/
onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
/** Custom data retrieval method */
/** Custom method lấy value cell */
getValue?: (row: any, rowIndex: number) => any;
/** Custom method to get cell props */
getCellProps?: (value: any, row: any, rowIndex: number) => CellProps;
/** Props for the header cell */
headerCellProps?: CellProps;
/** Custom method to get cell SpanRect */
/** Custom merge cell */
getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
/** Kiểu editor khi edit cell */
editType?: EditType | ((rowData?: RecordType) => EditType);
/** Disable editor */
disable?: boolean | ((rowData: any) => boolean);
/** Cho phép edit */
editEnable?: boolean | ((rowData: any) => boolean);
/** Cho phép clear value khi edit */
isClearable?: boolean;
/** Ngày lớn nhất cho date picker */
maxDate?: any;
/** Ngày nhỏ nhất cho date picker */
minDate?: any;
/** Thời gian lớn nhất */
maxTime?: any;
/** Thời gian nhỏ nhất */
minTime?: any;
/** Giá trị số lớn nhất khi editType : number */
max?: number;
/** Giá trị số nhỏ nhất khi editType : number */
min?: number;
/** Config select editor */
editSelectSettings?: IEditSelectSettings;
/** Config form editor */
editFromSettings?: IEditFromSettings;
/** Cho phép select column */
allowSelection?: boolean | ((rowData: RecordType) => boolean);
/** Danh sách command/action trong column type = command */
commandItems?: CommandItem[];
/** Column con (multi header/group column) */
children?: ColumnTable<RecordType>[];
};
export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
export type IFTheme = {
theme?: 'dark' | 'light';
backgroundColor?: string;
cssVariables?: BaseTableCSSVariables;
};
export type TableProps<RecordType = AnyObject> = {
/** Unique id của table */
id?: string;
/** Theme hiển thị của table */
theme?: IFTheme;
/** Hiển thị border bao quanh toàn bộ table */
useOuterBorder?: boolean;
/** Hiển thị header */
showHeader?: boolean;
/** CSS class cho container table */
className?: string;
/** striped class odd/even row table
* mặc định : true
*/
striped?: boolean;
/** Tiêu đề table */
title?: ReactNode | ((data: RecordType) => ReactNode);
/** Tiêu đề khi table ở chế độ fullscreen */
fullScreenTitle?: ReactNode | (() => ReactNode);
/** Tên field dùng làm key duy nhất cho mỗi record */
rowKey?: string;
/** Nguồn dữ liệu */
dataSource: RecordType[];
/** Danh sách cột */
columns: ColumnsTable<RecordType>;
/** Hiển thị loading */
loading?: boolean;
/** Chiều cao table */
height?: number;
/** Chiều cao tối thiểu table */
minHeight?: number;
/** Format dữ liệu mặc định */
format?: IFormat;
/**
* Hàm translate
* useTranslation 'react-i18next'
* {t} = useTranslation()
* */
t?: any;
/** Language code: exp: vi || en || ja || zh .... */
lang?: string;
/** custom Locale cấu hình cho table */
locale?: Locale;
/** Cấu hình wrap text */
wrapSettings?: IWrapSettings;
/** Bật chế độ tải dữ liệu vô hạn */
infiniteScroll?: boolean;
/** Hàm gọi khi cuộn đến cuối */
next?: () => void;
/** Ngưỡng trigger load thêm dữ liệu */
onEndReachedThreshold?: number;
/** Cho phép group dữ liệu */
groupAble?: boolean;
/** Danh sách cột dùng để group */
groupColumns?: string[];
/** Cấu hình group */
groupSetting?: IGroupSetting;
/** Hiển thị toolbar */
showToolbar?: boolean;
/** Các action trên toolbar
*
* các Key mặc định:
* key: 'ADD' : Thêm dòng mới vào cuối
* key: 'DUPLICATE' : Nhân bản dòng được chọn (nếu có)
* key: 'INSERT_AFTER' : Chèn dòng mới sau dòng được chọn
* key: 'INSERT_BEFORE' : Chèn dòng mới trước dòng được chọn
* key: 'INSERT_CHILDREN' : Chèn dòng con vào dòng được chọn
* key: 'DELETE' : Xóa tất cả dòng
* key: 'DELETE_ROWS' : Xóa các dòng được chọn
*/
toolbarItems?: ToolbarItem[];
/** Chế độ hiển thị toolbar */
toolbarMode?: 'scroll';
/** Hiển thị chức năng chọn cột */
showColumnChoose?: boolean;
/** Callback khi thay đổi cột hiển thị */
onChooseColumns?: (props: IOnChooseColumns) => void;
/** Cho phép fullscreen */
fullScreen?: boolean;
/** Cấu hình phân trang, false để tắt */
pagination?: false | PaginationConfig;
/** Context Menu */
/** Danh sách menu chuột phải */
contextMenuItems?: ContextMenuItem[];
/**
* @deprecated
* @since 1.9.25
*/
showDefaultContext?: boolean;
/**
* Danh sách menu cần ẩn
* Có thể trả về động theo row hiện tại
*/
contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
/** func khi mở context menu */
contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
/** func khi click menu */
contextMenuClick?: (args: ContextInfo<RecordType>) => void;
/** Double click vào row */
recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
/** Click vào row */
recordClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
/** Filter */
/** Hiển thị filter nâng cao */
showAdvanceFilter?: boolean;
/** Cho phép filter */
allowFiltering?: boolean;
/** Filter mặc định */
defaultFilter?: FilterItem[];
/** func khi filter thay đổi */
onFilter?: (query: FilterItem[]) => void;
/** Nguồn dữ liệu filter */
dataSourceFilter?: SourceFilter[];
/**
* Custom popup filter cho từng cột
*/
onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
/** mặc định so sánh không dấu + lowercase
* ignoreAccents !== false => không khai báo hoặc ignoreAccents = true => so sánh không dấu
* ignoreAccents = false => so sánh có dấu + uperrcase sensitive
* **/
ignoreAccents?: boolean;
/** Cho phép sort */
allowSortering?: boolean;
/** Cho phép sort nhiều cột */
sortMultiple?: boolean;
/** func khi sort */
onSorter?: (args: Sorter[]) => void;
/** Sort mặc định */
defaultSorter?: Sorter[];
selectionSettings?: SelectionSettings;
/** Cấu hình chọn row */
rowSelection?: RowSelection<RecordType>;
/** func khi chọn row */
rowSelected?: (args: {
type: string;
rowData: RecordType;
selected: RecordType | RecordType[];
}) => void;
/** Cho phép resize độ rộng cột */
allowResizing?: boolean;
/** Hiển thị dòng tổng hợp */
summary?: boolean;
/** Dữ liệu footer */
footerDataSource?: any[];
/** Hiển thị text khi không có dữ liệu */
showEmptyText?: boolean;
/** Cấu hình command column */
commandSettings?: CommandSettings;
/**
* Func khi click command
* Ví dụ: Edit, Delete, Copy...
*/
commandClick?: (args: CommandClick<RecordType>) => void;
/** Callback khi expand/collapse row */
onExpandClick?: (args: {
expandedKeys: string[];
key: string;
rowData: any;
}) => void;
/** Cấu hình expandable row */
expandable?: ExpandableConfig<RecordType>;
/** custom Action area bên trái thanh toolbar */
actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
/** Nội dung hiển thị cuối table */
bottom?: ReactNode;
rowClassName?: string | RowClassName<RecordType>;
onRowStyles?: CSSProperties | ((data: RecordType) => CSSProperties);
onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
/** Bật virtual scroll */
useVirtual?: {
/** Virtual theo chiều ngang */
horizontal?: boolean;
/** Virtual theo chiều dọc */
vertical?: boolean;
};
/** Cho phép chỉnh sửa dữ liệu */
editAble?: boolean;
/** Callback khi data thay đổi */
onDataChange?: (data: RecordType[], args?: {
type: string;
row?: number;
}) => void;
/** Giá trị mặc định khi thêm mới */
defaultValue?: AnyObject | (() => AnyObject);
/** Callback xử lý paste dữ liệu */
onCellPaste?: ICellPasteModel<RecordType>;
/**
* Callback khi cell thay đổi giá trị
*
* handleCallback dùng để cập nhật giá trị sau khi xử lý custom
*/
onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
/** Callback click cell */
onCellClick?: (args: ICellClick, callback?: any) => void;
/** Xác định row có được edit hay không */
rowEditable?: (rowData: RecordType) => boolean;
/** Validate dữ liệu
*
* exp: validate= yup.object().shape({})
*/
validate?: any;
onBlur?: (data: RecordType[]) => void;
};
export type ExpandableConfig<RecordType> = {
expandedRowKeys?: readonly Key[];
defaultExpandedRowKeys?: readonly Key[];
expandedRowRender?: ExpandedRowRender<RecordType>;
columnTitle?: React.ReactNode;
expandRowByClick?: boolean;
expandIcon?: RenderExpandIcon<RecordType>;
onExpand?: (expanded: boolean, rowData: RecordType) => void;
onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
defaultExpandAllRows?: boolean;
expandIconColumnIndex?: number;
showExpandAll?: boolean;
showExpandColumn?: boolean;
expandedRowClassName?: string | RowClassName<RecordType>;
childrenColumnName?: string;
rowExpandable?: (rowData: RecordType) => boolean;
};
export type RenderExpandIcon<RecordType> = (props: RenderExpandIconProps<RecordType>) => React.ReactNode;
export interface RenderExpandIconProps<RecordType> {
prefixCls: string;
expanded: boolean;
rowData: RecordType;
expandable: boolean;
onExpand: TriggerEventHandler<RecordType>;
}
export type TriggerEventHandler<RecordType> = (rowData: RecordType, event: React.MouseEvent<HTMLElement>) => void;
export type RowClassName<RecordType> = (record: RecordType, index: number, indent: number) => string;
export type ExpandedRowRender<ValueType> = (record: ValueType, index: number, indent: number, expanded: boolean) => React.ReactNode;
export type CommandClick<T> = {
id: string;
rowId: string;
rowData: any;
index: number;
rows: T[];
};
export type IEditSelectSettings = {
fieldKey?: string;
options: any[] | ((rowData: any, field: string) => any[]);
/** get value form other field **/
fieldValue?: string;
/** get label form other field **/
fieldLabel?: string;
/** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
searchTextAsValue?: boolean;
inputKey?: string;
filterKey?: string[];
selectMode?: SelectMode;
getPasteValue?: (value: any) => Record<string, any> | null;
validateOption?: (rowData: any, field: string) => any[];
defaultOptions?: any[];
defaultValue?: (value: any, rowData: any) => {
value: any;
label: string;
[key: string]: string;
} | null;
formatOptionLabel?: (option: any) => ReactNode | ReactElement;
loadOptions?: (search: string, callback: (newOptions: any[]) => void, args?: LoadOptionsArgs) => void;
isMulti?: boolean;
closeMenuOnSelect?: boolean;
menuWidth?: number;
menuHeight?: number;
columns?: ColumnSelectTable[];
toolbarItems?: ToolbarItem[];
toolbarClick?: (props: ToolbarClick) => void;
toolbarHeight?: number;
hideSelectedOptions?: boolean;
showItems?: number;
isLengthSelected?: boolean;
fieldNames?: FieldNames;
filterOption?: boolean | FilterFunc<any>;
};
export type IEditFromSettings = {
fieldKey: string;
formOpen?: (props: IFormOpen) => void;
formClose?: (props: IFormOpen) => void;
formatLabel?: (value: any) => string;
menuWidth?: number;
menuHeight?: number;
labelWith?: number;
items: any[];
layout?: {
xl?: IGrid;
lg?: IGrid;
md?: IGrid;
sm?: IGrid;
xs?: IGrid;
};
defaultValues?: Record<string, any>;
schema?: any;
};
export type IFormOpen = {
value?: any;
setValue?: any;
getValues?: any;
reset?: any;
rowData?: any;
};
export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
export type ToolbarClick = {
item: any;
column: any;
};
export type ColumnSelectTable = {
field: string;
dataIndex?: string;
type?: IColumnType;
headerText?: string;
fixedType?: 'left' | 'right' | undefined;
width?: number | undefined;
minWidth?: number;
maxWidth?: number;
visible?: boolean;
textAlign?: ITextAlign;
headerTextAlign?: ITextAlign;
template?: (props: ITemplateColumn) => ReactNode | ReactElement;
headerTemplate?: any;
ellipsis?: boolean | undefined;
format?: IFormat;
tooltipDescription?: string | ((rowData: any) => string | ReactNode);
showTooltip?: boolean;
showTooltipHeader?: boolean;
};
export type ITemplateColumn = {
value: any;
column: any;
rowData: any;
field: number | string;
index: number;
};
export type RawValueType = string | number;
export type ToolbarItem = {
position?: 'Top' | 'Bottom';
align?: ITextAlign;
onClick?: (args: any) => void;
key?: React.Key;
value?: RawValueType;
label?: React.ReactNode;
template?: React.ReactNode | React.ReactElement | (() => React.ReactNode | React.ReactElement);
title?: React.ReactNode;
disabled?: boolean;
hasMenu?: boolean;
fixedRight?: boolean;
[key: string]: any;
};
export type LoadOptionsArgs = {
rowData?: any;
};
export type GroupTemplate = {
rowData: any;
value: any;
column: ColumnTable;
};
export type IGroupSetting = {
client?: boolean;
onGroup?: (props: IOnGroup) => void;
groupColumnSpan?: number;
hiddenColumnGroup?: boolean;
showHeaderColumn?: boolean;
showGroupIcon?: boolean;
unClearableLevel?: 1 | 2 | 3 | undefined;
sumGroup?: boolean;
groupTemplate?: React.ReactNode | React.ReactElement | ((args: GroupTemplate) => React.ReactNode | React.ReactElement);
};
type IOnGroup = {
columnGrouped: string[];
columns: ColumnsTable;
flattenColumns: ColumnsTable;
};
export type IOnChooseColumns = {
columns: ColumnsTable;
showColumns: ColumnsTable;
flattenColumns: ColumnsTable;
};
export type ContextMenuItem = ItemType;
export type CommandSettings = {
client?: boolean;
confirmDialog?: boolean;
};
export interface ICellPasteModel<RecordType = AnyObject> {
onPasted?: (args: IOnPastedProps, handleCallback: (callbackData: any[]) => void) => void;
dataChange?: (data: RecordType[]) => void;
getCallbackData?: (props: any) => void;
maxRowsPaste?: number;
}
export type IOnPastedProps = {
data: any[];
copyRows: any[];
pastedColumns: string[];
pasteData: any[];
type: 'onPaste' | 'onChange' | 'onCellPaste';
};
export type ICellClick = {
index: number;
indexCol?: number;
rowId: string | number;
type: 'Editing' | 'Default';
field: string;
cellValue: any;
rowData: any;
};
export type CellChangeArgs<T> = {
type: 'onPaste' | 'onChange' | 'onCellPaste';
value: any;
option: AnyObject;
rowData: T;
rowsData: T[];
indexRow: number;
rowId?: string;
field: string | undefined;
indexCol: any;
sumValue?: any[];
};
export type IWrapMode = 'Header' | 'Both' | 'Content';
export type IWrapSettings = {
wrapMode?: IWrapMode;
};
export type SelectionSettings<T = AnyObject> = {
mode?: 'checkbox' | 'radio';
type?: 'single' | 'multiple';
checkboxOnly?: boolean;
checkStrictly?: boolean;
checkedStrategy?: 'all' | 'parent' | 'child';
columnWidth?: number;
hideSelectAll?: boolean;
selectedRowKeys?: Key[];
defaultSelectedRowKeys?: Key[];
getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;
};
export type SelectionSelectFn<T = AnyObject> = (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
export type RowSelection<T> = {
preserveSelectedRowKeys?: boolean;
selectedRowKeys?: Key[];
defaultSelectedRowKeys?: Key[];
onChange?: (selectedRowKeys: Key[], selectedRows: T[], info: {
type: RowSelectMethod;
}, selectedRow: T) => void;
getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;
onSelect?: SelectionSelectFn<T>;
/** @deprecated This function is deprecated and should use `onChange` instead */
onSelectMultiple?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
/** @deprecated This function is deprecated and should use `onChange` instead */
onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
/** @deprecated This function is deprecated and should use `onChange` instead */
onSelectInvert?: (selectedRowKeys: Key[]) => void;
/** @deprecated This function is deprecated and should use `onChange` instead */
onSelectNone?: () => void;
fixed?: FixedType;
columnTitle?: React.ReactNode | ((checkboxNode: React.ReactNode) => React.ReactNode);
checkStrictly?: boolean;
checkboxOnly?: boolean;
arrowKey?: boolean;
};
export type RecordDoubleClickEventArgs<RecordType> = {
rowData: RecordType;
rowIndex: number | undefined;
e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
};
export type SourceFilter = {
key: string;
data: any[];
loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
};
export type ContextInfo<RecordType> = {
rowInfo: {
rowData: RecordType | null;
};
field: string | number;
event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
item: ItemType;
};
export type Presets = Required<ColorPickerProps>['presets'][number];
export type RangeState = {
rowRange: string[];
colRange: string[];
startRowIndex: number | undefined;
endRowIndex: number | undefined;
startColIndex: number | undefined;
endColIndex: number | undefined;
rowIds: string[];
colIds: string[];
};
export type Sorter = {
columnKey: string;
field: string;
order: 'ascend' | 'descend';
};
export type FilterItem = {
field: string;
key: string;
operator: FilterOperator;
predicate: 'and' | 'or';
value: any;
};
export {};