@kissesses/mantine-react-table-open 9.0.3

package/package.json

@@ -0,0 +1,154 @@
+{
+  "version": "9.0.3",
+  "license": "MIT",
+  "name": "@kissesses/mantine-react-table-open",
+  "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.",
+  "author": "Kevin Vandy",
+  "keywords": [
+    "react-table",
+    "mantine",
+    "tanstack table",
+    "data table",
+    "data grid"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kissesses/mantine-react-table-open.git"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/kevinvandy"
+  },
+  "homepage": "https://github.com/kissesses",
+  "bugs": {
+    "url": "https://github.com/kissesses/mantine-react-table-open/issues"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.esm.mjs",
+  "types": "dist/index.esm.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.esm.d.mts",
+        "default": "./dist/index.esm.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json",
+    "./locales/*": "./locales/*",
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "locales",
+    "styles.css",
+    "src"
+  ],
+  "size-limit": [
+    {
+      "path": "dist/index.cjs",
+      "limit": "53 KB"
+    },
+    {
+      "path": "dist/index.esm.mjs",
+      "limit": "50 KB"
+    }
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "build": "pnpm lib:build",
+    "build-locales": "pnpm lib:build-locales",
+    "build-lib": "pnpm lib:build-lib",
+    "dev": "pnpm lib:dev",
+    "lib:build": "pnpm build-lib && pnpm build-locales",
+    "lib:build-locales": "node build-locales.mjs",
+    "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
+    "lib:dev": "rollup -c rollup.config.mjs --watch",
+    "lint": "eslint .",
+    "size": "size-limit",
+    "storybook": "pnpm storybook:dev",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6007"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@faker-js/faker": "^9.0.3",
+    "@mantine/core": "9.0.1",
+    "@mantine/dates": "9.0.1",
+    "@mantine/hooks": "9.0.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@size-limit/preset-small-lib": "^11.1.6",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-storysource": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/preview-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/testing-library": "^0.2.2",
+    "@tabler/icons-react": "3.19.0",
+    "@types/node": "^22.7.5",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "eslint": "^8.57.0",
+    "eslint-plugin-perfectionist": "^3.8.0",
+    "mantine-contextmenu": "^8.2.0",
+    "postcss": "^8.4.47",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-is": "^19.1.0",
+    "rollup": "^4.24.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.1.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^11.1.6",
+    "storybook": "^8.3.5",
+    "storybook-dark-mode": "^4.0.2",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.3",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.4.8"
+  },
+  "dependencies": {
+    "@tanstack/match-sorter-utils": "8.19.4",
+    "@tanstack/react-table": "8.20.5",
+    "@tanstack/react-virtual": "3.11.2"
+  },
+  "peerDependencies": {
+    "@mantine/core": "^9.0.0",
+    "@mantine/dates": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@tabler/icons-react": ">=2.23.0",
+    "clsx": ">=2",
+    "dayjs": ">=1.11",
+    "react": ">=19.2",
+    "react-dom": ">=19.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/MantineReactTable.tsx

@@ -0,0 +1,37 @@
+import { useMantineReactTable } from '../hooks/useMantineReactTable';
+import {
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
+  type Xor,
+} from '../types';
+import { MRT_TablePaper } from './table/MRT_TablePaper';
+
+type TableInstanceProp<TData extends MRT_RowData> = {
+  table: MRT_TableInstance<TData>;
+};
+
+type Props<TData extends MRT_RowData> = Xor<
+  TableInstanceProp<TData>,
+  MRT_TableOptions<TData>
+>;
+
+const isTableInstanceProp = <TData extends MRT_RowData>(
+  props: Props<TData>,
+): props is TableInstanceProp<TData> =>
+  (props as TableInstanceProp<TData>).table !== undefined;
+
+export const MantineReactTable = <TData extends MRT_RowData>(
+  props: Props<TData>,
+) => {
+  'use no memo';
+  let table: MRT_TableInstance<TData>;
+
+  if (isTableInstanceProp(props)) {
+    table = props.table;
+  } else {
+    table = useMantineReactTable(props);
+  }
+
+  return <MRT_TablePaper table={table} />;
+};

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

@@ -0,0 +1,42 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  position: relative;
+}
+
+.root-grid {
+  display: grid;
+}
+
+.root-no-rows {
+  min-height: 100px;
+}
+
+.root-virtualized {
+  height: var(--mrt-table-body-height);
+}
+
+.empty-row-tr-grid {
+  display: grid;
+}
+
+.empty-row-td-grid {
+  display: grid;
+  width: inherit;
+}
+
+.empty-row-td-content {
+  color: var(--mantine-color-dimmed);
+  font-style: italic;
+  max-width: min(100vw, calc(var(--mrt-paper-width) * 1px));
+  padding-bottom: 2rem;
+  padding-top: 2rem;
+  text-align: center;
+  width: 100%;
+}
+
+.pinned {
+  bottom: calc(var(--mrt-table-footer-height, 0) * 1px - 1px);
+  position: sticky;
+  top: calc(var(--mrt-table-head-height, 0) * 1px - 1px);
+  z-index: 1;
+}

package/src/components/body/MRT_TableBody.tsx

@@ -0,0 +1,215 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableBody.module.css';
+
+import { memo, useMemo } from 'react';
+
+import {
+  type TableProps,
+  TableTbody,
+  type TableTbodyProps,
+} from '@mantine/core';
+
+import { MRT_TableBodyEmptyRow } from './MRT_TableBodyEmptyRow';
+import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
+
+import { useMRT_Rows } from '../../hooks/useMRT_Rows';
+import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer';
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableBodyProps<TData extends MRT_RowData>
+  extends TableTbodyProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+  tableProps: Partial<TableProps>;
+}
+
+export const MRT_TableBody = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  tableProps,
+  ...rest
+}: MRT_TableBodyProps<TData>) => {
+  'use no memo';
+  const {
+    getBottomRows,
+    getIsSomeRowsPinned,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      mantineTableBodyProps,
+      memoMode,
+      renderDetailPanel,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef },
+  } = table;
+  const { isFullScreen, rowPinning } = getState();
+
+  const tableBodyProps = {
+    ...parseFromValuesOrFunc(mantineTableBodyProps, { table }),
+    ...rest,
+  };
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const pinnedRowIds = useMemo(() => {
+    if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
+    return getRowModel()
+      .rows.filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+  }, [rowPinning, getRowModel().rows]);
+
+  const rows = useMRT_Rows(table);
+
+  const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
+
+  const { virtualRows } = rowVirtualizer ?? {};
+
+  const commonRowProps = {
+    columnVirtualizer,
+    numRows: rows.length,
+    table,
+    tableProps,
+  };
+
+  return (
+    <>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('top') && (
+          <TableTbody
+            {...tableBodyProps}
+            __vars={{
+              '--mrt-table-head-height': `${tableHeadHeight}`,
+              ...tableBodyProps?.__vars,
+            }}
+            className={clsx(
+              classes.pinned,
+              layoutMode?.startsWith('grid') && classes['root-grid'],
+              tableBodyProps?.className,
+            )}
+          >
+            {getTopRows().map((row, renderedRowIndex) => {
+              const rowProps = {
+                ...commonRowProps,
+                renderedRowIndex,
+                row,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...rowProps} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...rowProps} />
+              );
+            })}
+          </TableTbody>
+        )}
+      <TableTbody
+        {...tableBodyProps}
+        __vars={{
+          '--mrt-table-body-height': rowVirtualizer
+            ? `${rowVirtualizer.getTotalSize()}px`
+            : undefined,
+          ...tableBodyProps?.__vars,
+        }}
+        className={clsx(
+          classes.root,
+          layoutMode?.startsWith('grid') && classes['root-grid'],
+          !rows.length && classes['root-no-rows'],
+          rowVirtualizer && classes['root-virtualized'],
+          tableBodyProps?.className,
+        )}
+      >
+        {tableBodyProps?.children ??
+          (!rows.length ? (
+            <MRT_TableBodyEmptyRow {...commonRowProps} />
+          ) : (
+            <>
+              {(virtualRows ?? rows).map(
+                (rowOrVirtualRow, renderedRowIndex) => {
+                  if (rowVirtualizer) {
+                    if (renderDetailPanel) {
+                      if (rowOrVirtualRow.index % 2 === 1) {
+                        return null;
+                      } else {
+                        renderedRowIndex = rowOrVirtualRow.index / 2;
+                      }
+                    } else {
+                      renderedRowIndex = rowOrVirtualRow.index;
+                    }
+                  }
+                  const row = rowVirtualizer
+                    ? rows[renderedRowIndex]
+                    : (rowOrVirtualRow as MRT_Row<TData>);
+                  const props = {
+                    ...commonRowProps,
+                    pinnedRowIds,
+                    renderedRowIndex,
+                    row,
+                    rowVirtualizer,
+                    virtualRow: rowVirtualizer
+                      ? (rowOrVirtualRow as MRT_VirtualItem)
+                      : undefined,
+                  };
+                  const key = `${row.id}-${row.index}`;
+                  return memoMode === 'rows' ? (
+                    <Memo_MRT_TableBodyRow key={key} {...props} />
+                  ) : (
+                    <MRT_TableBodyRow key={key} {...props} />
+                  );
+                },
+              )}
+            </>
+          ))}
+      </TableTbody>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('bottom') && (
+          <TableTbody
+            {...tableBodyProps}
+            __vars={{
+              '--mrt-table-footer-height': `${tableFooterHeight}`,
+              ...tableBodyProps?.__vars,
+            }}
+            className={clsx(
+              classes.pinned,
+              layoutMode?.startsWith('grid') && classes['root-grid'],
+              tableBodyProps?.className,
+            )}
+          >
+            {getBottomRows().map((row, renderedRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                renderedRowIndex,
+                row,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableTbody>
+        )}
+    </>
+  );
+};
+
+export const Memo_MRT_TableBody = memo(
+  MRT_TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data,
+) as typeof MRT_TableBody;

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

