@majoo-ui/react 2.1.0 → 2.1.2

package/components/table/Table.esm.js

@@ -6,6 +6,15 @@ import 'core-js/modules/es.iterator.for-each.js';
 import 'core-js/modules/es.iterator.map.js';
 import 'core-js/modules/es.json.parse.js';
 import 'core-js/modules/es.json.stringify.js';
+import 'core-js/modules/es.map.get-or-insert.js';
+import 'core-js/modules/es.map.get-or-insert-computed.js';
+import 'core-js/modules/es.set.difference.v2.js';
+import 'core-js/modules/es.set.intersection.v2.js';
+import 'core-js/modules/es.set.is-disjoint-from.v2.js';
+import 'core-js/modules/es.set.is-subset-of.v2.js';
+import 'core-js/modules/es.set.is-superset-of.v2.js';
+import 'core-js/modules/es.set.symmetric-difference.v2.js';
+import 'core-js/modules/es.set.union.v2.js';
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -28,7 +37,7 @@ import useMediaQuery from '../../utils/useMediaQuery.esm.js';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
 import { ContextMenuTrigger, ContextMenu, ContextMenuItem, ContextMenuSeparator } from '../contextMenu/ContextMenu.esm.js';
 import MobileTable from './MobileTable.esm.js';
-import { useSticky } from 'react-table-sticky';
+import { useSticky, getStickyValue, getMarginRight } from 'react-table-sticky';
 import { useTranslation } from 'react-i18next';
 import { useVirtual } from 'react-virtual';
 import { PlusPrimitive } from '@majoo-ui/icons';
@@ -380,6 +389,88 @@ const stickyShadowStyling = (column, tableScrollPosition, scrollAreaWidth) => {
   }
   return {};
 };
