@kissesses/mantine-react-table-open 9.0.3

package/src/components/body/MRT_TableBodyRow.module.css

@@ -0,0 +1,252 @@
+.root {
+  --hover-thickness: 3px;
+  --drag-thickness: 1px;
+
+  box-sizing: border-box;
+  transition: all 150ms ease-in-out;
+  width: 100%;
+
+  /* default background-color */
+  &:not([data-striped], [data-striped='false']) {
+    background-color: var(--mrt-base-background-color);
+  }
+  /* striped background-colors (take detail panels and virtualization into account) */
+  &:not([data-selected], [data-row-pinned]) {
+    &[data-striped='odd'] {
+      background-color: var(--mrt-striped-row-background-color);
+    }
+    &[data-striped='even'] {
+      background-color: var(--mrt-striped-row-background-color);
+    }
+  }
+
+  /* column pinning styles */
+  &:not([data-selected], [data-row-pinned]) {
+    td {
+      &[data-column-pinned] {
+        &::before {
+          background-color: var(--mrt-pinned-column-background-color);
+        }
+      }
+    }
+    &[data-striped='odd'] {
+      td {
+        &[data-column-pinned] {
+          &::before {
+            background-color: var(--mrt-striped-row-background-color);
+          }
+        }
+      }
+    }
+    &[data-striped='even'] {
+      td {
+        &[data-column-pinned] {
+          &::before {
+            background-color: var(--mrt-striped-row-background-color);
+          }
+        }
+      }
+    }
+  }
+
+  td {
+    &[data-column-pinned] {
+      background-color: var(--mrt-pinned-column-background-color);
+      opacity: 0.97;
+      position: sticky;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: -1;
+      }
+
+      &[data-column-pinned='left'] {
+        left: calc(var(--mrt-table-cell-left, 0) * 1px);
+        &[data-last-left-pinned] {
+          &::before {
+            box-shadow: -6px 0 6px -6px alpha(
+                light-dark(
+                  var(--mantine-color-gray-outline),
+                  var(--mantine-color-dark-outline)
+                ),
+                0.5
+              ) inset;
+          }
+        }
+      }
+
+      &[data-column-pinned='right'] {
+        right: calc(var(--mrt-table-cell-right, 0) * 1px);
+        &[data-first-right-pinned] {
+          &::before {
+            box-shadow: 6px 0 6px -6px alpha(
+                light-dark(
+                  var(--mantine-color-gray-outline),
+                  var(--mantine-color-dark-outline)
+                ),
+                0.5
+              ) inset;
+          }
+        }
+      }
+    }
+  }
+  /* end column pinning styles */
+  /* row pinning styles */
+  &[data-row-pinned] {
+    background-color: var(--mrt-pinned-row-background-color, --mantine-color-body);
+    bottom: calc(var(--mrt-pinned-row-bottom) * 1px);
+    opacity: 0.97;
+    top: calc(var(--mrt-pinned-row-top) * 1px);
+
+    td {
+      &::before {
+        background-color: var(--mrt-pinned-row-background-color);
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: -1;
+      }
+      &[data-column-pinned] {
+        background-color: var(--mrt-pinned-column-background-color);
+
+        &::before {
+          background-color: var(--mrt-pinned-row-background-color);
+          content: '';
+          height: 100%;
+          left: 0;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          z-index: -1;
+        }
+      }
+    }
+  }
+
+  &[data-row-pinned='sticky'] {
+    z-index: 2;
+    position: sticky;
+  }
+  /* end row pinning styles */
+
+  /* selection styles */
+  &[data-selected] {
+    background-color: var(--mrt-selected-row-background-color, --mantine-color-body);
+
+    td {
+      &[data-column-pinned] {
+        background-color: var(--mrt-pinned-column-background-color);
+
+        &::before {
+          background-color: var(--mrt-selected-row-background-color);
+        }
+      }
+    }
+  }
+  /* end selection styles */
+
+  &[data-hover] {
+    &:hover {
+      td {
+        background-color: var(--mrt-row-hover-background-color);
+        &[data-column-pinned] {
+          background-color: var(--mrt-base-background-color);
+          &::before {
+            background-color: var(--mrt-row-hover-background-color);
+          }
+        }
+      }
+      &:not([data-selected], [data-row-pinned]) {
+        &[data-striped='odd'] {
+          td {
+            background-color: var(--mrt-striped-row-hover-background-color);
+            &[data-column-pinned] {
+              background-color: var(--mrt-base-background-color);
+              &::before {
+                background-color: var(--mrt-striped-row-hover-background-color);
+              }
+            }
+          }
+        }
+        &[data-striped='even'] {
+          td {
+            background-color: var(--mrt-striped-row-hover-background-color);
+            &[data-column-pinned] {
+              background-color: var(--mrt-base-background-color);
+              &::before {
+                background-color: var(--mrt-striped-row-hover-background-color);
+              }
+            }
+          }
+        }
+      }
+      &[data-selected] {
+        td {
+          background-color: var(--mrt-selected-row-hover-background-color);
+
+          &[data-column-pinned] {
+            background-color: var(--mrt-base-background-color);
+
+            &::before {
+              background-color: var(--mrt-selected-row-hover-background-color);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[data-dragging-row] {
+    opacity: 0.5;
+    border-bottom: var(--drag-thickness) dashed var(--drag-color);
+    border-top: var(--drag-thickness) dashed var(--drag-color);
+    td {
+      &:first-child {
+        border-left: var(--drag-thickness) dashed var(--drag-color);
+      }
+      &:last-child {
+        border-right: var(--drag-thickness) dashed var(--drag-color);
+      }
+    }
+  }
+
+  &[data-hovered-row-target] {
+    td {
+      opacity: 0.5;
+      border-top: var(--hover-thickness) dashed
+        var(--mrt-dragging-hovered-border-color);
+      border-bottom: var(--hover-thickness) dashed
+        var(--mrt-dragging-hovered-border-color);
+      &:first-child {
+        border-left: var(--hover-thickness) dashed
+          var(--mrt-dragging-hovered-border-color);
+      }
+      &:last-child {
+        border-right: var(--hover-thickness) dashed
+          var(--mrt-dragging-hovered-border-color);
+      }
+    }
+  }
+}
+
+.root-grid {
+  display: flex;
+}
+
+.root-virtualized {
+  position: absolute !important;
+  top: 0;
+  transition: none !important;
+  transform: translateY(calc(var(--mrt-virtual-row-start) * 1px));
+  will-change: transform;
+}

package/src/components/body/MRT_TableBodyRow.tsx

@@ -0,0 +1,263 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableBodyRow.module.css';
+
+import { type DragEvent, memo, useMemo, useRef } from 'react';
+
+import {
+  Box,
+  type TableProps,
+  TableTr,
+  type TableTrProps,
+} from '@mantine/core';
+
+import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
+import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
+
+import {
+  type MRT_Cell,
+  type MRT_ColumnVirtualizer,
+  type MRT_DensityState,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { getIsRowSelected } from '../../utils/row.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TableTrProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  numRows?: number;
+  pinnedRowIds?: string[];
+  renderedRowIndex?: number;
+  row: MRT_Row<TData>;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  table: MRT_TableInstance<TData>;
+  tableProps: Partial<TableProps>;
+  virtualRow?: MRT_VirtualItem;
+}
+
+export const MRT_TableBodyRow = <TData extends MRT_RowData>({
+  children,
+  columnVirtualizer,
+  numRows,
+  pinnedRowIds,
+  renderedRowIndex = 0,
+  row,
+  rowVirtualizer,
+  table,
+  tableProps,
+  virtualRow,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      enableRowOrdering,
+      enableRowPinning,
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      mantineTableBodyRowProps,
+      memoMode,
+      renderDetailPanel,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef },
+    setHoveredRow,
+  } = table;
+  const {
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredRow,
+    isFullScreen,
+    rowPinning,
+  } = getState();
+
+  const visibleCells = row.getVisibleCells();
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  const isRowSelected = getIsRowSelected({ row, table });
+  const isRowPinned = enableRowPinning && row.getIsPinned();
+  const isRowStickyPinned =
+    isRowPinned && rowPinningDisplayMode?.includes('sticky') && 'sticky';
+  const isDraggingRow = draggingRow?.id === row.id;
+  const isHoveredRow = hoveredRow?.id === row.id;
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(mantineTableBodyRowProps, {
+      renderedRowIndex,
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+    if (
+      !enableRowPinning ||
+      !isRowStickyPinned ||
+      !pinnedRowIds ||
+      !row.getIsPinned()
+    )
+      return [];
+    return [
+      [...pinnedRowIds].reverse().indexOf(row.id),
+      pinnedRowIds.indexOf(row.id),
+    ];
+  }, [pinnedRowIds, rowPinning]);
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const defaultRowHeightByDensity: Record<MRT_DensityState, number> = {
+    lg: 61,
+    md: 53,
+    sm: 45,
+    xl: 69,
+    xs: 37,
+  };
+
+  const rowHeight =
+    // @ts-ignore
+    parseInt(tableRowProps?.style?.height, 10) ||
+    (defaultRowHeightByDensity[density] ?? defaultRowHeightByDensity['md']);
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (enableRowOrdering && draggingRow) {
+      setHoveredRow(row);
+    }
+  };
+
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
+
+  let striped = tableProps.striped as boolean | string;
+
+  if (striped) {
+    if (striped === true) {
+      striped = 'odd';
+    }
+    if (striped === 'odd' && renderedRowIndex % 2 !== 0) {
+      striped = false;
+    }
+    if (striped === 'even' && renderedRowIndex % 2 === 0) {
+      striped = false;
+    }
+  }
+
+  return (
+    <>
+      <TableTr
+        data-dragging-row={isDraggingRow || undefined}
+        data-hovered-row-target={isHoveredRow || undefined}
+        data-index={renderDetailPanel ? renderedRowIndex * 2 : renderedRowIndex}
+        data-row-pinned={isRowStickyPinned || isRowPinned || undefined}
+        data-selected={isRowSelected || undefined}
+        data-striped={striped}
+        onDragEnter={handleDragEnter}
+        ref={(node: HTMLTableRowElement) => {
+          if (node) {
+            rowRef.current = node;
+            rowVirtualizer?.measureElement(node);
+          }
+        }}
+        {...tableRowProps}
+        __vars={{
+          ...tableRowProps?.__vars,
+          '--mrt-pinned-row-bottom':
+            !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
+              ? `${
+                  bottomPinnedIndex * rowHeight +
+                  (enableStickyFooter ? tableFooterHeight - 1 : 0)
+                }`
+              : undefined,
+          '--mrt-pinned-row-top': virtualRow
+            ? undefined
+            : topPinnedIndex !== undefined && isRowPinned
+              ? `${
+                  topPinnedIndex * rowHeight +
+                  (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+                }`
+              : undefined,
+          '--mrt-virtual-row-start': virtualRow
+            ? `${virtualRow.start}`
+            : undefined,
+        }}
+        className={clsx(
+          classes.root,
+          layoutMode?.startsWith('grid') && classes['root-grid'],
+          virtualRow && classes['root-virtualized'],
+          tableRowProps?.className,
+        )}
+      >
+        {virtualPaddingLeft ? (
+          <Box component="td" display="flex" w={virtualPaddingLeft} />
+        ) : null}
+        {children
+          ? children
+          : (virtualColumns ?? row.getVisibleCells()).map(
+              (cellOrVirtualCell, renderedColumnIndex) => {
+                let cell = cellOrVirtualCell as MRT_Cell<TData>;
+                if (columnVirtualizer) {
+                  renderedColumnIndex = (cellOrVirtualCell as MRT_VirtualItem)
+                    .index;
+                  cell = visibleCells[renderedColumnIndex];
+                }
+                const cellProps = {
+                  cell,
+                  numRows,
+                  renderedColumnIndex,
+                  renderedRowIndex,
+                  rowRef,
+                  table,
+                  virtualCell: columnVirtualizer
+                    ? (cellOrVirtualCell as MRT_VirtualItem)
+                    : undefined,
+                };
+                return memoMode === 'cells' &&
+                  cell.column.columnDef.columnDefType === 'data' &&
+                  !draggingColumn &&
+                  !draggingRow &&
+                  editingCell?.id !== cell.id &&
+                  editingRow?.id !== row.id ? (
+                  <Memo_MRT_TableBodyCell key={cell.id} {...cellProps} />
+                ) : (
+                  <MRT_TableBodyCell key={cell.id} {...cellProps} />
+                );
+              },
+            )}
+        {virtualPaddingRight ? (
+          <Box component="td" display="flex" w={virtualPaddingRight} />
+        ) : null}
+      </TableTr>
+      {renderDetailPanel && !row.getIsGrouped() && (
+        <MRT_TableDetailPanel
+          parentRowRef={rowRef}
+          renderedRowIndex={renderedRowIndex}
+          row={row}
+          rowVirtualizer={rowVirtualizer}
+          striped={striped}
+          table={table}
+          virtualRow={virtualRow}
+        />
+      )}
+    </>
+  );
+};
+
+export const Memo_MRT_TableBodyRow = memo(
+  MRT_TableBodyRow,
+  (prev, next) => prev.row === next.row,
+) as typeof MRT_TableBodyRow;

package/src/components/body/MRT_TableBodyRowGrabHandle.tsx

@@ -0,0 +1,58 @@
+import { type DragEvent, type RefObject } from 'react';
+
+import { type ActionIconProps } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  row: MRT_Row<TData>;
+  rowRef: RefObject<HTMLTableRowElement | null>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
+  row,
+  rowRef,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: { mantineRowDragHandleProps },
+  } = table;
+
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineRowDragHandleProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragStart?.(event);
+    event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+    table.setDraggingRow(row as any);
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragEnd?.(event);
+    table.setDraggingRow(null);
+    table.setHoveredRow(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      actionIconProps={actionIconProps}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      table={table}
+    />
+  );
+};

package/src/components/body/MRT_TableBodyRowPinButton.tsx

@@ -0,0 +1,58 @@
+import { type ActionIconProps, Box } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: { enableRowPinning, rowPinningDisplayMode },
+  } = table;
+  const { density } = getState();
+
+  const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
+
+  if (!canPin) return null;
+
+  const rowPinButtonProps = {
+    row,
+    table,
+    ...rest,
+  };
+
+  if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+    return (
+      <Box
+        style={{
+          display: 'flex',
+          flexDirection: density === 'xs' ? 'row' : 'column',
+        }}
+      >
+        <MRT_RowPinButton pinningPosition="top" {...rowPinButtonProps} />
+        <MRT_RowPinButton pinningPosition="bottom" {...rowPinButtonProps} />
+      </Box>
+    );
+  }
+
+  return (
+    <MRT_RowPinButton
+      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
+      {...rowPinButtonProps}
+    />
+  );
+};

package/src/components/body/MRT_TableDetailPanel.module.css

@@ -0,0 +1,35 @@
+.root {
+  display: table-row;
+  width: 100%;
+  background-color: var(--mrt-base-background-color);
+}
+
+.root-grid {
+  display: flex;
+}
+
+.root-virtual-row {
+  position: absolute;
+  top: var(--mrt-parent-row-height);
+  transform: translateY(var(--mrt-virtual-row-start));
+  transition: none;
+  z-index: 1;
+}
+
+.inner {
+  display: table-cell;
+  transition: all 150ms ease-in-out;
+  width: var(--mrt-inner-width);
+}
+
+.inner-grid {
+  display: flex;
+}
+
+.inner-expanded {
+  border-bottom: 1px solid var(--_table-border-color);
+}
+
+.inner-virtual {
+  transition: none;
+}