es-grid-template 1.9.58 → 1.9.59

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

@@ -1,9 +1,9 @@
 import type * as React from "react";
 import dayjs from "dayjs";
-import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
+import type { TypeFilter } from "rc-master-ui";
 import type { Key } from "react";
 import type { ColumnsTable } from "./../index";
-import type { AnyObject, ColumnTable, GetRowKey, IFormat } from "../type";
+import type { AnyObject, ColumnTable, EditType, GetRowKey, IColumnType, IFormat } from "../type";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;

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

@@ -1,18 +1,10 @@
 import dayjs from "dayjs";
-// import type {ColumnTable, GetRowKey, IFormat, Presets} from "./../ type"
 import moment from "moment/moment";
-// import type {SelectionSettings} from "../type"
-// import type {AnyObject} from "../type"
 import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
-// import {Table} from "rc-master-ui"
-// import {flatColumns2} from "./columns"
-// import {SELECTION_COLUMN} from "./useColumns"
-
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return uuidv4();
   }
 };

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

@@ -94,10 +94,10 @@ export type IFormat = {
     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 EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'link' | '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 IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | 'link' | 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;
@@ -241,6 +241,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     textAlign?: ITextAlign;
     /** Template custom render cell */
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
+    linkTemplate?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     /** Hiển thị tooltip cell */
     showTooltip?: boolean;
     /** Nội dung tooltip của cell */
@@ -811,7 +812,7 @@ export type RangeState = {
     endColIndex: number | undefined;
     rowIds: string[];
     colIds: string[];
-    type?: string;
+    type?: any;
 };
 export type Sorter = {
     columnKey: string;

package/es/group-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
     dataIndex: string;

package/es/group-component/hook/utils.d.ts

@@ -189,15 +189,16 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
     template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 import type { Column } from "@tanstack/react-table";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;

package/es/table-component/body/EditableCell.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
 import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
 import { Divider, Row, Col, Button } from "rc-master-ui";
+// import type { EditType } from "rc-master-ui"
+
 import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones, getDateValueType } from "../hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
@@ -483,7 +485,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;
@@ -629,7 +631,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;
@@ -773,7 +775,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;

package/es/table-component/body/TableBodyCell.js

@@ -6,6 +6,7 @@ import classNames from "classnames";
 import React from "react";
 import { TableContext } from "../useContext";
 import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
+import { Dropdown } from "rc-master-ui";
 const renderCellIndex = props => {
   const {
     parrents,
@@ -213,6 +214,18 @@ const TableBodyCell = props => {
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
   const cellFormat = getFormat(colFormat, format);
   const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
+  const cellContent = columnMeta?.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.template : fomatedValue;
+  const linkContent = columnMeta?.linkTemplate ? typeof columnMeta.linkTemplate === 'function' ? columnMeta.linkTemplate({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.linkTemplate : cellContent;
   const valueCellString = getValueCellString(columnMeta, cellValue, record, rowIndex, colIndex, format);
   const tooltipContent = React.useMemo(() => {
     if (isOpenTooltip === false) {
@@ -375,7 +388,7 @@ const TableBodyCell = props => {
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": tooltipContent
+    "data-tooltip-content": columnMeta?.type === 'link' ? '' : tooltipContent
     // data-tooltip-delay-show={500}
     ,
 
@@ -389,7 +402,8 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta?.type === 'number',
+      [`${prefix}-grid-cell-link`]: columnMeta?.type === 'link'
     }),
     style: {
       ...cellStyles,
@@ -487,6 +501,30 @@ const TableBodyCell = props => {
         }
       }
     }
+  }, cellContent && columnMeta?.type === 'link' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ['hover'],
+    menu: {
+      items: [{
+        key: '1',
+        label: ''
+      }]
+    },
+    dropdownRender: () => /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '1rem',
+        backgroundColor: '#ffffff',
+        borderRadius: 6,
+        boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+      }
+    }, linkContent && typeof linkContent === 'string' ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: linkContent,
+      target: "_blank",
+      rel: "noreferrer"
+    }, linkContent)) : linkContent ? linkContent : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: typeof cellContent === 'string' ? cellContent : '',
+      target: "_blank",
+      rel: "noreferrer"
+    }, cellContent)))
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {})
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -535,11 +573,42 @@ const TableBodyCell = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
-    field: columnMeta.field,
-    index: cell.row.index,
-    rowData: cell.row.original,
-    value: cell.getValue()
-  }) : columnMeta.template : fomatedValue));
+  }))), cellContent))) : /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {})
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), cellContent));
 };
 export default TableBodyCell;

