@majoo-ui/react 2.1.1 → 2.1.3

package/components/table/MobileTable.esm.js

@@ -10,6 +10,10 @@ import { styled } from '../../config/stitches.config.esm.js';
 import Box from '../../layout/box/Box.esm.js';
 import Flex from '../../layout/flex/Flex.esm.js';
 import { TableContent, TableHead, TableHeaderCellContainer, TableHeadCellContent, TableBody, addOnCellStyle, TableFoot, TableFootRow, TableFootCell } from './Table.esm.js';
+import { resolveCellCss } from './utils/columnStyles.esm.js';
+import { footerValueOf } from './utils/footerValue.esm.js';
+import { HeaderTooltip } from './utils/HeaderTooltip.esm.js';
+import { isHeaderSortable, getAriaSort } from './utils/headerSort.esm.js';
 import Text from '../text/Text.esm.js';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
 import { ContextMenuTrigger } from '../contextMenu/ContextMenu.esm.js';
@@ -80,7 +84,11 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   hideHeader,
   decoration,
   rowVirtualizer,
-  virtualized
+  virtualized,
+  footerData,
+  footerColumnIds,
+  headerRowSpan,
+  keyId = 'id'
 }, ref) => {
   var _a, _b, _c, _d;
   const {
@@ -178,26 +186,29 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
       children: jsxs(TableContent, Object.assign({}, getTableProps(), {
         children: [jsx(TableHead, {
           hiddenHeader: hideHeader,
-          children: headerGroups.map(headerGroup => jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+          children: (headerRowSpan ? headerGroups.slice(-1) : headerGroups).map(headerGroup => jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
             children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
               const headerRender = column.render('Header');
-              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
+              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(isHeaderSortable(column) ? column.getSortByToggleProps({
                 title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
               }) : {
                 onClick: column.onToggle
               }), {
-                children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                "aria-sort": getAriaSort(column),
+                children: typeof headerRender === 'string' ? jsxs(TableHeaderCellContainer, {
                   isMobile: true,
                   isSortedDesc: column.isSortedDesc,
-                  unsortable: column.unsortable,
+                  unsortable: !isHeaderSortable(column),
                   isToggleable: !!column.onToggle,
                   isToggled: column.isToggled,
-                  children: jsx(TableHeadCellContent, {
+                  children: [jsx(TableHeadCellContent, {
                     isMobile: true,
                     heading: "headerTable",
                     color: "secondary",
                     children: headerRender.toUpperCase()
-                  })
+                  }), column.headerTooltip && jsx(HeaderTooltip, {
+                    label: column.headerTooltip
+                  })]
                 }) : headerRender
               }));
             })
@@ -281,6 +292,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       children: cell.render('Cell')
                     });
                     return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                      css: resolveCellCss(cell),
                       children: cell.column.accessor ? jsxs(Flex, {
                         justify: "between",
                         align: "center",
@@ -341,12 +353,12 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                           align: "center",
                           justify: "between",
                           gap: 5,
-                          css: {
+                          css: Object.assign({
                             backgroundColor: '$bgGray',
                             padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
                             borderBottom: '1pt solid $bgBorder',
                             alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
-                          },
+                          }, resolveCellCss(cell)),
                           children: [jsx(Heading, {
                             css: {
                               padding: '3px 0px'
@@ -383,6 +395,48 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 }) : null]
               }, row.id);
             })
+          }), footerData === null || footerData === void 0 ? void 0 : footerData.map((footerRow, footerRowIndex) => {
+            var _a;
+            return jsx(TableRow, {
+              children: jsx(TableCell, {
+                colSpan: visibleColumns.length,
+                css: {
+                  backgroundColor: '$bgGray'
+                },
+                children: jsx(Flex, {
+                  direction: "column",
+                  children: visibleColumns.map((column, index) => {
+                    // A column without a Footer of its own would only add an empty line.
+                    if (column.isSubRow || !(footerColumnIds === null || footerColumnIds === void 0 ? void 0 : footerColumnIds.has(column.id))) return null;
+                    const isTitle = getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader;
+                    return jsxs(Flex, {
+                      align: "center",
+                      justify: "between",
+                      gap: 5,
+                      css: Object.assign({
+                        padding: '$spacing-04 $spacing-05',
+                        borderBottom: '1pt solid $bgBorder'
+                      }, column.footerCss),
+                      children: [!isTitle && jsx(Heading, {
+                        css: {
+                          padding: '3px 0px'
+                        },
+                        heading: "headerTable",
+                        color: "secondary",
+                        children: typeof column.Header === 'string' ? column.Header.toUpperCase() : column.render('Header')
+                      }), jsx(Paragraph, {
+                        paragraph: "shortContentBold",
+                        children: column.render('Footer', {
+                          footerRow,
+                          footerRowIndex,
+                          value: footerValueOf(column, footerRow, footerRowIndex)
+                        })
+                      })]
+                    }, column.id);
+                  })
+                })
+              })
+            }, (_a = footerRow[keyId]) !== null && _a !== void 0 ? _a : `footer-${footerRowIndex}`);
           }), (_d = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _d === void 0 ? void 0 : _d.call(decoration), isInfiniteScroll && paddingBottom > 0 && jsx("tr", {
             children: jsx("td", {
               style: {

package/components/table/Table.esm.js

@@ -4,14 +4,26 @@ import 'core-js/modules/es.iterator.constructor.js';
 import 'core-js/modules/es.iterator.filter.js';
 import 'core-js/modules/es.iterator.for-each.js';
 import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.some.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 'core-js/modules/es.weak-map.get-or-insert.js';
+import 'core-js/modules/es.weak-map.get-or-insert-computed.js';
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
-import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
+import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect, emptyRenderer } from 'react-table';
 import { SortableElement, SortableContainer, arrayMove } from 'react-sortable-hoc';
 import Text from '../text/Text.esm.js';
 import Paragraph from '../paragraph/Paragraph.esm.js';
@@ -28,7 +40,11 @@ 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 { alignCss, headerAlignCss, resolveCellCss } from './utils/columnStyles.esm.js';
+import { footerValueOf } from './utils/footerValue.esm.js';
+import { HeaderTooltip } from './utils/HeaderTooltip.esm.js';
+import { isHeaderSortable, getAriaSort } from './utils/headerSort.esm.js';
+import { useSticky, getStickyValue, getMarginRight } from 'react-table-sticky';
 import { useTranslation } from 'react-i18next';
 import { useVirtual } from 'react-virtual';
 import { PlusPrimitive } from '@majoo-ui/icons';
@@ -274,6 +290,10 @@ const TableRow = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
   '&:hover': {
     backgroundColor: '$bgGray',
+    // Body cells paint a background of their own (white, or a column's cellCss) over the row's.
+    '& > td': {
+      backgroundColor: '$bgGray'
+    },
     '& *[data-sticky-td="true"]': {
       backgroundColor: '$bgGray'
     }
@@ -380,6 +400,108 @@ const stickyShadowStyling = (column, tableScrollPosition, scrollAreaWidth) => {
   }
   return {};
 };
+/**
+ * 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
+  };
+};
+/**
+ * react-table-sticky offsets a sticky column by react-table's `width` of the columns beside it, which
+ * stays at its 150px default unless set, so a numeric `colWidth` is passed on as that width.
+ */
+const withStickyWidths = columns => {
+  const needsWidth = column => {
+    var _a;
+    return typeof column.colWidth === 'number' && column.width === undefined || ((_a = column.columns) === null || _a === void 0 ? void 0 : _a.some(needsWidth));
+  };
+  if (!columns.some(needsWidth)) return columns;
+  return columns.map(column => Object.assign(Object.assign(Object.assign({}, column), typeof column.colWidth === 'number' && column.width === undefined && {
+    width: column.colWidth
+  }), column.columns && {
+    columns: withStickyWidths(column.columns)
+  }));
+};
+const isMissingRowId = value => value === undefined || value === null || value === '';
+/**
+ * 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. `anchors` maps every row of a
+ * run to its first row, the one whose cell a hover anywhere in the run highlights.
+ */
+const getCellRowSpans = (rows, spanColumns) => {
+  const spans = new Map();
+  const anchors = 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();
+    const columnAnchors = new Map();
+    spans.set(column.id, columnSpans);
+    anchors.set(column.id, columnAnchors);
+    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);
+        columnAnchors.set(row.id, anchorId);
+        return;
+      }
+      anchorId = hasKey ? row.id : null;
+      anchorKey = key;
+      columnSpans.set(row.id, 1);
+      columnAnchors.set(row.id, row.id);
+    });
+  });
+  return {
+    spans,
+    anchors
+  };
+};
 const formattingData = (rawData, rowGroup) => {
   if ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey) && !(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.isManuallyFormatted)) {
     const {
@@ -624,7 +746,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);
@@ -639,6 +765,7 @@ function Table({
   }, [filterHeader]);
   const [filteredHeader, setFilteredHeader] = useState([]);
   const [hasDarkParent, setHasDarkParent] = useState(false);
+  const [hoveredRowId, setHoveredRowId] = useState(null);
   const {
     t
   } = useTranslation('MajooUI/table');
@@ -661,18 +788,52 @@ function Table({
         expanded: controlledExpanded
       });
     }
