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

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -0,0 +1,136 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ShowHideColumnsMenu.module.css';
+
+import { useMemo, useState } from 'react';
+
+import { Button, Flex, Menu } from '@mantine/core';
+
+import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
+
+interface Props<TData extends MRT_RowData> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
+  table,
+}: Props<TData>) => {
+  const {
+    getAllColumns,
+    getAllLeafColumns,
+    getCenterLeafColumns,
+    getIsAllColumnsVisible,
+    getIsSomeColumnsPinned,
+    getIsSomeColumnsVisible,
+    getLeftLeafColumns,
+    getRightLeafColumns,
+    getState,
+    options: {
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableHiding,
+      localization,
+    },
+  } = table;
+  const { columnOrder, columnPinning } = getState();
+
+  const handleToggleAllColumns = (value?: boolean) => {
+    getAllLeafColumns()
+      .filter((col) => col.columnDef.enableHiding !== false)
+      .forEach((col) => col.toggleVisibility(value));
+  };
+
+  const allColumns = useMemo(() => {
+    const columns = getAllColumns();
+    if (
+      columnOrder.length > 0 &&
+      !columns.some((col) => col.columnDef.columnDefType === 'group')
+    ) {
+      return [
+        ...getLeftLeafColumns(),
+        ...Array.from(new Set(columnOrder)).map((colId) =>
+          getCenterLeafColumns().find((col) => col?.id === colId),
+        ),
+        ...getRightLeafColumns(),
+      ].filter(Boolean);
+    }
+    return columns;
+  }, [
+    columnOrder,
+    columnPinning,
+    getAllColumns(),
+    getCenterLeafColumns(),
+    getLeftLeafColumns(),
+    getRightLeafColumns(),
+  ]) as MRT_Column<TData>[];
+
+  const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
+    null,
+  );
+
+  return (
+    <Menu.Dropdown className={clsx('mrt-show-hide-columns-menu', classes.root)}>
+      <Flex className={classes.content}>
+        {enableHiding && (
+          <Button
+            disabled={!getIsSomeColumnsVisible()}
+            onClick={() => handleToggleAllColumns(false)}
+            variant="subtle"
+          >
+            {localization.hideAll}
+          </Button>
+        )}
+        {enableColumnOrdering && (
+          <Button
+            onClick={() =>
+              table.setColumnOrder(
+                getDefaultColumnOrderIds(table.options as any, true),
+              )
+            }
+            variant="subtle"
+          >
+            {localization.resetOrder}
+          </Button>
+        )}
+        {enableColumnPinning && (
+          <Button
+            disabled={!getIsSomeColumnsPinned()}
+            onClick={() => table.resetColumnPinning(true)}
+            variant="subtle"
+          >
+            {localization.unpinAll}
+          </Button>
+        )}
+        {enableHiding && (
+          <Button
+            disabled={getIsAllColumnsVisible()}
+            onClick={() => handleToggleAllColumns(true)}
+            variant="subtle"
+          >
+            {localization.showAll}
+          </Button>
+        )}
+      </Flex>
+      <Menu.Divider />
+      {allColumns.map((column, index) => (
+        <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
+          column={column}
+          hoveredColumn={hoveredColumn}
+          key={`${index}-${column.id}`}
+          setHoveredColumn={setHoveredColumn}
+          table={table}
+        />
+      ))}
+    </Menu.Dropdown>
+  );
+};

package/src/components/menus/MRT_ShowHideColumnsMenuItems.module.css

