es-grid-template 0.1.1 → 0.1.2-2

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
+})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);

package/es/grid-component/InternalTable.js

@@ -56,6 +56,7 @@ const InternalTable = props => {
     onFilterClick,
     editAble,
     rowKey,
+    onDataChange,
     ...rest
   } = props;
   const locale = lang && lang === 'en' ? en : vi;
@@ -86,11 +87,9 @@ const InternalTable = props => {
     if (typeof rowKey === 'function') {
       return rowKey;
     }
-
     // @ts-ignore
     return record => record?.[rowKey];
   }, [rowKey]);
-  console.log('getRowKey', getRowKey);
   const handleSearch = (selectedKeys, confirm) => {
     confirm();
   };
@@ -231,32 +230,37 @@ const InternalTable = props => {
     return cols.map((col, index) => {
       const currentPath = [...parentPath, index];
       // @ts-ignore
-      if (!col?.dataIndex && !col.key) {
+      if (!col?.dataIndex && !col.key && !col.field) {
         return col;
       }
+      const transformedColumn = {
+        ...col,
+        dataIndex: col.field ?? col.dataIndex,
+        title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
+        ellipsis: col.ellipsis !== false,
+        align: col.textAlign ?? col.align,
+        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+      };
       if (col.children) {
         return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false,
+          ...transformedColumn,
           children: transformColumns(col.children, currentPath)
         };
       }
       if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
         return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false
+          ...transformedColumn
         };
       }
       return {
         ...getColumnSearchProps(col),
-        ...col,
-        dataIndex: col.field ?? col.dataIndex,
-        title: col.headerText ?? col.title,
-        ellipsis: col.ellipsis !== false,
-        align: col.textAlign ?? col.align,
-        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
+        ...transformedColumn,
+        // dataIndex: col.field ?? col.dataIndex,
+        // key: col.field ?? col.dataIndex ?? col.key,
+        // title: col.headerText ?? col.title,
+        // ellipsis: col.ellipsis !== false,
+        // align: col.textAlign ?? col.align,
+        // fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
         onFilter: (value, record) => {
           // @ts-ignore
           return record[col.field ?? col.dataIndex];
@@ -275,7 +279,11 @@ const InternalTable = props => {
   // console.log('mergedColumns', mergedColumns)
 
   const triggerChangeColumns = () => {};
-  const triggerChangeData = () => {};
+  const triggerChangeData = newData => {
+    setIsManualUpdate(true);
+    setData(newData);
+    onDataChange?.(newData);
+  };
   const TableComponent = editAble ? GridEdit : Grid;
   return /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
     tableRef: tableRef,

package/es/grid-component/TableGrid.js

@@ -97,6 +97,7 @@ const TableGrid = props => {
     t,
     lang,
     contextMenuOpen,
+    className,
     contextMenuItems: propContextMenuItems,
     contextMenuHidden,
     contextMenuClick,
@@ -280,7 +281,8 @@ const TableGrid = props => {
         });
       } else {
         // @ts-ignore
-        setMergedSelectedKeys([selectedRow[rowKey]]);
+        // setMergedSelectedKeys([selectedRow[rowKey]])
+
         rowSelected?.({
           selected: [selectedRow],
           type: 'rowSelected',
@@ -321,7 +323,7 @@ const TableGrid = props => {
     dataSource: dataSource
     // className={styles.customTable}
     ,
-    className: classNames('', {
+    className: classNames(className, {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,

package/es/grid-component/async-select/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
+import type { SelectProps } from "rc-master-ui/es/select";
+export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends SelectProps {
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    debounceTimeout?: number;
+    defaultOptions?: OptionType[];
+}
+export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/es/grid-component/async-select/index.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { Select } from "rc-master-ui";
+export function AsyncSelect({
+  loadOptions,
+  debounceTimeout = 500,
+  defaultOptions,
+  ...props
+}) {
+  const [options, setOptions] = useState(defaultOptions ?? []);
+  const debounceFetcher = useMemo(() => {
+    const fetchOptions = value => {
+      if (value.trim().length === 0) {
+        setOptions(defaultOptions ?? []);
+        return;
+      }
+      if (loadOptions) {
+        loadOptions(value, newOptions => {
+          setOptions(newOptions);
+        });
+      }
+    };
+    return debounce(fetchOptions, debounceTimeout);
+  }, [loadOptions, debounceTimeout]);
+  useEffect(() => {
+    setOptions(defaultOptions ?? []);
+  }, [defaultOptions]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    filterOption: loadOptions ? false : props?.filterOption,
+    onSearch: debounceFetcher,
+    onSelect: () => setOptions(defaultOptions ?? []),
+    options: options
+  }));
+}

package/es/grid-component/hooks/constant.d.ts

@@ -60,3 +60,13 @@ declare const SortOrder: {
     descend: string;
 };
 export default SortOrder;
+export declare const valueToBoolean: {
+    true: boolean;
+    false: boolean;
+    1: boolean;
+    0: boolean;
+};
+export declare const booleanToValue: {
+    true: number;
+    false: number;
+};

package/es/grid-component/hooks/constant.js

@@ -226,4 +226,14 @@ const SortOrder = {
    */
   descend: 'Descending'
 };
-export default SortOrder;
+export default SortOrder;
+export const valueToBoolean = {
+  true: true,
+  false: false,
+  1: true,
+  0: false
+};
+export const booleanToValue = {
+  true: 1,
+  false: 0
+};

package/es/grid-component/hooks/useColumns/index.js

@@ -7,6 +7,7 @@ import moment from "moment/moment";
 import React, { Fragment } from "react";
 import { DatePicker, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
+// import {ColorPicker} from "antd";
 const {
   RangePicker
 } = DatePicker;
@@ -62,13 +63,15 @@ export const getValueCell = (column, value, format) => {
     case 'boolean':
       return value ? 'true' : 'false';
     case 'color':
-      return /*#__PURE__*/React.createElement(Fragment, null, isColor(value) ? /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: 'w-100 h-100',
         style: {
-          backgroundColor: value,
-          border: '1px solid #f0f0f0'
+          backgroundColor: isColor(value) ? value : '#fff',
+          border: '1px solid #f0f0f0',
+          height: '100%',
+          minHeight: 20
         }
-      }) : '');
+      }));
     case 'checkbox':
       return /*#__PURE__*/React.createElement(Input, {
         checked: !!content,
@@ -163,8 +166,9 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
           height: '100%'
         },
         value: dateValue,
-        defaultValue: dateValue,
-        placeholder: column?.placeholder,
+        defaultValue: dateValue
+        // placeholder={t ? t(column?.placeholder) : column?.placeholder}
+        ,
         onChange: (date, dateString) => {
           const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
           setSelectedKeys(newDateValue ? [newDateValue] : []);
@@ -410,7 +414,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Input, {
-        placeholder: `Search ${column?.dataIndex}`,
+        placeholder: `Search`,
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

package/es/grid-component/hooks/utils.d.ts

@@ -33,3 +33,5 @@ export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left'
 export declare const isObjEmpty: (obj: any) => boolean;
 export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
 export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];
+export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
+export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];

package/es/grid-component/hooks/utils.js

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import moment from "moment/moment";
 import { v4 as uuidv4 } from 'uuid';
+import { presetPalettes } from "@ant-design/colors";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -317,4 +318,14 @@ export const updateData = (initData, rows, key) => {
   // Thêm các phần tử mới chưa có trong initialData
   const newRows = rows.filter(row => !initData.some(item => item[key] === row[key]));
   return [...updatedData, ...newRows];
+};
+export const parseBooleanToValue = (value, type) => {
+  return type === 'boolean' ? value : Number(value);
+};
+export const genPresets = (presets = presetPalettes) => {
+  return Object.entries(presets).map(([label, colors]) => ({
+    label,
+    colors,
+    key: label
+  }));
 };

package/es/grid-component/index.d.ts

@@ -1,4 +1,5 @@
 import InternalTable from './InternalTable';
-import type { ColumnsTable, TableProps, ColumnTable } from './type';
-export type { ColumnsTable, TableProps, ColumnTable };
+import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from './type';
+import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem };
 export default InternalTable;

package/es/grid-component/styles.scss

@@ -25,31 +25,22 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   min-width: 200px;
 }
 
-.react-resizable {
-  position: relative;
-  background-clip: padding-box;
-}
-
-.react-resizable-handle {
-  position: absolute;
-  //right: 10px;
-  right: 0px;
-  bottom: 0;
-  z-index: 1;
-  width: 5px;
-  height: 100%;
-  cursor: col-resize;
-  //transform: translateY(-50%);
-  &.none {
-    cursor: auto;
-    display: none;
-  }
-}
-
 // -------------- Table -------------
 
 .#{$prefix}-table-wrapper {
 
+  &.table-none-column-select {
+    .#{$prefix}-table-cell {
+      &.#{$prefix}-table-selection-column {
+        padding: 0 !important;
+        overflow: hidden !important;
+        border-inline-end: 0 !important;
+        //flex: 0 0 0 !important;
+        //width: 0 !important;
+      }
+    }
+  }
+
   .#{$prefix}-table-tbody-virtual {
     .#{$prefix}-table-cell {
       border-bottom: 1px solid $tableBorderColor;
@@ -302,10 +293,55 @@ $rowSelectedHoverBg: 'ui-rc' !default;
             }
           }
 
+          .ui-rc-checkbox-wrapper {
+            .ui-rc-checkbox {
+              background-color: red;
+            }
+            .ui-rc-checkbox-input {
+              &:focus-visible {
+                outline: none;
+              }
+            }
+          }
+
 
           .ant-input, .ant-picker{
             border-radius: 0;
           }
+
+          // color picker
+
+          .ant-color-picker-trigger{
+            height: 100%;
+            border-radius: 0;
+            .ant-color-picker-color-block {
+              height: 100%;
+              width: 100%;
+            }
+
+          }
+
+
+          // ------------ select  ---------------
+
+          .ui-rc-table-select-single .ui-rc-table-select-selector,
+          .ui-rc-select-single .ui-rc-select-selector {
+
+            border-radius: 0;
+
+          }
+
+          .ui-rc-table-select-single:not(.ui-rc-table-select-customize-input) {
+            .ui-rc-table-select-selector {
+              .ui-rc-table-select-selection-search-input {
+                height: auto;
+              }
+            }
+          }
+
+          // ------------ select  ---------------
+
+
         }
         &.cell-editable {
           padding: 0;
@@ -321,6 +357,9 @@ $rowSelectedHoverBg: 'ui-rc' !default;
         .ui-rc_content {
           padding: 5px 8px;
         }
+        .ui-rc_content:has(.ant-color-picker-trigger) {
+          padding: 1px 8px;
+        }
       }
     }
 
