@neo4j-ndl/react 4.18.6 → 4.18.8

package/skills/ndl-react/components/data-grid.md

@@ -18,7 +18,7 @@ Import: `import { DataGrid } from '@neo4j-ndl/react'`
 | `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
 | `rootProps` | `HtmlAttributes<"div">` |  |  | @deprecated Use htmlAttributes, className and style on the root element instead |
 | `skeletonProps` | `(SkeletonProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>)` |  |  |  |
-| `styleRules` | `{ apply: { color?: { value: string; isDisabled?: boolean; }; colorRange?: { maxColor: string; maxValue: number \| bigint \| { bigint: string; }; minColor: string; minValue: number \| ... 1 more ... \| { ...; }; onColumn: string; isDisabled?: boolean \| undefined; midColor?: string \| undefined; mid...` |  |  | Rule-based conditional styling for cells and rows. |
+| `styleRules` | `{ apply: { color?: { value: string; isDisabled?: boolean; }; colorRange?: { maxColor: string; maxValue: number \| bigint \| { bigint: string; } \| { datetime: string; } \| { ...; } \| { ...; }; ... 5 more ...; midValue?: number \| ... 5 more ... \| undefined; } \| undefined; textColor?: { ...; } \| un...` |  |  | Rule-based conditional styling for cells and rows. |
 | `styleRuleValueConverters` | `DataGridStyleRuleValueConverters` |  |  | Per-column converters that teach the style-rule engine how to interpret complex cell values. |
 | `styling` | `Partial<{ hasZebraStriping: boolean; borderStyle: "all-sides" \| "horizontal" \| "vertical" \| "none"; headerStyle: "filled" \| "clean"; hasHoverEffects: boolean; isCompact: boolean; }>` |  | `{}` |  |
 | `tableInstance` | `Table<T>` | ✅ |  | Table instance created from `useTable` |
@@ -1959,16 +1959,13 @@ const data: EventRow[] = [
     // 13:15 Paris CEST (+02:00) = 11:15 UTC
     scheduledDate: new Date('2026-07-08T13:15:00+02:00'),
     scheduledTimeMs: 11 * 3_600_000 + 15 * 60_000,
-    status: 'cancelled',
+    status: 'confirmed',
   },
-  // ── Far future (after 2026-07-15T00:00 Stockholm / CEST = 2026-07-14T22:00Z)
   {
     event: 'Architecture summit',
     localTimeDisplay: '08:00 CEST (+02:00)',
-    // 08:00 Amsterdam CEST (+02:00) = 06:00 UTC.
-    // Although the calendar date is "July 15", 08:00 CEST is still within the
-    // same UTC day as July 14 22:00Z, so it crosses the far-future boundary.
-    scheduledDate: new Date('2026-07-15T08:00:00+02:00'),
+    // 08:00 Amsterdam CEST (+02:00) = 06:00 UTC
+    scheduledDate: new Date('2026-07-11T08:00:00+02:00'),
     scheduledTimeMs: 6 * 3_600_000,
     status: 'confirmed',
   },
@@ -1976,17 +1973,18 @@ const data: EventRow[] = [
     event: 'Annual conference',
     localTimeDisplay: '09:00 PDT (-07:00)',
     // 09:00 San Francisco PDT (-07:00) = 16:00 UTC — after Stockholm closes
-    scheduledDate: new Date('2026-08-03T09:00:00-07:00'),
+    scheduledDate: new Date('2026-07-13T09:00:00-07:00'),
     scheduledTimeMs: 16 * 3_600_000,
     status: 'confirmed',
   },
+  // ── Far future (after 2026-07-15T00:00 Stockholm / CEST = 2026-07-14T22:00Z)
   {
     event: 'Year-end planning',
     localTimeDisplay: '09:00 JST (+09:00)',
     // 09:00 Tokyo JST (+09:00) = 00:00 UTC — midnight, well before Stockholm opens
     scheduledDate: new Date('2026-11-20T09:00:00+09:00'),
     scheduledTimeMs: 0,
-    status: 'confirmed',
+    status: 'cancelled',
   },
 ];
 
@@ -2008,6 +2006,26 @@ const data: EventRow[] = [
  *   { time: '17:00:00+02:00' } resolves to 15:00 UTC (54 000 000 ms)
  */
 const styleRules: DataGridStyleRule[] = [
+  // Near-future date cells use temporal literals directly as gradient
+  // boundaries. Several rows are spread across this interval so the progression
+  // from amber to blue is easy to see.
+  {
+    apply: {
+      colorRange: {
+        maxColor: '#dbeafe',
+        maxValue: {
+          datetime: '2026-07-15T00:00:00[Europe/Stockholm]',
+        },
+        minColor: '#fef3c7',
+        minValue: {
+          datetime: '2026-06-26T00:00:00[Europe/Stockholm]',
+        },
+        onColumn: 'scheduledDate',
+      },
+    },
+    column: 'scheduledDate',
+    priority: 0,
+  },
   // Past events — entire row in muted red
   {
     apply: {