+    if (initialSortBy) {
+      Object.assign(initialState, {
+        sortBy: initialSortBy
+      });
+    }
+    // Otherwise react-table's default of 10 rows shows until the pageSize effect below runs.
+    const initialPageSize = withoutLimit ? totalData : rowLimit;
+    if (typeof initialPageSize === 'number') {
+      Object.assign(initialState, {
+        pageSize: initialPageSize
+      });
+    }
     return Object.keys(initialState).length > 0 ? initialState : undefined;
   };
   const records = useMemo(() => formattingData(rawData, rowGroup), [rawData, rowGroup]);
+  // A row without a `keyId` is identified by its JSON; identical rows would share that id, so every
+  // repeat gets an occurrence suffix.
+  const fallbackRowIds = useMemo(() => {
+    const ids = new WeakMap();
+    const occurrences = new Map();
+    const visit = rowList => {
+      if (!Array.isArray(rowList)) return;
+      rowList.forEach(row => {
+        var _a;
+        if (!row || typeof row !== 'object') return;
+        if (isMissingRowId(row[keyId])) {
+          const json = JSON.stringify(row);
+          const count = (_a = occurrences.get(json)) !== null && _a !== void 0 ? _a : 0;
+          occurrences.set(json, count + 1);
+          ids.set(row, count ? `${json}#${count}` : json);
+        }
+        visit(row[subRows]);
+      });
+    };
+    visit(records);
+    return ids;
+  }, [records, keyId, subRows]);
   const filteredColumns = useMemo(() => {
     if (draggable) {
-      return [rowDraggableColumn,
+      return withStickyWidths([rowDraggableColumn,
       // remove all action column
       ...columns.filter(item => !['menu', 'expander', 'multiple-expander', 'selection'].includes(item.id))].map(col => Object.assign(Object.assign({}, col), {
         unsortable: false
-      }));
+      })));
     }
