npm - create-emsgrid - Versions diffs - 0.1.0 - Mend

create-emsgrid 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/.husky/pre-commit +1 -0
package/.prettierignore +3 -0
package/.prettierrc +6 -0
package/README.md +33 -0
package/eslint.config.js +44 -0
package/index.html +12 -0
package/package.json +67 -0
package/plan.md +51 -0
package/src/App.tsx +230 -0
package/src/components/Grid/core/Grid.tsx +151 -0
package/src/components/Grid/core/createTable.ts +152 -0
package/src/components/Grid/core/settings.ts +5 -0
package/src/components/Grid/core/types.ts +56 -0
package/src/components/Grid/features/columns/useColumnReorder.ts +48 -0
package/src/components/Grid/features/contextMenu/index.ts +1 -0
package/src/components/Grid/features/export/exportXlsx.ts +55 -0
package/src/components/Grid/features/filtering/FilterInput.tsx +34 -0
package/src/components/Grid/features/pagination/index.ts +1 -0
package/src/components/Grid/features/selection/index.ts +1 -0
package/src/components/Grid/features/sorting/SortIndicator.tsx +11 -0
package/src/components/Grid/features/toolbar/index.ts +1 -0
package/src/components/Grid/features/tree/buildParentTree.ts +38 -0
package/src/components/Grid/features/tree/index.ts +1 -0
package/src/components/Grid/features/virtualization/useRowVirtualizer.ts +40 -0
package/src/components/Grid/ui/Cell.tsx +93 -0
package/src/components/Grid/ui/ContextMenu.tsx +43 -0
package/src/components/Grid/ui/Header.tsx +68 -0
package/src/components/Grid/ui/Pagination.tsx +65 -0
package/src/components/Grid/ui/Panels/ColumnsPanel.tsx +3 -0
package/src/components/Grid/ui/Panels/FiltersPanel.tsx +3 -0
package/src/components/Grid/ui/Panels/GroupingPanel.tsx +3 -0
package/src/components/Grid/ui/Row.tsx +50 -0
package/src/components/Grid/ui/columns/SelectColumn.tsx +54 -0
package/src/components/Grid/ui/index.ts +4 -0
package/src/main.tsx +14 -0
package/src/mocks/people.ts +34 -0
package/src/store/gridApi.ts +76 -0
package/src/store/store.ts +12 -0
package/src/styles.css +259 -0
package/tsconfig.json +24 -0
package/vite.config.ts +13 -0

package/.husky/pre-commit ADDED Viewed

	@@ -0,0 +1 @@
1	+ yarn lint-staged

package/.prettierignore ADDED Viewed

@@ -0,0 +1,3 @@
+dist
+node_modules
+coverage

package/.prettierrc ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

package/README.md ADDED Viewed

@@ -0,0 +1,33 @@
+# EMS Grid
+React grid demo with TanStack Table, virtualization, grouping, and exports.
+## Run locally
+```
+yarn
+yarn dev
+```
+## Create a new project
+```
+yarn create emsgrid my-app
+```
+## Publish
+Package:
+```
+npm login
+npm publish --access public
+```
+Creator:
+```
+cd create-emsgrid
+npm login
+npm publish --access public
+```

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,44 @@
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+export default [
+  { ignores: ['dist', 'node_modules'] },
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+      },
+    },
+    settings: { react: { version: 'detect' } },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...tseslint.configs['flat/recommended'].rules,
+      ...react.configs.flat.recommended.rules,
+      ...reactHooks.configs.flat.recommended.rules,
+      ...reactRefresh.configs.recommended.rules,
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      'react-hooks/incompatible-library': 'off',
+      'react-hooks/refs': 'off',
+    },
+  },
+];

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Grid Mini</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "name": "create-emsgrid",
+  "private": false,
+  "version": "0.1.0",
+  "description": "Create an EMS Grid project",
+  "license": "MIT",
+  "bin": {
+    "create-emsgrid": "index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Resg/table.git"
+  },
+  "homepage": "https://github.com/Resg/table",
+  "bugs": {
+    "url": "https://github.com/Resg/table/issues"
+  },
+  "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/plan.md ADDED Viewed