@@ -345,6 +384,15 @@ $rowSelectedHoverBg: 'ui-rc' !default;
     }
   }
 }
+//.ui-rc-checkbox-input {
+//  &:focus-visible {
+//    outline: none;
+//  }
+//}
+
+.ui-rc-checkbox .ui-rc-checkbox-input:focus-visible+.ui-rc-checkbox-inner {
+  outline: none;
+}
 
 .#{$prefix}-checkbox {
   &.#{$prefix}-checkbox-checked {
@@ -486,6 +534,8 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   }
 }
 
+
+
 //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
 //  border-inline-end: 1px solid $tableBorderColor;
 //}
@@ -530,16 +580,37 @@ $rowSelectedHoverBg: 'ui-rc' !default;
 }
 
 
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-title,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-footer,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-cell,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-thead > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > td,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > td {
-  padding: 5px 8px;
+.ui-rc-table-wrapper {
+  .ui-rc-table.ui-rc-table-small {
+    .ui-rc-table-title,
+    .ui-rc-table-footer,
+    .ui-rc-table-cell,
+    .ui-rc-table-thead > tr > th,
+    .ui-rc-table-tbody > tr > th,
+    .ui-rc-table-tbody > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td {
+      padding: 5px 8px;
+    }
+  }
 }
+.ui-rc-table-wrapper {
+  .ui-rc-table.ui-rc-table-small {
+    .ui-rc-table-cell {
+      &:has(.ant-color-picker-trigger) {
+        padding: 1px 8px;
+      }
+      .ant-color-picker-trigger{
+        width: 100%;
+        min-height: 20px;
+        .ant-color-picker-clear {
+          height: 20px;
+        }
+      }
+    }
+  }
+}
+
 
 
 //ui-rc-table-ping-right

package/es/grid-component/table/Grid.js

@@ -2,16 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useMemo } from 'react';
 import { GridStyle } from "../GridStyle";
 import TableGrid from "../TableGrid";
