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

package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -0,0 +1,66 @@
+'use no memo';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_DensityState,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData>
+  extends ActionIconProps,
+    HTMLPropsRef<HTMLButtonElement> {
+  table: MRT_TableInstance<TData>;
+}
+
+type TogglableDensityState = Exclude<MRT_DensityState, 'lg' | 'sm'>;
+
+const next: Record<TogglableDensityState, TogglableDensityState> = {
+  md: 'xs',
+  xl: 'md',
+  xs: 'xl',
+};
+
+export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
+  table: {
+    getState,
+    options: {
+      icons: {
+        IconBaselineDensityLarge,
+        IconBaselineDensityMedium,
+        IconBaselineDensitySmall,
+      },
+      localization: { toggleDensity },
+    },
+    setDensity,
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
+  const { density } = getState();
+
+  return (
+    <Tooltip label={title ?? toggleDensity} withinPortal>
+      <ActionIcon
+        aria-label={title ?? toggleDensity}
+        color="gray"
+        onClick={() =>
+          setDensity((current) => next[current as TogglableDensityState])
+        }
+        size="lg"
+        variant="subtle"
+        {...rest}
+      >
+        {density === 'xs' ? (
+          <IconBaselineDensitySmall />
+        ) : density === 'md' ? (
+          <IconBaselineDensityMedium />
+        ) : (
+          <IconBaselineDensityLarge />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ToggleFiltersButton.tsx

@@ -0,0 +1,45 @@
+'use no memo';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData>
+  extends ActionIconProps,
+    HTMLPropsRef<HTMLButtonElement> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
+  table: {
+    getState,
+    options: {
+      icons: { IconFilter, IconFilterOff },
+      localization: { showHideFilters },
+    },
+    setShowColumnFilters,
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
+  const { showColumnFilters } = getState();
+
+  return (
+    <Tooltip label={title ?? showHideFilters} withinPortal>
+      <ActionIcon
+        aria-label={title ?? showHideFilters}
+        color="gray"
+        onClick={() => setShowColumnFilters((current) => !current)}
+        size="lg"
+        variant="subtle"
+        {...rest}
+      >
+        {showColumnFilters ? <IconFilterOff /> : <IconFilter />}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ToggleFullScreenButton.tsx

@@ -0,0 +1,59 @@
+'use no memo';
+
+import { useState } from 'react';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData>
+  extends ActionIconProps,
+    HTMLPropsRef<HTMLButtonElement> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
+  table: {
+    getState,
+    options: {
+      icons: { IconMaximize, IconMinimize },
+      localization: { toggleFullScreen },
+    },
+    setIsFullScreen,
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
+  const { isFullScreen } = getState();
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleToggleFullScreen = () => {
+    setTooltipOpened(false);
+    setIsFullScreen((current) => !current);
+  };
+
+  return (
+    <Tooltip
+      label={title ?? toggleFullScreen}
+      opened={tooltipOpened}
+      withinPortal
+    >
+      <ActionIcon
+        aria-label={title ?? toggleFullScreen}
+        color="gray"
+        onClick={handleToggleFullScreen}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="lg"
+        variant="subtle"
+        {...rest}
+      >
+        {isFullScreen ? <IconMinimize /> : <IconMaximize />}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -0,0 +1,52 @@
+'use no memo';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData>
+  extends ActionIconProps,
+    HTMLPropsRef<HTMLButtonElement> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
+  table: {
+    getState,
+    options: {
+      icons: { IconSearch, IconSearchOff },
+      localization: { showHideSearch },
+    },
+    refs: { searchInputRef },
+    setShowGlobalFilter,
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
+  const { globalFilter, showGlobalFilter } = getState();
+
+  const handleToggleSearch = () => {
+    setShowGlobalFilter(!showGlobalFilter);
+    setTimeout(() => searchInputRef.current?.focus(), 100);
+  };
+
+  return (
+    <Tooltip label={title ?? showHideSearch} withinPortal>
+      <ActionIcon
+        aria-label={title ?? showHideSearch}
+        color="gray"
+        disabled={!!globalFilter}
+        onClick={handleToggleSearch}
+        size="lg"
+        variant="subtle"
+        {...rest}
+      >
+        {showGlobalFilter ? <IconSearchOff /> : <IconSearch />}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -0,0 +1,87 @@
+'use no memo';
+
+import { type MouseEvent } from 'react';
+
+import { ActionIcon, Tooltip } from '@mantine/core';
+
+import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+
+import {
+  type MRT_Cell,
+  type MRT_CellValue,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue> {
+  cell: MRT_Cell<TData, TValue>;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
+  cell,
+  row,
+  table,
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      enableEditing,
+      icons: { IconEdit },
+      localization: { edit },
+      renderRowActionMenuItems,
+      renderRowActions,
+    },
+    setEditingRow,
+  } = table;
+
+  const { creatingRow, editingRow } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const handleStartEditMode = (event: MouseEvent) => {
+    event.stopPropagation();
+    setEditingRow({ ...row });
+  };
+
+  const showEditActionButtons =
+    (isCreating && createDisplayMode === 'row') ||
+    (isEditing && editDisplayMode === 'row');
+
+  return (
+    <>
+      {renderRowActions && !showEditActionButtons ? (
+        renderRowActions({ cell, row, table })
+      ) : showEditActionButtons ? (
+        <MRT_EditActionButtons row={row} table={table} />
+      ) : !renderRowActionMenuItems &&
+        parseFromValuesOrFunc(enableEditing, row) ? (
+        <Tooltip label={edit} openDelay={1000} position="right" withinPortal>
+          <ActionIcon
+            aria-label={edit}
+            color="gray"
+            disabled={!!editingRow && editingRow.id !== row.id}
+            onClick={handleStartEditMode}
+            size="md"
+            variant="subtle"
+          >
+            <IconEdit />
+          </ActionIcon>
+        </Tooltip>
+      ) : renderRowActionMenuItems ? (
+        <MRT_RowActionMenu
+          handleEdit={handleStartEditMode}
+          row={row}
+          table={table}
+        />
+      ) : null}
+    </>
+  );
+};

package/src/components/footer/MRT_TableFooter.module.css

@@ -0,0 +1,17 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  display: table-row-group;
+}
+
+.grid {
+  display: grid;
+}
+
+.sticky {
+  bottom: 0;
+  opacity: 0.97;
+  position: sticky;
+  z-index: 1;
+  outline: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7));
+}

package/src/components/footer/MRT_TableFooter.tsx

@@ -0,0 +1,70 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableFooter.module.css';
+
+import { TableTfoot, type TableTfootProps } from '@mantine/core';
+
+import { MRT_TableFooterRow } from './MRT_TableFooterRow';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TableTfootProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooter = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getFooterGroups,
+    getState,
+    options: { enableStickyFooter, layoutMode, mantineTableFooterProps },
+    refs: { tableFooterRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const tableFooterProps = {
+    ...parseFromValuesOrFunc(mantineTableFooterProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const stickFooter =
+    (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+
+  return (
+    <TableTfoot
+      {...tableFooterProps}
+      className={clsx(
+        classes.root,
+        tableFooterProps?.className,
+        stickFooter && classes.sticky,
+        layoutMode?.startsWith('grid') && classes.grid,
+      )}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        assignRef(tableFooterProps?.ref, ref);
+      }}
+    >
+      {getFooterGroups().map((footerGroup) => (
+        <MRT_TableFooterRow
+          columnVirtualizer={columnVirtualizer}
+          footerGroup={footerGroup as any}
+          key={footerGroup.id}
+          table={table}
+        />
+      ))}
+    </TableTfoot>
+  );
+};

package/src/components/footer/MRT_TableFooterCell.module.css

@@ -0,0 +1,59 @@
+.root {
+  font-size: 0.8rem;
+  font-weight: bold;
+  padding: 1rem;
+  text-align: var(--mrt-cell-align, left);
+  vertical-align: top;
+  z-index: 1;
+
+  &.grid {
+    display: flex;
+    justify-content: var(--mrt-cell-align, flex-start);
+  }
+
+  &.group {
+    text-align: center;
+    justify-content: center;
+  }
+
+  background-color: var(--mrt-base-background-color);
+
+  &[data-column-pinned] {
+    position: sticky;
+  }
+
+  &[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;
+    }
+  }
+}

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -0,0 +1,126 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableFooterCell.module.css';
+
+import { type CSSProperties } from 'react';
+
+import { TableTh, type TableThProps, useDirection } from '@mantine/core';
+
+import {
+  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';
+
+interface Props<TData extends MRT_RowData> extends TableThProps {
+  footer: MRT_Header<TData>;
+  renderedColumnIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooterCell = <TData extends MRT_RowData>({
+  footer: footerProp,
+  renderedColumnIndex,
+  table,
+  ...rest
+}: Props<TData>) => {
+  //a view has a new identity per table reference, which compiled render callbacks need
+  const footer = getMRT_HeaderView(table, footerProp);
+  const direction = useDirection();
+  const {
+    options: { enableColumnPinning, layoutMode, mantineTableFooterCellProps },
+  } = table;
+  const { column } = footer;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const args = { column, table };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(mantineTableFooterCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.mantineTableFooterCellProps, args),
+    ...rest,
+  };
+
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--header-${parseCSSVarId(
+      footer?.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--header-${parseCSSVarId(footer.id)}-size) * 1px)`,
+  };
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--header-${parseCSSVarId(footer.id)}-size)`
+    } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+
+  return (
+    <TableTh
+      colSpan={footer.colSpan}
+      data-column-pinned={isColumnPinned || undefined}
+      data-first-right-pinned={
+        (isColumnPinned === 'right' &&
+          column.getIsFirstColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-index={renderedColumnIndex}
+      data-last-left-pinned={
+        (isColumnPinned === 'left' && column.getIsLastColumn(isColumnPinned)) ||
+        undefined
+      }
+      {...tableCellProps}
+      __vars={{
+        '--mrt-cell-align':
+          tableCellProps.align ??
+          (columnDefType === 'group'
+            ? 'center'
+            : direction.dir === 'rtl'
+              ? 'right'
+              : 'left'),
+        '--mrt-table-cell-left':
+          isColumnPinned === 'left'
+            ? `${column.getStart(isColumnPinned)}`
+            : undefined,
+        '--mrt-table-cell-right':
+          isColumnPinned === 'right'
+            ? `${column.getAfter(isColumnPinned)}`
+            : undefined,
+        ...tableCellProps?.__vars,
+      }}
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid') && classes.grid,
+        columnDefType === 'group' && classes.group,
+        tableCellProps?.className,
+      )}
+      style={(theme) => ({
+        ...widthStyles,
+        ...parseFromValuesOrFunc(tableCellProps.style, theme),
+      })}
+    >
+      {tableCellProps.children ??
+        (footer.isPlaceholder
+          ? null
+          : (parseFromValuesOrFunc(columnDef.Footer, {
+              column,
+              footer,
+              table,
+            }) ??
+            columnDef.footer ??
+            null))}
+    </TableTh>
+  );
+};

package/src/components/footer/MRT_TableFooterRow.module.css

@@ -0,0 +1,10 @@
+.root {
+  width: 100%;
+  display: table-row;
+  &.layout-mode-grid {
+    display: flex;
+  }
+  background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -0,0 +1,111 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableFooterRow.module.css';
+
+import { Box, TableTr, type TableTrProps } from '@mantine/core';
+
+import { MRT_TableFooterCell } from './MRT_TableFooterCell';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_HeaderGroup,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { getVirtualGroupHeaders } from '../../utils/virtualization.utils';
+
+interface Props<TData extends MRT_RowData> extends TableTrProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  footerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooterRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  footerGroup,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: { layoutMode, mantineTableFooterRowProps },
+  } = table;
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  // if no content in row, skip row
+  if (
+    !footerGroup.headers?.some(
+      (header) =>
+        (typeof header.column.columnDef.footer === 'string' &&
+          !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer,
+    )
+  ) {
+    return null;
+  }
+
+  const virtualGroupFooters = getVirtualGroupHeaders({
+    headers: footerGroup.headers,
+    table,
+    virtualColumns,
+  });
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(mantineTableFooterRowProps, {
+      footerGroup,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <TableTr
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['layout-mode-grid'],
+      )}
+      {...tableRowProps}
+    >
+      {virtualPaddingLeft ? (
+        <Box component="th" display="flex" w={virtualPaddingLeft} />
+      ) : null}
+      {virtualGroupFooters?.map(({ header, index, style }) => (
+        <MRT_TableFooterCell
+          footer={header}
+          key={header.id}
+          renderedColumnIndex={index}
+          style={style}
+          table={table}
+        />
+      )) ??
+        (virtualColumns ?? footerGroup.headers).map(
+          (footerOrVirtualFooter, renderedColumnIndex) => {
+            let footer = footerOrVirtualFooter as MRT_Header<TData>;
+            if (columnVirtualizer) {
+              renderedColumnIndex = (footerOrVirtualFooter as MRT_VirtualItem)
+                .index;
+              footer = footerGroup.headers[renderedColumnIndex];
+            }
+
+            return (
+              <MRT_TableFooterCell
+                footer={footer}
+                key={footer.id}
+                renderedColumnIndex={renderedColumnIndex}
+                table={table}
+              />
+            );
+          },
+        )}
+      {virtualPaddingRight ? (
+        <Box component="th" display="flex" w={virtualPaddingRight} />
+      ) : null}
+    </TableTr>
+  );
+};