@@ -0,0 +1,35 @@
+.root {
+  align-items: center;
+  cursor: default;
+  justify-content: flex-start;
+  opacity: 1;
+  outline: none;
+  padding-left: var(--_column-depth);
+  padding-top: rem(6px);
+  padding-bottom: rem(6);
+  &[data-dragging] {
+    opacity: 0.5;
+    outline: 1px dashed var(--mantine-color-gray-7);
+  }
+  &[data-order-hovered]:not(&[data-dragging]) {
+    outline: 2px dashed var(--_hover-color);
+  }
+}
+.menu {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: rem(8px);
+}
+.grab {
+  width: rem(28px);
+}
+.pin {
+  width: rem(70px);
+}
+.switch {
+  cursor: pointer !important;
+}
+.header {
+  align-self: center;
+}

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -0,0 +1,171 @@
+'use no memo';
+
+import classes from './MRT_ShowHideColumnsMenuItems.module.css';
+
+import {
+  type Dispatch,
+  type DragEvent,
+  type SetStateAction,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  Box,
+  Menu,
+  Switch,
+  Text,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core';
+
+import {
+  type MRT_CellValue,
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { reorderColumn } from '../../utils/column.utils';
+import { dataVariable, getPrimaryColor } from '../../utils/style.utils';
+import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue> {
+  allColumns: MRT_Column<TData>[];
+  column: MRT_Column<TData, TValue>;
+  hoveredColumn: MRT_Column<TData> | null;
+  setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
+  allColumns,
+  column,
+  hoveredColumn,
+  setHoveredColumn,
+  table,
+}: Props<TData>) => {
+  const theme = useMantineTheme();
+  const {
+    getState,
+    options: {
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableHiding,
+      localization,
+    },
+    setColumnOrder,
+  } = table;
+  const { columnOrder } = getState();
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const switchChecked =
+    (columnDefType !== 'group' && column.getIsVisible()) ||
+    (columnDefType === 'group' &&
+      column.getLeafColumns().some((col) => col.getIsVisible()));
+
+  const handleToggleColumnHidden = (column: MRT_Column<TData>) => {
+    if (columnDefType === 'group') {
+      column?.columns?.forEach?.((childColumn: MRT_Column<TData>) => {
+        childColumn.toggleVisibility(!switchChecked);
+      });
+    } else {
+      column.toggleVisibility();
+    }
+  };
+
+  const menuItemRef = useRef<HTMLElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
+  };
+
+  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(false);
+    setHoveredColumn(null);
+    if (hoveredColumn) {
+      setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+    }
+  };
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (!isDragging && columnDef.enableColumnOrdering !== false) {
+      setHoveredColumn(column);
+    }
+  };
+
+  if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
+    return null;
+  }
+
+  return (
+    <>
+      <Menu.Item
+        className={classes.root}
+        component="span"
+        onDragEnter={handleDragEnter}
+        ref={menuItemRef as any}
+        style={{
+          '--_column-depth': `${(column.depth + 0.5) * 2}rem`,
+          '--_hover-color': getPrimaryColor(theme),
+        }}
+        {...dataVariable('dragging', isDragging)}
+        {...dataVariable('order-hovered', hoveredColumn?.id === column.id)}
+      >
+        <Box className={classes.menu}>
+          {columnDefType !== 'group' &&
+            enableColumnOrdering &&
+            !allColumns.some(
+              (col) => col.columnDef.columnDefType === 'group',
+            ) &&
+            (columnDef.enableColumnOrdering !== false ? (
+              <MRT_GrabHandleButton
+                onDragEnd={handleDragEnd}
+                onDragStart={handleDragStart}
+                table={table}
+              />
+            ) : (
+              <Box className={classes.grab} />
+            ))}
+          {enableColumnPinning &&
+            (column.getCanPin() ? (
+              <MRT_ColumnPinningButtons column={column} table={table} />
+            ) : (
+              <Box className={classes.pin} />
+            ))}
+          {enableHiding ? (
+            <Tooltip
+              label={localization.toggleVisibility}
+              openDelay={1000}
+              withinPortal
+            >
+              <Switch
+                checked={switchChecked}
+                className={classes.switch}
+                disabled={!column.getCanHide()}
+                label={columnDef.header}
+                onChange={() => handleToggleColumnHidden(column)}
+              />
+            </Tooltip>
+          ) : (
+            <Text className={classes.header}>{columnDef.header}</Text>
+          )}
+        </Box>
+      </Menu.Item>
+      {column.columns?.map((c: MRT_Column<TData>, i) => (
+        <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
+          column={c}
+          hoveredColumn={hoveredColumn}
+          key={`${i}-${c.id}`}
+          setHoveredColumn={setHoveredColumn}
+          table={table}
+        />
+      ))}
+    </>
+  );
+};

