es-grid-template 1.9.26 → 1.9.28

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

@@ -491,7 +491,10 @@ export type TableProps<RecordType = AnyObject> = {
     /** Cho phép chỉnh sửa dữ liệu */
     editAble?: boolean;
     /** Callback khi data thay đổi */
-    onDataChange?: (data: RecordType[]) => void;
+    onDataChange?: (data: RecordType[], args?: {
+        type: string;
+        row?: number;
+    }) => void;
     /** Giá trị mặc định khi thêm mới */
     defaultValue?: AnyObject | (() => AnyObject);
     /** Callback xử lý paste dữ liệu */

package/es/table-component/InternalTable.js

@@ -167,7 +167,37 @@ const InternalTable = props => {
     }
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
-    locale: language
+    locale: language,
+    theme: {
+      token: {
+        colorPrimary: '#eb4619',
+        colorLink: '#eb4619'
+      },
+      components: {
+        Input: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+        },
+        Button: {
+          colorLink: '#eb4619',
+          colorLinkHover: '#eb4619'
+        },
+        Select: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+          // colorPrimary: '#eb4619',
+          // colorBgBase: 'red'
+        },
+        DatePicker: {
+          colorPrimary: '#eb4619',
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+        },
+        Pagination: {
+          fontSize: 12
+        }
+      }
+    }
   }, /*#__PURE__*/React.createElement(CustomProvider, {
     locale: languages
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {

package/es/table-component/TableContainerEdit.js

@@ -8,7 +8,9 @@ sumSize,
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useForm } from 'react-hook-form';
-import { Button, Modal, Typography, Dropdown } from "antd";
+import { Modal, Typography } from "antd";
+import Button from "rc-master-ui/es/button";
+import Dropdown from "rc-master-ui/es/dropdown";
 import Pagination from "rc-master-ui/es/pagination";
 import { numericFormatter, removeNumericFormat } from "react-numeric-component";
 import { TableContext } from "./useContext";
@@ -76,19 +78,15 @@ const TableContainerEdit = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
-    // triggerFilter,
     selectionSettings,
     isSelectionChange,
     setIsSelectionChange,
-    // onContextMenu,
     contextMenuItems,
     setSorterChange,
     setFilterChange,
     defaultFilter,
     onCellPaste,
-    // triggerPaste,
     validate,
-    // triggerChangeData,
     onCellChange,
     onDataChange,
     defaultValue,
@@ -286,14 +284,16 @@ const TableContainerEdit = props => {
 
     copy(tsv).then(() => {}).catch(() => {});
   }, [startCell, endCell, table]);
-  const triggerChangeData = React.useCallback(newData => {
-    onDataChange?.(newData);
+  const triggerChangeData = React.useCallback((newData, args) => {
+    onDataChange?.(newData, args);
   }, [onDataChange, dataSource]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = updateOrInsert(flattenArray([...originData]), flattenArray([...callbackData]));
       const rs = unFlattenData(rsFilterData);
-      triggerChangeData(rs);
+      triggerChangeData(rs, {
+        type: 'OnPaste'
+      });
     };
     if (onCellPaste && onCellPaste.onPasted) {
       if (onCellPaste.onPasted.length > 1) {
@@ -314,10 +314,14 @@ const TableContainerEdit = props => {
           data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
-        triggerChangeData(newData);
+        triggerChangeData(newData, {
+          type: 'OnPaste'
+        });
       }
     } else {
-      triggerChangeData(newData);
+      triggerChangeData(newData, {
+        type: 'OnPaste'
+      });
     }
   }, [onCellPaste, originData, triggerChangeData]);
   const handlePasted = React.useCallback(pasteData => {
@@ -745,7 +749,9 @@ const TableContainerEdit = props => {
       const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = updateArrayByKey(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -765,7 +771,9 @@ const TableContainerEdit = props => {
       const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = updateArrayByKey(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -965,7 +973,9 @@ const TableContainerEdit = props => {
     const rs = updateOrInsert(originData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs);
+    triggerChangeData?.(rs, {
+      type: 'DUPLICATE'
+    });
   }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
 
   // thêm n dòng bên trên
@@ -1001,7 +1011,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = findItemByKey(newData, rowKey, record.parentId);
@@ -1027,7 +1040,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       }
     }
   }, [defaultValue, focusedCell, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
@@ -1065,7 +1081,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index + 1, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = findItemByKey(newData, rowKey, record.parentId);
@@ -1094,7 +1113,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       }
     }
   }, [defaultValue, table, focusedCell?.rowId, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
@@ -1132,7 +1154,9 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
       setMergedFilterKeys?.(rs);
       const newDataSource = updateArrayByKey(newData, newElement, rowKey);
-      triggerChangeData?.(newDataSource);
+      triggerChangeData?.(newDataSource, {
+        type: 'INSERT_CHILDREN'
+      });
     }
     setTimeout(() => {
       const row = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId);
@@ -1175,12 +1199,18 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([...newDaa]);
+            triggerChangeData?.([...newDaa], {
+              type: 'DELETE_ROWS',
+              row: rowsFocus.length
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
         // không hiện dialog  
-        triggerChangeData?.([...newDaa]);
+        triggerChangeData?.([...newDaa], {
+          type: 'DELETE_ROWS',
+          row: rowsFocus.length
+        });
       }
     }
   }, [commandSettings, originData, rowKey, rowsFocus, t, triggerChangeData]);
@@ -1206,11 +1236,15 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([]);
+            triggerChangeData?.([], {
+              type: 'DELETE'
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
-        triggerChangeData?.([]);
+        triggerChangeData?.([], {
+          type: 'DELETE'
+        });
       }
     }
   }, [commandSettings, t, triggerChangeData]);