-    return columns;
+    return withStickyWidths(columns);
   }, [draggable, columns]);
   const instance = useTable({
     columns: filteredColumns,
@@ -686,17 +847,22 @@ function Table({
     defaultCanSort: true,
     pageCount: totalPage || Math.ceil(totalData / limit),
     autoResetSortBy: false,
+    disableSortRemove,
     autoResetExpanded,
     onExpandedChange,
     autoResetPage: false,
     autoResetSelectedRows: false,
-    getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row),
+    getRowId: showDuplicatedData ? undefined : row => {
+      var _a;
+      return isMissingRowId(row[keyId]) ? (_a = fallbackRowIds.get(row)) !== null && _a !== void 0 ? _a : JSON.stringify(row) : row[keyId];
+    },
     getSubRows: row => row[subRows] || []
   }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
+    flatHeaders,
     visibleColumns,
     prepareRow,
     rows,
@@ -892,7 +1058,7 @@ function Table({
           return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
             children: visibleHeaders.map((column, index) => {
               const headerRender = column.render('Header');
-              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
+              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, isHeaderSortable(column) ? column.getSortByToggleProps({
                 title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
               }) : {
                 onClick: column.onToggle
@@ -906,7 +1072,7 @@ function Table({
                 css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss),
                 children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
                   isSortedDesc: column.isSortedDesc,
-                  unsortable: column.unsortable,
+                  unsortable: !isHeaderSortable(column),
                   isToggleable: !!column.onToggle,
                   isToggled: column.isToggled,
                   darkTheme: hasDarkParent,
@@ -924,6 +1090,35 @@ 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(Object.assign({}, cssTableCell), {
+              padding: '20px 8px',
+              fontWeight: '600',
+              verticalAlign: cellAlign
+            }), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), alignCss(column)), column.footerCss),
+            children: column.render('Footer', {
+              footerRow,
+              footerRowIndex,
+              value: footerValueOf(column, footerRow, footerRowIndex)
+            })
+          }), column.id))
+        }, (_a = footerRow[keyId]) !== null && _a !== void 0 ? _a : footerRowIndex);
+      })
+    });
+  };
   const handleRowClick = (row, i) => {
     var _a, _b, _c, _d;
     let clickable = false;
@@ -1026,6 +1221,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
@@ -1088,15 +1287,22 @@ 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({
+                        return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, isHeaderSortable(column) ? column.getSortByToggleProps({
                           title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
                         }) : {
                           onClick: column.onToggle
@@ -1107,26 +1313,33 @@ function Table({
                             minWidth: column.colMinWidth
                           }
                         }]), {
+                          "aria-sort": getAriaSort(column),
+                          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,
                             top: 0
                           }),
-                          children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                          children: typeof headerRender === 'string' ? jsxs(TableHeaderCellContainer, {
                             isSortedDesc: column.isSortedDesc,
-                            unsortable: id ? true : column.unsortable,
+                            unsortable: !isHeaderSortable(column),
                             isToggleable: !!column.onToggle,
                             isToggled: column.isToggled,
                             darkTheme: hasDarkParent,
-                            css: {
+                            css: Object.assign({
                               width: column.colWidth,
                               maxWidth: column.colMaxWidth,
                               minWidth: column.colMinWidth
-                            },
-                            children: jsx(TableHeadCellContent, {
+                            }, headerAlignCss(column)),
+                            children: [jsx(TableHeadCellContent, {
                               heading: "headerTable",
+                              css: Object.assign({
+                                color: 'inherit'
+                              }, alignCss(column)),
                               children: headerRender.toUpperCase()
-                            })
+                            }), column.headerTooltip && jsx(HeaderTooltip, {
+                              label: column.headerTooltip
+                            })]
                           }) : headerRender
                         }));
                       })
