@reforgium/data-grid 2.4.0 → 2.5.0

package/README.md

@@ -106,8 +106,96 @@ Supported default fields:
 - `debounce`
 
 `translations` supports: `emptyState`, `itemsPerPageLabel`, `nextPageLabel`, `prevPageLabel`, `indexColumnHeader`.
-
-### Inputs
+
+### Type registries (global + local)
+
+You can register type-based transformers and renderers globally via DI.
+
+- `provideDataGridTypeTransformers(...)` registers `type -> (row, ctx) => value`
+- `provideDataGridTypeRenderers(...)` registers `type -> TemplateRef`
+- `reDataGridTypeCell="..."` registers an instance-local renderer (only for that grid instance)
+
+```ts
+import {
+  provideDataGridTypeTransformers,
+} from '@reforgium/data-grid';
+
+export const routes: Routes = [
+  {
+    path: 'users',
+    providers: [
+      provideDataGridTypeTransformers({
+        money: (_row, ctx) => `$${Number(ctx.value ?? 0).toLocaleString('en-US')}`,
+      }),
+    ],
+    loadComponent: () => import('./users.page').then((m) => m.UsersPage),
+  },
+];
+```
+
+```ts
+columns = [
+  { key: 'salary', header: 'Salary', type: 'money' },
+];
+```
+
+```html
+<re-data-grid [data]="users" [columns]="columns">
+  <!-- Local renderer overrides global renderer for this grid only -->
+  <ng-template reDataGridTypeCell="money" let-value="value" let-row="row">
+    <b>{{ value }}</b> <small>{{ row.status }}</small>
+  </ng-template>
+</re-data-grid>
+```
+
+Renderer precedence:
+
+1. `column.renderTemplate`
+2. local `reDataGridTypeCell`
+3. DI `provideDataGridTypeRenderers(...)`
+4. built-in renderer (`date`, `number`, `index`, ...)
+5. default text renderer
+
+Value transform precedence:
+
+1. `column.transformer(row, ctx)`
+2. DI `provideDataGridTypeTransformers(...)`
+3. default value pipeline
+
+`ctx` includes: `value`, `col`, `index`, `type`.
+
+Type/value callback context (`ctx`) and pinned rows:
+
+- `value(row, ctx)` receives: `ctx.col`, `ctx.index`, `ctx.isPinned`
+- `transformer(row, ctx)` receives: `ctx.value`, `ctx.col`, `ctx.index`, `ctx.type`, `ctx.isPinned`
+- Cell template contexts (including `reDataGridTypeCell`, `reDataGridCell`) expose `isPinned`
+
+```ts
+columns = [
+  {
+    key: 'code',
+    header: 'Code',
+    value: (row, ctx) => (ctx.isPinned ? 'PINNED' : row.code),
+  },
+  {
+    key: 'salary',
+    header: 'Salary',
+    type: 'money',
+    transformer: (row, ctx) => (ctx.isPinned ? `PIN: ${ctx.value}` : ctx.value),
+  },
+];
+```
+
+```html
+<ng-template reDataGridTypeCell="money" let-value="value" let-isPinned="isPinned">
+  <b>{{ value }}</b>
+  @if (isPinned) {
+    <small>PIN</small>
+  }
+</ng-template>
+```
+
+### Inputs
 
 | Parameter          | Type                                             | Default            | Description                                                                                     |                  |
 |--------------------|--------------------------------------------------|--------------------|-------------------------------------------------------------------------------------------------|------------------|
@@ -135,9 +223,14 @@ Supported default fields:
 | deferCells         | `boolean`                                        | `false`            | Defers rendering of cell content                                                                |                  |
 | rowKey             | `DataKey<T> \| ((item: T) => string \| number)`  | `undefined`        | Property name or function to resolve unique row key                                             |                  |
 
-When selection mode is `'single'` or `'multi'`, provide a `key` (data property) and optionally `defaultSelected`.
-
-Feature lazy-loading behavior (runtime `import()`):
+When selection mode is `'single'` or `'multi'`, provide a `key` (data property) and optionally `defaultSelected`.
+
+Selection mode guidance:
+
+- Prefer using row selection with `mode="pagination"` for clearer UX and predictable “select all” behavior.
+- In `mode="infinity"`, selection typically applies only to currently loaded rows, so use it only when that behavior is acceptable.
+
+Feature lazy-loading behavior (runtime `import()`):
 
 - Selection feature is loaded when `selection.mode !== 'none'`.
 - Sticky feature is loaded when `isRowSticky` is provided.
