create-emsgrid 0.1.0 → 0.1.3

package/index.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const targetDir = process.argv[2] || 'ems-grid';
+const resolvedTarget = path.resolve(process.cwd(), targetDir);
+
+if (fs.existsSync(resolvedTarget) && fs.readdirSync(resolvedTarget).length > 0) {
+  console.error(`Target directory is not empty: ${resolvedTarget}`);
+  process.exit(1);
+}
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const templateDir = path.join(__dirname, 'template');
+
+try {
+  fs.mkdirSync(resolvedTarget, { recursive: true });
+  fs.cpSync(templateDir, resolvedTarget, {
+    recursive: true,
+    filter: (src) => {
+      const base = path.basename(src);
+      return base !== 'node_modules' && base !== 'dist' && base !== '.git';
+    },
+  });
+
+  console.log(`\nDone. Run:\n  cd ${targetDir}\n  yarn\n  yarn dev\n`);
+} catch (err) {
+  console.error(err?.message ?? 'Failed to create project.');
+  process.exit(1);
+}

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "create-emsgrid",
+  "version": "0.1.3",
   "private": false,
-  "version": "0.1.0",
   "description": "Create an EMS Grid project",
   "license": "MIT",
+  "type": "module",
   "bin": {
     "create-emsgrid": "index.js"
   },
+  "files": [
+    "index.js",
+    "template"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/Resg/table.git"
@@ -17,51 +22,5 @@
   },
   "engines": {
     "node": ">=18"
-  },
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "format": "prettier --check .",
-    "format:write": "prettier --write .",
-    "lint-staged": "lint-staged",
-    "prepare": "husky"
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{js,jsx,cjs,mjs,css,md,json,yml,yaml}": [
-      "prettier --write"
-    ]
-  },
-  "dependencies": {
-    "@reduxjs/toolkit": "^2.2.7",
-    "@tanstack/react-table": "^8.20.5",
-    "@tanstack/react-virtual": "^3.10.8",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
-    "xlsx": "^0.18.5"
-  },
-  "devDependencies": {
-    "@types/node": "^25.0.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.53.1",
-    "@typescript-eslint/parser": "^8.53.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
-    "prettier": "^3.8.0",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2"
   }
 }

package/template/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "ems-grid",
+  "private": false,
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Resg/table.git"
+  },
+  "homepage": "https://github.com/Resg/table",
+  "bugs": {
+    "url": "https://github.com/Resg/table/issues"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "format": "prettier --check .",
+    "format:write": "prettier --write .",
+    "lint-staged": "lint-staged",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx,cjs,mjs,css,md,json,yml,yaml}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.2.7",
+    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-virtual": "^3.10.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2"
+  }
+}

package/{src → template/src}/components/Grid/core/Grid.tsx

@@ -74,7 +74,19 @@ export function Grid<TData>(props: GridProps<TData>) {
     rowHeight,
     overscan,
   });
+  const tableWidth = table.getTotalSize();
   const firstContentColumnId = table.getVisibleLeafColumns().find((col) => col.id !== 'select')?.id;