@@ -1174,13 +1387,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(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
-                            }),
+                            }), alignCss(cell.column)), resolveCellCss(cell)),
                             onClick: () => {
                               if (!exceptionId) {
                                 handleRowClick(row, i);
@@ -1213,6 +1426,7 @@ function Table({
                     }, row.id);
                   })
                 })) : jsxs(TableBody, Object.assign({}, getTableBodyProps(), {
+                  onMouseLeave: cellRowSpans ? () => setHoveredRowId(null) : undefined,
                   children: [isInfiniteScroll && paddingTop > 0 && jsx("tr", {
                     children: jsx("td", {
                       style: {
@@ -1232,7 +1446,10 @@ function Table({
                     wrapper: child => tableRowData && tableRowData.length > 0 ? jsx(TableRow, {
                       css: {
                         '&:hover': {
-                          backgroundColor: 'unset'
+                          backgroundColor: 'unset',
+                          '& > td': {
+                            backgroundColor: 'unset'
+                          }
                         }
                       },
                       children: jsx(TableCell, {
@@ -1288,21 +1505,27 @@ function Table({
                         })), jsx(TableRow, Object.assign({
                           css: customStyle
                         }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
+                          onMouseEnter: cellRowSpans ? () => setHoveredRowId(row.id) : undefined,
                           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, _e;
+                            const cellRowSpan = (_a = cellRowSpans === null || cellRowSpans === void 0 ? void 0 : cellRowSpans.spans.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(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
+                              }), alignCss(cell.column)), resolveCellCss(cell)), cellRowSpan > 1 && ((_e = cellRowSpans.anchors.get(cell.column.id)) === null || _e === void 0 ? void 0 : _e.get(hoveredRowId)) === row.id && {
+                                backgroundColor: '$bgGray'
                               }),
                               onClick: () => {
                                 if (!exceptionId) {
@@ -1385,7 +1608,7 @@ function Table({
                       }
                     })
                   })]
-                }))]
+                })), renderTableFoot()]
               }))
             }), renderContextMenu()]
           })
@@ -1468,7 +1691,11 @@ function Table({
       additionalExceptionIds: additionalExceptionIds,
       hideHeader: hideHeader,
       decoration: decoration,
-      rowVirtualizer: rowVirtualizer
+      rowVirtualizer: rowVirtualizer,
+      footerData: footerData,
+      footerColumnIds: (footerData === null || footerData === void 0 ? void 0 : footerData.length) ? new Set(visibleColumns.filter(column => column.Footer !== emptyRenderer).map(column => column.id)) : undefined,
+      headerRowSpan: headerRowSpan,
+      keyId: keyId
     })]
   });
 }

package/components/table/utils/HeaderTooltip.esm.js

@@ -0,0 +1,26 @@
+import 'react';
+import { CircleQuestionOutline } from '@majoo-ui/icons';
+import Box from '../../../layout/box/Box.esm.js';
+import { jsx } from 'react/jsx-runtime';
+import Tooltip from '../../tooltip/Tooltip.esm.js';
+
+const HeaderTooltip = ({
+  label
+}) => /*#__PURE__*/jsx(Tooltip, {
+  label: label,
+  side: "top",
+  children: /*#__PURE__*/jsx(Box, {
+    as: "span",
+    css: {
+      display: 'flex',
+      cursor: 'help'
+    },
+    onClick: event => event.stopPropagation(),
+    children: /*#__PURE__*/jsx(CircleQuestionOutline, {
+      size: 16,
+      color: "currentColor"
+    })
+  })
+});
+
+export { HeaderTooltip };

