es-grid-template 1.8.56 → 1.8.58

package/es/grid-component/InternalTable.js

@@ -8,7 +8,10 @@ updateOrInsert } from "./hooks";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import GridEdit from "./table/GridEdit";
+
+// import GridEdit from "./table/GridEdit"
+// import InfiniteTable from "./table/InfiniteTable";
+
 import Grid from "./table/Grid";
 import en from "rc-master-ui/es/date-picker/locale/en_US";
 import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
@@ -37,7 +40,6 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 // import {CSS} from "@dnd-kit/utilities";
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
-import InfiniteTable from "./table/InfiniteTable";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import Modal from 'antd/es/modal/Modal';
 dayjs.extend(customParseFormat);
@@ -186,6 +188,7 @@ const InternalTable = props => {
     onFilter,
     onSorter,
     defaultSorter,
+    toolbarItems,
     ...rest
   } = props;
   const id = React.useMemo(() => {
@@ -293,7 +296,7 @@ const InternalTable = props => {
       const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
       setHeight1(hhh > 0 ? hhh : 0);
     }
-  }, [id, isFullScreen, windowSize.innerHeight]);
+  }, [id, isFullScreen, windowSize.innerHeight, toolbarItems]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
     setColumns(propsColumns);
@@ -442,7 +445,8 @@ const InternalTable = props => {
           wrapSettings: wrapSettings
         })),
         // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        ellipsis: column.ellipsis !== false || wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        ellipsis: column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        // ellipsis: false,
         // ellipsis: column.ellipsis !== false,
 
         align: column.textAlign ?? column.align,
