es-grid-template 1.7.48 → 1.8.0

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

@@ -24,29 +24,45 @@ const TableBodyRow = ({
 }) => {
   const {
     prefix,
-    recordDoubleClick
+    recordDoubleClick,
+    focusedCell
   } = React.useContext(TableContext);
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
-  return /*#__PURE__*/React.createElement("tr", {
+  const centerCOlumns = virtualColumns.filter(vc => !(table.getState().columnPinning.left?.includes(visibleCells[vc.index].column.id) || table.getState().columnPinning.right?.includes(visibleCells[vc.index].column.id)));
+  const leftTemplate = fixedLeftColumns.length > 0 ? fixedLeftColumns.map(it => row.getVisibleCells().find(c => c.column.id === it.id).column.getSize()) : [];
+  const rightTemplate = fixedRightColumns.length > 0 ? fixedRightColumns.map(it => row.getVisibleCells().find(c => c.column.id === it.id).column.getSize()) : [];
+  const centerTemplate = centerCOlumns.map(it => it.size);
+  const virtualLeft = virtualPaddingLeft ? [virtualPaddingLeft] : [];
+  const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
+  const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
+  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
     ,
     className: classNames(`${prefix}-grid-row`, {
-      [`${prefix}-grid-row-selected`]: row.getIsSelected()
+      [`${prefix}-grid-row-selected`]: row.getIsSelected(),
+      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble
+      // [`${prefix}-grid-row-focus`]: true,
     }),
     style: {
       // display: 'flex',
+      display: 'grid',
       // 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
     },
@@ -77,14 +93,18 @@ const TableBodyRow = ({
         columnVirtualizer: columnVirtualizer
       }));
     }
-    return /*#__PURE__*/React.createElement(TableBodyCell, {
-      key: column.id,
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, rest, {
       table: table,
-      cell: row.getVisibleCells().find(c => c.column.id === column.id),
+      tableId: tableId,
+      key: cell.id,
+      cell: cell,
       commandClick: commandClick,
-      virtualRow: virtualRow
-    });
-  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("td", {
+      virtualRow: virtualRow,
+      isEditing: false,
+      rowVirtualizer: rowVirtualizer,
+      columnVirtualizer: columnVirtualizer
+    }));
+  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("div", {
     className: "",
     style: {
       display: "flex",
@@ -107,13 +127,17 @@ const TableBodyRow = ({
           virtualRow: virtualRow
         }));
       }
-      return /*#__PURE__*/React.createElement(TableBodyCell, {
+      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, rest, {
         table: table,
         key: cell.id,
+        tableId: tableId,
         cell: cell,
         commandClick: commandClick,
+        isEditing: false,
+        rowVirtualizer: rowVirtualizer,
+        columnVirtualizer: columnVirtualizer,
         virtualRow: virtualRow
-      });
+      }));
     }
   }), fixedRightColumns.length > 0 ? fixedRightColumns.map(column => {
     if (editAble) {
@@ -129,13 +153,18 @@ const TableBodyRow = ({
         virtualRow: virtualRow
       }));
     }
-    return /*#__PURE__*/React.createElement(TableBodyCell, {
-      key: column.id,
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, rest, {
       table: table,
+      key: column.id,
+      tableId: tableId,
       cell: row.getVisibleCells().find(c => c.column.id === column.id),
-      commandClick: commandClick
-    });
-  }) : null, virtualPaddingRight ? /*#__PURE__*/React.createElement("td", {
+      commandClick: commandClick,
+      isEditing: false,
+      rowVirtualizer: rowVirtualizer,
+      columnVirtualizer: columnVirtualizer,
+      virtualRow: virtualRow
+    }));
+  }) : null, virtualPaddingRight ? /*#__PURE__*/React.createElement("div", {
     className: "",
     style: {
       display: "flex",

package/es/table-component/components/command/Command.js

@@ -10,11 +10,13 @@ const Command = props => {
   return /*#__PURE__*/React.createElement(Fragment, null, item.template ? /*#__PURE__*/React.createElement("div", {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": item.tooltip || item.title,
+    "data-tooltip-delay-show": 500,
     id: item.id,
     onClick: onClick
   }, typeof item.template === 'function' ? item.template(record) : item.template) : /*#__PURE__*/React.createElement("div", {
     tabIndex: -1,
     "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-delay-show": 500,
     "data-tooltip-content": item.tooltip || item.title,
     style: {
       padding: '3px',

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

@@ -12,7 +12,7 @@ const TableFooter = ({
   const {
     prefix
   } = useContext(TableContext);
-  return /*#__PURE__*/React.createElement("tfoot", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}-grid-tfoot`,
     style: {
       display: "grid",

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

@@ -42,7 +42,7 @@ const TableFooterCell = ({
     decimalScale: dec,
     fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
   };
-  return /*#__PURE__*/React.createElement("td", {
+  return /*#__PURE__*/React.createElement("div", {
     // ref={el => {
     //   if (el) columnVirtualizer.measureElement(el)
     // }}
@@ -61,7 +61,8 @@ const TableFooterCell = ({
     style: {
       display: 'flex',
       ...getCommonPinningStyles(column),
-      width: column?.getSize() ?? column.getSize(),
+      // width: column?.getSize() ?? column.getSize(),
+      minWidth: column?.getSize(),
       backgroundColor: "#fafafa"
     }
   }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');

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

@@ -23,15 +23,16 @@ const TableFooterRow = ({
 
   // const 
 
-  return /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement("div", {
     // data-index={headerGroup.id}
     key: headerGroup.id,
     style: {
-      display: "flex",
+      display: "grid",
       width: "100%",
       borderBottom: "1px solid #e0e0e0",
       borderTop: "1px solid #e0e0e0",
-      height: 37
+      height: 37,
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     }
   }, visibleColumns.map(header => {
     return /*#__PURE__*/React.createElement(TableFooterCell, {

package/es/table-component/header/TableHead.d.ts

@@ -11,5 +11,5 @@ interface TableHeadProps<T> {
     fixedLeftColumns: Column<T, unknown>[];
     fixedRightColumns: Column<T, unknown>[];
 }
-declare const TableHead: <RecordType extends object>({ columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns }: TableHeadProps<RecordType>) => React.JSX.Element;
+declare const TableHead: <RecordType extends object>({ columnVirtualizer, table, }: TableHeadProps<RecordType>) => React.JSX.Element;
 export default TableHead;

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

@@ -1,38 +1,101 @@
 import React, { useContext } from 'react';
 import { TableContext } from "../useContext";
-import TableHeadRow from "./TableHeadRow";
+// import TableHeadRow from './TableHeadRow'
+import TableHeadCell2 from "./TableHeadCell2";
+import TableHeadGroupCell from "./TableHeadGroupCell";
 // import { getCommonPinningStyles } from '../hook/utils'
 
 const TableHead = ({
   columnVirtualizer,
-  table,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  fixedLeftColumns,
-  fixedRightColumns
+  table
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // fixedLeftColumns,
+  // fixedRightColumns
 }) => {
   const {
     prefix
   } = useContext(TableContext);
-  return /*#__PURE__*/React.createElement("thead", {
+  const headerGroups = table.getFlatHeaders();
+  const leafColumns = table.getVisibleFlatColumns();
+  const headerDepth = table.getHeaderGroups().length;
+  return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}-grid-thead`,
     style: {
-      // display: 'grid',
+      display: 'grid',
       position: 'sticky',
       top: 0,
-      zIndex: 1
+      zIndex: 1,
+      // gridTemplateRows: `repeat(${table.getHeaderGroups().length}, auto)`,
+      // gridTemplateColumns: `repeat(${table.getVisibleLeafColumns().length}, 1fr)`,
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     }
-  }, table.getHeaderGroups().map(headerGroup => {
-    return /*#__PURE__*/React.createElement(TableHeadRow, {
-      table: table,
-      headerGroup: headerGroup,
-      key: headerGroup.id,
-      columnVirtualizer: columnVirtualizer,
-      virtualPaddingLeft: virtualPaddingLeft,
-      virtualPaddingRight: virtualPaddingRight,
-      fixedLeftColumns: fixedLeftColumns,
-      fixedRightColumns: fixedRightColumns
-    });
+  }, leafColumns.map(column => {
+    const depth = column.depth ?? 0;
+    // const colSpan = col.getLeafColumns().length || 1;
+    const colSpan = column.columns.length || 1;
+    const rowSpan = column.columns?.length > 0 ? 1 : headerDepth - depth;
+    const header = headerGroups.find(it => it.id === column.id || it.column.id === column.id && it.subHeaders.length >= 2);
+    // const groupHeader = headerGroups.find((it) => it.column.id === column.id && it.subHeaders.length >= 2)
+
+    if (header?.subHeaders && header.subHeaders.length >= 2) {
+      return /*#__PURE__*/React.createElement(TableHeadGroupCell, {
+        key: column.id,
+        depth: depth,
+        column: column,
+        header: header,
+        table: table,
+        columnVirtualizer: columnVirtualizer,
+        colSpan: colSpan,
+        rowSpan: rowSpan
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(TableHeadCell2, {
+        key: column.id,
+        depth: depth,
+        column: column,
+        header: header,
+        table: table,
+        columnVirtualizer: columnVirtualizer
+        // rowHeaderVirtualizer={rowHeaderVirtualizer}
+        ,
+        colSpan: colSpan,
+        rowSpan: rowSpan
+      });
+    }
+
+    // if (header) {
+    //   return (
+    //     <TableHeadCell2
+    //       key={column.id}
+    //       depth={depth}
+    //       column={column}
+    //       header={header as any}
+    //       table={table}
+    //       columnVirtualizer={columnVirtualizer}
+    //       // rowHeaderVirtualizer={rowHeaderVirtualizer}
+    //       colSpan={colSpan}
+    //       rowSpan={rowSpan}
+    //     />
+    //   )
+    // }
+
+    // return (
+    //   <div
+    //     key={col.id}
+    //     className="th p-2 border font-bold flex items-center justify-center"
+    //     style={{
+    //       // width: col.getSize(),
+    //       minWidth: col.getSize(),
+    //       gridRow: `${depth + 1} / span ${rowSpan}`,
+
+    //       gridColumn: `span ${colSpan}`,
+    //     }}
+    //   >
+    //     aaaaa
+    //     {/* {flexRender(col.columnDef.header, header.getContext())} */}
+    //   </div>
+    // );
   }));
 };
 export default TableHead;

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

@@ -22,12 +22,12 @@ const TableHeadCell = props => {
   const {
     header,
     getPopupContainer,
-    table,
+    table
     // t,
     // columnVirtualizer,
     // rowHeaderVirtualizer,
-    colSpan,
-    rowSpan
+    // colSpan,
+    // rowSpan
   } = props;
   const {
     t,
@@ -207,7 +207,7 @@ const TableHeadCell = props => {
       // return dropdownContent;
     }
   });
-  return /*#__PURE__*/React.createElement("th", {
+  return /*#__PURE__*/React.createElement("div", {
     // ref={setNodeRef}
     className: classNames(`${prefix}-grid-cell`, {
       [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
@@ -216,15 +216,20 @@ const TableHeadCell = 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,
+    })
+    // colSpan={colSpan}
+    // rowSpan={rowSpan}
+    ,
+
     key: header.id,
     style: {
       // display: 'flex',
       width: header.getSize(),
       minWidth: header.getSize(),
-      maxWidth: header.getSize(),
+      flex: 1,
+      gridColumn: `span ${header.colSpan}`,
+      gridRow: `span 2`,
+      // maxWidth: header.getSize(),
       ...getCommonPinningStyles(header.column),
       ...style
     },

package/es/table-component/header/TableHeadCell2.d.ts

@@ -0,0 +1,17 @@
+import type { Table } from '@tanstack/react-table';
+import { type Header } from '@tanstack/react-table';
+import React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+interface TableHeadCellProps<T> {
+    t?: any;
+    table: Table<T>;
+    column: any;
+    header: Header<T, unknown>;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    colSpan: number;
+    rowSpan: number;
+    depth: number;
+}
+declare const TableHeadCell2: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
+export default TableHeadCell2;