@ackplus/mui-tanstack-data-grid 1.0.0

package/dist/utils/special-columns.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createExpandingColumn = exports.createSelectionColumn = void 0;
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const column_types_1 = require("../types/column.types");
+/** Auto-generated checkbox selection column, driven by the SelectionFeature. */
+const createSelectionColumn = (config) => ({
+    id: column_types_1.DEFAULT_SELECTION_COLUMN_ID,
+    maxSize: 60,
+    minSize: 60,
+    align: 'center',
+    filterable: false,
+    enableResizing: false,
+    enableSorting: false,
+    enableHiding: false,
+    enablePinning: false,
+    hideInExport: true,
+    header: ({ table }) => {
+        var _a, _b;
+        if (!config.multiSelect)
+            return null;
+        const allSelected = ((_a = table.getIsAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table)) || false;
+        const someSelected = ((_b = table.getIsSomeRowsSelected) === null || _b === void 0 ? void 0 : _b.call(table)) || false;
+        return (0, react_1.createElement)(material_1.Checkbox, {
+            checked: allSelected,
+            indeterminate: someSelected && !allSelected,
+            onChange: () => { var _a; return (_a = table.toggleAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table); },
+            size: 'small',
+            sx: { p: 0 },
+            'aria-checked': allSelected ? 'true' : someSelected ? 'mixed' : 'false',
+        });
+    },
+    cell: ({ row, table }) => {
+        var _a, _b, _c;
+        const rowId = row.id;
+        const checked = ((_a = table.getIsRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId)) || false;
+        const canSelect = (_c = (_b = table.canSelectRow) === null || _b === void 0 ? void 0 : _b.call(table, rowId)) !== null && _c !== void 0 ? _c : true;
+        return (0, react_1.createElement)(material_1.Checkbox, {
+            checked,
+            disabled: !canSelect,
+            onChange: () => {
+                var _a;
+                if (canSelect)
+                    (_a = table.toggleRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId);
+            },
+            size: 'small',
+            sx: { p: 0, opacity: canSelect ? 1 : 0.5 },
+            'aria-checked': checked ? 'true' : 'false',
+        });
+    },
+    ...config,
+});
+exports.createSelectionColumn = createSelectionColumn;
+/** Auto-generated expand/collapse column for row detail panels. */
+const createExpandingColumn = (config) => ({
+    id: column_types_1.DEFAULT_EXPAND_COLUMN_ID,
+    maxSize: 60,
+    minSize: 60,
+    align: 'center',
+    filterable: false,
+    enableResizing: false,
+    enableSorting: false,
+    enableHiding: false,
+    enablePinning: false,
+    hideInExport: true,
+    header: '',
+    cell: ({ row }) => (0, react_1.createElement)(material_1.IconButton, {
+        onClick: row.getToggleExpandedHandler(),
+        size: 'small',
+        sx: { p: 0 },
+        'aria-label': row.getIsExpanded() ? 'Collapse row' : 'Expand row',
+        'aria-expanded': row.getIsExpanded(),
+    }, row.getIsExpanded()
+        ? (0, react_1.createElement)(icons_material_1.KeyboardArrowUpOutlined)
+        : (0, react_1.createElement)(icons_material_1.KeyboardArrowDownOutlined)),
+    ...config,
+});
+exports.createExpandingColumn = createExpandingColumn;

package/dist/utils/table-helpers.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Pure table utilities.
+ *
+ * Ported from v1. The MUI-`<table>`-specific helpers (`shouldUseFixedLayout`,
+ * `calculatePinnedColumnsWidth`, `calculateTableMetrics`) are intentionally
+ * dropped — the div/CSS-Grid render layer computes layout/pinning differently.
+ */
+/** Estimate how many skeleton rows fill the viewport during load. */
+export declare function calculateSkeletonRows(containerHeight: number, rowHeight: number, maxRows?: number): number;
+/** Stable row id: `row[idKey]` when present, else `row-<index>`. */
+export declare function generateRowId<T>(row: T, index: number, idKey?: keyof T): string;
+/** Default value formatting by column type. */
+export declare function formatCellValue(value: any, type: string): string;
+/** Debounce a function by `wait` ms. */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+//# sourceMappingURL=table-helpers.d.ts.map