package/components/table/utils/columnStyles.esm.js

@@ -0,0 +1,22 @@
+const JUSTIFY_CONTENT = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+/** A column's `cellCss` for one cell, called with the cell when it is a function. */
+const resolveCellCss = cell => {
+  const {
+    cellCss
+  } = cell.column;
+  return typeof cellCss === 'function' ? cellCss(cell) : cellCss;
+};
+/** Horizontal alignment of a column's body cells, footer cells and header label text. */
+const alignCss = column => column.align ? {
+  textAlign: column.align
+} : undefined;
+/** The header label sits in a flex container, which follows the column's alignment through justify-content. */
+const headerAlignCss = column => column.align ? {
+  justifyContent: JUSTIFY_CONTENT[column.align]
+} : undefined;
+
+export { alignCss, headerAlignCss, resolveCellCss };

package/components/table/utils/footerValue.esm.js

@@ -0,0 +1,7 @@
+/** What a column's accessor reads from a footer row: the `value` its `Footer` receives. */
+const footerValueOf = (column, footerRow, footerRowIndex) => typeof column.accessor === 'function' ? column.accessor(footerRow, footerRowIndex, {
+  subRows: [],
+  depth: 0
+}) : undefined;
+
+export { footerValueOf };

package/components/table/utils/headerSort.esm.js

@@ -0,0 +1,15 @@
+/**
+ * Whether a header click should toggle the sort. react-table's `defaultCanSort` makes every header
+ * sortable, but toggling a group header or the placeholder above an ungrouped column throws (neither
+ * is in `allColumns`), and a column without an accessor has nothing to sort on unless it brings its
+ * own `sortType`.
+ */
+const isHeaderSortable = column => !column.unsortable && !column.columns && !column.placeholderOf && (Boolean(column.accessor) || typeof column.sortType === 'function');
+/** `aria-sort` of a header cell; only a header that can sort announces a sort state. */
+const getAriaSort = column => {
+  if (!isHeaderSortable(column)) return undefined;
+  if (!column.isSorted) return 'none';
+  return column.isSortedDesc ? 'descending' : 'ascending';
+};
+
+export { getAriaSort, isHeaderSortable };

package/index.esm.css

@@ -1,3 +1,7 @@
+.recharts-pie-sector {
+  outline: none;
+}
+
 .rdw-option-wrapper {
   padding: 5px;
   min-width: 25px;
@@ -1045,10 +1049,6 @@
   counter-reset: ol4;
 }
 
-.recharts-pie-sector {
-  outline: none;
-}
-
 .ReactCrop {
   position: relative;
   display: inline-block;

package/package.json

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

package/src/components/table/MobileTable.d.ts

@@ -34,6 +34,10 @@ interface MobileTableProps {
     decoration?: Decoration;
     rowVirtualizer: IRowVirtualizer;
     virtualized?: boolean;
+    footerData?: Record<string, any>[];
+    footerColumnIds?: Set<string>;
+    headerRowSpan?: boolean;
+    keyId?: string;
 }
 declare const MobileTable: React.ForwardRefExoticComponent<MobileTableProps & React.RefAttributes<HTMLDivElement>>;
 export default MobileTable;

package/src/components/table/utils/columnStyles.d.ts

@@ -0,0 +1,10 @@
+/** A column's `cellCss` for one cell, called with the cell when it is a function. */
+export declare const resolveCellCss: (cell: any) => any;
+/** Horizontal alignment of a column's body cells, footer cells and header label text. */
+export declare const alignCss: (column: any) => {
+    textAlign: any;
+} | undefined;
+/** The header label sits in a flex container, which follows the column's alignment through justify-content. */
+export declare const headerAlignCss: (column: any) => {
+    justifyContent: any;
+} | undefined;

package/src/components/table/utils/footerValue.d.ts

@@ -0,0 +1,2 @@
+/** What a column's accessor reads from a footer row: the `value` its `Footer` receives. */
+export declare const footerValueOf: (column: any, footerRow: any, footerRowIndex: any) => any;

package/src/components/table/utils/headerSort.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a header click should toggle the sort. react-table's `defaultCanSort` makes every header
+ * sortable, but toggling a group header or the placeholder above an ungrouped column throws (neither
+ * is in `allColumns`), and a column without an accessor has nothing to sort on unless it brings its
+ * own `sortType`.
+ */
+export declare const isHeaderSortable: (column: any) => boolean;
+/** `aria-sort` of a header cell; only a header that can sort announces a sort state. */
+export declare const getAriaSort: (column: any) => "none" | "ascending" | "descending" | undefined;