@@ -0,0 +1,51 @@
+# План разработки (TanStack Grid Mini)
+Цель: разработать новый компонент таблицы на базе **@tanstack/react-table** + **@tanstack/react-virtual**.
+Проект автономный (Vite + React + TS). Данные и настройки — через RTK Query (моки).
+## Итерация 0 — инфраструктура (сделано)
+- Vite + React + TS
+- Redux store
+- RTK Query mock API (данные + настройки)
+- Базовый Grid с виртуализацией, сортировкой, selection, ресайзом колонок
+## Итерация 1 — “MVP таблицы”
+- Виртуализация строк (фиксированный rowHeight)
+- Sticky header
+- Сортировка (client)
+- Выбор строк (multi, checkbox)
+- Column sizing (ресайз)
+- Column reordering (dnd)
+- Сохранение настроек: columnSizing, columnVisibility, sorting, rowSelection
+## Итерация 2 — фильтры
+- Text filter (debounce)
+- Set/exclude filter
+- UI для фильтров в header или popover
+## Итерация 3 — дерево Parent
+- Построение дерева по parentId -> subRows
+- Expand/collapse + expand all/collapse all
+- Selection propagation (родители/дети)
+## Итерация 4 — grouping tree
+- Grouping по выбранным колонкам
+- Групповые строки + счетчики
+## Итерация 5 — контекстное меню, экспорт, хоткеи
+- Контекстное меню (на строке/хедере)
+- Экспорт (CSV)
+- Клавиатурная навигация (базовая)
+## Правила производительности
+- columns/data — стабилизировать (useMemo)
+- Row/Cell — memo
+- тяжелые вычисления (tree/group) — memo + кеши
+- overscan 10–20, rowHeight фиксированный по умолчанию

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,230 @@
+import React from 'react';
+import type { ColumnDef, Table } from '@tanstack/react-table';
+import { Grid } from '@/components/Grid/core/Grid';
+import type { GridMode, GridSettings } from '@/components/Grid/core/types';
+import { createSelectColumn } from '@/components/Grid/ui';
+import { useGetPeopleQuery, useGetSettingsQuery, useSaveSettingsMutation } from '@/store/gridApi';
+import type { PersonRow } from '@/mocks/people';
+import { exportTableToXlsx } from '@/components/Grid/features/export/exportXlsx';
+const GRID_ID = 'people-grid';
+const DEFAULT_SETTINGS: GridSettings = {
+  version: 1,
+  columnSizing: { select: 46, name: 220, age: 80, country: 100, department: 140 },
+  columnOrder: [],
+  columnVisibility: {},
+  sorting: [],
+  rowSelection: {},
+  columnFilters: [],
+  expanded: {},
+  grouping: [],
+  pagination: { pageIndex: 0, pageSize: 100 },
+  mode: 'flat',
+};
+function useDebounced<T extends (..._args: any[]) => void>(fn: T, wait = 250) {
+  const fnRef = React.useRef(fn);
+  const timeoutRef = React.useRef<number | undefined>(undefined);
+  React.useEffect(() => {
+    fnRef.current = fn;
+  }, [fn]);
+  return React.useMemo(() => {
+    return (...args: Parameters<T>) => {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => fnRef.current(...args), wait);
+    };
+  }, [wait]);
+}
+export function App() {
+  const [localSettings, setLocalSettings] = React.useState<GridSettings>(DEFAULT_SETTINGS);
+  const { data: peopleData, isFetching: isFetchingPeople } = useGetPeopleQuery({
+    page: localSettings.pagination.pageIndex,
+    size: localSettings.pagination.pageSize,
+  });
+  const { data: settingsData, isFetching: isFetchingSettings } = useGetSettingsQuery({
+    gridId: GRID_ID,
+  });
+  const [saveSettings] = useSaveSettingsMutation();
+  React.useEffect(() => {
+    if (settingsData) {
+      setLocalSettings({
+        ...DEFAULT_SETTINGS,
+        ...settingsData,
+        columnSizing: settingsData.columnSizing ?? DEFAULT_SETTINGS.columnSizing,
+        columnOrder: settingsData.columnOrder ?? DEFAULT_SETTINGS.columnOrder,
+        columnVisibility: settingsData.columnVisibility ?? DEFAULT_SETTINGS.columnVisibility,
+        sorting: settingsData.sorting ?? DEFAULT_SETTINGS.sorting,
+        rowSelection: settingsData.rowSelection ?? DEFAULT_SETTINGS.rowSelection,
+        columnFilters: settingsData.columnFilters ?? DEFAULT_SETTINGS.columnFilters,
+        expanded: settingsData.expanded ?? DEFAULT_SETTINGS.expanded,
+        grouping: settingsData.grouping ?? DEFAULT_SETTINGS.grouping,
+        pagination: settingsData.pagination ?? DEFAULT_SETTINGS.pagination,
+        mode: settingsData.mode ?? DEFAULT_SETTINGS.mode,
+      });
+    } else {
+      setLocalSettings(DEFAULT_SETTINGS);
+    }
+  }, [settingsData]);
+  const debouncedSave = useDebounced((next: GridSettings) => {
+    saveSettings({ gridId: GRID_ID, settings: next });
+  }, 300);
+  const settings = localSettings;
+  const columns = React.useMemo<ColumnDef<PersonRow, any>[]>(() => {
+    return [
+      createSelectColumn(),
+      { accessorKey: 'name', id: 'name', header: 'Name', size: 220 },
+      {
+        accessorKey: 'age',
+        id: 'age',
+        header: 'Age',
+        size: 80,
+        filterFn: (row, columnId, value) =>
+          String(row.getValue(columnId) ?? '').includes(String(value ?? '')),
+      },
+      { accessorKey: 'country', id: 'country', header: 'Country', size: 100 },
+      { accessorKey: 'department', id: 'department', header: 'Department', size: 140 },
+    ];
+  }, []);
+  const people = peopleData?.rows ?? [];
+  const totalRows = peopleData?.total ?? 0;
+  const isLoading = isFetchingPeople || isFetchingSettings;
+  const onSettingsChange = React.useCallback(
+    (next: GridSettings) => {
+      setLocalSettings(next);
+      debouncedSave(next);
+    },
+    [debouncedSave]
+  );
+  const tableRef = React.useRef<Table<PersonRow> | null>(null);
+  const handleTableReady = React.useCallback((table: Table<PersonRow>) => {
+    tableRef.current = table;
+  }, []);
+  const handleExport = React.useCallback((scope: 'page' | 'allFiltered') => {
+    const table = tableRef.current;
+    if (!table) return;
+    exportTableToXlsx({ table, fileName: `people-${scope}`, scope });
+  }, []);
+  const [showFilters, setShowFilters] = React.useState(true);
+  const [expandAllByDefault, setExpandAllByDefault] = React.useState(false);
+  const enableExportXlsx = true;
+  const handleModeChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const nextMode = e.target.value as GridMode;
+      const nextSettings = { ...settings, mode: nextMode, expanded: {} };
+      if (settings.mode === 'group' && nextMode !== 'group') {
+        nextSettings.grouping = [];
+      }
+      onSettingsChange(nextSettings);
+    },
+    [onSettingsChange, settings]
+  );
+  const handleGroupingToggle = React.useCallback(
+    (columnId: string) => {
+      const hasColumn = settings.grouping.includes(columnId);
+      const next = hasColumn
+        ? settings.grouping.filter((id) => id !== columnId)
+        : [...settings.grouping, columnId];
+      onSettingsChange({ ...settings, grouping: next, expanded: {} });
+    },
+    [onSettingsChange, settings]
+  );
+  const handleClearGrouping = React.useCallback(() => {
+    onSettingsChange({ ...settings, grouping: [], expanded: {} });
+  }, [onSettingsChange, settings]);
+  return (
+    <div className="container">
+      <div className="card">
+        <h1 className="h1">TanStack Grid Mini</h1>
+        <div style={{ opacity: 0.75, marginBottom: 10 }}>
+          rows: {people.length.toLocaleString()} • loading: {String(isLoading)}
+        </div>
+        <button
+          className="filter-toggle"
+          type="button"
+          onClick={() => setShowFilters((prev) => !prev)}
+        >
+          {showFilters ? 'Hide filters' : 'Show filters'}
+        </button>
+        <label className="expand-toggle">
+          <input
+            type="checkbox"
+            checked={expandAllByDefault}
+            onChange={(e) => setExpandAllByDefault(e.target.checked)}
+          />
+          Expand all
+        </label>
+        <select className="mode-toggle" value={settings.mode} onChange={handleModeChange}>
+          <option value="flat">Flat</option>
+          <option value="parent">Parent</option>
+          <option value="group">Group</option>
+        </select>
+        <button className="export-toggle" type="button" onClick={() => handleExport('page')}>
+          Export page (xlsx)
+        </button>
+        <button className="export-toggle" type="button" onClick={() => handleExport('allFiltered')}>
+          Export all (xlsx)
+        </button>
+        {settings.mode === 'group' && (
+          <div className="grouping-panel">
+            <span className="grouping-label">Group by:</span>
+            <label className="grouping-item">
+              <input
+                type="checkbox"
+                checked={settings.grouping.includes('country')}
+                onChange={() => handleGroupingToggle('country')}
+              />
+              Country
+            </label>
+            <label className="grouping-item">
+              <input
+                type="checkbox"
+                checked={settings.grouping.includes('department')}
+                onChange={() => handleGroupingToggle('department')}
+              />
+              Department
+            </label>
+            <button className="grouping-clear" type="button" onClick={handleClearGrouping}>
+              Clear grouping
+            </button>
+          </div>
+        )}
+        <Grid<PersonRow>
+          gridId={GRID_ID}
+          data={people}
+          columns={columns}
+          isLoading={isLoading}
+          totalRows={totalRows}
+          settings={settings}
+          onSettingsChange={onSettingsChange}
+          showFilters={showFilters}
+          expandAllByDefault={expandAllByDefault}
+          enableExportXlsx={enableExportXlsx}
+          onTableReady={handleTableReady}
+          getRowContextMenuItems={({ row, close }) => [
+            <button key="details" type="button" onClick={() => close()}>
+              Details for {String(row.original?.id ?? row.id)}
+            </button>,
+            <button key="remove" type="button" onClick={() => close()}>
+              Remove row
+            </button>,
+          ]}
+          rowHeight={36}
+          overscan={14}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/Grid/core/Grid.tsx ADDED Viewed

@@ -0,0 +1,151 @@
+import React from 'react';
+import type { GridProps } from './types';
+import { useGridTable } from './createTable';
+import { useRowVirtualizer } from '../features/virtualization/useRowVirtualizer';
+import { useColumnReorder } from '../features/columns/useColumnReorder';
+import { Header } from '../ui/Header';
+import { Row } from '../ui/Row';
+import { Pagination } from '../ui/Pagination';
+import { buildParentTree } from '../features/tree/buildParentTree';
+import { ContextMenu } from '../ui/ContextMenu';
+export function Grid<TData>(props: GridProps<TData>) {
+  const {
+    data,
+    totalRows,
+    columns,
+    settings,
+    onSettingsChange,
+    isLoading = false,
+    rowHeight = 36,
+    overscan = 12,
+    showFilters = true,
+    renderAggregatedCell,
+    expandAllByDefault = false,
+    enableExportXlsx = true,
+    getRowContextMenuItems,
+    onTableReady,
+  } = props;
+  const isParentMode = settings.mode === 'parent';
+  const isGroupMode = settings.mode === 'group';
+  const tableData = React.useMemo(() => {
+    if (!isParentMode) return data;
+    return buildParentTree(
+      data,
+      (row) => String((row as { id: string }).id),
+      (row) => (row as { parentId?: string | null }).parentId
+    );
+  }, [data, isParentMode]);
+  const getSubRows = React.useCallback((row: TData) => {
+    const node = row as { subRows?: TData[] };
+    return node.subRows;
+  }, []);
+  const expandedState = React.useMemo(() => {
+    if (!expandAllByDefault || !isParentMode) return settings.expanded;
+    if (settings.expanded === true) return settings.expanded;
+    const expandedMap = settings.expanded as Record<string, boolean> | undefined;
+    const isEmpty = !expandedMap || Object.keys(expandedMap).length === 0;
+    return isEmpty ? true : settings.expanded;
+  }, [expandAllByDefault, isParentMode, settings.expanded]);
+  const table = useGridTable<TData>({
+    data: tableData,
+    columns,
+    settings,
+    onSettingsChange,
+    showFilters,
+    getSubRows: isParentMode ? getSubRows : undefined,
+    expandedStateOverride: expandedState,
+    rowCount: totalRows,
+  });
+  React.useEffect(() => {
+    if (!enableExportXlsx || !onTableReady) return;
+    onTableReady(table);
+  }, [enableExportXlsx, onTableReady, table]);
+  const { handleHeaderDragStart, handleHeaderDrop, isReorderable } = useColumnReorder(table, {
+    disabledColumnIds: ['select'],
+  });
+  const { parentRef, rows, totalSize, virtualItems } = useRowVirtualizer({
+    table,
+    rowHeight,
+    overscan,
+  });
+  const firstContentColumnId = table.getVisibleLeafColumns().find((col) => col.id !== 'select')?.id;
+  const [menu, setMenu] = React.useState<{
+    open: boolean;
+    x: number;
+    y: number;
+    rowId?: string;
+  }>({ open: false, x: 0, y: 0 });
+  const closeMenu = React.useCallback(() => {
+    setMenu({ open: false, x: 0, y: 0 });
+  }, []);
+  const menuRow = React.useMemo(() => {
+    if (!menu.open || !menu.rowId) return undefined;
+    return table.getRowModel().rows.find((row) => row.id === menu.rowId);
+  }, [menu.open, menu.rowId, table]);
+  const menuItems = React.useMemo(() => {
+    if (!menu.open || !menuRow || !getRowContextMenuItems) return null;
+    return getRowContextMenuItems({ table, row: menuRow, close: closeMenu });
+  }, [closeMenu, getRowContextMenuItems, menu.open, menuRow, table]);
+  return (
+    <div className="grid-shell">
+      <Header
+        table={table}
+        showFilters={showFilters}
+        onHeaderDragStart={handleHeaderDragStart}
+        onHeaderDrop={handleHeaderDrop}
+        isReorderableColumn={isReorderable}
+      />
+      <div ref={parentRef} className="scroll">
+        <div style={{ height: totalSize, position: 'relative' }}>
+          {isLoading ? (
+            <div style={{ padding: 12, opacity: 0.8 }}>Загрузка…</div>
+          ) : (
+            virtualItems.map((vi) => {
+              const row = rows[vi.index];
+              if (!row) return null;
+              return (
+                <Row
+                  key={row.id}
+                  row={row}
+                  top={vi.start}
+                  rowHeight={rowHeight}
+                  firstContentColumnId={firstContentColumnId}
+                  renderAggregatedCell={renderAggregatedCell}
+                  isGroupMode={isGroupMode}
+                  onContextMenu={(event) => {
+                    if (!getRowContextMenuItems) return;
+                    event.preventDefault();
+                    setMenu({
+                      open: true,
+                      x: event.clientX,
+                      y: event.clientY,
+                      rowId: row.id,
+                    });
+                  }}
+                />
+              );
+            })
+          )}
+        </div>
+      </div>
+      {settings.mode === 'flat' ? <Pagination table={table} /> : null}
+      {menuItems && menuItems.length > 0 ? (
+        <ContextMenu open={menu.open} x={menu.x} y={menu.y} onClose={closeMenu}>
+          {menuItems.map((node, index) => (
+            <div key={index} className="menu-item">
+              {node}
+            </div>
+          ))}
+        </ContextMenu>
+      ) : null}
+    </div>
+  );
+}