@@ -1256,7 +1290,9 @@ const TableContainerEdit = props => {
         return updatedRow;
       });
       const newData = unFlattenData(rs);
-      triggerChangeData?.([...newData]);
+      triggerChangeData?.([...newData], {
+        type: 'DELETE_CONTENT'
+      });
     }
   };
   const toolbarItemsBottom = React.useMemo(() => {

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

@@ -176,8 +176,53 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
-          minDate: minDate,
-          onChange: (newDate, dateString) => {
+          minDate: minDate
+          // mode="date"
+
+          // onChange={(newDate, dateString) => {
+
+          //   const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+
+          //   onChange(newDateValue)
+
+          //   setTimeout(() => {
+          //     // @ts-ignore
+          //     dateTimePickerRef.current?.focus()
+          //   }, 0)
+
+          // }}
+
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   const itemState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   const newState = itemState
+
+          //   if (prevState !== newState) {
+          //     handleCellChange?.({
+          //       key: key as any,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: newState,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+          ,
+
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId,
+          needConfirm: false,
+          onCalendarChange: (newDate, dateString) => {
             const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
             setTimeout(() => {
@@ -185,32 +230,28 @@ const EditableCell = props => {
               dateTimePickerRef.current?.focus();
             }, 0);
           },
-          onBlur: () => {
-            const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = itemState;
-            if (prevState !== newState) {
-              handleCellChange?.({
-                key: key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState,
-                option: newState,
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
+          onOpenChange: open => {
+            if (!open) {
+              const formState = getValues();
+              const itemState = getValues(dataIndex);
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = itemState;
+              if (prevState !== newState) {
+                handleCellChange?.({
+                  key: key,
+                  field: column.field ?? column.field,
+                  record: formState,
+                  prevState,
+                  newState,
+                  option: newState,
+                  indexCol,
+                  indexRow,
+                  type: 'blur'
+                });
+              }
             }
-          },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
-          "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          }
         });
       case 'month':
       case 'quarter':

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

@@ -30,7 +30,7 @@ const TableBody = ({
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
-    estimateSize: () => 36,
+    estimateSize: () => 32,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,
     //measure dynamic row height, except in firefox because it measures table border height incorrectly

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

@@ -339,7 +339,7 @@ const TableBodyCell = props => {
       style: {
         ...cellStyles,
         display: 'flex',
-        minHeight: 36,
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
@@ -390,9 +390,10 @@ const TableBodyCell = props => {
     style: {
       ...cellStyles,
       display: 'flex',
+      alignItems: 'center',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
-      minHeight: 36,
+      minHeight: 32,
       ...getCommonPinningStyles(cell.column)
     },
     onMouseEnter: e => {
@@ -456,6 +457,9 @@ const TableBodyCell = props => {
       }
     },
     onClick: e => {
+      if (e.detail === 2) {
+        return;
+      }
       recordClick?.({
         e,
         rowData: record,

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

@@ -536,7 +536,8 @@ const TableBodyCellEdit = props => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
-    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+    // handleCellClick?.(rowNumber, record, columnMeta as any, record[rowKey], record[columnMeta.field ?? ''])
+
     reset?.();
 
     // const formattedRecord = { ...record };
@@ -897,7 +898,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        height: '32px',
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -986,7 +987,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        height: '32px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1012,7 +1013,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        height: '32px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1150,11 +1151,12 @@ const TableBodyCellEdit = props => {
     }),
     style: {
       display: 'flex',
+      alignItems: 'center',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '36px',
+      height: '32px',
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

package/es/table-component/footer/TableFooterRow.js

@@ -16,7 +16,7 @@ const TableFooterRow = ({
       ...rowStyles,
       display: "grid",
       width: "100%",
-      height: 37,
+      height: 32,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     },
     className: "ui-rc-grid-footer-row"

package/es/table-component/header/TableHeadCell2.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
-import { Button, Space } from 'antd';
+import { Space } from 'antd';
+import Button from 'rc-master-ui/es/button';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';

package/es/table-component/style.js

@@ -1,19 +1,22 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 // const prefix = "ui-rc";
 // const antdPrefix = "ant";
-// const fontFamily = "Montserrat, Helvetica, Arial, serif ";
+const fontFamily = 'Montserrat, Helvetica, Arial, serif ';
 // const borderRadius = "6px";
 
 // const boxShadowColor = "rgba(220, 0, 0, 0.09)";
-const color = "#000000de";
-const BgColor = "#ffffff ";
+const color = '#000000';
+const fontSize = '12px';
+const fwBody = '500';
+const fwHeader = '600';
+const BgColor = '#ffffff ';
 
 // const primary = "#eb4619";
 
 // const rowHoverBg = "#FBDED6";
 // const rowSelectedBg = "#FEF2EF";
 
-const tableBorderColor = "#e0e0e0";
+const tableBorderColor = '#e0e0e0';
 
 // const borderSelectedColor = "#0550C5";
 // const cellSelectedBg = "#F3F8FF";
@@ -23,7 +26,7 @@ const tableBorderColor = "#e0e0e0";
 // 404071
 
 // dark
-const tableBorderColorDark = "#44485E";
+const tableBorderColorDark = '#44485E';
 
 // const rowHoverBgDark = "#404071 ";
 
@@ -34,8 +37,8 @@ const tableBorderColorDark = "#44485E";
 
 // const bodyColorDark = "#343e59";
 
-const BgColorDark = "#343e59 ";
-const colorDark = "#e6e4f3e6 ";
+const BgColorDark = '#343e59 ';
+const colorDark = '#e6e4f3e6 ';
 
 // const cellSelectedBgDark = " #F3F8FF ";
 // const cellIndexFocusBgDark = "#E6EFFD ";
@@ -45,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:13px;background-color:", ";&.", "-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-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#F9F8FD;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-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{}}.", "-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:", ";}}}}"], props => props.$prefix, color, BgColor, 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.$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, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, 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, 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-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:", ";}}}}"], 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);