@careharmony/mantine-react-table-ng 0.0.0-stage → 4.0.0-beta.0

package/src/components/head/MRT_TableHead.module.css

@@ -0,0 +1,32 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  opacity: 0.97;
+  position: relative;
+}
+
+.root-grid {
+  display: grid;
+}
+
+.root-table-row-group {
+  display: table-row-group;
+}
+
+.root-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.banner-tr {
+  display: table-row;
+}
+
+.banner-th {
+  display: table-cell;
+  padding: 0;
+}
+
+.grid {
+  display: grid;
+}

package/src/components/head/MRT_TableHead.tsx

@@ -0,0 +1,106 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableHead.module.css';
+
+import {
+  TableTh,
+  TableThead,
+  type TableTheadProps,
+  TableTr,
+} from '@mantine/core';
+
+import { MRT_TableHeadRow } from './MRT_TableHeadRow';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
+
+interface Props<TData extends MRT_RowData> extends TableTheadProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHead = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getHeaderGroups,
+    getSelectedRowModel,
+    getState,
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      mantineTableHeadProps,
+      positionToolbarAlertBanner,
+    },
+    refs: { tableHeadRef },
+  } = table;
+  const { isFullScreen, showAlertBanner } = getState();
+
+  const tableHeadProps = {
+    ...parseFromValuesOrFunc(mantineTableHeadProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const stickyHeader = enableStickyHeader || isFullScreen;
+
+  return (
+    <TableThead
+      {...tableHeadProps}
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid')
+          ? classes['root-grid']
+          : classes['root-table-row-group'],
+        stickyHeader && classes['root-sticky'],
+        tableHeadProps?.className,
+      )}
+      pos={
+        stickyHeader && layoutMode?.startsWith('grid') ? 'sticky' : 'relative'
+      }
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        assignRef(tableHeadProps?.ref, ref);
+      }}
+    >
+      {positionToolbarAlertBanner === 'head-overlay' &&
+      (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
+        <TableTr
+          className={clsx(
+            classes['banner-tr'],
+            layoutMode?.startsWith('grid') && classes.grid,
+          )}
+        >
+          <TableTh
+            className={clsx(
+              classes['banner-th'],
+              layoutMode?.startsWith('grid') && classes.grid,
+            )}
+            colSpan={table.getVisibleLeafColumns().length}
+          >
+            <MRT_ToolbarAlertBanner table={table} />
+          </TableTh>
+        </TableTr>
+      ) : (
+        getHeaderGroups().map((headerGroup) => (
+          <MRT_TableHeadRow
+            columnVirtualizer={columnVirtualizer}
+            headerGroup={headerGroup as any}
+            key={headerGroup.id}
+            table={table}
+          />
+        ))
+      )}
+    </TableThead>
+  );
+};

package/src/components/head/MRT_TableHeadCell.module.css

