feat(vue): add TData/TValue generics with typed cell-renderer and nes…

packages/examples/vue/src/demos/aggregate-functions/AggregateFunctionsDemo.vue

@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="aggregateFunctionsConfig.headers"
     :rows="aggregateFunctionsConfig.rows"
+    :get-row-id="getRowId"
     :row-grouping="aggregateFunctionsConfig.tableProps.rowGrouping"
     :column-resizing="true"
     :height="height"
@@ -10,11 +11,15 @@
 </template>
 
 <script setup lang="ts">
-import {SimpleTable} from "@simple-table/vue";import type { Theme } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import { aggregateFunctionsConfig } from "./aggregate-functions.demo-data";
+import type { AggregateFunctionsRow } from "./aggregate-functions.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<AggregateFunctionsRow>) => row.id;
 </script>

packages/examples/vue/src/demos/aggregate-functions/aggregate-functions.demo-data.ts

@@ -1,8 +1,21 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+/** Platform → category → creator nesting used by rowGrouping. */
+export type AggregateFunctionsRow = {
+  id: number;
+  name: string;
+  status: string;
+  followers?: number;
+  revenue?: string;
+  rating?: number;
+  contentCount?: number;
+  avgViewTime?: number;
+  categories?: AggregateFunctionsRow[];
+  creators?: AggregateFunctionsRow[];
+};
 
