create-emsgrid 0.1.0

package/src/components/Grid/ui/Pagination.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import type { Table } from '@tanstack/react-table';
+
+type PaginationProps<TData> = {
+  table: Table<TData>;
+};
+
+const PAGE_SIZES = [10, 25, 50, 100, 200];
+
+export function Pagination<TData>({ table }: PaginationProps<TData>) {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = Math.max(table.getPageCount(), 1);
+
+  return (
+    <div className="pagination">
+      <button
+        className="pagination-button"
+        type="button"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        Prev
+      </button>
+      <button
+        className="pagination-button"
+        type="button"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        Next
+      </button>
+      <span className="pagination-info">
+        Page {pageIndex + 1} of {pageCount}
+      </span>
+      <label className="pagination-size">
+        Page size
+        <select
+          value={pageSize}
+          onChange={(event) => table.setPageSize(Number(event.target.value))}
+        >
+          {PAGE_SIZES.map((size) => (
+            <option key={size} value={size}>
+              {size}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="pagination-jump">
+        Go to
+        <input
+          type="number"
+          min={1}
+          max={pageCount}
+          value={pageIndex + 1}
+          onChange={(event) => {
+            const value = Number(event.target.value);
+            if (!Number.isFinite(value)) return;
+            const nextIndex = Math.min(Math.max(value - 1, 0), pageCount - 1);
+            table.setPageIndex(nextIndex);
+          }}
+        />
+      </label>
+    </div>
+  );
+}

package/src/components/Grid/ui/Panels/ColumnsPanel.tsx

@@ -0,0 +1,3 @@
+export function ColumnsPanel() {
+  return null;
+}

package/src/components/Grid/ui/Panels/FiltersPanel.tsx

@@ -0,0 +1,3 @@
+export function FiltersPanel() {
+  return null;
+}

package/src/components/Grid/ui/Panels/GroupingPanel.tsx

@@ -0,0 +1,3 @@
+export function GroupingPanel() {
+  return null;
+}

package/src/components/Grid/ui/Row.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { Row as TableRow, Cell as TableCell } from '@tanstack/react-table';
+import { Cell } from './Cell';
+
+type RowProps<TData> = {
+  row: TableRow<TData>;
+  top: number;
+  rowHeight: number;
+  firstContentColumnId?: string;
+  renderAggregatedCell?: (cell: TableCell<TData, unknown>) => React.ReactNode;
+  isGroupMode?: boolean;
+  onContextMenu?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+
+export function Row<TData>({
+  row,
+  top,
+  rowHeight,
+  firstContentColumnId,
+  renderAggregatedCell,
+  isGroupMode,
+  onContextMenu,
+}: RowProps<TData>) {
+  return (
+    <div
+      className="row"
+      style={{
+        position: 'absolute',
+        top,
+        left: 0,
+        right: 0,
+        height: rowHeight,
+      }}
+      onContextMenu={onContextMenu}
+    >
+      {row.getVisibleCells().map((cell) => {
+        const isExpanderCell = firstContentColumnId === cell.column.id;
+        return (
+          <Cell
+            key={cell.id}
+            cell={cell}
+            isExpanderCell={isExpanderCell}
+            renderAggregatedCell={renderAggregatedCell}
+            isGroupMode={isGroupMode}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Grid/ui/columns/SelectColumn.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from 'react';
+import type { ColumnDef, Row, Table } from '@tanstack/react-table';
+
+type SelectColumnOptions = {
+  id?: string;
+  size?: number;
+};
+
+function SelectAllCheckbox<TData>({ table }: { table: Table<TData> }) {
+  return (
+    <input
+      className="checkbox"
+      type="checkbox"
+      checked={table.getIsAllRowsSelected()}
+      ref={(el) => {
+        if (!el) return;
+        el.indeterminate = table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected();
+      }}
+      onChange={table.getToggleAllRowsSelectedHandler()}
+    />
+  );
+}
+
+function SelectRowCheckbox<TData>({ row }: { row: Row<TData> }) {
+  return (
+    <input
+      className="checkbox"
+      type="checkbox"
+      checked={row.getIsSelected()}
+      ref={(el) => {
+        if (!el) return;
+        el.indeterminate = row.getIsSomeSelected() && !row.getIsSelected();
+      }}
+      onChange={row.getToggleSelectedHandler()}
+    />
+  );
+}
+
+export function createSelectColumn<TData>(
+  options: SelectColumnOptions = {}
+): ColumnDef<TData, unknown> {
+  const { id = 'select', size = 46 } = options;
+
+  return {
+    id,
+    header: ({ table }) => <SelectAllCheckbox table={table} />,
+    cell: ({ row }) => <SelectRowCheckbox row={row} />,
+    size,
+    enableSorting: false,
+    enableResizing: false,
+    enableColumnFilter: false,
+  };
+}

package/src/components/Grid/ui/index.ts

@@ -0,0 +1,4 @@
+export { Header } from './Header';
+export { Row } from './Row';
+export { Cell } from './Cell';
+export { createSelectColumn } from './columns/SelectColumn';

package/src/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { store } from './store/store';
+import { App } from './App';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>
+);

package/src/mocks/people.ts

@@ -0,0 +1,34 @@
+export type PersonRow = {
+  id: string;
+  parentId?: string;
+  name: string;
+  age: number;
+  country: string;
+  department: string;
+};
+
+const countries = ['DE', 'PL', 'FR', 'ES', 'IT', 'US', 'CA'] as const;
+const depts = ['Ops', 'Dev', 'QA', 'HR', 'Finance'] as const;
+
+function mulberry32(a: number) {
+  return function () {
+    let t = (a += 0x6d2b79f5);
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export function makePeople(count = 5000, seed = 42): PersonRow[] {
+  const rnd = mulberry32(seed);
+  const rows: PersonRow[] = [];
+  for (let i = 0; i < count; i++) {
+    const id = String(i + 1);
+    const age = Math.floor(18 + rnd() * 48);
+    const country = countries[Math.floor(rnd() * countries.length)];
+    const department = depts[Math.floor(rnd() * depts.length)];
+    const parentId = i > 0 && i % 5 === 0 ? String(i) : undefined;
+    rows.push({ id, parentId, name: `User ${id}`, age, country, department });
+  }
+  return rows;
+}

package/src/store/gridApi.ts

@@ -0,0 +1,76 @@
+import { createApi } from '@reduxjs/toolkit/query/react';
+import type { BaseQueryFn } from '@reduxjs/toolkit/query';
+import type { GridSettings } from '@/components/Grid/core/types';
+import { makePeople, type PersonRow } from '@/mocks/people';
+
+type PeopleArgs = { page: number; size: number };
+type SettingsArgs = { gridId: string };
+type SaveSettingsArgs = { gridId: string; settings: GridSettings };
+type BaseQueryArgs = {
+  url: string;
+  method?: 'GET' | 'POST';
+  body?: unknown;
+  params?: Record<string, unknown>;
+};
+type BaseQueryError = { status: number; data: unknown };
+
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+const mockDb = {
+  people: makePeople(20000),
+  settingsByGridId: new Map<string, GridSettings>(),
+};
+
+export const gridApi = createApi({
+  reducerPath: 'gridApi',
+  baseQuery: (async (arg: BaseQueryArgs) => {
+    const { url, method = 'GET', body, params } = arg ?? {};
+    await sleep(120);
+
+    try {
+      if (url === '/people' && method === 'GET') {
+        const page = Number(params?.page ?? 0);
+        const size = Number(params?.size ?? 100);
+        const safePage = Number.isFinite(page) && page > 0 ? Math.floor(page) : 0;
+        const safeSize = Number.isFinite(size) && size > 0 ? Math.floor(size) : 100;
+        const start = safePage * safeSize;
+        const end = start + safeSize;
+        const rows = mockDb.people.slice(start, end) as PersonRow[];
+        return { data: { rows, total: mockDb.people.length } };
+      }
+
+      if (url === '/settings' && method === 'GET') {
+        const gridId = String(params?.gridId ?? '');
+        const data = mockDb.settingsByGridId.get(gridId) ?? null;
+        return { data };
+      }
+
+      if (url === '/settings' && method === 'POST') {
+        const { gridId, settings } = body as SaveSettingsArgs;
+        mockDb.settingsByGridId.set(gridId, settings);
+        return { data: { ok: true } };
+      }
+
+      return { error: { status: 404, data: 'Not found' } };
+    } catch (e) {
+      return { error: { status: 500, data: String((e as Error)?.message ?? e) } };
+    }
+  }) as BaseQueryFn<BaseQueryArgs, unknown, BaseQueryError>,
+  endpoints: (build) => ({
+    getPeople: build.query<{ rows: PersonRow[]; total: number }, PeopleArgs>({
+      query: ({ page, size }) => ({ url: '/people', method: 'GET', params: { page, size } }),
+    }),
+    getSettings: build.query<GridSettings | null, SettingsArgs>({
+      query: ({ gridId }) => ({ url: '/settings', method: 'GET', params: { gridId } }),
+    }),
+    saveSettings: build.mutation<{ ok: true }, SaveSettingsArgs>({
+      query: ({ gridId, settings }) => ({
+        url: '/settings',
+        method: 'POST',
+        body: { gridId, settings },
+      }),
+    }),
+  }),
+});
+
+export const { useGetPeopleQuery, useGetSettingsQuery, useSaveSettingsMutation } = gridApi;

package/src/store/store.ts

@@ -0,0 +1,12 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { gridApi } from './gridApi';
+
+export const store = configureStore({
+  reducer: {
+    [gridApi.reducerPath]: gridApi.reducer,
+  },
+  middleware: (getDefault) => getDefault().concat(gridApi.middleware),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/src/styles.css

@@ -0,0 +1,259 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+  background: #0b0d12;
+  color: #e8ecf3;
+}
+
+.container {
+  padding: 16px;
+}
+
+.card {
+  background: #121624;
+  border: 1px solid #242b3d;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.h1 {
+  font-size: 18px;
+  margin: 0 0 12px 0;
+}
+
+.filter-toggle {
+  margin: 0 0 10px 0;
+  padding: 6px 10px;
+  border: 1px solid #2a334a;
+  border-radius: 8px;
+  background: #0f1320;
+  color: inherit;
+  cursor: pointer;
+}
+
+.expand-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 10px 8px;
+  font-size: 12px;
+}
+
+.mode-toggle {
+  margin: 0 0 10px 8px;
+  padding: 6px 10px;
+  border: 1px solid #2a334a;
+  border-radius: 8px;
+  background: #0f1320;
+  color: inherit;
+}
+
+.export-toggle {
+  margin: 0 0 10px 8px;
+  padding: 6px 10px;
+  border: 1px solid #2a334a;
+  border-radius: 8px;
+  background: #0f1320;
+  color: inherit;
+  cursor: pointer;
+}
+
+.grid-shell {
+  border: 1px solid #242b3d;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.grid-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #151a2a;
+  border-bottom: 1px solid #242b3d;
+}
+
+.grid-header .cell {
+  height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  align-items: stretch;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #1b2233;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 36px;
+  box-sizing: border-box;
+  border-right: 1px solid #1b2233;
+}
+
+.cell:last-child {
+  border-right: none;
+}
+
+.header-cell {
+  font-weight: 600;
+  user-select: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.header-cell button {
+  all: unset;
+  cursor: pointer;
+  width: 100%;
+}
+
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.filter-input {
+  width: 100%;
+  height: 24px;
+  padding: 0 6px;
+  border: 1px solid #2a334a;
+  border-radius: 6px;
+  background: #0f1320;
+  color: inherit;
+  box-sizing: border-box;
+}
+
+.expander {
+  margin-right: 6px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+
+.grouping-panel {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 10px 10px;
+}
+
+.grouping-label {
+  opacity: 0.8;
+}
+
+.grouping-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.grouping-clear {
+  padding: 4px 8px;
+  border: 1px solid #2a334a;
+  border-radius: 6px;
+  background: #0f1320;
+  color: inherit;
+  cursor: pointer;
+}
+
+.group-label {
+  font-weight: 600;
+}
+
+.scroll {
+  height: 520px;
+  overflow: auto;
+  position: relative;
+}
+
+.checkbox {
+  width: 14px;
+  height: 14px;
+}
+
+.context-menu {
+  position: fixed;
+  z-index: 10;
+  min-width: 160px;
+  padding: 6px;
+  border: 1px solid #2a334a;
+  border-radius: 8px;
+  background: #0f1320;
+  box-shadow: 0 8px 20px rgba(5, 8, 16, 0.4);
+}
+
+.menu-item {
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.menu-item:hover {
+  background: #1b2233;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid #242b3d;
+  background: #111626;
+  font-size: 12px;
+}
+
+.pagination-button {
+  padding: 4px 8px;
+  border: 1px solid #2a334a;
+  border-radius: 6px;
+  background: #0f1320;
+  color: inherit;
+  cursor: pointer;
+}
+
+.pagination-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.pagination-info {
+  opacity: 0.8;
+}
+
+.pagination-size,
+.pagination-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.pagination select,
+.pagination input {
+  height: 26px;
+  padding: 0 6px;
+  border: 1px solid #2a334a;
+  border-radius: 6px;
+  background: #0f1320;
+  color: inherit;
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    "jsx": "react-jsx",
+    "strict": true,
+    "types": ["vite/client"],
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { open: true },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});