@kissesses/mantine-react-table-open 9.0.3

package/src/components/modals/MRT_EditRowModal.tsx

@@ -0,0 +1,97 @@
+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>) => {
+  'use no memo';
+  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,110 @@
+import clsx from 'clsx';
+
+import classes from './MRT_Table.module.css';
+
+import { useMemo } from 'react';
+
+import {
+  darken,
+  lighten,
+  Table,
+  type TableProps,
+  useMantineColorScheme,
+} from '@mantine/core';
+
+import { useMRT_ColumnVirtualizer } from '../../hooks/useMRT_ColumnVirtualizer';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { 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>) => {
+  'use no memo';
+  const {
+    getFlatHeaders,
+    getState,
+    options: {
+      columns,
+      enableTableFooter,
+      enableTableHead,
+      layoutMode,
+      mantineTableProps,
+      memoMode,
+    },
+  } = 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;
+
+  return (
+    <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>
+  );
+};

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

@@ -0,0 +1,20 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  max-width: 100%;
+  overflow: auto;
+  position: relative;
+}
+
+.root-sticky {
+  max-height: clamp(
+    350px,
+    calc(100vh - calc(var(--mrt-top-toolbar-height) * 1px)),
+    9999px
+  );
+}
+
+.root-fullscreen {
+  max-height: calc(
+    100vh - calc(var(--mrt-top-toolbar-height) * 1px)
+  ) !important;
+}

package/src/components/table/MRT_TableContainer.tsx

@@ -0,0 +1,109 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableContainer.module.css';
+
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { Box, type BoxProps, LoadingOverlay } from '@mantine/core';
+
+import { MRT_Table } from './MRT_Table';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableContainer = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      enableStickyHeader,
+      mantineLoadingOverlayProps,
+      mantineTableContainerProps,
+    },
+    refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
+  } = table;
+  const {
+    creatingRow,
+    editingRow,
+    isFullScreen,
+    isLoading,
+    showLoadingOverlay,
+  } = getState();
+
+  const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+
+  const tableContainerProps = {
+    ...parseFromValuesOrFunc(mantineTableContainerProps, { table }),
+    ...rest,
+  };
+  const loadingOverlayProps = parseFromValuesOrFunc(
+    mantineLoadingOverlayProps,
+    { table },
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    const topToolbarHeight =
+      typeof document !== 'undefined'
+        ? (topToolbarRef.current?.offsetHeight ?? 0)
+        : 0;
+
+    const bottomToolbarHeight =
+      typeof document !== 'undefined'
+        ? (bottomToolbarRef?.current?.offsetHeight ?? 0)
+        : 0;
+
+    setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+  });
+
+  const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+  const editModalOpen = editDisplayMode === 'modal' && editingRow;
+
+  return (
+    <Box
+      {...tableContainerProps}
+      __vars={{
+        '--mrt-top-toolbar-height': `${totalToolbarHeight}`,
+        ...tableContainerProps?.__vars,
+      }}
+      className={clsx(
+        'mrt-table-container',
+        classes.root,
+        enableStickyHeader && classes['root-sticky'],
+        isFullScreen && classes['root-fullscreen'],
+        tableContainerProps?.className,
+      )}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          tableContainerRef.current = node;
+          if (tableContainerProps?.ref) {
+            //@ts-ignore
+            tableContainerProps.ref.current = node;
+          }
+        }
+      }}
+    >
+      <LoadingOverlay
+        visible={isLoading || showLoadingOverlay}
+        zIndex={2}
+        {...loadingOverlayProps}
+      />
+      <MRT_Table table={table} />
+      {(createModalOpen || editModalOpen) && (
+        <MRT_EditRowModal open table={table} />
+      )}
+    </Box>
+  );
+};

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

@@ -0,0 +1,88 @@
+:root {
+  /* default background color for everything */
+  --mrt-base-background-color: var(--mantine-color-body);
+
+  @mixin light-root {
+    --mrt-striped-row-background-color: darken(
+      var(--mrt-base-background-color),
+      0.05
+    );
+  }
+  @mixin dark-root {
+    --mrt-striped-row-background-color: lighten(
+      var(--mrt-base-background-color),
+      0.04
+    );
+  }
+
+  /* row hover */
+  @mixin light-root {
+    --mrt-row-hover-background-color: darken(
+      var(--mrt-base-background-color),
+      0.08
+    );
+    --mrt-striped-row-hover-background-color: darken(
+      var(--mrt-striped-row-background-color),
+      0.12
+    );
+  }
+  @mixin dark-root {
+    --mrt-row-hover-background-color: lighten(
+      var(--mrt-base-background-color),
+      0.08
+    );
+    --mrt-striped-row-hover-background-color: lighten(
+      var(--mrt-striped-row-background-color),
+      0.08
+    );
+  }
+
+  /* row selection */
+  --mrt-selected-row-background-color: alpha(
+    var(--mantine-primary-color-light),
+    0.8
+  );
+  @mixin light-root {
+    --mrt-selected-row-hover-background-color: darken(
+      var(--mantine-primary-color-light-hover),
+      0.05
+    );
+  }
+  @mixin dark-root {
+    --mrt-selected-row-hover-background-color: lighten(
+      var(--mantine-primary-color-light-hover),
+      0.05
+    );
+  }
+
+  /* row pinning */
+  --mrt-pinned-row-background-color: var(--mrt-selected-row-background-color);
+  --mrt-pinned-row-hover-background-color: var(
+    --mrt-selected-row-hover-background-color
+  );
+
+  /* column pinning */
+  @mixin light-root {
+    --mrt-pinned-column-background-color: darken(
+      var(--mrt-base-background-color),
+      0.01
+    );
+  }
+  @mixin dark-root {
+    --mrt-pinned-column-background-color: darken(
+      var(--mrt-base-background-color),
+      0.05
+    );
+  }
+
+  /* cell borders */
+  --mrt-dragging-hovered-border-color: var(--mantine-primary-color-filled);
+  --mrt-dragging-drag-border-color: var(--mantine-color-gray-7);
+  --mrt-resize-column-border-color: var(--mantine-primary-color-filled);
+}
+
+.root {
+  background-color: var(--mrt-base-background-color);
+  overflow: hidden;
+  transition: all 150ms ease-in-out;
+}

