es-grid-template 1.7.26 → 1.7.27

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

@@ -1,90 +1,87 @@
 import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+import { flexRender } from '@tanstack/react-table';
 // import type { Person } from "../../tanstack-table/makeData"
 import React from 'react';
 import { TableContext } from "../useContext";
 import TableHeadCell from "./TableHeadCell";
+import { getCommonPinningStyles } from "../hook/utils";
 const TableHeadRow = ({
   table,
   columnVirtualizer,
   rowHeaderVirtualizer,
-  headerGroup,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  fixedLeftColumns,
-  fixedRightColumns,
-  rowHeaderVirtual
+  headerGroup
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // fixedLeftColumns,
+  // fixedRightColumns,
+  // rowHeaderVirtual
 }) => {
   const {
     prefix
   } = React.useContext(TableContext);
-  const virtualColumns = columnVirtualizer.getVirtualItems();
-  // const virtualColumns = columnVirtualizer.measurementsCache
 
-  // console.log('virtualColumns', virtualColumns)
+  // const virtualColumns = columnVirtualizer.getVirtualItems()
+  // const virtualColumns = columnVirtualizer.measurementsCache
 
   const columnOrder = table.getState().columnOrder;
   return /*#__PURE__*/React.createElement("tr", {
-    key: headerGroup.id,
-    ref: el => {
-      if (el) rowHeaderVirtualizer.measureElement(el);
-    }
+    key: headerGroup.id
+    // ref={el => {
+    //   if (el) rowHeaderVirtualizer.measureElement(el)
+    // }}
     // data-index={rowHeaderVirtual?.index}
     ,
     "data-index": headerGroup.id,
     className: `${prefix}-grid-row`,
     style: {
-      display: 'flex',
-      width: '100%',
-      minHeight: rowHeaderVirtual?.size
+      // display: 'flex',
+      width: '100%'
+      // minHeight: rowHeaderVirtual?.size
     }
   }, /*#__PURE__*/React.createElement(SortableContext, {
     items: columnOrder,
     strategy: horizontalListSortingStrategy
-  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+  }, headerGroup.headers.map(header => {
+    const columnRelativeDepth = header.depth - header.column.depth;
+    if (columnRelativeDepth > 1) {
+      return null;
+    }
+    let rowSpan = 1;
+    if (header.isPlaceholder) {
+      const leafs = header.getLeafHeaders();
+      rowSpan = leafs[leafs.length - 1].depth - header.depth;
+    }
     return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: header.id,
+      header: header,
+      table: table,
       columnVirtualizer: columnVirtualizer,
       rowHeaderVirtualizer: rowHeaderVirtualizer,
-      key: column.id,
-      table: table,
-      header: headerGroup.headers.find(h => h.column.id === column.id)
-      // column={column as any}
+      colSpan: header.colSpan,
+      rowSpan: rowSpan
     });
-  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("th", {
-    className: "",
-    style: {
-      display: 'flex',
-      width: virtualPaddingLeft
-    }
-  }) : null, virtualColumns.map(virtualColumn => {
-    const header = headerGroup.headers[virtualColumn.index];
-    const isFixed = table.getState().columnPinning.left?.includes(header?.column?.id) || table.getState().columnPinning.right?.includes(header?.column?.id);
-    if (header && !isFixed) {
-      return /*#__PURE__*/React.createElement(TableHeadCell, {
-        key: header.id,
-        header: header,
-        table: table,
-        columnVirtualizer: columnVirtualizer,
-        rowHeaderVirtualizer: rowHeaderVirtualizer
-      });
-    }
-  }),
-  //fake empty column to the right for virtualization scroll padding
-  fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/React.createElement(TableHeadCell, {
-    columnVirtualizer: columnVirtualizer,
-    rowHeaderVirtualizer: rowHeaderVirtualizer,
-    table: table,
-    key: column.id,
-    header: headerGroup.headers.find(h => h.column.id === column.id)
-    // column={column as any}
-  })) : null, virtualPaddingRight ?
-  /*#__PURE__*/
-  //fake empty column to the right for virtualization scroll padding
-  React.createElement("th", {
-    className: "nnnnnnnnnnnn",
-    style: {
-      display: 'flex',
-      width: virtualPaddingRight
-    }
-  }) : null));
+    return /*#__PURE__*/React.createElement("th", {
+      key: header.id,
+      colSpan: header.colSpan,
+      rowSpan: rowSpan,
+      style: {
+        padding: '12px',
+        textAlign: 'left',
+        fontSize: '0.75rem',
+        fontWeight: 'medium',
+        color: '#6b7280',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        // backgroundColor: '#f9fafb',
+        // border: '1px solid #e5e7eb',
+        borderLeft: 0,
+        width: header.getSize(),
+        minWidth: header.getSize(),
+        maxWidth: header.getSize(),
+        // overflow: 'hidden',
+        ...getCommonPinningStyles(header.column)
+      }
+    }, flexRender(header.column.columnDef.header, header.getContext()));
+  })));
 };
 export default TableHeadRow;