@@ -0,0 +1,172 @@
+.root {
+  --resize-border-color: var(--mantine-primary-color-filled);
+  --hover-color: var(--mantine-primary-color-filled);
+  --drag-color: var(--mantine-color-gray-7);
+  --resize-thickness: 2px;
+  --hover-thickness: 3px;
+  --drag-thickness: 1px;
+
+  background-color: var(--mrt-base-background-color);
+  background-clip: padding-box;
+  font-weight: bold;
+  overflow: visible;
+  position: relative;
+  transition: padding 150ms ease-in-out;
+  vertical-align: top;
+  z-index: 1;
+
+  &:active {
+    z-index: 3;
+  }
+
+  &[data-column-pinned] {
+    background-color: var(--mrt-base-background-color);
+    opacity: 0.97;
+    position: sticky;
+    z-index: 4;
+    &[data-column-pinned='left'] {
+      /* logical offsets keep columns pinned to the same side of the row in rtl */
+      inset-inline-start: calc(var(--mrt-table-cell-left, 0) * 1px);
+      &[data-last-left-pinned] {
+        --mrt-pinned-shadow-x: -6px;
+        @mixin rtl {
+          --mrt-pinned-shadow-x: 6px;
+        }
+        box-shadow: var(--mrt-pinned-shadow-x) 0 6px -6px alpha(
+            light-dark(
+              var(--mantine-color-gray-outline),
+              var(--mantine-color-dark-outline)
+            ),
+            0.5
+          ) inset;
+      }
+    }
+
+    &[data-column-pinned='right'] {
+      inset-inline-end: calc(var(--mrt-table-cell-right, 0) * 1px);
+      &[data-first-right-pinned] {
+        --mrt-pinned-shadow-x: 6px;
+        @mixin rtl {
+          --mrt-pinned-shadow-x: -6px;
+        }
+        box-shadow: var(--mrt-pinned-shadow-x) 0 6px -6px alpha(
+            light-dark(
+              var(--mantine-color-gray-outline),
+              var(--mantine-color-dark-outline)
+            ),
+            0.5
+          ) inset;
+      }
+    }
+  }
+
+  &[data-resizing] {
+    &[data-resizing='ltr'] {
+      border-right: var(--resize-thickness) solid var(--resize-border-color);
+    }
+    &[data-resizing='rtl'] {
+      border-left: var(--resize-thickness) solid var(--resize-border-color);
+    }
+  }
+
+  &[data-dragging-column] {
+    border-left: var(--drag-thickness) dashed var(--drag-color);
+    border-right: var(--drag-thickness) dashed var(--drag-color);
+    border-top: var(--drag-thickness) dashed var(--drag-color);
+    opacity: 0.5;
+    z-index: 3;
+  }
+
+  &[data-hovered-column-target] {
+    border-left: var(--hover-thickness) dashed var(--hover-color);
+    border-right: var(--hover-thickness) dashed var(--hover-color);
+    border-top: var(--hover-thickness) dashed var(--hover-color);
+    z-index: 2;
+  }
+
+  :global(.mantine-ActionIcon-root) {
+    opacity: 0.7;
+    transition: opacity 100ms ease-in-out;
+  }
+
+  &:hover {
+    :global(.mantine-ActionIcon-root) {
+      opacity: 1;
+    }
+  }
+}
+
+.root-grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.root-virtualized {
+  transition: none;
+}
+
+.root-no-select {
+  user-select: none;
+}
+
+.content {
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.content-spaced {
+  justify-content: space-between;
+}
+
+.content-center {
+  justify-content: center;
+}
+
+.content-right {
+  flex-direction: row-reverse;
+}
+
+.content-wrapper {
+  text-overflow: ellipsis;
+}
+
+.content-wrapper-hidden-overflow {
+  overflow: hidden;
+}
+
+.content-wrapper-nowrap {
+  white-space: nowrap;
+}
+
+.labels {
+  align-items: center;
+  gap: rem(2px);
+  min-height: rem(22px);
+}
+
+.labels-right {
+  flex-direction: row-reverse;
+}
+
+.labels-center {
+  padding-left: calc(var(--mrt-table-head-cell-labels-padding-left) * 1rem);
+}
+
+.labels-sortable {
+  cursor: pointer;
+}
+
+.labels-data {
+  overflow: hidden;
+}
+
+.content-actions {
+  align-items: center;
+  align-self: center;
+  white-space: nowrap;
+  gap: rem(2px);
+  margin-left: rem(2px);
+}

package/src/components/head/MRT_TableHeadCell.tsx

@@ -0,0 +1,317 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCell.module.css';
+
+import {
+  type CSSProperties,
+  type DragEventHandler,
+  type ReactNode,
+  useMemo,
+  useState,
+} from 'react';
+
+import { Flex, TableTh, type TableThProps, useDirection } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
+import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
+import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
+import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getMRT_HeaderView } from '../../utils/snapshot.utils';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
+
+interface Props<TData extends MRT_RowData> extends TableThProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  header: MRT_Header<TData>;
+  renderedHeaderIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCell = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  header: headerProp,
+  renderedHeaderIndex = 0,
+  table,
+  ...rest
+}: Props<TData>) => {
+  //a view has a new identity per table reference, which compiled render callbacks need
+  const header = getMRT_HeaderView(table, headerProp);
+  const direction = useDirection();
+  const {
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      columnResizeDirection,
+      columnResizeMode,
+      enableColumnActions,
+      enableColumnDragging,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableGrouping,
+      enableHeaderActionsHoverReveal,
+      enableMultiSort,
+      layoutMode,
+      mantineTableHeadCellProps,
+    },
+    refs: { tableHeadCellRefs },
+    setHoveredColumn,
+  } = table;
+  const { columnSizingInfo, draggingColumn, grouping, hoveredColumn } =
+    getState();
+  const { column } = header;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const arg = { column, table };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(mantineTableHeadCellProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineTableHeadCellProps, arg),
+    ...rest,
+  };
+
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--header-${parseCSSVarId(
+      header?.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--header-${parseCSSVarId(header.id)}-size) * 1px)`,
+  };
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--header-${parseCSSVarId(header.id)}-size)`
+    } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const isDraggingColumn = draggingColumn?.id === column.id;
+  const isHoveredColumn = hoveredColumn?.id === column.id;
+
+  const { hovered: isHoveredHeadCell, ref: isHoveredHeadCellRef } =
+    useHover<HTMLTableCellElement>();
+
+  const [isOpenedColumnActions, setIsOpenedColumnActions] = useState(false);
+
+  const columnActionsEnabled =
+    (enableColumnActions || columnDef.enableColumnActions) &&
+    columnDef.enableColumnActions !== false;
+
+  const showColumnButtons =
+    !enableHeaderActionsHoverReveal ||
+    isOpenedColumnActions ||
+    (isHoveredHeadCell &&
+      !table.getVisibleFlatColumns().find((column) => column.getIsResizing()));
+
+  const showDragHandle =
+    enableColumnDragging !== false &&
+    columnDef.enableColumnDragging !== false &&
+    (enableColumnDragging ||
+      (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
+      (enableGrouping &&
+        columnDef.enableGrouping !== false &&
+        !grouping.includes(column.id))) &&
+    showColumnButtons;
+
+  const headerPL = useMemo(() => {
+    let pl = 0;
+    if (column.getCanSort()) pl++;
+    // Only add padding for buttons if they will actually be displayed
+    if (showColumnButtons && (columnActionsEnabled || showDragHandle))
+      pl += 1.75;
+    if (showDragHandle) pl += 1.25;
+    return pl;
+  }, [showColumnButtons, showDragHandle, columnActionsEnabled]);
+
+  const handleDragEnter: DragEventHandler<HTMLTableCellElement> = (_e) => {
+    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+      setHoveredColumn(null);
+    }
+    if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
+      setHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
+    }
+  };
+
+  const headerElement =
+    columnDef?.Header instanceof Function
+      ? columnDef?.Header?.({
+          column,
+          header,
+          table,
+        })
+      : (columnDef?.Header ?? (columnDef.header as ReactNode));
+
+  return (
+    <TableTh
+      colSpan={header.colSpan}
+      data-column-pinned={isColumnPinned || undefined}
+      data-dragging-column={isDraggingColumn || undefined}
+      data-first-right-pinned={
+        (isColumnPinned === 'right' &&
+          column.getIsFirstColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-hovered-column-target={isHoveredColumn || undefined}
+      data-index={renderedHeaderIndex}
+      data-last-left-pinned={
+        (isColumnPinned === 'left' && column.getIsLastColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-resizing={
+        (columnResizeMode === 'onChange' &&
+          columnSizingInfo?.isResizingColumn === column.id &&
+          columnResizeDirection) ||
+        undefined
+      }
+      {...tableCellProps}
+      __vars={{
+        '--mrt-table-cell-left':
+          isColumnPinned === 'left'
+            ? `${column.getStart(isColumnPinned)}`
+            : undefined,
+        '--mrt-table-cell-right':
+          isColumnPinned === 'right'
+            ? `${column.getAfter(isColumnPinned)}`
+            : undefined,
+      }}
+      align={
+        columnDefType === 'group'
+          ? 'center'
+          : direction.dir === 'rtl'
+            ? 'right'
+            : 'left'
+      }
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['root-grid'],
+        enableMultiSort && column.getCanSort() && classes['root-no-select'],
+        columnVirtualizer && classes['root-virtualized'],
+        tableCellProps?.className,
+      )}
+      onDragEnter={handleDragEnter}
+      ref={(node: HTMLTableCellElement) => {
+        if (node) {
+          tableHeadCellRefs.current[column.id] = node;
+          isHoveredHeadCellRef(node);
+          if (columnDefType !== 'group') {
+            columnVirtualizer?.measureElement?.(node);
+          }
+        }
+      }}
+      style={(theme) => ({
+        ...widthStyles,
+        ...parseFromValuesOrFunc(tableCellProps?.style, theme),
+      })}
+    >
+      {header.isPlaceholder
+        ? null
+        : (tableCellProps.children ?? (
+            <Flex
+              className={clsx(
+                'mrt-table-head-cell-content',
+                classes.content,
+                (columnDefType === 'group' ||
+                  tableCellProps?.align === 'center') &&
+                  classes['content-center'],
+                tableCellProps?.align === 'right' && classes['content-right'],
+                column.getCanResize() && classes['content-spaced'],
+              )}
+            >
+              <Flex
+                __vars={{
+                  '--mrt-table-head-cell-labels-padding-left': `${headerPL}`,
+                }}
+                className={clsx(
+                  'mrt-table-head-cell-labels',
+                  classes.labels,
+                  column.getCanSort() &&
+                    columnDefType !== 'group' &&
+                    classes['labels-sortable'],
+                  tableCellProps?.align === 'right'
+                    ? classes['labels-right']
+                    : tableCellProps?.align === 'center' &&
+                        classes['labels-center'],
+                  columnDefType === 'data' && classes['labels-data'],
+                )}
+                onClick={column.getToggleSortingHandler()}
+              >
+                <Flex
+                  className={clsx(
+                    'mrt-table-head-cell-content-wrapper',
+                    classes['content-wrapper'],
+                    columnDefType === 'data' &&
+                      classes['content-wrapper-hidden-overflow'],
+                    (columnDef.header?.length ?? 0) < 20 &&
+                      classes['content-wrapper-nowrap'],
+                  )}
+                >
+                  {headerElement}
+                </Flex>
+                {column.getCanFilter() &&
+                  (column.getIsFiltered() || showColumnButtons) && (
+                    <MRT_TableHeadCellFilterLabel
+                      header={header}
+                      table={table}
+                    />
+                  )}
+                {column.getCanSort() &&
+                  (column.getIsSorted() || showColumnButtons) && (
+                    <MRT_TableHeadCellSortLabel header={header} table={table} />
+                  )}
+              </Flex>
+              {columnDefType !== 'group' && (
+                <Flex
+                  className={clsx(
+                    'mrt-table-head-cell-content-actions',
+                    classes['content-actions'],
+                  )}
+                >
+                  {showDragHandle && (
+                    <MRT_TableHeadCellGrabHandle
+                      column={column}
+                      table={table}
+                      tableHeadCellRef={{
+                        current: tableHeadCellRefs.current[column.id],
+                      }}
+                    />
+                  )}
+                  {columnActionsEnabled && showColumnButtons && (
+                    <MRT_ColumnActionMenu
+                      header={header}
+                      onChange={setIsOpenedColumnActions}
+                      opened={isOpenedColumnActions}
+                      table={table}
+                    />
+                  )}
+                </Flex>
+              )}
+              {column.getCanResize() && (
+                <MRT_TableHeadCellResizeHandle header={header} table={table} />
+              )}
+            </Flex>
+          ))}
+      {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
+        <MRT_TableHeadCellFilterContainer header={header} table={table} />
+      )}
+    </TableTh>
+  );
+};

package/src/components/head/MRT_TableHeadCellFilterContainer.module.css

@@ -0,0 +1,5 @@
+.filter-mode-label {
+  white-space: nowrap;
+  margin-top: 4px;
+  font-size: 10px;
+}