@nova-design-system/nova-angular-19 3.19.0 → 3.20.0

package/dist/nova-components/fesm2022/nova-components.mjs

@@ -2093,7 +2093,8 @@ function createAngularTable(options) {
 /* eslint-disable jsdoc/require-jsdoc */
 /* eslint-disable jsdoc/require-returns */
 /**
- * Nova Datatable built on TanStack Table (Angular).
+ * A powerful, flexible datatable component built on TanStack Table.
+ * Supports custom cell rendering, column configuration, pagination, and full TypeScript typing.
  */
 class NvDatatable {
     /** Public getter for table instance. */
@@ -2135,27 +2136,41 @@ class NvDatatable {
             const templateMap = this.cellTemplateMap();
             return this.columns()
                 .filter((col) => !col.hidden)
-                .map((col) => ({
-                accessorKey: col.field,
-                header: col.headerName || String(col.field),
-                size: col.width,
-                enableResizing: col.resizable ?? true,
-                cell: (context) => {
+                .map((col) => {
+                // Shared cell renderer
+                const cellRenderer = (context) => {
                     const fieldName = String(col.field);
                     const cellTemplate = templateMap.get(fieldName);
                     // Priority: template > renderCell > default
                     if (cellTemplate) {
-                        // Return TemplateRef directly - FlexRender will handle it
+                        // Return TemplateRef directly - getValue() returns formatted value
                         return cellTemplate;
                     }
                     // Fall back to renderCell if provided
                     if (col.renderCell) {
                         return col.renderCell(context);
                     }
-                    // Default: just return the value
+                    // Default: just return the value (formatted if valueFormatter was used)
                     return context.getValue();
-                },
-            }));
+                };
+                return {
+                    accessorKey: col.field,
+                    accessorFn: col.valueFormatter
+                        ? (row) => {
+                            const rawValue = row[col.field];
+                            return col.valueFormatter({
+                                value: rawValue,
+                                row,
+                                field: col.field,
+                            });
+                        }
+                        : undefined,
+                    header: col.headerName || String(col.field),
+                    size: col.width,
+                    enableResizing: col.resizable ?? true,
+                    cell: cellRenderer,
+                };
+            });
         });
         /** TanStack table instance with Signals */
         this.tableInstance = createAngularTable(() => {
@@ -2467,6 +2482,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: ContentChildren,
                 args: [NvDatatableCellDirective]
             }] } });
+/********************************* UTILS **************************************/
+/**
+ * Creates a strongly-typed column factory for a given row type.
+ *
+ * @template Row The row data type (e.g., `Product`)
+ *
+ * @returns {function} A function that accepts a column definition and infers:
+ * - `K` as the field key (`keyof Row`)
+ * - `F` as the return type of `valueFormatter` (defaults to `Row[K]`)
+ *
+ * @example
+ * ```ts
+ * // Define your row type
+ * interface Product {
+ *   name: string;
+ *   price: number;
+ * }
+ *
+ * const col = makeColumn<Product>();
+ */
+function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}
 
 class ValueAccessor {
     constructor(el) {
@@ -3681,5 +3721,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDatatableCellDirective, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvFieldtimeValueAccessor, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, flexRenderComponent as nvDatatableRenderComponent };
+export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDatatableCellDirective, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvFieldtimeValueAccessor, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, makeColumn, flexRenderComponent as nvDatatableRenderComponent };
 //# sourceMappingURL=nova-components.mjs.map