-import EditableCell from "../EditableCell";
 import Command from "../Command";
+import { renderContent } from "../hooks/useColumns";
 const Grid = props => {
   const {
     columns,
     height,
     tableRef,
-    className,
     components,
     style,
+    format,
     ...rest
   } = props;
   const transformColumns = React.useCallback(cols => {
@@ -58,7 +58,10 @@ const Grid = props => {
           }) : null))
         };
       }
-      return transformedColumn;
+      return {
+        ...transformedColumn,
+        render: (value, record, rowIndex) => renderContent(column, value, record, rowIndex, format)
+      };
     });
   }, []);
   const mergedColumns = useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
@@ -70,10 +73,7 @@ const Grid = props => {
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     tableRef: tableRef,
     components: {
-      ...components,
-      body: {
-        cell: EditableCell
-      }
+      ...components
     },
     columns: mergedColumns,
     style: {

package/es/grid-component/table/GridEdit.d.ts

@@ -6,7 +6,7 @@ import type { GetRowKey } from "../type";
 type Props<RecordType> = TableEditProps<RecordType> & {
     tableRef: any;
     triggerChangeColumns?: () => void;
-    triggerChangeData?: () => void;
+    triggerChangeData?: (newData: RecordType[], type: string) => void;
     getRowKey: GetRowKey<RecordType>;
 };
 declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;

package/es/grid-component/table/GridEdit.js

@@ -30,11 +30,13 @@ const GridEdit = props => {
     selectionSettings,
     height,
     format,
-    onDataChange,
+    // onDataChange,
+    triggerChangeData,
     onCellPaste,
     onCellChange,
     style,
     getRowKey,
+    className,
     ...rest
   } = props;
 
@@ -348,6 +350,7 @@ const GridEdit = props => {
           ...item,
           ...row
         });
+        triggerChangeData?.(newData, 'onChange');
 
         // trigger DataChange
         // setData(newData);
@@ -369,14 +372,16 @@ const GridEdit = props => {
       type,
       newState,
       prevState,
-      option
+      option,
+      field
     } = args;
 
     // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
-    const newRecord = getValues();
+    // const newRecord = getValues()
+
     if (type === 'enter') {
       console.log('aaaaaa enter');
     }
@@ -390,20 +395,14 @@ const GridEdit = props => {
         const callbackRecord = callbackData;
         Object.entries(callbackRecord).forEach(([name, value]) => {
           setValue(name, value);
-
-          // if (listObjectDate.includes(name) && value) {
-          //   setValue(name, new Date(value))
-          // }  else {
-          //   setValue(name, value)
-          // }
         });
-        onSubmit(newRecord);
+        onSubmit(callbackRecord);
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
           console.log('onCellChange Callback');
           onCellChange({
-            field: '',
+            field,
             indexCol: 1,
             type: 'onChange',
             value: newState,
@@ -415,11 +414,9 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
-          // const aaaa  = updateData(dataSource, newRecord, rowKey as any)
-
           console.log('onCellChange');
           onCellChange({
-            field: '',
+            field,
             indexCol: 1,
             type: 'onChange',
             option,
@@ -693,6 +690,14 @@ const GridEdit = props => {
               handleEdit(record, col, col.editType, event);
             }
           },
+          // onMouseDown: (event) => {
+          //   handleMouseDown(rowIndex, colIndex, event)
+          // },
+          //
+          // onMouseEnter: () => {
+          //   handleMouseEnter(rowIndex, colIndex)
+          // },
+
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
@@ -727,7 +732,7 @@ const GridEdit = props => {
             onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
-          }, renderContent(col, value, record, rowIndex)));
+          }, renderContent(col, value, record, rowIndex, format)));
         }
       };
     });
