@kissesses/mantine-react-table-open 9.0.3

package/src/components/buttons/MRT_ExpandButton.tsx

@@ -0,0 +1,120 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ExpandButton.module.css';
+
+import { type MouseEvent } from 'react';
+
+import {
+  ActionIcon,
+  type ActionIconProps,
+  Tooltip,
+  useDirection,
+} from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ExpandButton = <TData extends MRT_RowData>({
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const direction = useDirection();
+  const {
+    options: {
+      icons: { IconChevronDown },
+      localization,
+      mantineExpandButtonProps,
+      positionExpandColumn,
+      renderDetailPanel,
+    },
+  } = table;
+
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineExpandButtonProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const internalEditComponents = row
+    .getAllCells()
+    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+    .map((cell) => (
+      <MRT_EditCellTextInput cell={cell} key={cell.id} table={table} />
+    ));
+
+  const canExpand = row.getCanExpand();
+  const isExpanded = row.getIsExpanded();
+
+  const DetailPanel = !!renderDetailPanel?.({
+    internalEditComponents,
+    row,
+    table,
+  });
+
+  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    row.toggleExpanded();
+    actionIconProps?.onClick?.(event);
+  };
+
+  const rtl = direction.dir === 'rtl' || positionExpandColumn === 'last';
+
+  return (
+    <Tooltip
+      disabled={!canExpand && !DetailPanel}
+      label={
+        actionIconProps?.title ??
+        (isExpanded ? localization.collapse : localization.expand)
+      }
+      openDelay={1000}
+      withinPortal
+    >
+      <ActionIcon
+        aria-label={localization.expand}
+        color="gray"
+        disabled={!canExpand && !DetailPanel}
+        variant="subtle"
+        {...actionIconProps}
+        __vars={{
+          '--mrt-row-depth': `${row.depth}`,
+        }}
+        className={clsx(
+          'mrt-expand-button',
+          classes.root,
+          classes[`root-${rtl ? 'rtl' : 'ltr'}`],
+          actionIconProps?.className,
+        )}
+        onClick={handleToggleExpand}
+        title={undefined}
+      >
+        {actionIconProps?.children ?? (
+          <IconChevronDown
+            className={clsx(
+              'mrt-expand-button-chevron',
+              classes.chevron,
+              !canExpand && !renderDetailPanel
+                ? classes.right
+                : isExpanded
+                  ? classes.up
+                  : undefined,
+            )}
+          />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_GrabHandleButton.module.css

@@ -0,0 +1,6 @@
+.grab-icon {
+  cursor: grab;
+  &:active {
+    cursor: grabbing;
+  }
+}

package/src/components/buttons/MRT_GrabHandleButton.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+
+import classes from './MRT_GrabHandleButton.module.css';
+
+import { type DragEventHandler } 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> {
+  actionIconProps?: ActionIconProps & HTMLPropsRef<HTMLButtonElement>;
+  onDragEnd: DragEventHandler<HTMLButtonElement>;
+  onDragStart: DragEventHandler<HTMLButtonElement>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
+  actionIconProps,
+  onDragEnd,
+  onDragStart,
+  table: {
+    options: {
+      icons: { IconGripHorizontal },
+      localization: { move },
+    },
+  },
+}: Props<TData>) => {
+  'use no memo';
+  return (
+    <Tooltip
+      label={actionIconProps?.title ?? move}
+      openDelay={1000}
+      withinPortal
+    >
+      <ActionIcon
+        aria-label={actionIconProps?.title ?? move}
+        draggable
+        {...actionIconProps}
+        className={clsx(
+          'mrt-grab-handle-button',
+          classes['grab-icon'],
+          actionIconProps?.className,
+        )}
+        color="gray"
+        onClick={(e) => {
+          e.stopPropagation();
+          actionIconProps?.onClick?.(e);
+        }}
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+        size="sm"
+        title={undefined}
+        variant="transparent"
+      >
+        <IconGripHorizontal size="100%" />
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -0,0 +1,83 @@
+import { type MouseEvent, useState } from 'react';
+
+import { type RowPinningPosition } from '@tanstack/react-table';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  pinningPosition: RowPinningPosition;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowPinButton = <TData extends MRT_RowData>({
+  pinningPosition,
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: {
+      icons: { IconPinned, IconX },
+      localization,
+      rowPinningDisplayMode,
+    },
+  } = table;
+
+  const isPinned = row.getIsPinned();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
+    event.stopPropagation();
+    row.pin(isPinned ? false : pinningPosition);
+  };
+
+  return (
+    <Tooltip
+      label={isPinned ? localization.unpin : localization.pin}
+      openDelay={1000}
+      opened={tooltipOpened}
+    >
+      <ActionIcon
+        aria-label={localization.pin}
+        color="gray"
+        onClick={handleTogglePin}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="xs"
+        style={{
+          height: '24px',
+          width: '24px',
+        }}
+        variant="subtle"
+        {...rest}
+      >
+        {isPinned ? (
+          <IconX />
+        ) : (
+          <IconPinned
+            fontSize="small"
+            style={{
+              transform: `rotate(${
+                rowPinningDisplayMode === 'sticky'
+                  ? 135
+                  : pinningPosition === 'top'
+                    ? 180
+                    : 0
+              }deg)`,
+            }}
+          />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ShowHideColumnsButton.tsx

@@ -0,0 +1,45 @@
+import { ActionIcon, type ActionIconProps, Menu, Tooltip } from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
+
+interface Props<TData extends MRT_RowData>
+  extends ActionIconProps,
+    HTMLPropsRef<HTMLButtonElement> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
+  table,
+  title,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    icons: { IconColumns },
+    localization: { showHideColumns },
+  } = table.options;
+
+  return (
+    <Menu closeOnItemClick={false} withinPortal>
+      <Tooltip label={title ?? showHideColumns} withinPortal>
+        <Menu.Target>
+          <ActionIcon
+            aria-label={title ?? showHideColumns}
+            color="gray"
+            size="lg"
+            variant="subtle"
+            {...rest}
+          >
+            <IconColumns />
+          </ActionIcon>
+        </Menu.Target>
+      </Tooltip>
+      <MRT_ShowHideColumnsMenu table={table} />
+    </Menu>
+  );
+};

package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -0,0 +1,65 @@
+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>) => {
+  'use no memo';
+  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,44 @@
+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>) => {
+  'use no memo';
+  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,58 @@
+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>) => {
+  'use no memo';
+  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,51 @@
+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>) => {
+  'use no memo';
+  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,86 @@
+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>) => {
+  'use no memo';
+  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));
+}