package/src/components/modals/MRT_EditRowModal.tsx

@@ -0,0 +1,98 @@
+'use no memo';
+
+import { Flex, Modal, type ModalProps, Stack } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
+
+interface Props<TData extends MRT_RowData> extends Partial<ModalProps> {
+  open: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_EditRowModal = <TData extends MRT_RowData>({
+  open,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      mantineCreateRowModalProps,
+      mantineEditRowModalProps,
+      onCreatingRowCancel,
+      onEditingRowCancel,
+      renderCreateRowModalContent,
+      renderEditRowModalContent,
+    },
+    setCreatingRow,
+    setEditingRow,
+  } = table;
+  const { creatingRow, editingRow } = getState();
+  const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
+
+  const arg = { row, table };
+  const modalProps = {
+    ...parseFromValuesOrFunc(mantineEditRowModalProps, arg),
+    ...(creatingRow && parseFromValuesOrFunc(mantineCreateRowModalProps, arg)),
+    ...rest,
+  };
+
+  const internalEditComponents = row
+    .getAllCells()
+    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+    .map((cell) => (
+      <MRT_EditCellTextInput cell={cell} key={cell.id} table={table} />
+    ));
+
+  const handleCancel = () => {
+    if (creatingRow) {
+      onCreatingRowCancel?.({ row, table });
+      setCreatingRow(null);
+    } else {
+      onEditingRowCancel?.({ row, table });
+      setEditingRow(null);
+    }
+    row._valuesCache = {} as any; //reset values cache
+    modalProps.onClose?.();
+  };
+
+  return (
+    <Modal
+      opened={open}
+      withCloseButton={false}
+      {...modalProps}
+      key={row.id}
+      onClose={handleCancel}
+    >
+      {((creatingRow &&
+        renderCreateRowModalContent?.({
+          internalEditComponents,
+          row,
+          table,
+        })) ||
+        renderEditRowModalContent?.({
+          internalEditComponents,
+          row,
+          table,
+        })) ?? (
+        <>
+          <form onSubmit={(e) => e.preventDefault()}>
+            <Stack gap="lg" pb={24} pt={16}>
+              {internalEditComponents}
+            </Stack>
+          </form>
+          <Flex justify="flex-end">
+            <MRT_EditActionButtons row={row} table={table} variant="text" />
+          </Flex>
+        </>
+      )}
+    </Modal>
+  );
+};

package/src/components/table/MRT_Table.module.css

@@ -0,0 +1,7 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+}
+
+.root-grid {
+  display: grid;
+}

package/src/components/table/MRT_Table.tsx