package/es/table-component/hook/convert.d.ts

@@ -0,0 +1 @@
+export declare function convertColumns(columns: any[]): any[];

package/es/table-component/hook/convert.js

@@ -0,0 +1,28 @@
+import { createColumnHelper } from '@tanstack/react-table';
+const columnHelper = createColumnHelper();
+export function convertColumns(columns) {
+  return columns.map(col => {
+    if (col.columns) {
+      // Group column
+      return columnHelper.group({
+        ...col,
+        columns: convertColumns(col.columns) // đệ quy
+      });
+    } else {
+      // Accessor column
+      let accessor;
+
+      // Ưu tiên accessorKey nếu có, nếu không thì dùng hàm row => row[col.id]
+      if (col.accessorKey) {
+        accessor = col.accessorKey;
+      } else if (col.id) {
+        accessor = row => row[col.id];
+      } else {
+        throw new Error('Column không có accessorKey hoặc id');
+      }
+      return columnHelper.accessor(accessor, {
+        ...col
+      });
+    }
+  });
+}

package/es/table-component/hook/useColumns.js

@@ -112,6 +112,7 @@ export function convertToTanStackColumns({
           }
         } else {
           return t ? t(headerText) : headerText;
+          // return field
         }
       },
       cell: props => {

package/es/table-component/hook/utils.js

@@ -44,6 +44,9 @@ export const getCommonPinningStyles = column => {
     position: isPinned ? "sticky" : "relative",
     width: column.getSize(),
     zIndex: isPinned ? 2 : 0
+    // border: '1px solid #e5e7eb',
+    // borderTop: 0,
+    // borderBottom: 0
   };
 };
 export const sumSize = items => {

package/es/table-component/style.scss

@@ -47,44 +47,18 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     .#{$prefix}-grid-cell {
 
       padding: 7px 8px;
-      border-inline-end: 1px solid $tableBorderColor;
-      // border-bottom: 1px solid $tableBorderColor;
-      // &.#{$prefix}-grid-cell-fix-left-last {
-      //   &::after {
-      //     position: absolute;
-      //     top: 0;
-      //     right: 0;
-      //     bottom: -1px;
-      //     width: 30px;
-      //     transform: translateX(100%);
-      //     transition: box-shadow 0.3s;
-      //     content: "";
-      //     pointer-events: none;
-      //     box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.09);
-      //   }
-      // }
-      // &.#{$prefix}-grid-cell-fix-right-first {
-      //   &::after {
-      //     position: absolute;
-      //     top: 0;
-      //     bottom: -1px;
-      //     left: 0;
-      //     width: 30px;
-      //     transform: translateX(-100%);
-      //     transition: box-shadow 0.3s;
-      //     content: "";
-      //     pointer-events: none;
-      //     box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.09);
-      //   }
-      //   &::before {
-      //     content: "";
-      //     position: absolute;
-      //     inset-block: 0;
-      //     inset-inline-start: -1px;
-      //     border-inline-start: 1px solid #e0e0e0;
-      //   }
-      // }
 
+      &.#{$prefix}-grid-cell-text-center {
+        text-align: center;
+
+      }
+
+       &.#{$prefix}-grid-cell-text-right {
+        justify-content: flex-end;
+        text-align: right;
+
+      }
+      
 
 
       &.#{$prefix}-grid-cell-ellipsis {
@@ -152,6 +126,16 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       .#{$prefix}-grid-cell {
 
         background-color: $body-color;