@@ -0,0 +1,107 @@
+.root {
+  --resize-thickness: 2px;
+
+  background-clip: padding-box;
+  text-align: var(--mrt-cell-align, left);
+  overflow: hidden;
+  position: relative;
+  transition: padding 150ms ease-in-out;
+
+  &[data-dragging-column] {
+    z-index: 2;
+    border-left: var(--drag-thickness) dashed
+      var(--mrt-dragging-drag-border-color);
+    border-right: var(--drag-thickness) dashed
+      var(--mrt-dragging-drag-border-color);
+    &[data-last-row] {
+      border-bottom: var(--drag-thickness) dashed
+        var(--mrt-dragging-drag-border-color);
+    }
+  }
+
+  &[data-hovered-column-target] {
+    opacity: 0.5;
+    border-left: var(--hover-thickness) dashed
+      var(--mrt-dragging-hovered-border-color);
+    border-right: var(--hover-thickness) dashed
+      var(--mrt-dragging-hovered-border-color);
+    &[data-last-row] {
+      border-bottom: var(--hover-thickness) dashed
+        var(--mrt-dragging-hovered-border-color);
+    }
+  }
+
+  &[data-resizing='ltr'] {
+    border-right: var(--resize-thickness) solid
+      var(--mrt-resize-column-border-color);
+  }
+
+  &[data-resizing='rtl'] {
+    border-left: var(--resize-thickness) solid
+      var(--mrt-resize-column-border-color);
+  }
+
+  &:hover {
+    outline-offset: -1px;
+    text-overflow: clip;
+  }
+}
+
+.root-grid {
+  align-items: center;
+  justify-content: var(--mrt-cell-align, flex-start);
+  display: flex;
+}
+
+.root-virtualized {
+  transition: none;
+}
+
+.root-data-col {
+  text-overflow: ellipsis;
+}
+
+.root-nowrap {
+  white-space: nowrap;
+}
+
+.root-cursor-pointer {
+  cursor: pointer;
+}
+
+.root-editable-hover {
+  @mixin hover {
+    outline: 1px solid var(--mantine-color-gray-7);
+  }
+}
+
+.root-cell-hover-reveal {
+  overflow: visible;
+}
+
+.cell-hover-reveal {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: var(--mrt-cell-align);
+}
+
+.cell-hover-reveal.overflowing:hover{
+  overflow: visible;
+  white-space: normal;
+  position: absolute;
+  z-index: 2;
+  padding: var(--table-vertical-spacing)
+    var(--table-horizontal-spacing, var(--mantine-spacing-xs));
+  background-color: var(--mrt-base-background-color);
+  box-shadow: var(--mantine-shadow-sm);
+  border: 1px solid var(--mantine-primary-color-filled);
+  text-indent: -1px;
+  width: max-content;
+  top: 0;
+  left: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}