package/es/table-component/body/TableBodyCellEdit.js

@@ -8,6 +8,7 @@ import { TableContext } from "../useContext";
 import EditableCell from "./EditableCell";
 import { nonActionColumn } from "../../grid-component/hooks";
 import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
+import { Dropdown } from "rc-master-ui";
 const renderCellIndex = props => {
   const {
     parrents,
@@ -239,13 +240,6 @@ const TableBodyCellEdit = props => {
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
-
-  // const tooltipContent = (isOpenTooltip === false)
-  //   ? ''
-  //   : columnMeta?.tooltipDescription
-  //     ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
-  //     : cell.getValue()
-
   const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -1273,6 +1267,18 @@ const TableBodyCellEdit = props => {
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
   const cellFormat = getFormat(colFormat, format);
   const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
+  const cellContent = columnMeta?.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.template : fomatedValue;
+  const linkContent = columnMeta?.linkTemplate ? typeof columnMeta.linkTemplate === 'function' ? columnMeta.linkTemplate({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.linkTemplate : cellContent;
   return /*#__PURE__*/React.createElement("div", {
     key: cell.id,
     ref: el => {
@@ -1287,7 +1293,7 @@ const TableBodyCellEdit = props => {
     "data-row-key": cell.row.id,
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-delay-show": 500,
-    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : tooltipContent,
+    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : columnMeta?.type === 'link' ? '' : tooltipContent,
     className: classNames(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1306,7 +1312,8 @@ const TableBodyCellEdit = props => {
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta?.type === 'number',
+      [`${prefix}-grid-cell-link`]: columnMeta?.type === 'link'
     }),
     style: {
       display: 'flex',
@@ -1406,8 +1413,31 @@ const TableBodyCellEdit = props => {
     record: record,
     visibleColumns: visibleColumns,
     handleNextCell: handleNextCell
-    // rowKey={rowKey}
-  }) : /*#__PURE__*/React.createElement("div", {
+  }) : columnMeta?.type === 'link' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ['hover'],
+    menu: {
+      items: [{
+        key: '1',
+        label: ''
+      }]
+    },
+    dropdownRender: () => /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '1rem',
+        backgroundColor: '#ffffff',
+        borderRadius: 6,
+        boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+      }
+    }, linkContent && typeof linkContent === 'string' ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: linkContent,
+      target: "_blank",
+      rel: "noreferrer"
+    }, linkContent)) : linkContent ? linkContent : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: typeof cellContent === 'string' ? cellContent : '',
+      target: "_blank",
+      rel: "noreferrer"
+    }, cellContent)))
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {
       'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
     })
@@ -1447,17 +1477,57 @@ const TableBodyCellEdit = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
-    field: columnMeta.field,
-    index: cell.row.index,
-    rowData: cell.row.original,
-    value: cell.getValue()
-  }) : columnMeta.template : fomatedValue, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+    className: 'caret-down',
+    onClick: e => {
+      handleEdit(e);
+    }
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {
+      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
+    })
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsExpandClick(true);
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
     className: 'caret-down',
     onClick: e => {
       handleEdit(e);
     }
-  })), !isSelecting && !isEditing && rowRange &&
+  }))), !isSelecting && !isEditing && rowRange &&
   // rowNumber === rangeState?.endRowIndex &&
   cell.row.id === rowRange[rowRange?.length - 1] && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
     className: 'dragging-point',

package/es/table-component/style.js