@@ -232,14 +325,15 @@ Renderer-specific fields:
 
 | Variant           | Fields                                                                                                    | Notes                                                                                                 |
 |-------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|
-| Built-in renderer | `type?: 'plain' \| 'date' \| 'number' \| 'index' \| 'checkbox'`, `typeParams?: any`, `defaultValue?: any` | `defaultValue` is used when source value is `null`/`undefined`; `typeParams` passes formatter config. |
-| Value renderer    | `value: (row: T) => string \| number`, `track: (row: T) => string`                                        | `track` is required for stable row identity and efficient updates.                                    |
-| Template renderer | `renderTemplate: TemplateRef<...>`, `track: (row: T) => string`                                           | `track` is required when rendering through Angular templates.                                         |
+| Built-in / type renderer | `type?: GridBuiltInCellType \| string`, `typeParams?: any`, `defaultValue?: any` | Built-in types are `plain/date/number/index/checkbox`; custom string types can be handled by local/DI type registries. |
+| Value renderer    | `value: (row: T, ctx) => string \| number`, `track: (row: T) => string`                                   | `track` is required for stable row identity and efficient updates. `ctx` includes `col`, `index`, `isPinned`. |
+| Template renderer | `renderTemplate: TemplateRef<...>`, `track: (row: T) => string`                                           | `track` is required when rendering through Angular templates.                                         |
 
 Cell text wrapping/clamp behavior:
 
 - Default header text and default body renderers (`plain`, `date`, `number`, `index`) are limited to 2 lines with ellipsis.
-- Template-based renderers (`renderTemplate`, `reDataGridCell`, `reDataGridTypeCell`, etc.) are not clamped by default and are fully controlled by your template styles.
+- Template-based renderers (`renderTemplate`, `reDataGridCell`, `reDataGridTypeCell`, etc.) are not clamped by default and are fully controlled by your template styles.
+- Cell template contexts also include `isPinned` so pinned top/bottom rows can be rendered differently.
 
 ### Declarative columns *[NEW in 2.0.0]*
 

package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-CPzcczP6.mjs → reforgium-data-grid-grid-overlay-scroll.feature-CM8whbLz.mjs}

@@ -1,4 +1,4 @@
-import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-DmoyegCD.mjs';
+import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-Civdbsy1.mjs';
 
 function createGridOverlayScrollFeature(ctx) {
     const showScrollbar = () => {
@@ -76,4 +76,4 @@ function createGridOverlayScrollFeature(ctx) {
 }
 
 export { createGridOverlayScrollFeature };
-//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-CPzcczP6.mjs.map
+//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-CM8whbLz.mjs.map

package/fesm2022/{reforgium-data-grid-grid-tooltip.feature-i-k8F-1I.mjs → reforgium-data-grid-grid-tooltip.feature-BsSL2d0T.mjs}

@@ -1,7 +1,8 @@
 // noinspection ES6PreferShortImport
 function createGridTooltipFeature(ctx) {
-    const resolveCellValue = (row, col) => {
-        return 'value' in col ? col.value(row) : row[col.key];
+    const resolveCellValue = (row, col, index, isPinned) => {
+        const valueCtx = { col, index, isPinned };
+        return 'value' in col ? col.value(row, valueCtx) : row[col.key];
     };
     const resolveTooltip = (row, col) => {
         const tooltip = col.tooltip;
@@ -9,7 +10,7 @@ function createGridTooltipFeature(ctx) {
             return null;
         }
         if (tooltip === true) {
-            const baseValue = resolveCellValue(row, col);
+            const baseValue = resolveCellValue(row, col, -1, false);
             if (baseValue === null || baseValue === undefined || baseValue === '') {
                 return null;
             }
@@ -32,13 +33,15 @@ function createGridTooltipFeature(ctx) {
         if (!resolved) {
             return;
         }
-        const baseValue = resolveCellValue(row, col);
+        const isPinned = index < 0;
+        const baseValue = resolveCellValue(row, col, index, isPinned);
         const context = {
             $implicit: row,
             row,
             col: col,
             index,
             value: baseValue,
+            isPinned,
         };
         const offset = 12;
         const x = event.clientX + offset;
@@ -87,4 +90,4 @@ function createGridTooltipFeature(ctx) {
 }
 
 export { createGridTooltipFeature };
-//# sourceMappingURL=reforgium-data-grid-grid-tooltip.feature-i-k8F-1I.mjs.map
+//# sourceMappingURL=reforgium-data-grid-grid-tooltip.feature-BsSL2d0T.mjs.map