-export const aggregateFunctionsHeaders: VueColumnDef[] = [
+export const aggregateFunctionsHeaders: VueColumnDef<AggregateFunctionsRow>[] = [
   { accessor: "name", label: "Name", width: 200, expandable: true, type: "string" },
   {
     accessor: "followers",
@@ -66,7 +79,7 @@ export const aggregateFunctionsHeaders: VueColumnDef[] = [
   { accessor: "status", label: "Status", width: 120, type: "string" },
 ];
 
-export const aggregateFunctionsData = [
+export const aggregateFunctionsData: AggregateFunctionsRow[] = [
   {
     id: 1,
     name: "StreamFlix",
@@ -187,7 +200,7 @@ export const aggregateFunctionsConfig = {
   headers: aggregateFunctionsHeaders,
   rows: aggregateFunctionsData,
   tableProps: {
-    rowGrouping: ["categories", "creators"] as string[],
+    rowGrouping: ["categories", "creators"],
     columnResizing: true,
   },
-} as const;
+};

packages/examples/vue/src/demos/analytics/AnalyticsDemo.vue

@@ -108,8 +108,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { TableAPI, Theme } from "@simple-table/vue";
+import type { TableAPI, Theme, GetRowIdParams } from "@simple-table/vue";
 import { analyticsDemoConfig, analyticsPresets } from "./analytics.demo-data";
+import type { AnalyticsFactRow } from "./analytics.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number | null; theme?: Theme }>(), {
@@ -136,8 +137,8 @@ const formatHeight = computed(() => {
   return props.height;
 });
 
-function getRowId({ row }: { row: { id?: unknown } }) {
-  return row.id == null ? undefined : String(row.id);
+function getRowId({ row }: GetRowIdParams<AnalyticsFactRow>) {
+  return row.id;
 }
 
 function exportCsv() {

packages/examples/vue/src/demos/analytics/analytics.demo-data.ts

@@ -1,6 +1,20 @@
-import type { PivotConfig, VueColumnDef, Row } from "@simple-table/vue";
+import type { PivotConfig, VueColumnDef } from "@simple-table/vue";
 
-export const analyticsHeaders: VueColumnDef[] = [
+export interface AnalyticsFactRow {
+  id: string;
+  region: string;
+  country: string;
+  category: string;
+  product: string;
+  channel: string;
+  year: number;
+  quarter: string;
+  sales: number;
+  units: number;
+  cost: number;
+}
+
+export const analyticsHeaders: VueColumnDef<AnalyticsFactRow>[] = [
   {
     accessor: "region",
     label: "Region",
@@ -100,30 +114,28 @@ export const analyticsHeaders: VueColumnDef[] = [
   },
 ];
 
-const REGIONS = ["West", "East", "North", "South"] as const;
-const COUNTRIES: Record<(typeof REGIONS)[number], string[]> = {
+const COUNTRIES = {
   West: ["USA", "Canada"],
   East: ["USA", "UK"],
   North: ["Canada", "Sweden"],
   South: ["Brazil", "Australia"],
 };
-const CATEGORIES = ["Hardware", "Software"] as const;
-const PRODUCTS: Record<(typeof CATEGORIES)[number], string[]> = {
+const PRODUCTS = {
   Hardware: ["Widget", "Gadget", "Sensor"],
   Software: ["License", "Subscription"],
 };
-const CHANNELS = ["Direct", "Partner", "Online"] as const;
-const YEARS = [2024, 2025] as const;
-const QUARTERS = ["Q1", "Q2", "Q3", "Q4"] as const;
+const CHANNELS = ["Direct", "Partner", "Online"];
+const YEARS = [2024, 2025];
+const QUARTERS = ["Q1", "Q2", "Q3", "Q4"];
 
 /** Sparse multi-dimension fact cube (~150–250 rows). */
-export function generateAnalyticsRows(): Row[] {
-  const rows: Row[] = [];
+export function generateAnalyticsRows(): AnalyticsFactRow[] {
+  const rows: AnalyticsFactRow[] = [];
   let id = 1;
-  for (const region of REGIONS) {
-    for (const country of COUNTRIES[region]) {
-      for (const category of CATEGORIES) {
-        for (const product of PRODUCTS[category]) {
+  for (const [region, countries] of Object.entries(COUNTRIES)) {
+    for (const country of countries) {
+      for (const [category, products] of Object.entries(PRODUCTS)) {
+        for (const product of products) {
           for (const channel of CHANNELS) {
             for (const year of YEARS) {
               for (const quarter of QUARTERS) {
@@ -156,7 +168,7 @@ export function generateAnalyticsRows(): Row[] {
   return rows;
 }
 
-export const analyticsRows: Row[] = generateAnalyticsRows();
+export const analyticsRows: AnalyticsFactRow[] = generateAnalyticsRows();
 
 export type AnalyticsPreset = {
   id: string;

packages/examples/vue/src/demos/animations/AnimationsDemo.vue

@@ -5,6 +5,7 @@
     :enable-column-editor="animationsConfig.tableProps.enableColumnEditor"
     :enable-column-editor-init-open="animationsConfig.tableProps.enableColumnEditorInitOpen"
     :rows="animationsConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     @column-order-change="handleColumnOrderChange"
@@ -14,17 +15,20 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef } from "@simple-table/vue";
+import type { Theme, VueColumnDef, GetRowIdParams } from "@simple-table/vue";
 import { animationsConfig } from "./animations.demo-data";
+import type { AnimationsCrewMember } from "./animations.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
-const headers = ref<VueColumnDef[]>([...animationsConfig.headers]);
+const headers = ref<VueColumnDef<AnimationsCrewMember>[]>([...animationsConfig.headers]);
 
-const handleColumnOrderChange = (newHeaders: VueColumnDef[]) => {
+const handleColumnOrderChange = (newHeaders: VueColumnDef<AnimationsCrewMember>[]) => {
   headers.value = newHeaders;
 };
+
+const getRowId = ({ row }: GetRowIdParams<AnimationsCrewMember>) => row.id;
 </script>

packages/examples/vue/src/demos/animations/animations.demo-data.ts

@@ -1,8 +1,15 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface AnimationsCrewMember {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+}
 
-export const animationsHeaders: VueColumnDef[] = [
+export const animationsHeaders: VueColumnDef<AnimationsCrewMember>[] = [
   { accessor: "id", label: "ID", width: 60, sortable: true, type: "number" },
   { accessor: "name", label: "Name", minWidth: 140, width: "1fr", sortable: true, type: "string" },
   { accessor: "age", label: "Age", width: 80, align: "right", sortable: true, type: "number" },
@@ -18,7 +25,7 @@ export const animationsHeaders: VueColumnDef[] = [
   },
 ];
 
-export const animationsData = [
+export const animationsData: AnimationsCrewMember[] = [
   { id: 1, name: "Captain Stella Vega", age: 38, role: "Mission Commander", department: "Flight Operations" },
   { id: 2, name: "Dr. Cosmos Rivera", age: 34, role: "Astrophysicist", department: "Science" },
   { id: 3, name: "Commander Nebula Johnson", age: 42, role: "Operations Director", department: "Mission Control" },
@@ -37,4 +44,4 @@ export const animationsConfig = {
   headers: animationsHeaders,
   rows: animationsData,
   tableProps: { columnReordering: true, enableColumnEditor: true, enableColumnEditorInitOpen: true },
-} as const;
+};

packages/examples/vue/src/demos/billing/BillingDemo.vue

@@ -1,6 +1,7 @@
 <template>
   <SimpleTable
     :columns="headers"
+    :get-row-id="getRowId"
     :rows="billingConfig.rows"
     :height="height"
     :theme="theme"
@@ -18,7 +19,7 @@
 <script setup lang="ts">
 import { h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef, CellRendererProps } from "@simple-table/vue";
+import type { Theme, VueColumnDef, CellRendererProps, GetRowIdParams } from "@simple-table/vue";
 import { billingConfig } from "./billing.demo-data";
 import type { BillingRow } from "./billing.demo-data";
 import "@simple-table/vue/styles.css";
@@ -27,16 +28,17 @@ withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
-const nameRenderer = ({ row }: CellRendererProps) => {
-  const d = row as unknown as BillingRow;
-  if (d.type === "account") {
-    return h("span", { style: { fontWeight: "600" } }, d.name);
+const getRowId = ({ row }: GetRowIdParams<BillingRow>) => row.id;
+
+const nameRenderer = ({ row }: CellRendererProps<BillingRow>) => {
+  if (row.type === "account") {
+    return h("span", { style: { fontWeight: "600" } }, row.name);
   }
-  return d.name;
+  return row.name;
 };
 
-const headers: VueColumnDef[] = billingConfig.headers.map((h) => {
-  if (h.accessor === "name") return { ...h, cellRenderer: nameRenderer };
-  return { ...h };
+const headers: VueColumnDef<BillingRow>[] = billingConfig.headers.map((col) => {
+  if (col.accessor === "name") return { ...col, cellRenderer: nameRenderer };
+  return { ...col };
 });
 </script>

packages/examples/vue/src/demos/billing/billing.demo-data.ts

@@ -14,10 +14,27 @@ export interface BillingRow {
   [key: `revenue_${string}`]: number;
 }
 
-
-const ACCOUNT_NAMES = ["Acme Corp", "Globex Inc", "Initech", "Soylent Corp", "Umbrella LLC", "Wayne Industries", "Stark Tech", "Oscorp", "LexCorp", "Cyberdyne"];
+const ACCOUNT_NAMES = [
+  "Acme Corp",
+  "Globex Inc",
+  "Initech",
+  "Soylent Corp",
+  "Umbrella LLC",
+  "Wayne Industries",
+  "Stark Tech",
+  "Oscorp",
+  "LexCorp",
+  "Cyberdyne",
+];
 const INVOICE_PREFIXES = ["INV", "SUB", "REN"];
-const CHARGE_TYPES = ["Subscription", "API Usage", "Storage", "Support Premium", "Bandwidth", "Compute"];
+const CHARGE_TYPES = [
+  "Subscription",
+  "API Usage",
+  "Storage",
+  "Support Premium",
+  "Bandwidth",
+  "Compute",
+];
 
 const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
@@ -85,8 +102,8 @@ export function generateBillingData(count: number = 30): BillingRow[] {
 
 export const billingData = generateBillingData(30);
 
-function generateMonthHeaders(): VueColumnDef[] {
-  const headers: VueColumnDef[] = [];
+function generateMonthHeaders(): VueColumnDef<BillingRow>[] {
+  const headers: VueColumnDef<BillingRow>[] = [];
   const year = 2024;
   for (let monthIndex = 11; monthIndex >= 0; monthIndex--) {
     const fullMonthName = new Date(year, monthIndex).toLocaleString("default", { month: "long" });
@@ -136,7 +153,7 @@ function generateMonthHeaders(): VueColumnDef[] {
   return headers;
 }
 
-export const billingHeaders: VueColumnDef[] = [
+export const billingHeaders: VueColumnDef<BillingRow>[] = [
   {
     accessor: "name",
     label: "Name",
@@ -196,4 +213,4 @@ export const billingHeaders: VueColumnDef[] = [
 export const billingConfig = {
   headers: billingHeaders,
   rows: billingData,
-} as const;
+};