@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-link{text-decoration:underline;color:#336cc9;&:has(textarea){text-decoration:none;}}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -1,9 +1,9 @@
 import type * as React from "react";
 import dayjs from "dayjs";
-import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
+import type { TypeFilter } from "rc-master-ui";
 import type { Key } from "react";
 import type { ColumnsTable } from "./../index";
-import type { AnyObject, ColumnTable, GetRowKey, IFormat } from "../type";
+import type { AnyObject, ColumnTable, EditType, GetRowKey, IColumnType, IFormat } from "../type";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;

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

@@ -48,19 +48,9 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
 var _colors = require("@ant-design/colors");
-// import type {ColumnTable, GetRowKey, IFormat, Presets} from "./../ type"
-
-// import type {SelectionSettings} from "../type"
-// import type {AnyObject} from "../type"
-
-// import {Table} from "rc-master-ui"
-// import {flatColumns2} from "./columns"
-// import {SELECTION_COLUMN} from "./useColumns"
-
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return (0, _uuid.v4)();
   }
 };

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

@@ -94,10 +94,10 @@ export type IFormat = {
     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 EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'link' | '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 IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | 'link' | 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;
@@ -241,6 +241,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     textAlign?: ITextAlign;
     /** Template custom render cell */
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
+    linkTemplate?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     /** Hiển thị tooltip cell */
     showTooltip?: boolean;
     /** Nội dung tooltip của cell */
@@ -811,7 +812,7 @@ export type RangeState = {
     endColIndex: number | undefined;
     rowIds: string[];
     colIds: string[];
-    type?: string;
+    type?: any;
 };
 export type Sorter = {
     columnKey: string;

package/lib/group-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
     dataIndex: string;

package/lib/group-component/hook/utils.d.ts

@@ -189,6 +189,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
     template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;

package/lib/table-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 import type { Column } from "@tanstack/react-table";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;

package/lib/table-component/body/EditableCell.js

@@ -23,6 +23,8 @@ var _locale = require("rc-master-ui/es/locale");
 var _hooks = require("../../grid-component/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import type { EditType } from "rc-master-ui"
+
 const {
   SHOW_PARENT
 } = _rcMasterUi.TreeSelect;
@@ -490,7 +492,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !(0, _utils.isNullOrUndefined)(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;
@@ -636,7 +638,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !(0, _utils.isNullOrUndefined)(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;
@@ -780,7 +782,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !(0, _utils.isNullOrUndefined)(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;

package/lib/table-component/body/TableBodyCell.js

@@ -13,6 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _useColumns = require("../hook/useColumns");
+var _rcMasterUi = require("rc-master-ui");
 const renderCellIndex = props => {
   const {
     parrents,
@@ -220,6 +221,18 @@ const TableBodyCell = props => {
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
   const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
+  const cellContent = columnMeta?.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.template : fomatedValue;
+  const linkContent = columnMeta?.linkTemplate ? typeof columnMeta.linkTemplate === 'function' ? columnMeta.linkTemplate({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.linkTemplate : cellContent;
   const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, cellValue, record, rowIndex, colIndex, format);
   const tooltipContent = _react.default.useMemo(() => {
     if (isOpenTooltip === false) {
@@ -382,7 +395,7 @@ const TableBodyCell = props => {
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": tooltipContent
+    "data-tooltip-content": columnMeta?.type === 'link' ? '' : tooltipContent
     // data-tooltip-delay-show={500}
     ,
 
@@ -396,7 +409,8 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta?.type === 'number',
+      [`${prefix}-grid-cell-link`]: columnMeta?.type === 'link'
     }),
     style: {
       ...cellStyles,
@@ -494,6 +508,30 @@ const TableBodyCell = props => {
         }
       }
     }
+  }, cellContent && columnMeta?.type === 'link' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, {
+    trigger: ['hover'],
+    menu: {
+      items: [{
+        key: '1',
+        label: ''
+      }]
+    },
+    dropdownRender: () => /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '1rem',
+        backgroundColor: '#ffffff',
+        borderRadius: 6,
+        boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+      }
+    }, linkContent && typeof linkContent === 'string' ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("a", {
+      href: linkContent,
+      target: "_blank",
+      rel: "noreferrer"
+    }, linkContent)) : linkContent ? linkContent : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("a", {
+      href: typeof cellContent === 'string' ? cellContent : '',
+      target: "_blank",
+      rel: "noreferrer"
+    }, cellContent)))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc_cell-content', {})
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
@@ -542,11 +580,42 @@ const TableBodyCell = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
-    field: columnMeta.field,
-    index: cell.row.index,
-    rowData: cell.row.original,
-    value: cell.getValue()
-  }) : columnMeta.template : fomatedValue));
+  }))), cellContent))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('ui-rc_cell-content', {})
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), cellContent));
 };
 var _default = exports.default = TableBodyCell;