+        // border-inline-end: 1px solid #e0e0e0;
+
+        &::before {
+          content: "";
+          position: absolute;
+          inset-block: 0;
+          right: 0;
+          inset-inline-start: 0px;
+          border-inline-end: 1px solid #e0e0e0;
+        }
 
         &.ui-rc-grid-cell-ellipsis {
 
@@ -195,6 +179,8 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           justify-content: space-between;
           width: 100%;
           align-items: center;
+          position: relative;
+          z-index: 3;
         }
 
         .ui-rc-header-trigger {
@@ -216,6 +202,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           position: absolute;
           right: 0;
           top: 0;
+          z-index: 3;
           touch-action: none;
           user-select: none;
           width: 5px;
@@ -267,6 +254,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
       .#{$prefix}-grid-cell {
         outline: none;
+        border-inline-end: 1px solid $tableBorderColor;
 
         background-color: $body-color;
 
@@ -519,19 +507,19 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         }
 
 
-        &.isValid {
-          &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 0;
-            height: 0;
-            border-top: 0 solid transparent;
-            border-right: 8px solid red;
-            border-bottom: 8px solid transparent;
-          }
-        }
+        // &.isValid {
+        //   &::after {
+        //     content: "";
+        //     position: absolute;
+        //     top: 0;
+        //     right: 0;
+        //     width: 0;
+        //     height: 0;
+        //     border-top: 0 solid transparent;
+        //     border-right: 8px solid red;
+        //     border-bottom: 8px solid transparent;
+        //   }
+        // }
       }
 
     }
@@ -539,6 +527,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     .#{$prefix}-grid-tfoot {
       .#{$prefix}-grid-cell {
         background-color: $body-color;
+        border-inline-end: 1px solid $tableBorderColor;
       }
     }
 

package/es/table-component/table/Grid.d.ts

@@ -15,6 +15,8 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     originData: T[];
     mergedFilterKeys: any;
     setMergedFilterKeys: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
     onContextMenu?: (data: T) => (event: any) => void;

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

