@ornery/ui-grid-react 0.1.7 → 0.1.8

package/demo/demo.css

@@ -0,0 +1,122 @@
+.react-demo-shell {
+  display: grid;
+  gap: 1rem;
+  color: var(--ui-grid-cell-color);
+}
+
+.react-demo-shell__header {
+  display: grid;
+  gap: 1rem;
+}
+
+.react-demo-shell__header h2,
+.react-demo-shell__header p,
+.react-demo-shell__toolbar p {
+  margin: 0;
+}
+
+.react-demo-shell__eyebrow {
+  margin: 0 0 0.35rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ui-grid-accent);
+}
+
+.react-demo-shell__header p,
+.react-demo-shell__metrics span,
+.react-demo-shell__toolbar p,
+.react-demo-shell__stats small {
+  color: var(--ui-grid-muted-color);
+}
+
+.react-demo-shell__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.react-demo-shell__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.7rem 1.1rem;
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+  border: 1px solid color-mix(in srgb, var(--ui-grid-accent) 40%, transparent);
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--ui-grid-accent) 86%, black),
+    color-mix(in srgb, var(--ui-grid-accent) 66%, black)
+  );
+  color: white;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
+}
+
+.react-demo-shell__button-secondary {
+  background: var(--ui-grid-surface);
+  color: var(--ui-grid-cell-color);
+  border-color: var(--ui-grid-border-color);
+  box-shadow: none;
+}
+
+.react-demo-shell__stats,
+.react-demo-shell__metrics article,
+.react-demo-shell__toolbar {
+  border: 1px solid var(--ui-grid-border-color);
+  border-radius: var(--ui-grid-radius);
+  background: var(--ui-grid-surface);
+}
+
+.react-demo-shell__stats {
+  display: inline-grid;
+  min-width: 7rem;
+  padding: 0.8rem 1rem;
+}
+
+.react-demo-shell__stats span {
+  font-size: 1.8rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.react-demo-shell__metrics {
+  display: grid;
+  gap: 0.85rem;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+}
+
+.react-demo-shell__metrics article {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.9rem 1rem;
+}
+
+.react-demo-shell__metrics strong {
+  font-size: 1.45rem;
+  line-height: 1.1;
+}
+
+.react-demo-shell__toolbar {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.9rem 1rem;
+}
+
+.react-demo-shell__toolbar strong {
+  margin-right: 0.4rem;
+}
+
+@media (max-width: 720px) {
+  .react-demo-shell__actions {
+    align-items: stretch;
+  }
+
+  .react-demo-shell__button,
+  .react-demo-shell__button-secondary {
+    width: 100%;
+  }
+}

package/demo/main.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { UiGrid } from '../src/index';
-import type { GridOptions, UiGridApi } from '../src/index';
+import type { GridBenchmarkResult, GridOptions, UiGridApi } from '../src/index';
 import { FILTER_CONDITIONS } from '@ornery/ui-grid-core';
 import '../src/ui-grid.css';
+import './demo.css';
 
 const statuses = ['Active', 'Expansion', 'Enterprise', 'Pilot'] as const;
 const companies = ['Northwind', 'Blue Harbor', 'Forge Group', 'Larkspur', 'Atlas'] as const;
@@ -29,6 +30,8 @@ const currencyFormat = new Intl.NumberFormat('en-US', {
 
 function App() {
   const [gridApi, setGridApi] = useState<UiGridApi | null>(null);
+  const [visibleRowCount, setVisibleRowCount] = useState(0);
+  const [benchmarkResult, setBenchmarkResult] = useState<GridBenchmarkResult | null>(null);
   const data = useMemo(() => createDemoData(), []);
 
   const options = useMemo<GridOptions>(
@@ -46,6 +49,7 @@ function App() {
       enableCellEditOnFocus: true,
       virtualizationThreshold: 25,
       grouping: { groupBy: ['status'] },
+      benchmark: { iterations: 40 },
       rowIdentity: (row) => String(row['id']),
       onRegisterApi: (api) => setGridApi(api as UiGridApi),
       columnDefs: [
@@ -89,7 +93,89 @@ function App() {
     [data],
   );
 
-  return <UiGrid options={options} onRegisterApi={options.onRegisterApi} />;
+  useEffect(() => {
+    if (!gridApi) {
+      return;
+    }
+
+    setVisibleRowCount(gridApi.core.getVisibleRows().length);
+
+    const disposeVisibleRows = gridApi.core.on.rowsVisibleChanged((rows) => {
+      setVisibleRowCount(rows.length);
+    });
+    const disposeBenchmark = gridApi.core.on.benchmarkComplete((result) => {
+      setBenchmarkResult(result);
+    });
+
+    return () => {
+      disposeVisibleRows();
+      disposeBenchmark();
+    };
+  }, [gridApi]);
+
+  return (
+    <section className="react-demo-shell">
+      <header className="react-demo-shell__header">
+        <div>
+          <p className="react-demo-shell__eyebrow">React package demo</p>
+          <h2>{options.title ?? 'UI Grid'}</h2>
+          <p>
+            Familiar <code>gridOptions</code> and <code>onRegisterApi</code>, rebuilt with React
+            hooks, virtualization, grouping, sorting, filtering, and column ordering.
+          </p>
+        </div>
+
+        <div className="react-demo-shell__actions">
+          <button
+            type="button"
+            className="react-demo-shell__button"
+            onClick={() => gridApi?.core.benchmark()}
+          >
+            Benchmark
+          </button>
+          <button
+            type="button"
+            className="react-demo-shell__button react-demo-shell__button-secondary"
+            onClick={() => gridApi?.core.exportCsv()}
+          >
+            Export CSV
+          </button>
+          <div className="react-demo-shell__stats">
+            <span>{visibleRowCount}</span>
+            <small>visible rows</small>
+          </div>
+        </div>
+      </header>
+
+      <section className="react-demo-shell__metrics" aria-label="React grid metrics">
+        <article>
+          <strong>{options.enableVirtualization ? 'On' : 'Off'}</strong>
+          <span>virtualization</span>
+        </article>
+        <article>
+          <strong>{options.grouping?.groupBy?.length ?? 0}</strong>
+          <span>group columns</span>
+        </article>
+        <article>
+          <strong>{benchmarkResult?.averageMs?.toFixed(2) || '—'}</strong>
+          <span>benchmark avg</span>
+        </article>
+      </section>
+
+      <div className="react-demo-shell__toolbar">
+        <div>
+          <strong>{visibleRowCount}</strong>
+          <span>of {data.length} rows</span>
+        </div>
+        <p>
+          <code>gridOptions</code> compatibility layer: sorting, filtering, grouping, column moving,
+          templating, and virtualized rendering.
+        </p>
+      </div>
+
+      <UiGrid options={options} onRegisterApi={options.onRegisterApi} />
+    </section>
+  );
 }
 
 createRoot(document.getElementById('root')!).render(<App />);

package/dist/UiGrid.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import type { GridOptions, GridCellTemplateContext, GridExpandableTemplateContext, UiGridApi } from '@ornery/ui-grid-core';
+import type { GridOptions, GridCellTemplateContext, GridExpandableTemplateContext, GridHeaderTemplateContext, UiGridApi } from '@ornery/ui-grid-core';
 export interface UiGridProps {
     options: GridOptions;
     onRegisterApi?: (api: UiGridApi) => void;
     cellRenderer?: (context: GridCellTemplateContext) => React.ReactNode;
+    headerRenderer?: (context: GridHeaderTemplateContext) => React.ReactNode;
     expandableRenderer?: (context: GridExpandableTemplateContext) => React.ReactNode;
     className?: string;
 }
-export declare function UiGrid({ options, onRegisterApi, cellRenderer, expandableRenderer, className, }: UiGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function UiGrid({ options, onRegisterApi, cellRenderer, headerRenderer, expandableRenderer, className, }: UiGridProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiGrid.d.ts.map

package/dist/UiGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiGrid.d.ts","sourceRoot":"","sources":["../src/UiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,WAAW,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,SAAS,EAGV,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,6BAA6B,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,SAAS,GACV,EAAE,WAAW,2CAsxBb"}
+{"version":3,"file":"UiGrid.d.ts","sourceRoot":"","sources":["../src/UiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,WAAW,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,yBAAyB,EACzB,SAAS,EAGV,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,6BAA6B,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,aAAa,EACb,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,EAAE,WAAW,2CA+rBb"}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { UiGrid } from './UiGrid';
 export type { UiGridProps } from './UiGrid';
-export { mountUiGrid } from './mountUiGrid';
+export { mountUiGrid, updateUiGrid, styledCell } from './mountUiGrid';
 export { mountUiGridCustomElement, type MountUiGridCustomElementOptions, type MountedUiGridCustomElement, } from './vanillaAdapter';
 export { useGridState } from './useGridState';
 export type { UseGridStateResult } from './useGridState';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,wBAAwB,EACxB,KAAK,+BAA+B,EACpC,KAAK,0BAA0B,GAChC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,GACxC,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EACV,WAAW,EACX,aAAa,EACb,OAAO,EACP,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,uBAAuB,EACvB,mBAAmB,EACnB,cAAc,EACd,SAAS,GACV,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EACL,wBAAwB,EACxB,KAAK,+BAA+B,EACpC,KAAK,0BAA0B,GAChC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,GACxC,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EACV,WAAW,EACX,aAAa,EACb,OAAO,EACP,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,uBAAuB,EACvB,mBAAmB,EACnB,cAAc,EACd,SAAS,GACV,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}