@@ -763,7 +768,7 @@ const GridEdit = props => {
         cell: EditableCell
       }
     },
-    className: 'grid-editable',
+    className: classNames(className, 'grid-editable'),
     rowKey: rowKey,
     columns: resizableColumns,
     showSorterTooltip: {

package/es/grid-component/type.d.ts

@@ -6,11 +6,13 @@ import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/in
 import type { ToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
+import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
+export type ContextMenuItem = ItemType & {};
 export type ITemplateColumn = {
     value: any;
     column: any;
@@ -124,7 +126,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     format?: IFormat;
     t?: any;
     lang?: string;
-    contextMenuItems?: any[];
+    contextMenuItems?: ContextMenuItem[];
     contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
     contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
@@ -153,7 +155,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         selected: RecordType | RecordType[];
     }) => void;
     dataSourceFilter?: SourceFilter[];
-    onFilterClick?: (column: ColumnType<RecordType>, callback: (key: string, data: any) => void) => void;
+    onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
     loading?: boolean;
     allowResizing?: boolean;
     onDataChange?: (data: RecordType[]) => void;
@@ -184,7 +186,7 @@ export type CellChangeArgs<T> = {
     rowsData: T[];
     indexRow: number;
     rowId?: string;
-    field: string;
+    field: string | undefined;
     indexCol: any;
     sumValue?: any[];
 };
@@ -238,3 +240,4 @@ export type IFormat = {
     yearFormat?: string;
 };
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
+export type Presets = Required<ColorPickerProps>['presets'][number];