+  const headerRef = React.useRef<HTMLDivElement | null>(null);
+  const syncHorizontalScroll = React.useCallback(
+    (source: HTMLDivElement | null, target: HTMLDivElement | null) => {
+      if (!source || !target) return;
+      const nextLeft = source.scrollLeft;
+      if (target.scrollLeft !== nextLeft) {
+        target.scrollLeft = nextLeft;
+      }
+    },
+    []
+  );
   const [menu, setMenu] = React.useState<{
     open: boolean;
     x: number;
@@ -95,16 +107,22 @@ export function Grid<TData>(props: GridProps<TData>) {
 
   return (
     <div className="grid-shell">
-      <Header
-        table={table}
-        showFilters={showFilters}
-        onHeaderDragStart={handleHeaderDragStart}
-        onHeaderDrop={handleHeaderDrop}
-        isReorderableColumn={isReorderable}
-      />
+      <div ref={headerRef} className="scroll-header">
+        <Header
+          table={table}
+          showFilters={showFilters}
+          onHeaderDragStart={handleHeaderDragStart}
+          onHeaderDrop={handleHeaderDrop}
+          isReorderableColumn={isReorderable}
+        />
+      </div>
 
-      <div ref={parentRef} className="scroll">
-        <div style={{ height: totalSize, position: 'relative' }}>
+      <div
+        ref={parentRef}
+        className="scroll"
+        onScroll={() => syncHorizontalScroll(parentRef.current, headerRef.current)}
+      >
+        <div style={{ height: totalSize, position: 'relative', width: tableWidth, minWidth: '100%' }}>
           {isLoading ? (
             <div style={{ padding: 12, opacity: 0.8 }}>Загрузка…</div>
           ) : (
@@ -117,6 +135,7 @@ export function Grid<TData>(props: GridProps<TData>) {
                   row={row}
                   top={vi.start}
                   rowHeight={rowHeight}
+                  tableWidth={tableWidth}
                   firstContentColumnId={firstContentColumnId}
                   renderAggregatedCell={renderAggregatedCell}
                   isGroupMode={isGroupMode}

package/{src → template/src}/components/Grid/ui/Cell.tsx

@@ -16,6 +16,7 @@ export function Cell<TData>({
   isGroupMode = false,
 }: CellProps<TData>) {
   const depth = cell.row.depth;
+  const isGroupedCell = isGroupMode ? (cell.getIsGrouped?.() ?? false) : false;
   const canExpand = isExpanderCell && cell.row.getCanExpand();
   const isExpanded = canExpand ? cell.row.getIsExpanded() : false;
   const paddingLeft = isExpanderCell ? 10 + depth * 14 : undefined;
@@ -58,11 +59,13 @@ export function Cell<TData>({
       );
     } else if (isAggregatedCell) {
       content = aggregatedRenderer(cell);
-    } else {
+    } else if (isPlaceholder || isGroupedCell) {
       content = null;
+    } else {
+      content = defaultRenderer;
     }
   } else if (isPlaceholder) {
-    content = null;
+    content = defaultRenderer;
   } else if (isExpanderCell && canExpand) {
     content = (
       <>

package/{src → template/src}/components/Grid/ui/Header.tsx

@@ -14,11 +14,12 @@ type HeaderProps<TData> = {
 
 export function Header<TData>(props: HeaderProps<TData>) {
   const { table, showFilters, onHeaderDragStart, onHeaderDrop, isReorderableColumn } = props;
+  const tableWidth = table.getTotalSize();
 
   return (
-    <div className="grid-header">
+    <div className="grid-header" style={{ width: tableWidth, minWidth: '100%' }}>
       {table.getHeaderGroups().map((hg) => (
-        <div key={hg.id} className="row">
+        <div key={hg.id} className="row" style={{ width: tableWidth, minWidth: '100%' }}>
           {hg.headers.map((header) => {
             const col = header.column;
             const size = col.getSize();

package/{src → template/src}/components/Grid/ui/Row.tsx

@@ -6,6 +6,7 @@ type RowProps<TData> = {
   row: TableRow<TData>;
   top: number;
   rowHeight: number;
+  tableWidth: number;
   firstContentColumnId?: string;
   renderAggregatedCell?: (cell: TableCell<TData, unknown>) => React.ReactNode;
   isGroupMode?: boolean;
@@ -16,6 +17,7 @@ export function Row<TData>({
   row,
   top,
   rowHeight,
+  tableWidth,
   firstContentColumnId,
   renderAggregatedCell,
   isGroupMode,
@@ -28,7 +30,8 @@ export function Row<TData>({
         position: 'absolute',
         top,
         left: 0,
-        right: 0,
+        width: tableWidth,
+        minWidth: '100%',
         height: rowHeight,
       }}
       onContextMenu={onContextMenu}

package/{src → template/src}/styles.css

@@ -69,6 +69,11 @@ body {
   overflow: hidden;
 }
 
+.scroll-header {
+  overflow: hidden;
+}
+
+
 .grid-header {
   position: sticky;
   top: 0;