@@ -910,7 +914,9 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-  const TableComponent = infiniteScroll ? InfiniteTable : groupAble ? Group : editAble ? GridEdit : Grid;
+
+  // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
+  const TableComponent = groupAble ? Group : Grid;
   return /*#__PURE__*/React.createElement(Fragment, null, true && /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
@@ -1069,6 +1075,7 @@ const InternalTable = props => {
     commandClick: triggerCommandClick,
     summary: summary,
     pagination: pagination,
+    toolbarItems: toolbarItems,
     scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
       y: 500
     } : {

package/es/grid-component/TableGrid.js

@@ -62,7 +62,7 @@ const TableGrid = props => {
     rowHoverable,
     title,
     format,
-    virtual = true,
+    // virtual = true,
     t,
     lang,
     contextMenuOpen,
@@ -322,7 +322,7 @@ const TableGrid = props => {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,
-    virtual: virtual,
+    virtual: true,
     columns: columns,
     rowKey: rowKey,
     rowHoverable: rowHoverable,

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

@@ -15,5 +15,7 @@ interface UseColumnsConfig<RecordType> {
     rowKey?: any;
     onMouseHover?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [
+    any
+];
 export default useColumns;

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

@@ -80,7 +80,8 @@ const useColumns = config => {
       const type = getTypeFilter(column);
       // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
       // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
-      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
+      // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
       return /*#__PURE__*/React.createElement("div", {
         style: {
           padding: 8,

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

@@ -160,7 +160,7 @@ export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
 export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;
-export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
+export declare function groupArrayByColumns(data: any[], columns: string[] | undefined): any;
 export declare const isFormattedNumber: (str: string) => boolean;
 export declare const detectSeparators: (str: string) => {
     thousandSeparator: string;

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

@@ -2341,13 +2341,13 @@ export const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   const key = `${rowIndex}-${colIndex}`;
   return selectedCells.has(key);
 };
-export function groupArrayByColumns(arr, columns) {
+export function groupArrayByColumns(data, columns) {
   const result = [];
   const checkEmpty = d => {
     return d === null || d === undefined || d === '';
   };
   if (columns) {
-    arr.forEach(item => {
+    data.forEach(item => {
       let currentLevel = result;
       columns.forEach((column, index) => {
         const value = item[column];
@@ -2355,15 +2355,12 @@ export function groupArrayByColumns(arr, columns) {
         if (existingItem) {
           currentLevel = existingItem.children;
         } else {
-          // const newItem = {[column]: value, field: column, rowId: !isEmpty(value) ? (value) : newGuid(), parentId: !isEmpty(item[columns[index - 1]]) ? (item[columns[index - 1]]) : null, indent: index, children: [] }
           const newItem = {
             [column]: value,
             field: column,
             rowId: newGuid(),
-            // rowId: item[column],
             parentId: !isEmpty(item[columns[index - 1]]) ? item[columns[index - 1]] : null,
-            // parentId: item.rowId[index - 1],
-            // indent: index,
+            // tự tính tổng rồi điền thuộc tính vào
             children: []
           };
           currentLevel.push(newItem);
@@ -2374,13 +2371,11 @@ export function groupArrayByColumns(arr, columns) {
         ...item,
         rowId: item.id ?? item.rowId,
         parentId: !checkEmpty(columns[columns.length - 1]) ? item[columns[columns.length - 1]] : null
-        // parentId: item.rowId[columns.length - 1],
-        // indent: columns.length
       });
     });
     return result;
   } else {
-    return arr;
+    return data;
   }
 }
 export const isFormattedNumber = str => {

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

@@ -9,6 +9,7 @@ import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 import type { FixedType } from "rc-base-table/lib/interface";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
+import type { Cell, Header, Row } from '@tanstack/react-table';
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
@@ -135,6 +136,10 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     editFromSettings?: IEditFromSettings;
     fixedType?: FixedType;
     headerTextWrap?: boolean;
+    allowSelection?: boolean | ((rowData: RecordType) => boolean);
+    onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
 };
 export type IFormOpen = {
     value?: any;
@@ -193,6 +198,11 @@ export type Sort = {
 export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale'> {
     editAble?: boolean;
     infiniteScroll?: boolean;
+    theme?: {
+        theme?: 'dark' | 'light';
+        backgroundColor?: string;
+        color?: string;
+    };
     next?: () => void;
     locale?: Locale;
     groupAble?: boolean;
@@ -266,6 +276,9 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     wrapSettings?: IWrapSettings;
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
     fullScreen?: boolean;
+    onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: RecordType, row: Row<RecordType>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/es/table-component/InternalTable.js

@@ -34,14 +34,9 @@ import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue,
 filterDataByColumns, findAllChildrenKeys2, flatColumns2,
 // filterDataByColumns,
 getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
-// import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { removeInvisibleColumns } from "../grid-component/hooks";
-// import { Modal } from 'antd'
-// import { findAllChildrenKeys2 } from '../grid-component/hooks'
-// import { columns111 } from '../test-2/columns'
-
 dayjs.extend(customParseFormat);
 
 // const MySwal = withReactContent(Swal)

package/es/table-component/TableContainer.js

@@ -1,23 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-// import type { Dispatch, SetStateAction } from "react";
-
 import React from 'react';
-// import TableHead from './header/TableHead'
-// import { sumSize } from './hook/utils'
-
-// import { useVirtualizer } from '@tanstack/react-virtual'
-
 import classNames from 'classnames';
-// import TableBody from './body/TableBody'
 import { TableContext } from "./useContext";
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Maximize, Minimize } from 'becoxy-icons';
 import { ColumnsChoose } from "./ColumnsChoose";
-// import TableFooter from './footer/TableFooter'
-// import TableBody from './body/TableBody'
 import { numericFormatter } from 'react-numeric-component';
-// import ComponentSpinner from '../grid-component/LoadingSpinner'
 import TableWrapper from "./table/TableWrapper";
 import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -76,6 +65,9 @@ const TableContainer = props => {
     columnSizing,
     columnSizingInfo,
     rowClassName,
+    onRowStyles,
+    onRowFooterStyles,
+    onRowHeaderStyles,
     title
   } = props;
   const tableContainerRef = React.useRef(null);
@@ -96,6 +88,10 @@ const TableContainer = props => {
   React.useEffect(() => {
     const handleClickOutside = () => {
       setFocusedCell(undefined);
+      setIsSelectionChange(prev => ({
+        ...prev,
+        isChange: false
+      }));
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -270,6 +266,9 @@ const TableContainer = props => {
       focusedCell,
       setFocusedCell,
       rowClassName,
+      onRowStyles,
+      onRowFooterStyles,
+      onRowHeaderStyles,
       table,
       pagination
     }

package/es/table-component/TableContainerEdit.js

@@ -125,7 +125,8 @@ const TableContainerEdit = props => {
     setColumns,
     columnSizing,
     columnSizingInfo,
-    rowClassName
+    rowClassName,
+    onRowStyles
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -1895,7 +1896,8 @@ const TableContainerEdit = props => {
       handleCellClick,
       pagination,
       rowClassName,
-      rowEditable
+      rowEditable,
+      onRowStyles
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

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

@@ -168,6 +168,7 @@ const TableBodyCell = props => {
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
+  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
 
   // const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
@@ -180,6 +181,7 @@ const TableBodyCell = props => {
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
 
   // const selectRowIds = React.useMemo(() => {
 
@@ -197,18 +199,13 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
         [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
-        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
-        // [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id),
       }),
       style: {
+        ...cellStyles,
         display: 'flex',
-        // height: '36px',
         userSelect: 'none',
         width: cell.column.getSize(),
-        // flexBasis: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        // flex: 1,
-        // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       },
       onClick: e => {
@@ -272,12 +269,10 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {
+        ...cellStyles,
         display: 'flex',
-        // height: '36px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        // flex: 1,
-        // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
     }, renderCommand({
@@ -298,51 +293,16 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {
+        ...cellStyles,
         display: 'flex',
-        // height: '36px',
         minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        // flex: 1,
-        // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
     }, /*#__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: () => {
-        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"
-    }))), cell.column.id === "selection_column" && renderSelection({
+    }, cell.column.id === "selection_column" && renderSelection({
       cell,
       table,
       selectionSettings,
@@ -385,13 +345,11 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
+      ...cellStyles,
       display: 'flex',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
       minHeight: 36,
-      // flex: 1,
-      // maxWidth: cell.column.getSize(),
-      // height: '36px',
       ...getCommonPinningStyles(cell.column)
     },
     onMouseEnter: e => {
@@ -466,16 +424,17 @@ const TableBodyCell = props => {
         //   })
         // }
       }
-    },
-    onKeyUp: () => {}
+    }
+
+    // onKeyUp={() => {
 
-    // onDoubleClick={() => { }}
+    // }}
     ,
 
     onClick: e => {
       const selection = window.getSelection();
       const text = selection ? selection.toString() : "";
-      if (text.length > 0) {} else {
+      if (text.length > 0 || enableClick === false) {} else {
         if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
           toggleRowSelection({
             e,

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

@@ -27,7 +27,8 @@ const TableBodyRow = ({
     recordDoubleClick,
     focusedCell,
     rowClassName,
-    rowEditable
+    rowEditable,
+    onRowStyles
   } = React.useContext(TableContext);
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -39,23 +40,18 @@ const TableBodyRow = ({
   const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
   const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
+  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
   return /*#__PURE__*/React.createElement("div", {
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
     ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
     ,
-    key: row.id
-    // data-row-key={cell.row.id}
-    ,
-    "data-row-key": row.id
-
-    // className={} ui-rc-table-row-selected
-    ,
+    key: row.id,
+    "data-row-key": row.id,
     className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
       [`${prefix}-grid-row-selected`]: row.getIsSelected(),
       [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble
-      // [`${prefix}-grid-row-focus`]: true,
     }),
     style: {
       // display: 'flex',
@@ -63,12 +59,11 @@ const TableBodyRow = ({
       // position: 'absolute',
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
-      // width: '100%',
       // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      // gridTemplateColumns: `repeat(${centerCOlumns.length + fixedLeftColumns.length + fixedRightColumns.length}, minmax(0, 1fr))`,
       height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size
+      minHeight: isEditing ? undefined : virtualRow.size,
+      ...rowStyles
     },
     onDoubleClick: e => {
       recordDoubleClick?.({

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

@@ -1,13 +1,9 @@
-// import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 import React, { useContext } from "react";
-// import type { Person } from "../makeData";
 import { checkDecimalSeparator, checkThousandSeparator, getCommonPinningStyles, getFormat, isEmpty } from "../hook/utils";
 import { TableContext } from "../useContext";
 import classNames from "classnames";
 import { sumByField } from "../../grid-component/hooks";
 import { numericFormatter } from "react-numeric-component";
-// import type { Person } from "../../tanstack-table/makeData";
-
 const TableFooterCell = ({
   column
 }) => {

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

@@ -2,6 +2,7 @@
 // import type { Person } from "../makeData";
 import TableFooterCell from "./TableFooterCell";
 import React from "react";
+import { TableContext } from "../useContext";
 // import type { Person } from "../../tanstack-table/makeData";
 // import TableHeadCell from "./TableHeadCell";
 
@@ -20,17 +21,19 @@ const TableFooterRow = ({
 
   // const a  =  table.getVisibleFlatColumns()
   const visibleColumns = table.getVisibleLeafColumns();
+  const {
+    onRowFooterStyles
+  } = React.useContext(TableContext);
+  const rowStyles = typeof onRowFooterStyles === 'function' ? onRowFooterStyles() : onRowFooterStyles;
 
   // const 
 
   return /*#__PURE__*/React.createElement("div", {
-    // data-index={headerGroup.id}
     key: headerGroup.id,
     style: {
+      ...rowStyles,
       display: "grid",
       width: "100%",
-      // borderBottom: "1px solid #e0e0e0",
-      // borderTop: "1px solid #e0e0e0",
       height: 37,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     },

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

@@ -24,15 +24,18 @@ const TableHead = ({
   // fixedRightColumns
 }) => {
   const {
-    prefix
+    prefix,
+    onRowHeaderStyles
   } = useContext(TableContext);
   const headerGroups = table.getFlatHeaders();
   const leafColumns = table.getVisibleFlatColumns();
   // const leafColumns11 = table.getIsAllColumnsVisible();
   const headerDepth = table.getHeaderGroups().length;
+  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
   return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}-grid-thead`,
     style: {
+      ...rowStyles,
       display: 'grid',
       position: 'sticky',
       top: 0,

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

@@ -1,9 +1,5 @@
-// import { useSortable } from "@dnd-kit/sortable"
-
 import { flexRender } from '@tanstack/react-table';
 import React, { useContext } from 'react';
-// import { CSS } from '@dnd-kit/utilities'
-// import type { Virtualizer } from '@tanstack/react-virtual'
 import { Button, Space } from 'antd';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
@@ -13,11 +9,6 @@ import { excludeItems, extendsObject, getCommonPinningStyles, getDefaultOperator
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
-
-// import { ColumnTable } from "../type";
-
-// import { Tooltip } from 'react-tooltip'
-
 const TableHeadCell2 = props => {
   const {
     column,
@@ -25,9 +16,6 @@ const TableHeadCell2 = props => {
     getPopupContainer,
     table,
     depth,
-    // t,
-    // columnVirtualizer,
-    // rowHeaderVirtualizer,
     colSpan,
     rowSpan
   } = props;
@@ -52,33 +40,16 @@ const TableHeadCell2 = props => {
   const {
     filterIcon
   } = column.columnDef.meta ?? {};
-
-  // const column = (column.columnDef ?? {}) as ColumnTable
-  // const column = column.columnDef
-
   const originalColumn = column.columnDef.meta ?? {};
+  const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
   const filtered = (column.getFilterValue() ?? []).length > 0;
   const cellContent = flexRender(column.columnDef.header, header.getContext());
-  // const cellContent = 'aaaa'
-
   const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
-
-  // const filtered = column.getIsFiltered()
-
-  // const { attributes, isDragging, listeners, setNodeRef, transform } =
-  //   useSortable({
-  //     id: column.id,
-  //   })
-
   const style = {
-    // opacity: isDragging ? 0.8 : 1,
-    // position: 'relative',
-    // transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
     transition: 'width transform 0.2s ease-in-out',
-    whiteSpace: 'nowrap'
-    // width: column.getSize(),
-    // zIndex: isDragging ? 1 : 0,
+    whiteSpace: 'nowrap',
+    ...cellStyles
   };
   const getDropdownTrigger = () => {
     let iconFilter;
@@ -232,25 +203,15 @@ const TableHeadCell2 = props => {
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
       [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
-    })
-    // colSpan={colSpan}
-    // rowSpan={rowSpan}
-    ,
-
+    }),
     key: column.id,
     style: {
-      // display: 'flex',
-      // width: column.getSize(),
+      ...style,
       minWidth: column.getSize(),
-      // flex: 1,
-      // flexGrow: column.getSize(),
-
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
-      // maxWidth: header.getSize(),
       ...getCommonPinningStyles(column),
-      width: 'auto',
-      ...style
+      width: 'auto'
     },
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-delay-show": 500,
@@ -261,9 +222,7 @@ const TableHeadCell2 = props => {
       [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
     })
   }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
-    checked: table.getIsAllRowsSelected()
-    // indeterminate={table.getIsSomeRowsSelected()}
-    ,
+    checked: table.getIsAllRowsSelected(),
     indeterminate: table.getIsSomePageRowsSelected(),
     onChange: e => {
       table.getToggleAllRowsSelectedHandler()(e);