@reforgium/data-grid 2.3.6 → 2.5.0

package/README.md

@@ -72,22 +72,27 @@ import { provideDataGridDefaults } from '@reforgium/data-grid';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideDataGridDefaults({
-      mode: 'pagination',
-      hasIndexColumn: true,
-      pageSize: 50,
-    }),
-  ],
-};
+    provideDataGridDefaults({
+      mode: 'pagination',
+      hasIndexColumn: true,
+      resizable: true,
+      pageSize: 50,
+      translations: {
+        indexColumnHeader: 'No.',
+      },
+    }),
+  ],
+};
 ```
 
 Supported default fields:
 
 - `mode`
 - `hasIndexColumn`
-- `selection`
-- `pageSize`
-- `rowHeight`
+- `selection`
+- `pageSize`
+- `resizable`
+- `rowHeight`
 - `headerHeight`
 - `height`
 - `virtualBuffer`
@@ -97,10 +102,100 @@ Supported default fields:
 - `deferPinned`
 - `deferCells`
 - `pageStartFromZero`
-- `translations`
-- `debounce`
-
-### Inputs
+- `translations`
+- `debounce`
+
+`translations` supports: `emptyState`, `itemsPerPageLabel`, `nextPageLabel`, `prevPageLabel`, `indexColumnHeader`.
+
+### 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                                                                                     |                  |
 |--------------------|--------------------------------------------------|--------------------|-------------------------------------------------------------------------------------------------|------------------|
@@ -128,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.
@@ -215,23 +315,25 @@ Common (base) fields:
 | `sortKey`               | `string`                                                                    | Alternative key used for sorting when display `key` differs from sortable data.        |                  |
 | `sticky`                | `'left' \| 'right' \| true`                                                 | Keeps the column fixed while horizontally scrolling. `true` pins to the left.          |                  |
 | `expandBy`              | `DataKey<T>`                                                                | Data key that controls expand/collapse behavior for the column.                        |                  |
-| `flex`                  | `number`                                                                    | Flex grow factor for width distribution in flexible layouts.                           |                  |
-| `minWidth` / `maxWidth` | `number`                                                                    | Column width limits in pixels.                                                         |                  |
-| `cellClass`             | `string \| ((row: T) => string)`                                            | Static CSS class or resolver per row.                                                  |                  |
-| `tooltip`               | `true \| string \| ((row: T) => string) \| TemplateRef<GridTooltipContext>` | Popover tooltip content shown on cell hover. `true` uses the cell value automatically. | *[NEW in 2.2.0]* |
+| `flex`                  | `number`                                                                    | Flex grow factor for width distribution in flexible layouts.                           |                  |
+| `minWidth` / `maxWidth` | `number`                                                                    | Column width limits in pixels.                                                         |                  |
+| `resizable`             | `boolean`                                                                   | Enables drag resize from header. `false` disables resize handle for the column.        |                  |
+| `cellClass`             | `string \| ((row: T) => string)`                                            | Static CSS class or resolver per row.                                                  |                  |
+| `tooltip`               | `true \| string \| ((row: T) => string) \| TemplateRef<GridTooltipContext>` | Popover tooltip content shown on cell hover. `true` uses the cell value automatically. | *[NEW in 2.2.0]* |
 
 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]*
 
@@ -263,7 +365,7 @@ Notes:
 - When used with column manager state, `visible`, `disabled`, and `sticky` are taken from state when defined.
 - `reHeader` maps to `headerTemplate`.
 - `reCell` receives value as `$implicit`, and the row is available as `let-row="row"` via `RenderTemplateData`.
-- Most `GridColumn<T>` fields are available as `<re-dg-column>` inputs (`sortKey`, `sticky`, `expandBy`, `disabled`, `width`, `minWidth`, `maxWidth`, `flex`, `align`, `cellClass`, `type`, `typeParams`, `defaultValue`, `value`, `track`, `tooltip`).
+- Most `GridColumn<T>` fields are available as `<re-dg-column>` inputs (`sortKey`, `sticky`, `expandBy`, `disabled`, `width`, `minWidth`, `maxWidth`, `flex`, `resizable`, `align`, `cellClass`, `type`, `typeParams`, `defaultValue`, `value`, `track`, `tooltip`).
 - `sticky` accepts `'left' | 'right'`; legacy `true` maps to `'left'` for backward compatibility.
 
 ### Tooltip

package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-C1hp0DIj.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-D5cKt3RW.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-C1hp0DIj.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