package/src/components/table/MRT_TablePaper.tsx

@@ -0,0 +1,92 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TablePaper.module.css';
+
+import { Paper, type PaperProps } from '@mantine/core';
+
+import { MRT_TableContainer } from './MRT_TableContainer';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
+import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
+
+interface Props<TData extends MRT_RowData> extends PaperProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TablePaper = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      enableBottomToolbar,
+      enableTopToolbar,
+      mantinePaperProps,
+      renderBottomToolbar,
+      renderTopToolbar,
+    },
+    refs: { tablePaperRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const tablePaperProps = {
+    ...parseFromValuesOrFunc(mantinePaperProps, { table }),
+    ...rest,
+  };
+
+  return (
+    <Paper
+      shadow="xs"
+      withBorder
+      {...tablePaperProps}
+      className={clsx(
+        'mrt-table-paper',
+        classes.root,
+        isFullScreen && 'mrt-table-paper-fullscreen',
+        tablePaperProps?.className,
+      )}
+      ref={(ref: HTMLDivElement) => {
+        tablePaperRef.current = ref;
+        if (tablePaperProps?.ref) {
+          tablePaperProps.ref.current = ref;
+        }
+      }}
+      // rare case where we should use inline styles to guarantee highest specificity
+      style={(theme) => ({
+        zIndex: isFullScreen ? 200 : undefined,
+        ...parseFromValuesOrFunc(tablePaperProps?.style, theme),
+        ...(isFullScreen
+          ? {
+              border: 0,
+              borderRadius: 0,
+              bottom: 0,
+              height: '100vh',
+              left: 0,
+              margin: 0,
+              maxHeight: '100vh',
+              maxWidth: '100vw',
+              padding: 0,
+              position: 'fixed',
+              right: 0,
+              top: 0,
+              width: '100vw',
+            }
+          : null),
+      })}
+    >
+      {enableTopToolbar &&
+        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+          <MRT_TopToolbar table={table} />
+        ))}
+      <MRT_TableContainer table={table} />
+      {enableBottomToolbar &&
+        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+          <MRT_BottomToolbar table={table} />
+        ))}
+    </Paper>
+  );
+};

package/src/components/toolbar/MRT_BottomToolbar.module.css

@@ -0,0 +1,40 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  bottom: var(--mrt-bottom-toolbar-bottom);
+  box-shadow: 0 1px 2px -1px color-mix(
+      in srgb,
+      var(--mantine-color-black) 10%,
+      transparent
+    ) inset;
+  left: 0;
+  right: 0;
+  position: relative;
+}
+
+.root-fullscreen {
+  position: fixed !important;
+  bottom: 0;
+}
+
+.custom-toolbar-container {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  padding: rem(8px);
+  width: 100%;
+}
+
+.paginator-container {
+  display: flex;
+  justify-content: flex-end;
+  right: 0;
+  top: 0;
+  position: absolute;
+}
+
+.paginator-container-alert-banner {
+  position: relative !important;
+}

package/src/components/toolbar/MRT_BottomToolbar.tsx

@@ -0,0 +1,100 @@
+import clsx from 'clsx';
+
+import commonClasses from './common.styles.module.css';
+import classes from './MRT_BottomToolbar.module.css';
+
+import { Box, type BoxProps } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+import { MRT_ProgressBar } from './MRT_ProgressBar';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_BottomToolbar = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      enablePagination,
+      mantineBottomToolbarProps,
+      positionPagination,
+      positionToolbarAlertBanner,
+      positionToolbarDropZone,
+      renderBottomToolbarCustomActions,
+    },
+    refs: { bottomToolbarRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
+  const toolbarProps = {
+    ...parseFromValuesOrFunc(mantineBottomToolbarProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+
+  return (
+    <Box
+      {...toolbarProps}
+      className={clsx(
+        'mrt-bottom-toolbar',
+        classes.root,
+        commonClasses['common-toolbar-styles'],
+        isFullScreen && classes['root-fullscreen'],
+        toolbarProps?.className,
+      )}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          bottomToolbarRef.current = node;
+          if (toolbarProps?.ref) {
+            toolbarProps.ref.current = node;
+          }
+        }
+      }}
+    >
+      <MRT_ProgressBar isTopToolbar={false} table={table} />
+      {positionToolbarAlertBanner === 'bottom' && (
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          table={table}
+        />
+      )}
+      {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
+      <Box className={classes['custom-toolbar-container']}>
+        {renderBottomToolbarCustomActions ? (
+          renderBottomToolbarCustomActions({ table })
+        ) : (
+          <span />
+        )}
+        <Box
+          className={clsx(
+            classes['paginator-container'],
+            stackAlertBanner && classes['paginator-container-alert-banner'],
+          )}
+        >
+          {enablePagination &&
+            ['both', 'bottom'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination position="bottom" table={table} />
+            )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/components/toolbar/MRT_ProgressBar.module.css

@@ -0,0 +1,10 @@
+.collapse {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+
+.collapse-top {
+  bottom: 0;
+  top: unset;
+}