@nova-design-system/nova-vue 3.19.0 → 3.20.0

package/dist/components/NvDatatable.d.ts

@@ -6,9 +6,9 @@ import { type VNode, type PropType } from 'vue';
  * @returns {component} A Vue component definition typed for the specified row
  * type.
  */
-export declare function createNvDatatable<T extends NvDatatableRow>(): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare function createNvDatatable<T>(): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     columns: {
-        type: PropType<NvDatatableColumn<T>[]>;
+        type: PropType<NvDatatableColumn<T, keyof T, T[keyof T]>[]>;
         required: true;
         default: () => any[];
     };
@@ -33,7 +33,7 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     columns: {
-        type: PropType<NvDatatableColumn<T>[]>;
+        type: PropType<NvDatatableColumn<T, keyof T, T[keyof T]>[]>;
         required: true;
         default: () => any[];
     };
@@ -55,95 +55,91 @@ export declare function createNvDatatable<T extends NvDatatableRow>(): import("v
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    columns: NvDatatableColumn<T>[];
+    columns: NvDatatableColumn<T, keyof T, T[keyof T]>[];
     rows: T[];
     pagination: NvDatatablePaginationConfig;
     renderPagination: (api: NvDatatableRenderPaginationAPI) => VNode;
     stickyHeader: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/********************************* UTILS **************************************/
 /**
- * Default NvDatatable component with basic row type.
- * For typed usage, use createNvDatatable<YourRowType>().
+ * 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>();
  */
-export declare const NvDatatable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    columns: {
-        type: PropType<NvDatatableColumn<NvDatatableRow>[]>;
-        required: true;
-        default: () => any[];
-    };
-    rows: {
-        type: PropType<NvDatatableRow[]>;
-        required: true;
-        default: () => any[];
-    };
-    pagination: {
-        type: PropType<NvDatatablePaginationConfig>;
-        default: any;
-    };
-    renderPagination: {
-        type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
-        default: any;
-    };
-    stickyHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    columns: {
-        type: PropType<NvDatatableColumn<NvDatatableRow>[]>;
-        required: true;
-        default: () => any[];
-    };
-    rows: {
-        type: PropType<NvDatatableRow[]>;
-        required: true;
-        default: () => any[];
-    };
-    pagination: {
-        type: PropType<NvDatatablePaginationConfig>;
-        default: any;
-    };
-    renderPagination: {
-        type: PropType<(api: NvDatatableRenderPaginationAPI) => VNode>;
-        default: any;
-    };
-    stickyHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    columns: NvDatatableColumn<NvDatatableRow>[];
-    rows: NvDatatableRow[];
-    pagination: NvDatatablePaginationConfig;
-    renderPagination: (api: NvDatatableRenderPaginationAPI) => VNode;
-    stickyHeader: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare function makeColumn<Row>(): <K extends keyof Row, F = Row[K]>(col: NvDatatableColumn<Row, K, F>) => NvDatatableColumn<Row, keyof Row, Row[keyof Row]>;
 /********************************* TYPES **************************************/
 /**
- * Type definition for a datatable row.
+ * Slot props for NvDatatable cell slots.
+ * Use this type to provide type safety for custom cell slot implementations.
+ *
+ * @template Row The row data type
+ * @template K The field key (keyof Row)
+ * @template F The formatted value type (defaults to Row[K])
+ *
+ * @example
+ * ```ts
+ * type PersonRow = {
+ *   id: number;
+ *   isActive: boolean;
+ * };
+ *
+ * // For a column with valueFormatter that returns string
+ * type StatusSlotProps = NvDatatableSlotProps<PersonRow, 'isActive', string>;
+ *
+ * // For a column without valueFormatter (uses raw value)
+ * type IdSlotProps = NvDatatableSlotProps<PersonRow, 'id', number>;
+ * ```
  */
-export type NvDatatableRow = Record<string, string | number | boolean | null | undefined | typeof Date>;
+export interface NvDatatableSlotProps<Row, K extends keyof Row = keyof Row, F = Row[K]> {
+    /** The cell value (formatted if valueFormatter was used) */
+    value: F;
+    /** The full row data */
+    row: Row;
+    /** The field name */
+    field: K;
+    /** The row index (zero-based) */
+    rowIndex: number;
+}
 /**
- * Parameters for custom cell rendering function.
+ * Props for NvDatatable component.
  */
-export interface NvTableRenderCellParams<T extends NvDatatableRow, V> {
-    /** Cell value */
-    value: V;
+export interface NvDatatableProps<T> {
+    /** Column definitions */
+    columns: Array<NvDatatableColumn<T>>;
     /** Row data */
-    row: T;
-    /** Field name */
-    field: keyof T;
-    /** Row index */
-    rowIndex: number;
+    rows: Array<T>;
+    /** Optional pagination configuration */
+    pagination?: NvDatatablePaginationConfig;
+    /** Optional render function for custom pagination UI */
+    renderPagination?: (api: NvDatatableRenderPaginationAPI) => VNode;
+    /** Should the header stick to the top of the table when scrolling? */
+    stickyHeader?: boolean;
+    /** CSS class */
+    class?: string;
+    /** Inline styles */
+    style?: string | Record<string, string>;
 }
 /**
  * Column definition for NvDatatable.
  */
-export interface NvDatatableColumn<T extends NvDatatableRow> {
+export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
     /** Field name from row data */
-    field: keyof T;
+    field: K;
     /** Display name for column header */
     headerName?: string;
     /** Column width in pixels */
@@ -152,27 +148,34 @@ export interface NvDatatableColumn<T extends NvDatatableRow> {
     resizable?: boolean;
     /** Whether column is hidden */
     hidden?: boolean;
+    /** Transform the raw value before rendering. Receives the cell value and full row object. */
+    valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
     /** Custom cell renderer */
-    renderCell?: (params: NvTableRenderCellParams<T, T[keyof T]>) => VNode | string | number;
+    renderCell?: (params: NvTableRenderCellParams<Row, F, K>) => VNode | string | number;
 }
 /**
- * Props for NvDatatable component.
+ * Parameters for custom cell rendering function.
  */
-export interface NvDatatableProps<T extends NvDatatableRow> {
-    /** Column definitions */
-    columns: Array<NvDatatableColumn<T>>;
+export interface NvTableRenderCellParams<Row, Value, Field> {
+    /** Cell value */
+    value: Value;
     /** Row data */
-    rows: Array<T>;
-    /** Optional pagination configuration */
-    pagination?: NvDatatablePaginationConfig;
-    /** Optional render function for custom pagination UI */
-    renderPagination?: (api: NvDatatableRenderPaginationAPI) => VNode;
-    /** Should the header stick to the top of the table when scrolling? */
-    stickyHeader?: boolean;
-    /** CSS class */
-    class?: string;
-    /** Inline styles */
-    style?: string | Record<string, string>;
+    row: Row;
+    /** Field name */
+    field: Field;
+    /** Row index */
+    rowIndex: number;
+}
+/**
+ * Parameters for valueFormatter function.
+ */
+export interface NvTableValueFormatterParams<Row, Value, Field> {
+    /** Cell original value */
+    value: Value;
+    /** Row data */
+    row: Row;
+    /** Field name */
+    field: Field;
 }
 /**
  * Pagination configuration for NvDatatable.

package/dist/components/NvDatatable.js

@@ -48,6 +48,16 @@ export function createNvDatatable() {
                 .filter((col) => !col.hidden)
                 .map((col) => ({
                 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,
@@ -304,8 +314,28 @@ export function createNvDatatable() {
         },
     });
 }
+/********************************* UTILS **************************************/
 /**
- * Default NvDatatable component with basic row type.
- * For typed usage, use createNvDatatable<YourRowType>().
+ * 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>();
  */
-export const NvDatatable = createNvDatatable();
+export function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",