package/dist/utils/table-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/table-helpers.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,qEAAqE;AACrE,wBAAgB,qBAAqB,CAAC,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,SAAK,GAAG,MAAM,CAGtG;AAED,oEAAoE;AACpE,wBAAgB,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAO/E;AAED,+CAA+C;AAC/C,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAYhE;AAED,wCAAwC;AACxC,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACtD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACb,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC"}

package/dist/utils/table-helpers.js

@@ -0,0 +1,50 @@
+"use strict";
+/**
+ * Pure table utilities.
+ *
+ * Ported from v1. The MUI-`<table>`-specific helpers (`shouldUseFixedLayout`,
+ * `calculatePinnedColumnsWidth`, `calculateTableMetrics`) are intentionally
+ * dropped — the div/CSS-Grid render layer computes layout/pinning differently.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateSkeletonRows = calculateSkeletonRows;
+exports.generateRowId = generateRowId;
+exports.formatCellValue = formatCellValue;
+exports.debounce = debounce;
+/** Estimate how many skeleton rows fill the viewport during load. */
+function calculateSkeletonRows(containerHeight, rowHeight, maxRows = 10) {
+    const estimatedRows = Math.ceil(containerHeight / rowHeight);
+    return Math.min(estimatedRows, maxRows);
+}
+/** Stable row id: `row[idKey]` when present, else `row-<index>`. */
+function generateRowId(row, index, idKey) {
+    // Honour id === 0, but fall back to a positional id for null/undefined/empty
+    // (an empty-string id would collide across rows).
+    if (idKey && row[idKey] != null && row[idKey] !== '') {
+        return String(row[idKey]);
+    }
+    return `row-${index}`;
+}
+/** Default value formatting by column type. */
+function formatCellValue(value, type) {
+    if (value === null || value === undefined)
+        return '-';
+    switch (type) {
+        case 'date':
+            return value instanceof Date ? value.toLocaleDateString() : String(value);
+        case 'number':
+            return typeof value === 'number' ? value.toLocaleString() : String(value);
+        case 'boolean':
+            return value ? 'Yes' : 'No';
+        default:
+            return String(value);
+    }
+}
+/** Debounce a function by `wait` ms. */
+function debounce(func, wait) {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@ackplus/mui-tanstack-data-grid",
+  "type": "commonjs",
+  "version": "1.0.0",
+  "description": "A lightweight, fully-featured React data grid built on TanStack Table and MUI — div/CSS-Grid rendering (no HTML table), themeable like a MUI component. Successor to @ackplus/react-tanstack-data-table.",
+  "keywords": [
+    "react",
+    "data-grid",
+    "data-table",
+    "tanstack",
+    "mui",
+    "material-ui",
+    "typescript",
+    "headless"
+  ],
+  "author": {
+    "name": "ACK Plus"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ack-solutions/react-tanstack-data-table.git",
+    "directory": "packages/mui-tanstack-data-grid"
+  },
+  "homepage": "https://github.com/ack-solutions/react-tanstack-data-table#readme",
+  "bugs": {
+    "url": "https://github.com/ack-solutions/react-tanstack-data-table/issues"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "tsc -p tsconfig.build.json --noEmit",
+    "test": "pnpm run build && node --test tests/*.test.cjs"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.18",
+    "dayjs": "^1.11.13",
+    "xlsx": "^0.18.5"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "@mui/icons-material": ">=5.0.0 || ^6.0.0 || ^7.0.0",
+    "@mui/material": ">=5.0.0 || ^6.0.0 || ^7.0.0",
+    "react": ">=18.0.0 || ^19.0.0",
+    "react-dom": ">=18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typescript": "~5.8.3"
+  }
+}