+const resolveCellCss = cell => {
+  const {
+    cellCss
+  } = cell.column;
+  return typeof cellCss === 'function' ? cellCss(cell) : cellCss;
+};
+/**
+ * react-table-sticky only decorates header and body cells, so footer cells work out the same
+ * sticky offset themselves.
+ */
+const getStickyFooterProps = (column, flatHeaders) => {
+  const sticky = getStickyValue(column);
+  if (!sticky) return {};
+  const margin = sticky === 'left' ? column.totalLeft : getMarginRight(column.id, flatHeaders.filter(header => header.depth === column.depth));
+  return {
+    style: {
+      position: 'sticky',
+      zIndex: 3,
+      [sticky]: `${margin}px`
+    },
+    'data-sticky-td': true
+  };
+};
+/**
+ * Cells per header row. With `spanRows`, a column outside any group is drawn once across every
+ * header row instead of under the empty placeholder cells react-table puts above it.
+ */
+const buildHeaderRows = (headerGroups, spanRows) => {
+  if (!spanRows) {
+    return headerGroups.map(headerGroup => headerGroup.headers.map(column => ({
+      column,
+      rowSpan: 1
+    })));
+  }
+  const coveredIds = new Set();
+  headerGroups.forEach(headerGroup => headerGroup.headers.forEach(header => {
+    if (header.placeholderOf) coveredIds.add(header.placeholderOf.id);
+  }));
+  return headerGroups.map(headerGroup => headerGroup.headers.filter(header => !coveredIds.has(header.id)).map(header => {
+    let column = header;
+    let rowSpan = 1;
+    while (column.placeholderOf) {
+      column = column.placeholderOf;
+      rowSpan += 1;
+    }
+    return {
+      column,
+      rowSpan
+    };
+  }));
+};
+/**
+ * rowSpan of the body cells whose column sets `rowSpan`, looked up by column id then row id. The
+ * first row of a run of equal keys spans the run; the rows it covers get 0 and render no cell. A
+ * run never crosses an expanded row, whose sub rows sit in between.
+ */
+const getCellRowSpans = (rows, spanColumns) => {
+  const spans = new Map();
+  spanColumns.forEach(column => {
+    // Nested by column: joining ids into one string would let row `0` + column `1.x` collide with
+    // sub row `0.1` + column `x`.
+    const columnSpans = new Map();
+    spans.set(column.id, columnSpans);
+    let anchorId = null;
+    let anchorKey;
+    rows.forEach((row, index) => {
+      var _a;
+      if (!row) return;
+      const key = typeof column.rowSpan === 'function' ? column.rowSpan(row) : row.values[column.id];
+      const hasKey = key !== null && key !== undefined;
+      if (anchorId !== null && hasKey && key === anchorKey && !((_a = rows[index - 1]) === null || _a === void 0 ? void 0 : _a.isExpanded)) {
+        columnSpans.set(anchorId, columnSpans.get(anchorId) + 1);
+        columnSpans.set(row.id, 0);
+        return;
+      }
+      anchorId = hasKey ? row.id : null;
+      anchorKey = key;
+      columnSpans.set(row.id, 1);
+    });
+  });
+  return spans;
+};
 const formattingData = (rawData, rowGroup) => {
   if ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey) && !(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.isManuallyFormatted)) {
     const {
@@ -609,6 +700,7 @@ function Table({
   showDuplicatedData,
   onRowClick,
   hidePagination = false,
+  paginationLabel,
   searchQuery,
   additionalExceptionIds = [],
   expanded: controlledExpanded = {},
@@ -623,7 +715,11 @@ function Table({
   draggable = false,
   onDragEnd,
   isExpandableTree,
-  subRows = 'subRows'
+  subRows = 'subRows',
+  footerData,
+  initialSortBy,
+  disableSortRemove = false,
+  headerRowSpan = false
 }) {
   var _a, _b, _c, _d;
   const [openMenu, setOpen] = useState(false);
@@ -660,6 +756,11 @@ function Table({
         expanded: controlledExpanded
       });
     }
+    if (initialSortBy) {
+      Object.assign(initialState, {
+        sortBy: initialSortBy
+      });
+    }
     return Object.keys(initialState).length > 0 ? initialState : undefined;
   };
   const records = useMemo(() => formattingData(rawData, rowGroup), [rawData, rowGroup]);
@@ -685,6 +786,7 @@ function Table({
     defaultCanSort: true,
     pageCount: totalPage || Math.ceil(totalData / limit),
     autoResetSortBy: false,
+    disableSortRemove,
     autoResetExpanded,
     onExpandedChange,
     autoResetPage: false,
@@ -696,6 +798,7 @@ function Table({
     getTableProps,
     getTableBodyProps,
     headerGroups,
+    flatHeaders,
     visibleColumns,
     prepareRow,
     rows,
@@ -736,36 +839,56 @@ function Table({
     });
     if (fetchData) fetchData(fetchParams);
   };
-  const renderFooter = () => jsx(Pagination, {
-    hidePagination: hidePagination || isExpandableTree,
-    hideInputPageSection: false,
-    limit: pageSize,
-    currentPage: pageIndex + 1,
-    totalData: totalData,
-    totalPage: totalPage,
-    onLimitChange: selectedItem => {
-      if (selectedItem) {
-        // always reset page when limit changed
-        gotoPage(0);
-        doFetchData(0, selectedItem);
-        setPageSize(selectedItem);
-        setLimit(selectedItem);
-      }
-    },
-    hideDataInfo: hideDataInfo || isExpandableTree,
-    onPageChange: page => {
-      doFetchData(page - 1, pageSize);
-      gotoPage(page - 1);
-    },
-    rowsPerPageOptions: rowsPerPageOptions,
-    css: {
-      backgroundColor: '$bgWhite',
-      padding: '$spacing-04 0',
-      '@md': {
-        padding: '$spacing-06 $spacing-03'
+  const renderFooter = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return jsx(Pagination, {
+      hidePagination: hidePagination || isExpandableTree,
+      hideInputPageSection: false,
+      limit: pageSize,
+      currentPage: pageIndex + 1,
+      totalData: totalData,
+      totalPage: totalPage,
+      onLimitChange: selectedItem => {
+        if (selectedItem) {
+          // always reset page when limit changed
+          gotoPage(0);
+          doFetchData(0, selectedItem);
+          setPageSize(selectedItem);
+          setLimit(selectedItem);
+        }
+      },
+      hideDataInfo: hideDataInfo || isExpandableTree,
+      onPageChange: page => {
+        doFetchData(page - 1, pageSize);
+        gotoPage(page - 1);
+      },
+      rowsPerPageOptions: rowsPerPageOptions,
+      showingText: (_a = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.showingText) !== null && _a !== void 0 ? _a : t('pagination.showingText', 'Tampilkan:'),
+      showingCountText: (_b = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.showingCountText) !== null && _b !== void 0 ? _b : ({
+        from,
+        to,
+        total
+      }) => t('pagination.showingCountText', `Ditampilkan ${from} - ${to} dari ${total} data`, {
+        from,
+        to,
+        total
+      }),
+      dialogShowingText: (_c = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.dialogShowingText) !== null && _c !== void 0 ? _c : t('pagination.dialogShowingText', 'Tampilkan Data'),
+      previousButton: (_d = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.previousButton) !== null && _d !== void 0 ? _d : t('pagination.previousButton', 'Sebelumnya'),
+      nextButton: (_e = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.nextButton) !== null && _e !== void 0 ? _e : t('pagination.nextButton', 'Selanjutnya'),
+      gotoPageText: (_f = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.gotoPageText) !== null && _f !== void 0 ? _f : t('pagination.gotoPageText', 'Ke Halaman'),
+      goToPagePlaceholder: (_g = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.goToPagePlaceholder) !== null && _g !== void 0 ? _g : t('pagination.goToPagePlaceholder', 'Contoh: 10'),
+      btnCancelText: (_h = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.btnCancelText) !== null && _h !== void 0 ? _h : t('pagination.btnCancelText', 'Batal'),
+      btnSubmitText: (_j = paginationLabel === null || paginationLabel === void 0 ? void 0 : paginationLabel.btnSubmitText) !== null && _j !== void 0 ? _j : t('pagination.btnSubmitText', 'Lanjutkan'),
+      css: {
+        backgroundColor: '$bgWhite',
+        padding: '$spacing-04 0',
+        '@md': {
+          padding: '$spacing-06 $spacing-03'
+        }
       }
-    }
-  });
+    });
+  };
   const renderInfiniteScrollWrapper = children => jsx(ConditionalWrapper, {
     condition: isInfiniteScroll && rawData.length > 0,
     wrapper: children => jsx(InfiniteScroll, {
@@ -903,6 +1026,38 @@ function Table({
       }))]
     });
   };
+  const renderTableFoot = () => {
+    if (!(footerData === null || footerData === void 0 ? void 0 : footerData.length)) return null;
+    let footerColumns = visibleColumns.filter(column => !column.isSubRow);
+    if (filteredHeader.length > 0 || filterHeader.length > 0) {
+      footerColumns = footerColumns.filter(column => filteredHeader.includes(column.id) || filterHeader.includes(column.id));
+    }
+    return jsx(TableFoot, {
+      css: {
+        zIndex: '$docked'
+      },
+      children: footerData.map((footerRow, footerRowIndex) => {
+        var _a;
+        return jsx(TableFootRow, {
+          children: footerColumns.map(column => jsx(TableCell, Object.assign({}, getStickyFooterProps(column, flatHeaders), {
+            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+              padding: '20px 8px',
+              fontWeight: '600',
+              verticalAlign: cellAlign
+            }), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.footerCss),
+            children: column.render('Footer', {
+              footerRow,
+              footerRowIndex,
+              value: column.accessor ? column.accessor(footerRow, footerRowIndex, {
+                subRows: [],
+                depth: 0
+              }) : undefined
+            })
+          }), column.id))
+        }, (_a = footerRow[keyId]) !== null && _a !== void 0 ? _a : footerRowIndex);
+      })
+    });
+  };
   const handleRowClick = (row, i) => {
     var _a, _b, _c, _d;
     let clickable = false;
@@ -1005,6 +1160,10 @@ function Table({
     const tableData = isExpandableTree ? rows : page;
     return virtualized ? isInfiniteScroll ? virtualRows : tableData : tableData;
   }, [virtualized, isExpandableTree, isInfiniteScroll, rows, page, virtualRows]);
+  const rowSpanColumns = useMemo(() => visibleColumns.filter(column => column.rowSpan), [visibleColumns]);
+  // Row groups interleave decorator rows and dragging reorders rows, so neither merges cells.
+  // Bail out before touching the rows: virtualized tables recompute this on every scroll.
+  const cellRowSpans = useMemo(() => rowGroup || draggable || !rowSpanColumns.length ? null : getCellRowSpans(tableRowData.map(dataRow => virtualized && isInfiniteScroll ? page === null || page === void 0 ? void 0 : page[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow), rowSpanColumns), [rowGroup, draggable, rowSpanColumns, tableRowData, virtualized, isInfiniteScroll, page]);
   const onSortEnd = ({
     oldIndex,
     newIndex
@@ -1067,13 +1226,20 @@ function Table({
                   hiddenHeader: hideHeader,
                   css: headerCss,
                   isInfiniteScroll: isInfiniteScroll,
-                  children: headerGroups.map(headerGroup => {
-                    let visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+                  children: buildHeaderRows(headerGroups, headerRowSpan).map((headerCells, headerRowIndex) => {
+                    let visibleHeaders = headerCells.filter(({
+                      column
+                    }) => !column.isSubRow);
                     if (filteredHeader.length > 0 || filterHeader.length > 0) {
-                      visibleHeaders = visibleHeaders.filter(item => filteredHeader.includes(item.id) || filterHeader.includes(item.id));
+                      visibleHeaders = visibleHeaders.filter(({
+                        column: item
+                      }) => filteredHeader.includes(item.id) || filterHeader.includes(item.id));
                     }
-                    return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-                      children: visibleHeaders.map((column, index) => {
+                    return jsx(TableHeadRow, Object.assign({}, headerGroups[headerRowIndex].getHeaderGroupProps(), {
+                      children: visibleHeaders.map(({
+                        column,
+                        rowSpan
+                      }, index) => {
                         const headerRender = column.render('Header');
                         return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
                           title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
@@ -1086,6 +1252,7 @@ function Table({
                             minWidth: column.colMinWidth
                           }
                         }]), {
+                          rowSpan: rowSpan > 1 ? rowSpan : undefined,
                           css: Object.assign(Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
                             position: 'sticky',
                             zIndex: column.sticky ? '5 !important' : 3,
@@ -1153,13 +1320,13 @@ function Table({
                           const collId = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id;
                           const exceptionId = (_c = [].concat(additionalExceptionIds)) === null || _c === void 0 ? void 0 : _c.includes(collId);
                           return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
                               padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
                               verticalAlign: cell.column.accessor ? cellAlign : 'center',
                               cursor: onRowClick ? 'pointer' : 'unset'
                             }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
                               paddingRight: index + 1 === _row.length ? 30 : null
-                            }),
+                            }), resolveCellCss(cell)),
                             onClick: () => {
                               if (!exceptionId) {
                                 handleRowClick(row, i);
@@ -1268,21 +1435,24 @@ function Table({
                           css: customStyle
                         }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
                           children: row.cells.filter(cell => filteredHeader.length > 0 || filterHeader.length > 0 ? filteredHeader.includes(cell.column.id) || filterHeader.includes(cell.column.id) : cell).filter(cell => !cell.column.isSubRow).map((cell, index, _row) => {
-                            var _a, _b, _c;
-                            let visibleHeaders = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) === null || _a === void 0 ? void 0 : _a.headers.filter(column => !column.isSubRow);
+                            var _a, _b, _c, _d;
+                            const cellRowSpan = (_a = cellRowSpans === null || cellRowSpans === void 0 ? void 0 : cellRowSpans.get(cell.column.id)) === null || _a === void 0 ? void 0 : _a.get(row.id);
+                            if (cellRowSpan === 0) return null;
+                            let visibleHeaders = (_b = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) === null || _b === void 0 ? void 0 : _b.headers.filter(column => !column.isSubRow);
                             if (filterHeader.length > 0) {
                               visibleHeaders = visibleHeaders.filter(item => filterHeader.includes(item.id));
                             }
-                            const collId = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id;
-                            const exceptionId = (_c = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _c === void 0 ? void 0 : _c.includes(collId);
+                            const collId = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id;
+                            const exceptionId = (_d = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _d === void 0 ? void 0 : _d.includes(collId);
                             return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                              css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                              rowSpan: cellRowSpan > 1 ? cellRowSpan : undefined,
+                              css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
                                 padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
                                 verticalAlign: cell.column.accessor ? cellAlign : 'center',
                                 cursor: onRowClick ? 'pointer' : 'unset'
                               }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
                                 paddingRight: index + 1 === _row.length ? 30 : null
-                              }),
+                              }), resolveCellCss(cell)),
                               onClick: () => {
                                 if (!exceptionId) {
                                   handleRowClick(row, i);
@@ -1364,7 +1534,7 @@ function Table({
                       }
                     })
                   })]
-                }))]
+                })), renderTableFoot()]
               }))
             }), renderContextMenu()]
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "main": "./index.esm.js",
   "sideEffects": [
     "*.css",