@@ -0,0 +1,155 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_Table.module.css';
+
+import { useMemo } from 'react';
+
+import {
+  darken,
+  lighten,
+  Table,
+  type TableProps,
+  type TableScrollContainerProps,
+  useMantineColorScheme,
+} from '@mantine/core';
+
+import { useMRT_ColumnVirtualizer } from '../../hooks/useMRT_ColumnVirtualizer';
+import {
+  type MRT_RowData,
+  type MRT_ScrollAreaProps,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
+import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { MRT_TableHead } from '../head/MRT_TableHead';
+
+interface Props<TData extends MRT_RowData> extends TableProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_Table = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getFlatHeaders,
+    getState,
+    options: {
+      columns,
+      enableTableFooter,
+      enableTableHead,
+      layoutMode,
+      mantineScrollAreaProps,
+      mantineTableProps,
+      memoMode,
+      withScrollArea,
+    },
+  } = table;
+  const { columnSizing, columnSizingInfo, columnVisibility, density } =
+    getState();
+
+  const tableProps = {
+    highlightOnHover: true,
+    horizontalSpacing: density,
+    verticalSpacing: density,
+    ...parseFromValuesOrFunc(mantineTableProps, { table }),
+    ...rest,
+  };
+
+  const columnSizeVars = useMemo(() => {
+    const headers = getFlatHeaders();
+    const colSizes: { [key: string]: number } = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+    }
+    return colSizes;
+  }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
+
+  const columnVirtualizer = useMRT_ColumnVirtualizer(table);
+
+  const commonTableGroupProps = {
+    columnVirtualizer,
+    table,
+  };
+
+  const { colorScheme } = useMantineColorScheme();
+
+  const { stripedColor } = tableProps;
+
+  const tableNode = (
+    <Table
+      className={clsx(
+        'mrt-table',
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['root-grid'],
+        tableProps.className,
+      )}
+      {...tableProps}
+      __vars={{
+        ...columnSizeVars,
+        '--mrt-striped-row-background-color': stripedColor,
+        '--mrt-striped-row-hover-background-color': stripedColor
+          ? colorScheme === 'dark'
+            ? lighten(stripedColor, 0.08)
+            : darken(stripedColor, 0.12)
+          : undefined,
+        ...tableProps.__vars,
+      }}
+    >
+      {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
+      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+        <Memo_MRT_TableBody
+          {...commonTableGroupProps}
+          tableProps={tableProps}
+        />
+      ) : (
+        <MRT_TableBody {...commonTableGroupProps} tableProps={tableProps} />
+      )}
+      {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />}
+    </Table>
+  );
+
+  if (!withScrollArea) return tableNode;
+
+  const {
+    ref: scrollAreaRef,
+    viewportRef,
+    ...scrollContainerProps
+  } = {
+    h: '100%',
+    minWidth: '100%',
+    offsetScrollbars: 'present',
+    w: '100%',
+    ...parseFromValuesOrFunc(mantineScrollAreaProps, { table }),
+  } as MRT_ScrollAreaProps & TableScrollContainerProps;
+
+  return (
+    <Table.ScrollContainer
+      {...scrollContainerProps}
+      className={clsx(
+        'mrt-table-scroll-area',
+        scrollContainerProps.className,
+      )}
+      //Mantine hands over the viewport itself, and null when it unmounts, so
+      //the ref does not depend on a class name and never keeps a removed node
+      scrollAreaProps={{
+        ...scrollContainerProps.scrollAreaProps,
+        viewportRef: (node: HTMLDivElement | null) => {
+          table.refs.scrollAreaViewportRef.current = node;
+          assignRef(scrollAreaRef, node);
+          assignRef(viewportRef, node);
+          assignRef(scrollContainerProps.scrollAreaProps?.viewportRef, node);
+        },
+      }}
+    >
+      {tableNode}
+    </Table.ScrollContainer>
+  );
+};

package/src/components/table/MRT_TableContainer.module.css

@@ -0,0 +1,32 @@
+.root {
+  --max-height-calc: calc(100vh - calc(var(--mrt-top-toolbar-height) * 1px));
+  --max-height: 100%;
+
+  background-color: var(--mrt-base-background-color);
+  max-width: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+/* set by the `withScrollArea` option, so a ScrollArea in a cell or detail panel does not match */
+.root-scroll-area {
+  overflow: unset;
+  height: var(--max-height-calc);
+}
+
+.root-sticky {
+  --max-height: clamp(350px, var(--max-height-calc), 9999px);
+  max-height: var(--max-height);
+}
+
+.root-fullscreen {
+  --max-height: var(--max-height-calc) !important;
+}
+
+.root > :global(.mrt-table-scroll-area) {
+  max-height: var(--max-height);
+
+  > [data-orientation='vertical'] {
+    top: var(--mrt-scroll-offset);
+  }
+}