package/lib/table-component/body/TableBodyCellEdit.js

@@ -15,6 +15,7 @@ var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
 var _hooks = require("../../grid-component/hooks");
 var _useColumns = require("../hook/useColumns");
+var _rcMasterUi = require("rc-master-ui");
 const renderCellIndex = props => {
   const {
     parrents,
@@ -246,13 +247,6 @@ const TableBodyCellEdit = props => {
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
-
-  // const tooltipContent = (isOpenTooltip === false)
-  //   ? ''
-  //   : columnMeta?.tooltipDescription
-  //     ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
-  //     : cell.getValue()
-
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -1280,6 +1274,18 @@ const TableBodyCellEdit = props => {
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
   const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
+  const cellContent = columnMeta?.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.template : fomatedValue;
+  const linkContent = columnMeta?.linkTemplate ? typeof columnMeta.linkTemplate === 'function' ? columnMeta.linkTemplate({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.linkTemplate : cellContent;
   return /*#__PURE__*/_react.default.createElement("div", {
     key: cell.id,
     ref: el => {
@@ -1294,7 +1300,7 @@ const TableBodyCellEdit = props => {
     "data-row-key": cell.row.id,
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-delay-show": 500,
-    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : tooltipContent,
+    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : columnMeta?.type === 'link' ? '' : tooltipContent,
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1313,7 +1319,8 @@ const TableBodyCellEdit = props => {
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta?.type === 'number',
+      [`${prefix}-grid-cell-link`]: columnMeta?.type === 'link'
     }),
     style: {
       display: 'flex',
@@ -1413,8 +1420,31 @@ const TableBodyCellEdit = props => {
     record: record,
     visibleColumns: visibleColumns,
     handleNextCell: handleNextCell
-    // rowKey={rowKey}
-  }) : /*#__PURE__*/_react.default.createElement("div", {
+  }) : columnMeta?.type === 'link' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, {
+    trigger: ['hover'],
+    menu: {
+      items: [{
+        key: '1',
+        label: ''
+      }]
+    },
+    dropdownRender: () => /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '1rem',
+        backgroundColor: '#ffffff',
+        borderRadius: 6,
+        boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+      }
+    }, linkContent && typeof linkContent === 'string' ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("a", {
+      href: linkContent,
+      target: "_blank",
+      rel: "noreferrer"
+    }, linkContent)) : linkContent ? linkContent : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("a", {
+      href: typeof cellContent === 'string' ? cellContent : '',
+      target: "_blank",
+      rel: "noreferrer"
+    }, cellContent)))
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc_cell-content', {
       'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes((0, _utils.getEditType)(columnMeta, record))
     })
@@ -1454,17 +1484,57 @@ const TableBodyCellEdit = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
-    field: columnMeta.field,
-    index: cell.row.index,
-    rowData: cell.row.original,
-    value: cell.getValue()
-  }) : columnMeta.template : fomatedValue, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/_react.default.createElement("span", {
+  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'caret-down',
+    onClick: e => {
+      handleEdit(e);
+    }
+  })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('ui-rc_cell-content', {
+      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes((0, _utils.getEditType)(columnMeta, record))
+    })
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsExpandClick(true);
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/_react.default.createElement("span", {
     className: 'caret-down',
     onClick: e => {
       handleEdit(e);
     }
-  })), !isSelecting && !isEditing && rowRange &&
+  }))), !isSelecting && !isEditing && rowRange &&
   // rowNumber === rangeState?.endRowIndex &&
   cell.row.id === rowRange[rowRange?.length - 1] && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
     className: 'dragging-point',

package/lib/table-component/style.js

@@ -55,4 +55,4 @@ const colorDark = '#e6e4f3e6 ';
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-link{text-decoration:underline;color:#336cc9;&:has(textarea){text-decoration:none;}}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.58",
+  "version": "1.9.59",
   "description": "es-grid-template",
   "keywords": [
     "react",