@@ -121,11 +121,12 @@ const Grid = props => {
     // onExpandedChange: setExpanded,
     getExpandedRowModel: getExpandedRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
-    onPaginationChange: setPagination,
+    onPaginationChange: setPagination
+
     // onColumnVisibilityChange: setColumnVisibility,
     // onColumnPinningChange,
 
-    debugTable: true
+    // debugTable: true
   });
   React.useEffect(() => {
     if (isSelectionChange.isChange) {

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

@@ -5,6 +5,11 @@ import type { ReactElement, ReactNode } from 'react';
 import type { IOperator } from './hook/constant';
 import type { ColorPickerProps } from 'antd';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
+declare module "@tanstack/table-core" {
+    interface ColumnMeta<any, any> extends ColumnTable {
+        rowSpan?: number;
+    }
+}
 export type ExtendedColumnFilter = {
     id: string;
     value: string;

package/lib/table-component/InternalTable.js

@@ -20,6 +20,8 @@ var _reactTooltip = require("react-tooltip");
 var _ContextMenu = _interopRequireDefault(require("./ContextMenu"));
 var _utils = require("./hook/utils");
 var _useColumns = require("./hook/useColumns");
+var _convert = require("./hook/convert");
+var _antd = require("antd");
 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 en from "rc-master-ui/es/date-picker/locale/en_US"
@@ -72,6 +74,7 @@ const InternalTable = props => {
     contextMenuHidden,
     contextMenuClick,
     contextMenuOpen,
+    height,
     ...rest
   } = props;
   const id = _react.default.useMemo(() => {
@@ -126,6 +129,7 @@ const InternalTable = props => {
 
   const [filterStates, setFilterState] = _react.default.useState(null);
   const [sorterStates, setSorterStates] = _react.default.useState([]);
+  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
   const [expanded, setExpanded] = _react.default.useState({});
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -146,7 +150,6 @@ const InternalTable = props => {
 
     // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
   }, [t, columns, format, editAble]);
-  console.log('mergedColumns', mergedColumns);
   const columnPinning = _react.default.useMemo(() => {
     return {
       left: (0, _utils.getFixedFields)(columns, 'left'),
@@ -277,7 +280,7 @@ const InternalTable = props => {
     format: format
     // columns={columns111 as any}
     ,
-    columns: mergedColumns,
+    columns: (0, _convert.convertColumns)(mergedColumns),
     propsColumns: columns,
     rowKey: rowKey,
     groupSetting: groupSetting,
@@ -294,8 +297,70 @@ const InternalTable = props => {
     contextMenuItems: contextMenuItems,
     editAble: editAble,
     triggerChangeColumns: triggerChangeColumns,
-    setExpanded: setExpanded
-  })), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
+    setExpanded: setExpanded,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    open: isFullScreen,
+    footer: null,
+    centered: true,
+    closable: true,
+    width: '100%',
+    style: {
+      maxWidth: '100%',
+      height: '100%'
+    },
+    onClose: () => setIsFullScreen(false),
+    onCancel: () => setIsFullScreen(false)
+
+    // destroyOnClose
+    ,
+    styles: {
+      content: {
+        height: '100vh',
+        borderRadius: 0,
+        padding: '15px 10px'
+      },
+      wrapper: {
+        zIndex: 1050
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingTop: 40
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
+    t: t,
+    id: isFullScreen ? _faker.faker.string.alpha(20) : id,
+    prefix: prefix,
+    originData: convertData,
+    dataSource: mergedData,
+    locale: locale,
+    format: format
+    // columns={columns111 as any}
+    ,
+    columns: (0, _convert.convertColumns)(mergedColumns),
+    propsColumns: columns,
+    rowKey: rowKey,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    columnPinning: columnPinning,
+    columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
+    triggerFilter: setFilterState,
+    triggerSorter: setSorterStates,
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    expanded: expanded,
+    onContextMenu: onContextMenu,
+    contextMenuItems: contextMenuItems,
+    editAble: editAble,
+    triggerChangeColumns: triggerChangeColumns,
+    setExpanded: setExpanded,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    height: windowSize.innerHeight - 70
+  })))), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     open: menuVisible,
     pos: position,
     setOpen: setMenuVisible,

package/lib/table-component/TableContainerEdit.d.ts

@@ -26,6 +26,8 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     columns: ColumnDef<T>[];
     triggerChangeColumns: any;
     columnHidden: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
 };
 declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainerEdit;

package/lib/table-component/TableContainerEdit.js

@@ -109,8 +109,13 @@ const TableContainerEdit = props => {
     propsColumns,
     triggerChangeColumns,
     columnHidden,
-    showEmptyText
+    showEmptyText,
+    isFullScreen,
+    setIsFullScreen
   } = props;
+
+  // console.log('setIsFullScreen', setIsFullScreen)
+
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
   const topToolbarRef = _react.default.useRef(null);
@@ -215,7 +220,7 @@ const TableContainerEdit = props => {
   const [endPasteCell, setEndPasteCell] = _react.default.useState(undefined);
   const [isSelecting, setIsSelecting] = _react.default.useState(false);
   const [isPasting, setIsPasting] = _react.default.useState(false);
-  const [isFullScreen] = _react.default.useState(false);
+  // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = _react.default.useState(0);
   const rowsFocus = _react.default.useMemo(() => {
     return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
@@ -1118,7 +1123,7 @@ const TableContainerEdit = props => {
       alignItems: 'center',
       gap: '.75rem'
     }
-  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -1126,18 +1131,6 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
     mode: 'scroll'
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
-    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
-  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
-    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -1153,7 +1146,21 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
     columns: columns,
     originColumns: propsColumns,
     t: t,
@@ -1232,8 +1239,9 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/_react.default.createElement("table", {
     // className={`${prefix}-grid-container`}
     style: {
-      display: 'grid'
+      display: 'grid',
       //  minWidth: table.getTotalSize()
+      width: table.getTotalSize()
     }
   }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
     tableContainerRef: tableContainerRef,

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

@@ -1,4 +1,4 @@
-import type { Column, Table } from "@tanstack/react-table";
+import { type Column, type Table } from "@tanstack/react-table";
 import type { Virtualizer } from "@tanstack/react-virtual";
 import type { CommandClick } from "../type";
 import React from "react";

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

@@ -74,6 +74,33 @@ const TableBody = ({
   })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, virtualRows.map(virtualRow => {
     const row = rows[virtualRow.index];
     const isEditing = row.id === editingKey;
+
+    // return (
+    //   <tr key={row.id}>
+    //     {row.getVisibleCells().map((cell) => (
+    //       <td
+    //         key={cell.id}
+    //         style={{
+    //           padding: '12px',
+    //           whiteSpace: 'nowrap',
+    //           fontSize: '0.875rem',
+    //           color: '#6b7280',
+    //           border: '1px solid #e5e7eb',
+    //           width: cell.column.getSize(),
+    //           maxWidth: cell.column.getSize(),
+    //           overflow: "hidden",
+    //           ...getCommonPinningStyles(cell.column)
+    //         }}>
+
+    //           {cell.column.id}
+
+    //         {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
+
+    //       </td>
+    //     ))}
+    //   </tr>
+    // )
+
     return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({}, rest, {
       table: table,
       tableId: tableId,

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

@@ -107,11 +107,12 @@ const TableBodyCell = props => {
     selectionSettings,
     id
   } = (0, _react.useContext)(_useContext.TableContext);
+  const columnMeta = cell.column.columnDef.meta ?? {};
   const parrents = cell.row.getParentRows();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
-  const cellContent = (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
   const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
   return /*#__PURE__*/_react.default.createElement("td", {
@@ -124,6 +125,7 @@ const TableBodyCell = props => {
     style: {
       display: 'flex',
       width: cell.column.getSize(),
+      // border: '1px solid #e5e7eb',
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
     "data-tooltip-id": `${id}-tooltip-content`,