From 40babc11767ebf34c2bf0a76aef6702202bed908 Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sun, 26 Jul 2026 12:34:53 -0500
Subject: [PATCH 1/2] feat(vue): add TData/TValue generics with typed
 cell-renderer and nested-tables demos

Mirror Solid/React row typing on the Vue adapter, and migrate two Vue demos
as the reference pattern (custom renderers + nested table columns).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../demos/cell-renderer/CellRendererDemo.vue  |  35 +--
 .../cell-renderer/cell-renderer.demo-data.ts  |   5 +-
 .../demos/nested-tables/NestedTablesDemo.vue  |  13 +-
 .../nested-tables/nested-tables.demo-data.ts  |  42 +++-
 packages/vue/src/SimpleTable.ts               |  34 ++-
 .../__tests__/genericRowData.types.test.ts    | 131 +++++++++++
 .../src/__tests__/inferRowData.types.test.ts  |  57 +++++
 packages/vue/src/buildVanillaConfig.ts        |  90 ++++----
 packages/vue/src/index.ts                     |   8 +-
 packages/vue/src/types.ts                     | 203 +++++++++++++-----
 10 files changed, 486 insertions(+), 132 deletions(-)
 create mode 100644 packages/vue/src/__tests__/genericRowData.types.test.ts
 create mode 100644 packages/vue/src/__tests__/inferRowData.types.test.ts

diff --git a/packages/examples/vue/src/demos/cell-renderer/CellRendererDemo.vue b/packages/examples/vue/src/demos/cell-renderer/CellRendererDemo.vue
index e05783a15..a07bd73ac 100644
--- a/packages/examples/vue/src/demos/cell-renderer/CellRendererDemo.vue
+++ b/packages/examples/vue/src/demos/cell-renderer/CellRendererDemo.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { h, computed } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef, CellRendererProps } from "@simple-table/vue";
+import type {
+  Theme,
+  VueColumnDef,
+  VueCellRenderer,
+  CellRendererProps,
+  GetRowIdParams,
+} from "@simple-table/vue";
 import { cellRendererConfig } from "./cell-renderer.demo-data";
 import type { CellRendererEmployee } from "./cell-renderer.demo-data";
 import "@simple-table/vue/styles.css";
@@ -17,8 +23,8 @@ const getInitials = (name: string) =>
     .join("")
     .toUpperCase();
 
-const TeamCell = ({ row }: CellRendererProps) => {
-  const members = (row as CellRendererEmployee).teamMembers;
+const TeamCell = ({ row }: CellRendererProps<CellRendererEmployee>) => {
+  const members = row.teamMembers;
   return h(
     "div",
     { style: { display: "flex", alignItems: "center", gap: "6px" } },
@@ -49,7 +55,7 @@ const TeamCell = ({ row }: CellRendererProps) => {
   );
 };
 
-const WebsiteCell = ({ value }: CellRendererProps) => {
+const WebsiteCell = ({ value }: CellRendererProps<CellRendererEmployee>) => {
   const url = String(value);
   return h("span", [
     "🌐 ",
@@ -72,7 +78,7 @@ const WebsiteCell = ({ value }: CellRendererProps) => {
   ]);
 };
 
-const StatusCell = ({ value }: CellRendererProps) => {
+const StatusCell = ({ value }: CellRendererProps<CellRendererEmployee>) => {
   const status = String(value);
   const map: Record<string, { icon: string; color: string }> = {
     active: { icon: "✓", color: "#10B981" },
@@ -87,7 +93,7 @@ const StatusCell = ({ value }: CellRendererProps) => {
   );
 };
 
-const ProgressCell = ({ value }: CellRendererProps) => {
+const ProgressCell = ({ value }: CellRendererProps<CellRendererEmployee>) => {
   const pct = Number(value) || 0;
   const color = pct < 30 ? "#EF4444" : pct < 70 ? "#F59E0B" : "#10B981";
   return h("div", [
@@ -117,7 +123,7 @@ const ProgressCell = ({ value }: CellRendererProps) => {
   ]);
 };
 
-const RatingCell = ({ value }: CellRendererProps) => {
+const RatingCell = ({ value }: CellRendererProps<CellRendererEmployee>) => {
   const rating = Number(value) || 0;
   const full = Math.floor(rating);
   const hasHalf = rating % 1 >= 0.25;
@@ -136,7 +142,7 @@ const RatingCell = ({ value }: CellRendererProps) => {
   ]);
 };
 
-const VerifiedCell = ({ value }: CellRendererProps) => {
+const VerifiedCell = ({ value }: CellRendererProps<CellRendererEmployee>) => {
   const yes = Boolean(value);
   return h(
     "span",
@@ -145,7 +151,7 @@ const VerifiedCell = ({ value }: CellRendererProps) => {
   );
 };
 
-const TagsCell = ({ value }: CellRendererProps) => {
+const TagsCell = ({ value }: CellRendererProps<CellRendererEmployee>) => {
   const raw = Array.isArray(value) ? value : [];
   const tags = raw.filter((t): t is string => typeof t === "string");
   return h(
@@ -173,7 +179,7 @@ const TagsCell = ({ value }: CellRendererProps) => {
   );
 };
 
-const RENDERERS: Record<string, (p: CellRendererProps) => ReturnType<typeof h>> = {
+const RENDERERS: Partial<Record<string, VueCellRenderer<CellRendererEmployee>>> = {
   teamMembers: TeamCell,
   website: WebsiteCell,
   status: StatusCell,
@@ -183,17 +189,20 @@ const RENDERERS: Record<string, (p: CellRendererProps) => ReturnType<typeof h>>
   tags: TagsCell,
 };
 
-const headers = computed(() =>
+const headers = computed((): VueColumnDef<CellRendererEmployee>[] =>
   cellRendererConfig.headers.map((col) => {
-    const r = RENDERERS[col.accessor as string];
-    return r ? { ...col, cellRenderer: r } : { ...col };
+    const cellRenderer = RENDERERS[String(col.accessor)];
+    return cellRenderer ? { ...col, cellRenderer } : col;
   }),
 );
+
+const getRowId = ({ row }: GetRowIdParams<CellRendererEmployee>) => row.id;
 </script>
 
 <template>
   <SimpleTable
     :columns="headers"
+    :get-row-id="getRowId"
     :rows="cellRendererConfig.rows"
     :height="height"
     :theme="theme"
diff --git a/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts b/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts
index 457713e11..b49eb0bb3 100644
--- a/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts
+++ b/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts
@@ -1,7 +1,6 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
-
 export type CellRendererEmployee = {
   id: number;
   name: string;
@@ -29,7 +28,7 @@ export const cellRendererData: CellRendererEmployee[] = [
   { id: 12, name: "Atlas Johnson", website: "atlasjohnson.brand", status: "inactive", progress: 28, rating: 3.6, verified: false, tags: ["Brand Design", "Graphic Design"], teamMembers: [{ name: "Uma Patel", role: "Graphic Designer" }] },
 ];
 
-export const cellRendererHeaders: VueColumnDef[] = [
+export const cellRendererHeaders: VueColumnDef<CellRendererEmployee>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "Name", width: 180, type: "string" },
   { accessor: "teamMembers", label: "Team", width: 280, type: "string" },
@@ -48,4 +47,4 @@ export const cellRendererConfig = {
     selectableCells: true,
     customTheme: { rowHeight: 48 },
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/nested-tables/NestedTablesDemo.vue b/packages/examples/vue/src/demos/nested-tables/NestedTablesDemo.vue
index 1eb895078..07d2bf08d 100644
--- a/packages/examples/vue/src/demos/nested-tables/NestedTablesDemo.vue
+++ b/packages/examples/vue/src/demos/nested-tables/NestedTablesDemo.vue
@@ -4,7 +4,7 @@
     :columns="nestedTablesConfig.headers"
     :rows="sampleData"
     :row-grouping="nestedTablesConfig.tableProps.rowGrouping"
-    :get-row-id="nestedTablesConfig.tableProps.getRowId"
+    :get-row-id="getRowId"
     :expand-all="nestedTablesConfig.tableProps.expandAll"
     :column-resizing="nestedTablesConfig.tableProps.columnResizing"
     :height="height"
@@ -14,11 +14,18 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme } from "@simple-table/vue";
-import { nestedTablesConfig, generateNestedTablesData } from "./nested-tables.demo-data";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
+import {
+  nestedTablesConfig,
+  generateNestedTablesData,
+  type NestedCompany,
+} from "./nested-tables.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { height: "500px" });
 
 const sampleData = computed(() => generateNestedTablesData(25));
+
+const getRowId = ({ row }: GetRowIdParams<NestedCompany>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/nested-tables/nested-tables.demo-data.ts b/packages/examples/vue/src/demos/nested-tables/nested-tables.demo-data.ts
index a958afcdf..ce301336e 100644
--- a/packages/examples/vue/src/demos/nested-tables/nested-tables.demo-data.ts
+++ b/packages/examples/vue/src/demos/nested-tables/nested-tables.demo-data.ts
@@ -1,6 +1,28 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface NestedDivision {
+  divisionId: string;
+  divisionName: string;
+  revenue: string;
+  profitMargin: string;
+  headcount: number;
+  location: string;
+}
+
+export interface NestedCompany {
+  id: number;
+  companyName: string;
+  industry: string;
+  founded: number;
+  headquarters: string;
+  stockSymbol: string;
+  marketCap: string;
+  ceo: string;
+  revenue: string;
+  employees: number;
+  divisions: NestedDivision[];
+}
 
 const industries = ["Technology", "Financial Services", "Healthcare", "Manufacturing", "Retail", "Energy", "Telecommunications", "Pharmaceuticals", "Automotive", "Aerospace", "Biotechnology", "E-commerce"];
 const cities = ["San Francisco, CA", "New York, NY", "Boston, MA", "Seattle, WA", "Austin, TX", "Chicago, IL", "Los Angeles, CA", "Denver, CO", "Miami, FL", "Atlanta, GA", "Portland, OR", "Dallas, TX"];
@@ -13,7 +35,7 @@ const suffixes = ["Global", "Inc", "Solutions", "Systems", "Ventures", "Group",
 const randomElement = <T,>(arr: T[]): T => arr[Math.floor(Math.random() * arr.length)];
 const randomInt = (min: number, max: number): number => Math.floor(Math.random() * (max - min + 1)) + min;
 
-const generateDivision = (divisionIndex: number, companyIndex: number) => ({
+const generateDivision = (divisionIndex: number, companyIndex: number): NestedDivision => ({
   divisionId: `DIV-${String(companyIndex * 10 + divisionIndex).padStart(3, "0")}`,
   divisionName: randomElement(divisionTypes),
   revenue: `$${randomInt(5, 25)}B`,
@@ -22,7 +44,7 @@ const generateDivision = (divisionIndex: number, companyIndex: number) => ({
   location: randomElement(cities),
 });
 
-const generateCompany = (companyIndex: number) => {
+const generateCompany = (companyIndex: number): NestedCompany => {
   const divisions = Array.from({ length: randomInt(3, 7) }, (_, i) => generateDivision(i, companyIndex));
   return {
     id: companyIndex + 1,
@@ -39,9 +61,10 @@ const generateCompany = (companyIndex: number) => {
   };
 };
 
-export const generateNestedTablesData = (count: number = 25) => Array.from({ length: count }, (_, i) => generateCompany(i));
+export const generateNestedTablesData = (count: number = 25): NestedCompany[] =>
+  Array.from({ length: count }, (_, i) => generateCompany(i));
 
-export const nestedTablesDivisionHeaders: VueColumnDef[] = [
+export const nestedTablesDivisionHeaders: VueColumnDef<NestedDivision>[] = [
   { accessor: "divisionId", label: "Division ID", width: 120 },
   { accessor: "revenue", label: "Revenue", width: 120 },
   { accessor: "profitMargin", label: "Profit Margin", width: 130 },
@@ -49,13 +72,15 @@ export const nestedTablesDivisionHeaders: VueColumnDef[] = [
   { accessor: "location", label: "Location", width: "1fr" },
 ];
 
-export const nestedTablesHeaders: VueColumnDef[] = [
+export const nestedTablesHeaders: VueColumnDef<NestedCompany>[] = [
   {
     accessor: "companyName",
     label: "Company",
     width: 200,
     expandable: true,
-    nestedTable: { columns: nestedTablesDivisionHeaders },
+    nestedTable: {
+      columns: nestedTablesDivisionHeaders,
+    },
   },
   { accessor: "stockSymbol", label: "Symbol", width: 100 },
   { accessor: "marketCap", label: "Market Cap", width: 120 },
@@ -66,10 +91,9 @@ export const nestedTablesHeaders: VueColumnDef[] = [
 export const nestedTablesConfig = {
   headers: nestedTablesHeaders,
   tableProps: {
-    rowGrouping: ["divisions"] as string[],
-    getRowId: ({ row }: { row: Record<string, unknown> }) => row.id as string,
+    rowGrouping: ["divisions"],
     expandAll: false,
     columnResizing: true,
     autoExpandColumns: true,
   },
-} as const;
+};
diff --git a/packages/vue/src/SimpleTable.ts b/packages/vue/src/SimpleTable.ts
index b884d1431..57a753fa9 100644
--- a/packages/vue/src/SimpleTable.ts
+++ b/packages/vue/src/SimpleTable.ts
@@ -1,4 +1,5 @@
 import { defineComponent, onMounted, onUnmounted, watch, ref, h, camelize } from "vue";
+import type { DefineComponent } from "vue";
 import {
   SimpleTableVanilla,
   headersStructurallyEqual,
@@ -7,7 +8,11 @@ import {
 import type { SimpleTableConfig, TableAPI } from "simple-table-core";
 import { buildVanillaConfig, resolveVueColumns } from "./buildVanillaConfig";
 import { MountRegistry } from "./MountRegistry";
-import type { SimpleTableVueProps, TableInstance } from "./types";
+import type {
+  SimpleTableVueProps,
+  TableInstance,
+  VueDefaultRowData,
+} from "./types";
 
 /**
  * SimpleTable — Vue 3 adapter for simple-table-core.
@@ -15,18 +20,21 @@ import type { SimpleTableVueProps, TableInstance } from "./types";
  * Accepts the same props as SimpleTableProps (the vanilla user-facing API) but
  * with Vue component types for all renderer props.
  *
+ * `TData` is typed on `SimpleTableVueProps` / `VueColumnDef`; prefer typed
+ * `rows` / `columns` in script. Template attrs inference may be weaker than
+ * React/Solid JSX.
+ *
  * Use Vue's template ref to access the full TableAPI imperative interface:
  *
  * @example
  * <template>
- *   <SimpleTable ref="tableRef" :rows="rows" :columns="headers" />
+ *   <SimpleTable ref="tableRef" :rows="rows" :columns="headers" :get-row-id="getRowId" />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue'
- * import type { TableAPI } from 'simple-table-vue'
- * const tableRef = ref<TableAPI | null>(null)
- * // tableRef.value?.sort(...)
+ * import type { TableAPI } from '@simple-table/vue'
+ * const tableRef = ref<{ getAPI: () => TableAPI<HREmployee> | null } | null>(null)
  * </script>
  */
 /**
@@ -44,7 +52,7 @@ function camelizeAttrs(attrs: Record<string, unknown>): Record<string, unknown>
   return out;
 }
 
-const SimpleTable = defineComponent({
+const SimpleTableInner = defineComponent({
   name: "SimpleTable",
 
   props: {
@@ -83,7 +91,7 @@ const SimpleTable = defineComponent({
       const rowsUnchanged = rowsShallowUnchanged(
         syncedRows as ReadonlyArray<object> | undefined,
         props.rows as ReadonlyArray<object>,
-        props.getRowId,
+        props.getRowId as Parameters<typeof rowsShallowUnchanged>[2],
       );
       syncedRows = props.rows;
       if (rowsUnchanged) {
@@ -127,4 +135,16 @@ const SimpleTable = defineComponent({
   },
 });
 
+// No default on `TData`: TypeScript should infer it from `rows` / `columns`
+// for `h(SimpleTable, { … })` callers. (`SimpleTableVueProps` still defaults
+// for untyped prop bags / helpers.)
+type SimpleTableComponent = <TData extends VueDefaultRowData>(
+  props: SimpleTableVueProps<TData>,
+) => ReturnType<typeof h>;
+
+const SimpleTable = SimpleTableInner as unknown as SimpleTableComponent &
+  DefineComponent & {
+    name?: string;
+  };
+
 export default SimpleTable;
diff --git a/packages/vue/src/__tests__/genericRowData.types.test.ts b/packages/vue/src/__tests__/genericRowData.types.test.ts
new file mode 100644
index 000000000..feb1ca8ae
--- /dev/null
+++ b/packages/vue/src/__tests__/genericRowData.types.test.ts
@@ -0,0 +1,131 @@
+/**
+ * Compile-time smoke test: SimpleTable / VueColumnDef / TableAPI accept a
+ * domain row type end-to-end (no asRows, no row casts in callbacks).
+ */
+import { h } from "vue";
+import { describe, it, expect } from "vitest";
+import { SimpleTable } from "../index";
+import type {
+  TableAPI,
+  VueColumnDef,
+  NestedVueColumnDef,
+  CellChangeProps,
+  SimpleTableVueProps,
+} from "../index";
+
+interface HREmployee {
+  id: number;
+  firstName: string;
+  lastName: string;
+  fullName: string;
+  performanceScore: number;
+}
+
+const columns: VueColumnDef<HREmployee>[] = [
+  {
+    accessor: "fullName",
+    label: "Employee",
+    width: 220,
+    cellRenderer: ({ row }) => {
+      const name: string = row.firstName;
+      return name;
+    },
+  },
+];
+
+const rows: HREmployee[] = [
+  {
+    id: 1,
+    firstName: "Ada",
+    lastName: "Lovelace",
+    fullName: "Ada Lovelace",
+    performanceScore: 99,
+  },
+];
+
+const props: SimpleTableVueProps<HREmployee> = {
+  columns,
+  rows,
+  getRowId: ({ row }) => row.id,
+  onCellEdit: ({ row }: CellChangeProps<HREmployee>) => {
+    const id: number = row.id;
+    void id;
+  },
+};
+void props;
+
+// Explicit type arg still works when you want it:
+void (SimpleTable as <T>(props: SimpleTableVueProps<T>) => unknown)<HREmployee>;
+
+// Untyped / default path still accepts open records (prior object[] escape).
+const loose: SimpleTableVueProps = {
+  columns: [{ accessor: "x", label: "X", width: 40 }],
+  rows: [{ x: 1 }],
+};
+void loose;
+
+// Nested grid: child columns typed as Division assign under a Company column
+// with no cast / helper (nestedTable.columns is open at the boundary).
+interface NestCompany {
+  id: string;
+  name: string;
+  divisions?: NestDivision[];
+}
+interface NestDivision {
+  id: string;
+  divisionName: string;
+}
+
+const divisionColumns: VueColumnDef<NestDivision>[] = [
+  {
+    accessor: "divisionName",
+    label: "Division",
+    width: 120,
+    cellRenderer: ({ row }) => {
+      const name: string = row.divisionName;
+      // @ts-expect-error NestDivision has no company-only fields
+      const missing: string = row.companyName;
+      void missing;
+      return name;
+    },
+  },
+];
+
+const companyColumns: VueColumnDef<NestCompany>[] = [
+  {
+    accessor: "name",
+    label: "Company",
+    width: 160,
+    expandable: true,
+    nestedTable: {
+      columns: divisionColumns,
+      expandAll: false,
+    },
+  },
+];
+void companyColumns;
+
+// Non-column objects are rejected at the nest boundary.
+const notAColumn = { foo: 1 };
+const badNestedColumns: NestedVueColumnDef[] = [
+  // @ts-expect-error nest columns require column metadata (accessor, label, …)
+  notAColumn,
+];
+void badNestedColumns;
+
+// Typed imperative handle shape consumers use with template refs.
+const apiProbe: TableAPI<HREmployee> | null = null;
+void apiProbe;
+
+// h() accepts typed props bag
+void h(SimpleTable, props);
+
+describe("generic row data types", () => {
+  it("compiles typed SimpleTable props", () => {
+    expect(columns[0]?.accessor).toBe("fullName");
+  });
+
+  it("accepts differently typed nested columns without casts", () => {
+    expect(companyColumns[0]?.nestedTable?.columns?.[0]?.accessor).toBe("divisionName");
+  });
+});
diff --git a/packages/vue/src/__tests__/inferRowData.types.test.ts b/packages/vue/src/__tests__/inferRowData.types.test.ts
new file mode 100644
index 000000000..da8f553ab
--- /dev/null
+++ b/packages/vue/src/__tests__/inferRowData.types.test.ts
@@ -0,0 +1,57 @@
+/**
+ * Compile-time probe: TData should infer from `rows` without `<T>` on SimpleTable.
+ * Uses `h(SimpleTable, props)` — Vue's attrs runtime; typed via the generic export cast.
+ * Calls are behind `false &&` so the component body never runs.
+ */
+import { h } from "vue";
+import { describe, it, expect } from "vitest";
+import { SimpleTable } from "../index";
+import type { VueColumnDef } from "../index";
+
+interface AnalyticsFactRow {
+  id: number;
+  metric: string;
+  value: number;
+}
+
+const columns: VueColumnDef<AnalyticsFactRow>[] = [
+  { accessor: "metric", label: "Metric", width: 120 },
+  { accessor: "value", label: "Value", width: 100, type: "number" },
+];
+
+const rows: AnalyticsFactRow[] = [{ id: 1, metric: "revenue", value: 10 }];
+
+false &&
+  h(SimpleTable, {
+    columns,
+    rows,
+    getRowId: ({ row }) => {
+      const id: number = row.id;
+      const metric: string = row.metric;
+      void metric;
+      return id;
+    },
+  });
+
+false &&
+  h(SimpleTable, {
+    columns,
+    rows,
+    getRowId: ({ row }) => {
+      // @ts-expect-error — AnalyticsFactRow has no `missing`
+      return row.missing;
+    },
+  });
+
+false &&
+  h(SimpleTable, {
+    columns: [{ accessor: "x", label: "X", width: 40 }],
+    rows: [{ x: 1 }],
+    getRowId: ({ row }) => row.x,
+  });
+
+describe("SimpleTable TData inference", () => {
+  it("compiles without an explicit type argument", () => {
+    expect(rows[0]?.id).toBe(1);
+  });
+});
diff --git a/packages/vue/src/buildVanillaConfig.ts b/packages/vue/src/buildVanillaConfig.ts
index b7180cb46..74563ca90 100644
--- a/packages/vue/src/buildVanillaConfig.ts
+++ b/packages/vue/src/buildVanillaConfig.ts
@@ -1,10 +1,11 @@
-import type { SimpleTableConfig, ColumnDef, ColumnEditorConfig, Row } from "simple-table-core";
-import { collectHeaderAccessors } from "simple-table-core";
+import type { SimpleTableConfig, ColumnDef, ColumnEditorConfig } from "simple-table-core";
+import { asRows, collectHeaderAccessors } from "simple-table-core";
 import type { VNode } from "vue";
 import type {
   SimpleTableVueProps,
   VueColumnDef,
   VueColumnEditorConfig,
+  VueDefaultRowData,
   VueIconsConfig,
 } from "./types";
 import type { MountRegistry } from "./MountRegistry";
@@ -44,8 +45,8 @@ function transformColumnEditorConfig(
   };
 }
 
-function transformHeader(
-  header: ColumnDef | VueColumnDef,
+function transformHeader<TData extends VueDefaultRowData>(
+  header: VueColumnDef<TData, any>,
   registry: MountRegistry,
 ): ColumnDef {
   const { cellRenderer, headerRenderer, children, nestedTable, ...rest } = header;
@@ -54,29 +55,23 @@ function transformHeader(
   const transformed: ColumnDef = { ...(rest as any) };
 
   if (cellRenderer) {
-    if (typeof cellRenderer === "object") {
-      transformed.cellRenderer = wrapCachedVueRenderer(
-        registry,
-        accessor,
-        "cell",
-        cellRenderer,
-      ) as any;
-    } else {
-      transformed.cellRenderer = cellRenderer as any;
-    }
+    // Function and object Vue components both need wrapping for the vanilla
+    // HTMLElement contract (`h()`-style renderers return VNodes).
+    transformed.cellRenderer = wrapCachedVueRenderer(
+      registry,
+      accessor,
+      "cell",
+      cellRenderer,
+    ) as any;
   }
 
   if (headerRenderer) {
-    if (typeof headerRenderer === "object") {
-      transformed.headerRenderer = wrapCachedVueRenderer(
-        registry,
-        accessor,
-        "header",
-        headerRenderer,
-      ) as any;
-    } else {
-      transformed.headerRenderer = headerRenderer as any;
-    }
+    transformed.headerRenderer = wrapCachedVueRenderer(
+      registry,
+      accessor,
+      "header",
+      headerRenderer,
+    ) as any;
   }
 
   if (children) {
@@ -84,6 +79,8 @@ function transformHeader(
   }
 
   if (nestedTable) {
+    // Recursively convert the nested table config. Rows are provided at
+    // render time by the vanilla core, so we supply an empty placeholder.
     const nestedConfig = { ...nestedTable, rows: [] } as unknown as SimpleTableVueProps;
     transformed.nestedTable = buildVanillaConfig(nestedConfig, registry) as any;
   }
@@ -92,9 +89,9 @@ function transformHeader(
 }
 
 /** Resolve column definitions. */
-export function resolveVueColumns(
-  config: Pick<SimpleTableVueProps, "columns">,
-): ReadonlyArray<ColumnDef | VueColumnDef> {
+export function resolveVueColumns<TData extends VueDefaultRowData = VueDefaultRowData>(
+  config: Pick<SimpleTableVueProps<TData>, "columns">,
+): ReadonlyArray<VueColumnDef<TData, any>> {
   const headers = config.columns;
   if (!headers) {
     throw new Error("SimpleTable requires `columns`");
@@ -102,8 +99,8 @@ export function resolveVueColumns(
   return headers;
 }
 
-export function buildVanillaConfig(
-  config: SimpleTableVueProps,
+export function buildVanillaConfig<TData extends VueDefaultRowData = VueDefaultRowData>(
+  config: SimpleTableVueProps<TData>,
   registry: MountRegistry,
 ): SimpleTableConfig {
   const {
@@ -118,6 +115,10 @@ export function buildVanillaConfig(
     columnEditorConfig,
     icons,
     rowButtons,
+    onColumnOrderChange,
+    onColumnWidthChange,
+    onHeaderEdit,
+    onColumnSelect,
     enableColumnEditor,
     enableColumnEditorInitOpen,
     enablePagination,
@@ -132,9 +133,13 @@ export function buildVanillaConfig(
 
   registry.pruneRendererCaches(collectHeaderAccessors(columns));
 
+  // `rest` still carries TData-bound callbacks (getRowId, onCellEdit, …).
+  // Widen once here — the vanilla runtime is Row-shaped.
+  const shared = rest as SimpleTableConfig;
+
   const vanillaConfig: SimpleTableConfig = {
-    ...rest,
-    rows: rows as Row[],
+    ...shared,
+    rows: asRows(rows),
     columns: columns.map((header) => transformHeader(header, registry)),
     enableColumnEditor,
     enableColumnEditorInitOpen,
@@ -149,12 +154,25 @@ export function buildVanillaConfig(
     onRendererHostDiscard: registry.disposeHost,
   };
 
+  if (onColumnOrderChange) {
+    vanillaConfig.onColumnOrderChange = (headers) =>
+      onColumnOrderChange(headers as unknown as VueColumnDef<TData, any>[]);
+  }
+  if (onColumnWidthChange) {
+    vanillaConfig.onColumnWidthChange = (headers) =>
+      onColumnWidthChange(headers as unknown as VueColumnDef<TData, any>[]);
+  }
+  if (onHeaderEdit) {
+    vanillaConfig.onHeaderEdit = (header, newLabel) =>
+      onHeaderEdit(header as unknown as VueColumnDef<TData, any>, newLabel);
+  }
+  if (onColumnSelect) {
+    vanillaConfig.onColumnSelect = (header) =>
+      onColumnSelect(header as unknown as VueColumnDef<TData, any>);
+  }
+
   if (footerRenderer !== undefined) {
-    if (typeof footerRenderer === "object") {
-      vanillaConfig.footerRenderer = wrapVueRenderer(registry, footerRenderer) as any;
-    } else {
-      vanillaConfig.footerRenderer = footerRenderer as any;
-    }
+    vanillaConfig.footerRenderer = wrapVueRenderer(registry, footerRenderer) as any;
   }
 
   if (emptyStateRenderer !== undefined) {
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index c5cd9b8d5..741ee8ef2 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -7,6 +7,8 @@ export type {
   SimpleTableVueProps,
   TableInstance,
   VueColumnDef,
+  NestedVueColumnDef,
+  NestedTableVueConfig,
   VueColumnEditorConfig,
   VueIconsConfig,
   VueIconElement,
@@ -20,10 +22,12 @@ export type {
   VueLoadingStateRenderer,
   VueErrorStateRenderer,
   VueEmptyStateRenderer,
+  VueDefaultRowData,
 } from "./types";
 
-// Re-export vanilla types consumers need when building column definitions,
-// callbacks, or using the imperative ref API.
+// Re-export vanilla types for callbacks and the imperative ref API. For
+// column definitions and column-related callbacks on `SimpleTable`, use
+// `VueColumnDef` (exported above).
 export type {
   Accessor,
   AggregationConfig,
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 1e897ca58..34e796f96 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -1,10 +1,10 @@
-import type { Component, VNode } from "vue";
+import type { VNode, VNodeChild } from "vue";
 import type {
   SimpleTableProps,
   SimpleTableConfig,
   ColumnDef,
-  Row,
   TableAPI,
+  CellValue,
   CellRendererProps,
   HeaderRendererProps,
   FooterRendererProps,
@@ -18,6 +18,16 @@ import type {
   RowButtonProps,
 } from "simple-table-core";
 
+/**
+ * Default `TData` for Vue props bags / helpers: open records so untyped
+ * object arrays keep assigning to `rows` without `asRows`.
+ *
+ * Prefer typed `rows` / `columns` (`VueColumnDef<MyRow>`) so `TData` flows
+ * into renderers and callbacks. Template inference via attrs may be weaker
+ * than React/Solid JSX — typed column/renderer defs still give the demo win.
+ */
+export type VueDefaultRowData = Record<string, any>;
+
 // ─── Internal instance contract ───────────────────────────────────────────────
 export interface TableInstance {
   mount(): void;
@@ -45,21 +55,38 @@ export interface VueIconsConfig {
 }
 
 // ─── Renderer overrides ───────────────────────────────────────────────────────
-// Vue components are typed as `Component` — covers both Options API objects
-// and <script setup> / defineComponent / functional components.
-export type VueCellRenderer = Component<CellRendererProps>;
-export type VueHeaderRenderer = Component<HeaderRendererProps>;
-export type VueFooterRenderer = Component<FooterRendererProps>;
-export type VueHeaderDropdown = Component<HeaderDropdownProps>;
-export type VueColumnEditorRowRenderer = Component<ColumnEditorRowRendererProps>;
-export type VueColumnEditorCustomRenderer = Component<ColumnEditorCustomRendererProps>;
-// Per-row action buttons. Each entry is a Vue component receiving RowButtonProps.
-export type VueRowButton = Component<RowButtonProps>;
+// Function types (not `Component<…>` alone) so `h()`-style / functional
+// renderers get contextual typing from TData. Vue SFC / Options components
+// that match this call signature still assign.
+export type VueCellRenderer<
+  TData extends VueDefaultRowData = VueDefaultRowData,
+  TValue = CellValue,
+> = (props: CellRendererProps<TData, TValue>) => VNodeChild;
+export type VueHeaderRenderer<TData extends VueDefaultRowData = VueDefaultRowData> = (
+  props: HeaderRendererProps<TData>,
+) => VNodeChild;
+export type VueFooterRenderer = (props: FooterRendererProps) => VNodeChild;
+export type VueHeaderDropdown = (props: HeaderDropdownProps) => VNodeChild;
+export type VueColumnEditorRowRenderer = (
+  props: ColumnEditorRowRendererProps,
+) => VNodeChild;
+export type VueColumnEditorCustomRenderer = (
+  props: ColumnEditorCustomRendererProps,
+) => VNodeChild;
+export type VueRowButton<TData extends VueDefaultRowData = VueDefaultRowData> = (
+  props: RowButtonProps<TData>,
+) => VNodeChild;
 
-// State renderers can be a component (receives props) or a static VNode
-export type VueLoadingStateRenderer = Component<LoadingStateRendererProps> | VNode;
-export type VueErrorStateRenderer = Component<ErrorStateRendererProps> | VNode;
-export type VueEmptyStateRenderer = Component<EmptyStateRendererProps> | VNode;
+// State renderers can be a function (receives props) or a static VNode
+export type VueLoadingStateRenderer<TData extends VueDefaultRowData = VueDefaultRowData> =
+  | ((props: LoadingStateRendererProps<TData>) => VNodeChild)
+  | VNode;
+export type VueErrorStateRenderer<TData extends VueDefaultRowData = VueDefaultRowData> =
+  | ((props: ErrorStateRendererProps<TData>) => VNodeChild)
+  | VNode;
+export type VueEmptyStateRenderer<TData extends VueDefaultRowData = VueDefaultRowData> =
+  | ((props: EmptyStateRendererProps<TData>) => VNodeChild)
+  | VNode;
 
 // ─── Column editor config override ───────────────────────────────────────────
 export interface VueColumnEditorConfig
@@ -70,63 +97,121 @@ export interface VueColumnEditorConfig
 
 // ─── ColumnDef override ────────────────────────────────────────────────────
 /**
- * Column definition for `columns`: core column metadata with
- * Vue-only `cellRenderer` / `headerRenderer` / `children` / `nestedTable`.
- * `columns` also accept plain `ColumnDef[]` from shared configs.
+ * Column definition for `columns`: same column metadata as core
+ * columns, but `cellRenderer` / `headerRenderer` / `children` / `nestedTable` are Vue-only.
  */
-export interface VueColumnDef
-  extends Omit<ColumnDef, "cellRenderer" | "headerRenderer" | "children" | "nestedTable"> {
-  cellRenderer?: VueCellRenderer;
-  headerRenderer?: VueHeaderRenderer;
-  children?: VueColumnDef[];
-  nestedTable?: Omit<
-    SimpleTableVueProps,
-    | "rows"
-    | "loadingStateRenderer"
-    | "errorStateRenderer"
-    | "emptyStateRenderer"
-    | "tableEmptyStateRenderer"
-  >;
+export interface VueColumnDef<
+  TData extends VueDefaultRowData = VueDefaultRowData,
+  TValue = CellValue,
+> extends Omit<
+  ColumnDef<TData, TValue>,
+  "cellRenderer" | "headerRenderer" | "children" | "nestedTable"
+> {
+  cellRenderer?: VueCellRenderer<TData, TValue>;
+  headerRenderer?: VueHeaderRenderer<TData>;
+  children?: ReadonlyArray<VueColumnDef<TData, any>>;
+  /** Nested grid; child columns may use a different row type than `TData`. */
+  nestedTable?: NestedTableVueConfig;
 }
 
-
 // ─── Top-level props ──────────────────────────────────────────────────────────
-// Mirrors SimpleTableProps with Vue-specific overrides. Use a template ref and
-// `ref.value?.getAPI()` for the imperative TableAPI.
+// Mirrors SimpleTableProps with Vue-specific renderer/icon types.
+// Use a template ref and `ref.value?.getAPI()` for the imperative TableAPI.
 //
 //   Overridden to Vue equivalents:
-//     - columns → ReadonlyArray<ColumnDef | VueColumnDef>
-export interface SimpleTableVueProps
-  extends Omit<
-    SimpleTableProps,
-    | "rows"
-    | "columns"
-    | "footerRenderer"
-    | "emptyStateRenderer"
-    | "errorStateRenderer"
-    | "loadingStateRenderer"
-    | "tableEmptyStateRenderer"
-    | "headerDropdown"
-    | "columnEditorConfig"
-    | "icons"
-    | "rowButtons"
-  > {
+//     - columns → ReadonlyArray<VueColumnDef<TData>>
+//     - footerRenderer         → VueFooterRenderer
+//     - loadingStateRenderer   → VueLoadingStateRenderer<TData> | VNode
+//     - errorStateRenderer     → VueErrorStateRenderer<TData> | VNode
+//     - emptyStateRenderer     → VueEmptyStateRenderer<TData> | VNode
+//     - tableEmptyStateRenderer → VNode | HTMLElement | string | null
+//     - headerDropdown         → VueHeaderDropdown
+//     - columnEditorConfig     → VueColumnEditorConfig
+//     - icons                  → VueIconsConfig
+//     - rowButtons             → VueRowButton<TData>[]
+export interface SimpleTableVueProps<
+  TData extends VueDefaultRowData = VueDefaultRowData,
+> extends Omit<
+  SimpleTableProps<TData>,
+  // Overridden below with Vue types
+  | "columns"
+  | "footerRenderer"
+  | "emptyStateRenderer"
+  | "errorStateRenderer"
+  | "loadingStateRenderer"
+  | "tableEmptyStateRenderer"
+  | "headerDropdown"
+  | "columnEditorConfig"
+  | "icons"
+  | "rows"
+  | "rowButtons"
+  | "onColumnOrderChange"
+  | "onColumnWidthChange"
+  | "onHeaderEdit"
+  | "onColumnSelect"
+> {
   /** Column definitions. */
-  columns?: ReadonlyArray<ColumnDef | VueColumnDef>;
-  /** Row data: domain objects or core `Row[]`; cast inside the adapter. */
-  rows: ReadonlyArray<Row> | ReadonlyArray<object>;
+  columns?: ReadonlyArray<VueColumnDef<TData, any>>;
+  onColumnOrderChange?: (newHeaders: VueColumnDef<TData, any>[]) => void;
+  onColumnWidthChange?: (headers: VueColumnDef<TData, any>[]) => void;
+  onHeaderEdit?: (header: VueColumnDef<TData, any>, newLabel: string) => void;
+  onColumnSelect?: (header: VueColumnDef<TData, any>) => void;
+  /** Row data; cast to vanilla `Row[]` inside the adapter. */
+  rows: readonly TData[];
   footerRenderer?: VueFooterRenderer;
-  loadingStateRenderer?: VueLoadingStateRenderer;
-  errorStateRenderer?: VueErrorStateRenderer;
-  emptyStateRenderer?: VueEmptyStateRenderer;
+  loadingStateRenderer?: VueLoadingStateRenderer<TData>;
+  errorStateRenderer?: VueErrorStateRenderer<TData>;
+  emptyStateRenderer?: VueEmptyStateRenderer<TData>;
   tableEmptyStateRenderer?: VNode | HTMLElement | string | null;
   headerDropdown?: VueHeaderDropdown;
   columnEditorConfig?: VueColumnEditorConfig;
   icons?: VueIconsConfig;
-  /** Per-row action buttons; each entry is a Vue component rendered into the row's selection column. */
-  rowButtons?: VueRowButton[];
+  /** Per-row action buttons; each entry returns a VNode rendered into the row's selection column. */
+  rowButtons?: VueRowButton<TData>[];
 }
 
+// ─── Nested table config ─────────────────────────────────────────────────────
+/**
+ * TData-bound call signatures omitted at nest boundaries so
+ * `VueColumnDef<Child>[]` assigns under a parent column without casts/`any`.
+ * Child columns stay fully checked at their own declaration site.
+ */
+type VueColumnDefCallbacks =
+  | "cellRenderer"
+  | "headerRenderer"
+  | "children"
+  | "nestedTable"
+  | "comparator"
+  | "exportValueGetter"
+  | "valueFormatter"
+  | "valueGetter"
+  | "quickFilterGetter";
+
+/** Column shape accepted on nested grids — metadata only, no TData-bound callbacks. */
+export type NestedVueColumnDef = Omit<
+  VueColumnDef<VueDefaultRowData>,
+  VueColumnDefCallbacks
+> & {
+  children?: ReadonlyArray<NestedVueColumnDef>;
+  nestedTable?: NestedTableVueConfig;
+};
+
+/**
+ * Nested grid props (no `rows` / inherited state renderers).
+ * Child row shape may differ from the parent column's `TData`.
+ */
+export type NestedTableVueConfig = Omit<
+  SimpleTableVueProps,
+  | "rows"
+  | "columns"
+  | "loadingStateRenderer"
+  | "errorStateRenderer"
+  | "emptyStateRenderer"
+  | "tableEmptyStateRenderer"
+> & {
+  columns?: ReadonlyArray<NestedVueColumnDef>;
+};
+
 // Re-export vanilla prop types that consumers still need directly
 export type {
   CellRendererProps,

From 16e2b417702654ebf6f11de94242bc4a21824e88 Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sun, 26 Jul 2026 15:43:22 -0500
Subject: [PATCH 2/2] refactor(examples): type all Vue demos with VueColumnDef
 row generics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Align Vue examples with the adapter’s TData inference so demos use domain row types, typed handlers/renderers, and getRowId without consumer casts.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../AggregateFunctionsDemo.vue                |   7 +-
 .../aggregate-functions.demo-data.ts          |  21 +-
 .../vue/src/demos/analytics/AnalyticsDemo.vue |   7 +-
 .../demos/analytics/analytics.demo-data.ts    |  44 +-
 .../src/demos/animations/AnimationsDemo.vue   |  10 +-
 .../demos/animations/animations.demo-data.ts  |  13 +-
 .../vue/src/demos/billing/BillingDemo.vue     |  20 +-
 .../src/demos/billing/billing.demo-data.ts    |  31 +-
 .../demos/cell-clicking/CellClickingDemo.vue  |  36 +-
 .../cell-clicking/cell-clicking.demo-data.ts  | 112 +++-
 .../demos/cell-editing/CellEditingDemo.vue    |  11 +-
 .../cell-editing/cell-editing.demo-data.ts    |  15 +-
 .../CellHighlightingDemo.vue                  |   7 +-
 .../cell-highlighting.demo-data.ts            |  14 +-
 .../cell-renderer/cell-renderer.demo-data.ts  |   1 +
 .../vue/src/demos/charts/ChartsDemo.vue       |   7 +-
 .../vue/src/demos/charts/charts.demo-data.ts  |  16 +-
 .../CollapsibleColumnsDemo.vue                |   7 +-
 .../collapsible-columns.demo-data.ts          |  87 ++-
 .../column-alignment/ColumnAlignmentDemo.vue  |   7 +-
 .../column-alignment.demo-data.ts             |  13 +-
 .../column-editing/ColumnEditingDemo.vue      |  12 +-
 .../column-editing.demo-data.ts               |  14 +-
 .../ColumnEditorCustomRendererDemo.vue        |   6 +-
 ...column-editor-custom-renderer.demo-data.ts |  97 +++-
 .../column-filtering/ColumnFilteringDemo.vue  |   7 +-
 .../column-filtering.demo-data.ts             |  19 +-
 .../column-pinning/ColumnPinningDemo.vue      |   7 +-
 .../column-pinning.demo-data.ts               |  19 +-
 .../ColumnReorderingDemo.vue                  |  10 +-
 .../column-reordering.demo-data.ts            |  11 +-
 .../column-resizing/ColumnResizingDemo.vue    |  16 +-
 .../column-resizing.demo-data.ts              |  12 +-
 .../column-selection/ColumnSelectionDemo.vue  |   7 +-
 .../column-selection.demo-data.ts             |  12 +-
 .../column-sorting/ColumnSortingDemo.vue      |   7 +-
 .../column-sorting.demo-data.ts               |  14 +-
 .../ColumnVisibilityDemo.vue                  |   7 +-
 .../column-visibility.demo-data.ts            |  27 +-
 .../demos/column-width/ColumnWidthDemo.vue    |   7 +-
 .../column-width/column-width.demo-data.ts    |  12 +-
 .../examples/vue/src/demos/crm/CRMDemo.vue    | 530 ++++++++----------
 .../vue/src/demos/crm/crm.demo-data.ts        |   4 +-
 .../vue/src/demos/crypto/CryptoDemo.vue       |  11 +-
 .../vue/src/demos/crypto/crypto.demo-data.ts  |   7 +-
 .../src/demos/csv-export/CsvExportDemo.vue    |  13 +-
 .../demos/csv-export/csv-export.demo-data.ts  |  15 +-
 .../demos/custom-icons/CustomIconsDemo.vue    |   6 +-
 .../custom-icons/custom-icons.demo-data.ts    |  16 +-
 .../demos/custom-theme/CustomThemeDemo.vue    |   7 +-
 .../custom-theme/custom-theme.demo-data.ts    |  17 +-
 .../DynamicNestedTablesDemo.vue               |  14 +-
 .../dynamic-nested-tables.demo-data.ts        | 154 ++++-
 .../DynamicRowLoadingDemo.vue                 |  28 +-
 .../dynamic-row-loading.demo-data.ts          |  25 +-
 .../src/demos/empty-state/EmptyStateDemo.vue  |   6 +-
 .../empty-state/empty-state.demo-data.ts      |  15 +-
 .../external-filter/ExternalFilterDemo.vue    |   9 +-
 .../external-filter.demo-data.ts              |  16 +-
 .../demos/external-sort/ExternalSortDemo.vue  |   9 +-
 .../external-sort/external-sort.demo-data.ts  |  14 +-
 .../footer-renderer/FooterRendererDemo.vue    |   6 +-
 .../footer-renderer.demo-data.ts              |  16 +-
 .../header-renderer/HeaderRendererDemo.vue    |  16 +-
 .../header-renderer.demo-data.ts              |  16 +-
 packages/examples/vue/src/demos/hr/HRDemo.vue |  21 +-
 .../examples/vue/src/demos/hr/hr.demo-data.ts |   4 +-
 .../infinite-scroll/InfiniteScrollDemo.vue    |  13 +-
 .../infinite-scroll.demo-data.ts              |  17 +-
 .../infrastructure/InfrastructureDemo.vue     |  44 +-
 .../infrastructure.demo-data.ts               |   8 +-
 .../src/demos/live-update/LiveUpdateDemo.vue  |  12 +-
 .../live-update/live-update.demo-data.ts      |  15 +-
 .../demos/loading-state/LoadingStateDemo.vue  |   9 +-
 .../loading-state/loading-state.demo-data.ts  |  14 +-
 .../demos/manufacturing/ManufacturingDemo.vue |  95 ++--
 .../manufacturing/manufacturing.demo-data.ts  |   4 +-
 .../vue/src/demos/music/MusicDemo.vue         | 119 ++--
 .../vue/src/demos/music/music.demo-data.ts    | 374 +++++++-----
 .../nested-headers/NestedHeadersDemo.vue      |   7 +-
 .../nested-headers.demo-data.ts               |  14 +-
 .../src/demos/pagination/PaginationDemo.vue   |  11 +-
 .../demos/pagination/pagination.demo-data.ts  |  16 +-
 .../vue/src/demos/pivot/PivotDemo.vue         |   6 +-
 .../vue/src/demos/pivot/pivot.demo-data.ts    |  45 +-
 .../ProgrammaticControlDemo.vue               |  17 +-
 .../programmatic-control.demo-data.ts         |  14 +-
 .../demos/quick-filter/QuickFilterDemo.vue    |   7 +-
 .../quick-filter/quick-filter.demo-data.ts    |  16 +-
 .../src/demos/quick-start/QuickStartDemo.vue  |   7 +-
 .../quick-start/quick-start.demo-data.ts      |  15 +-
 .../demos/row-grouping/RowGroupingDemo.vue    |   7 +-
 .../row-grouping/row-grouping.demo-data.ts    |  23 +-
 .../src/demos/row-height/RowHeightDemo.vue    |   7 +-
 .../demos/row-height/row-height.demo-data.ts  |  13 +-
 .../demos/row-selection/RowSelectionDemo.vue  |  18 +-
 .../row-selection/row-selection.demo-data.ts  |   4 +-
 .../vue/src/demos/sales/SalesDemo.vue         |  52 +-
 .../vue/src/demos/sales/sales.demo-data.ts    |  47 +-
 .../SingleRowChildrenDemo.vue                 |   7 +-
 .../single-row-children.demo-data.ts          |  17 +-
 .../vue/src/demos/soccer/SoccerDemo.vue       |   6 +-
 .../vue/src/demos/soccer/soccer.demo-data.ts  |   7 +-
 .../demos/table-height/TableHeightDemo.vue    |   7 +-
 .../table-height/table-height.demo-data.ts    |  14 +-
 .../vue/src/demos/themes/ThemesDemo.vue       |   7 +-
 .../vue/src/demos/themes/themes.demo-data.ts  |  14 +-
 .../vue/src/demos/tooltip/TooltipDemo.vue     |   7 +-
 .../src/demos/tooltip/tooltip.demo-data.ts    |  17 +-
 .../value-formatter/ValueFormatterDemo.vue    |   7 +-
 .../value-formatter.demo-data.ts              |  20 +-
 .../WindowInfiniteScrollDemo.vue              |   7 +-
 .../window-infinite-scroll.demo-data.ts       |  23 +-
 113 files changed, 2002 insertions(+), 1032 deletions(-)

diff --git a/packages/examples/vue/src/demos/aggregate-functions/AggregateFunctionsDemo.vue b/packages/examples/vue/src/demos/aggregate-functions/AggregateFunctionsDemo.vue
index 9a122ea0a..dea6133e1 100644
--- a/packages/examples/vue/src/demos/aggregate-functions/AggregateFunctionsDemo.vue
+++ b/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>
diff --git a/packages/examples/vue/src/demos/aggregate-functions/aggregate-functions.demo-data.ts b/packages/examples/vue/src/demos/aggregate-functions/aggregate-functions.demo-data.ts
index b7f043056..2dc5108c6 100644
--- a/packages/examples/vue/src/demos/aggregate-functions/aggregate-functions.demo-data.ts
+++ b/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;
+};
diff --git a/packages/examples/vue/src/demos/analytics/AnalyticsDemo.vue b/packages/examples/vue/src/demos/analytics/AnalyticsDemo.vue
index ab8a463c8..a2e963b5c 100644
--- a/packages/examples/vue/src/demos/analytics/AnalyticsDemo.vue
+++ b/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() {
diff --git a/packages/examples/vue/src/demos/analytics/analytics.demo-data.ts b/packages/examples/vue/src/demos/analytics/analytics.demo-data.ts
index 0bede9c50..abb292b31 100644
--- a/packages/examples/vue/src/demos/analytics/analytics.demo-data.ts
+++ b/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;
diff --git a/packages/examples/vue/src/demos/animations/AnimationsDemo.vue b/packages/examples/vue/src/demos/animations/AnimationsDemo.vue
index 11a8aaecb..47fe09efe 100644
--- a/packages/examples/vue/src/demos/animations/AnimationsDemo.vue
+++ b/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>
diff --git a/packages/examples/vue/src/demos/animations/animations.demo-data.ts b/packages/examples/vue/src/demos/animations/animations.demo-data.ts
index 8ada68f8f..c3ea7f999 100644
--- a/packages/examples/vue/src/demos/animations/animations.demo-data.ts
+++ b/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;
+};
diff --git a/packages/examples/vue/src/demos/billing/BillingDemo.vue b/packages/examples/vue/src/demos/billing/BillingDemo.vue
index d68d3fd06..8f0dce12c 100644
--- a/packages/examples/vue/src/demos/billing/BillingDemo.vue
+++ b/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>
diff --git a/packages/examples/vue/src/demos/billing/billing.demo-data.ts b/packages/examples/vue/src/demos/billing/billing.demo-data.ts
index b01805e74..ba41c9753 100644
--- a/packages/examples/vue/src/demos/billing/billing.demo-data.ts
+++ b/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;
+};
diff --git a/packages/examples/vue/src/demos/cell-clicking/CellClickingDemo.vue b/packages/examples/vue/src/demos/cell-clicking/CellClickingDemo.vue
index f00eab60a..9f7e67513 100644
--- a/packages/examples/vue/src/demos/cell-clicking/CellClickingDemo.vue
+++ b/packages/examples/vue/src/demos/cell-clicking/CellClickingDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef, CellClickProps, CellRendererProps } from "@simple-table/vue";
+import type { Theme, VueColumnDef, CellClickProps, CellRendererProps, GetRowIdParams } from "@simple-table/vue";
 import { cellClickingHeaders, cellClickingData, CELL_CLICKING_STATUSES } from "./cell-clicking.demo-data";
 import type { ProjectTask } from "./cell-clicking.demo-data";
 import "@simple-table/vue/styles.css";
@@ -14,12 +14,12 @@ const clickInfo = ref("");
 const selectedTask = ref<ProjectTask | null>(null);
 const rows = ref<ProjectTask[]>([...cellClickingData]);
 
-const headers: VueColumnDef[] = cellClickingHeaders.map((col) => {
+const headers: VueColumnDef<ProjectTask>[] = cellClickingHeaders.map((col) => {
   if (col.accessor === "priority") {
     return {
       ...col,
-      cellRenderer: ({ row }: CellRendererProps) => {
-        const p = String((row as Record<string, unknown>).priority);
+      cellRenderer: ({ row }: CellRendererProps<ProjectTask>) => {
+        const p = row.priority;
         const color = p === "High" ? "#ef4444" : p === "Medium" ? "#f59e0b" : "#10b981";
         return h(
           "span",
@@ -35,8 +35,8 @@ const headers: VueColumnDef[] = cellClickingHeaders.map((col) => {
   if (col.accessor === "status") {
     return {
       ...col,
-      cellRenderer: ({ row }: CellRendererProps) => {
-        const s = String((row as Record<string, unknown>).status);
+      cellRenderer: ({ row }: CellRendererProps<ProjectTask>) => {
+        const s = row.status;
         const bg = s === "Completed" ? "#dcfce7" : s === "In Progress" ? "#fef3c7" : "#fee2e2";
         const color = s === "Completed" ? "#166534" : s === "In Progress" ? "#92400e" : "#991b1b";
         return h(
@@ -86,8 +86,9 @@ const headers: VueColumnDef[] = cellClickingHeaders.map((col) => {
 
 const isDark = computed(() => props.theme === "modern-dark" || props.theme === "dark");
 
-function handleCellClick({ accessor, rowIndex, value, row }: CellClickProps) {
-  const task = row as ProjectTask;
+const getRowId = ({ row }: GetRowIdParams<ProjectTask>) => row.id;
+
+function handleCellClick({ accessor, rowIndex, value, row }: CellClickProps<ProjectTask>) {
   switch (accessor) {
     case "priority":
       clickInfo.value = `Filtering by ${value} priority`;
@@ -96,24 +97,24 @@ function handleCellClick({ accessor, rowIndex, value, row }: CellClickProps) {
     case "status": {
       const idx = CELL_CLICKING_STATUSES.indexOf(String(value));
       const next = CELL_CLICKING_STATUSES[(idx + 1) % CELL_CLICKING_STATUSES.length];
-      rows.value = rows.value.map((t) => (t.id === task.id ? { ...t, status: next } : t));
+      rows.value = rows.value.map((t) => (t.id === row.id ? { ...t, status: next } : t));
       clickInfo.value = `Status: "${value}" → "${next}"`;
       break;
     }
     case "details":
-      selectedTask.value = task;
-      clickInfo.value = `Opening details for: ${task.task}`;
+      selectedTask.value = row;
+      clickInfo.value = `Opening details for: ${row.task}`;
       break;
     case "estimatedHours": {
-      const n = Math.min(task.estimatedHours + 2, 40);
-      rows.value = rows.value.map((t) => (t.id === task.id ? { ...t, estimatedHours: n } : t));
-      clickInfo.value = `Est. hours: ${task.estimatedHours}h → ${n}h`;
+      const n = Math.min(row.estimatedHours + 2, 40);
+      rows.value = rows.value.map((t) => (t.id === row.id ? { ...t, estimatedHours: n } : t));
+      clickInfo.value = `Est. hours: ${row.estimatedHours}h → ${n}h`;
       break;
     }
     case "completedHours": {
-      const n = Math.min(task.completedHours + 1, task.estimatedHours);
-      rows.value = rows.value.map((t) => (t.id === task.id ? { ...t, completedHours: n } : t));
-      clickInfo.value = `Done hours: ${task.completedHours}h → ${n}h`;
+      const n = Math.min(row.completedHours + 1, row.estimatedHours);
+      rows.value = rows.value.map((t) => (t.id === row.id ? { ...t, completedHours: n } : t));
+      clickInfo.value = `Done hours: ${row.completedHours}h → ${n}h`;
       break;
     }
     default:
@@ -166,6 +167,7 @@ function handleCellClick({ accessor, rowIndex, value, row }: CellClickProps) {
     <SimpleTable
       :column-resizing="true"
       :columns="headers"
+      :get-row-id="getRowId"
       :height="height"
       :on-cell-click="handleCellClick"
       :rows="rows"
diff --git a/packages/examples/vue/src/demos/cell-clicking/cell-clicking.demo-data.ts b/packages/examples/vue/src/demos/cell-clicking/cell-clicking.demo-data.ts
index cd9748b1e..eb4062e36 100644
--- a/packages/examples/vue/src/demos/cell-clicking/cell-clicking.demo-data.ts
+++ b/packages/examples/vue/src/demos/cell-clicking/cell-clicking.demo-data.ts
@@ -1,6 +1,5 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
-
+import type { VueColumnDef } from "@simple-table/vue";
 
 export type ProjectTask = {
   id: number;
@@ -17,19 +16,106 @@ export type ProjectTask = {
 export const STATUSES = ["Not Started", "In Progress", "Completed"];
 
 export const cellClickingData: ProjectTask[] = [
-  { id: 1001, task: "Design login page mockups", assignee: "Sarah Chen", priority: "High", status: "In Progress", dueDate: "2024-02-15", estimatedHours: 8, completedHours: 5, details: "Create responsive login page designs with modern UI patterns" },
-  { id: 1002, task: "Implement user authentication API", assignee: "Marcus Rodriguez", priority: "High", status: "Not Started", dueDate: "2024-02-20", estimatedHours: 16, completedHours: 0, details: "Build secure JWT-based authentication system with OAuth integration" },
-  { id: 1003, task: "Write unit tests for payment module", assignee: "Luna Martinez", priority: "Medium", status: "Completed", dueDate: "2024-02-10", estimatedHours: 12, completedHours: 12, details: "Comprehensive test coverage for payment processing functionality" },
-  { id: 1004, task: "Update documentation for API endpoints", assignee: "Kai Thompson", priority: "Low", status: "In Progress", dueDate: "2024-02-25", estimatedHours: 6, completedHours: 3, details: "Update Swagger documentation and add usage examples" },
-  { id: 1005, task: "Performance optimization for dashboard", assignee: "Zara Kim", priority: "Medium", status: "Not Started", dueDate: "2024-03-01", estimatedHours: 20, completedHours: 0, details: "Optimize rendering performance and implement lazy loading" },
-  { id: 1006, task: "Mobile responsiveness testing", assignee: "Tyler Anderson", priority: "High", status: "In Progress", dueDate: "2024-02-18", estimatedHours: 10, completedHours: 7, details: "Test application across various mobile devices and screen sizes" },
-  { id: 1007, task: "Setup CI/CD pipeline", assignee: "Phoenix Lee", priority: "Medium", status: "Completed", dueDate: "2024-02-08", estimatedHours: 14, completedHours: 14, details: "Automated testing and deployment pipeline using GitHub Actions" },
-  { id: 1008, task: "Database migration scripts", assignee: "River Jackson", priority: "Low", status: "Not Started", dueDate: "2024-02-28", estimatedHours: 8, completedHours: 0, details: "Create migration scripts for database schema updates" },
+  {
+    id: 1001,
+    task: "Design login page mockups",
+    assignee: "Sarah Chen",
+    priority: "High",
+    status: "In Progress",
+    dueDate: "2024-02-15",
+    estimatedHours: 8,
+    completedHours: 5,
+    details: "Create responsive login page designs with modern UI patterns",
+  },
+  {
+    id: 1002,
+    task: "Implement user authentication API",
+    assignee: "Marcus Rodriguez",
+    priority: "High",
+    status: "Not Started",
+    dueDate: "2024-02-20",
+    estimatedHours: 16,
+    completedHours: 0,
+    details: "Build secure JWT-based authentication system with OAuth integration",
+  },
+  {
+    id: 1003,
+    task: "Write unit tests for payment module",
+    assignee: "Luna Martinez",
+    priority: "Medium",
+    status: "Completed",
+    dueDate: "2024-02-10",
+    estimatedHours: 12,
+    completedHours: 12,
+    details: "Comprehensive test coverage for payment processing functionality",
+  },
+  {
+    id: 1004,
+    task: "Update documentation for API endpoints",
+    assignee: "Kai Thompson",
+    priority: "Low",
+    status: "In Progress",
+    dueDate: "2024-02-25",
+    estimatedHours: 6,
+    completedHours: 3,
+    details: "Update Swagger documentation and add usage examples",
+  },
+  {
+    id: 1005,
+    task: "Performance optimization for dashboard",
+    assignee: "Zara Kim",
+    priority: "Medium",
+    status: "Not Started",
+    dueDate: "2024-03-01",
+    estimatedHours: 20,
+    completedHours: 0,
+    details: "Optimize rendering performance and implement lazy loading",
+  },
+  {
+    id: 1006,
+    task: "Mobile responsiveness testing",
+    assignee: "Tyler Anderson",
+    priority: "High",
+    status: "In Progress",
+    dueDate: "2024-02-18",
+    estimatedHours: 10,
+    completedHours: 7,
+    details: "Test application across various mobile devices and screen sizes",
+  },
+  {
+    id: 1007,
+    task: "Setup CI/CD pipeline",
+    assignee: "Phoenix Lee",
+    priority: "Medium",
+    status: "Completed",
+    dueDate: "2024-02-08",
+    estimatedHours: 14,
+    completedHours: 14,
+    details: "Automated testing and deployment pipeline using GitHub Actions",
+  },
+  {
+    id: 1008,
+    task: "Database migration scripts",
+    assignee: "River Jackson",
+    priority: "Low",
+    status: "Not Started",
+    dueDate: "2024-02-28",
+    estimatedHours: 8,
+    completedHours: 0,
+    details: "Create migration scripts for database schema updates",
+  },
 ];
 
-export const cellClickingHeaders: VueColumnDef[] = [
+export const cellClickingHeaders: VueColumnDef<ProjectTask>[] = [
   { accessor: "id", label: "Task ID", width: 80, sortable: true, type: "number" },
-  { accessor: "task", label: "Task Name", minWidth: 150, width: "1fr", sortable: true, type: "string" },
+  {
+    accessor: "task",
+    label: "Task Name",
+    minWidth: 150,
+    width: "1fr",
+    sortable: true,
+    type: "string",
+  },
   { accessor: "assignee", label: "Assignee", width: 120, sortable: true, type: "string" },
   { accessor: "priority", label: "Priority", width: 100, sortable: true, type: "string" },
   { accessor: "status", label: "Status", width: 120, sortable: true, type: "string" },
@@ -42,6 +128,6 @@ export const cellClickingHeaders: VueColumnDef[] = [
 export const cellClickingConfig = {
   headers: cellClickingHeaders,
   rows: cellClickingData,
-} as const;
+};
 
 export { STATUSES as CELL_CLICKING_STATUSES };
diff --git a/packages/examples/vue/src/demos/cell-editing/CellEditingDemo.vue b/packages/examples/vue/src/demos/cell-editing/CellEditingDemo.vue
index 39e0f0508..b2d650cbd 100644
--- a/packages/examples/vue/src/demos/cell-editing/CellEditingDemo.vue
+++ b/packages/examples/vue/src/demos/cell-editing/CellEditingDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="cellEditingConfig.headers"
     :rows="data"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     @cell-edit="handleCellEdit"
@@ -10,17 +11,21 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, CellChangeProps } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, CellChangeProps, GetRowIdParams } from "@simple-table/vue";
 import { cellEditingConfig } from "./cell-editing.demo-data";
+import type { CellEditingEmployee } from "./cell-editing.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
-const data = ref([...cellEditingConfig.rows]);
+const getRowId = ({ row }: GetRowIdParams<CellEditingEmployee>) => row.id;
 
-const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps) => {
+const data = ref<CellEditingEmployee[]>([...cellEditingConfig.rows]);
+
+const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps<CellEditingEmployee>) => {
   data.value = data.value.map((item) =>
     item.id === row.id ? { ...item, [accessor]: newValue } : item
   );
diff --git a/packages/examples/vue/src/demos/cell-editing/cell-editing.demo-data.ts b/packages/examples/vue/src/demos/cell-editing/cell-editing.demo-data.ts
index cfba95566..ee49c3ea8 100644
--- a/packages/examples/vue/src/demos/cell-editing/cell-editing.demo-data.ts
+++ b/packages/examples/vue/src/demos/cell-editing/cell-editing.demo-data.ts
@@ -1,8 +1,17 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface CellEditingEmployee {
+  id: number;
+  firstName: string;
+  lastName: string;
+  role: string;
+  hireDate: string;
+  isActive: boolean;
+  salary: number;
+}
 
-export const cellEditingHeaders: VueColumnDef[] = [
+export const cellEditingHeaders: VueColumnDef<CellEditingEmployee>[] = [
   { accessor: "firstName", label: "First Name", width: "1fr", minWidth: 100, editable: true, type: "string" },
   { accessor: "lastName", label: "Last Name", width: 120, editable: true, type: "string" },
   { accessor: "role", label: "Role", width: 120, editable: true, type: "enum", enumOptions: [
@@ -17,7 +26,7 @@ export const cellEditingHeaders: VueColumnDef[] = [
   { accessor: "salary", label: "Salary", width: 120, editable: true, type: "number" },
 ];
 
-export const cellEditingData = [
+export const cellEditingData: CellEditingEmployee[] = [
   { id: 1, firstName: "Ranger", lastName: "Wilde", role: "Manager", hireDate: "2019-03-12", isActive: true, salary: 89000 },
   { id: 2, firstName: "Safari", lastName: "Brooks", role: "Designer", hireDate: "2021-07-18", isActive: true, salary: 74000 },
   { id: 3, firstName: "Forest", lastName: "Rivers", role: "Manager", hireDate: "2018-11-08", isActive: true, salary: 94000 },
@@ -35,4 +44,4 @@ export const cellEditingData = [
 export const cellEditingConfig = {
   headers: cellEditingHeaders,
   rows: cellEditingData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/cell-highlighting/CellHighlightingDemo.vue b/packages/examples/vue/src/demos/cell-highlighting/CellHighlightingDemo.vue
index 9e608bb47..ab6167b2a 100644
--- a/packages/examples/vue/src/demos/cell-highlighting/CellHighlightingDemo.vue
+++ b/packages/examples/vue/src/demos/cell-highlighting/CellHighlightingDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="cellHighlightingConfig.headers"
     :rows="cellHighlightingConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :selectable-cells="cellHighlightingConfig.tableProps.selectableCells"
@@ -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 { cellHighlightingConfig } from "./cell-highlighting.demo-data";
+import type { CellHighlightingEmployee } from "./cell-highlighting.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<CellHighlightingEmployee>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/cell-highlighting/cell-highlighting.demo-data.ts b/packages/examples/vue/src/demos/cell-highlighting/cell-highlighting.demo-data.ts
index 00be22f3d..c6d6bf56f 100644
--- a/packages/examples/vue/src/demos/cell-highlighting/cell-highlighting.demo-data.ts
+++ b/packages/examples/vue/src/demos/cell-highlighting/cell-highlighting.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface CellHighlightingEmployee {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+  startDate: string;
+}
 
-export const cellHighlightingHeaders: VueColumnDef[] = [
+export const cellHighlightingHeaders: VueColumnDef<CellHighlightingEmployee>[] = [
   { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
   { accessor: "name", label: "Name", minWidth: 80, width: "1fr", sortable: true, type: "string" },
   { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
@@ -11,7 +19,7 @@ export const cellHighlightingHeaders: VueColumnDef[] = [
   { accessor: "startDate", label: "Start Date", width: 150, sortable: true, type: "date" },
 ];
 
-export const cellHighlightingData = [
+export const cellHighlightingData: CellHighlightingEmployee[] = [
   { id: 1, name: "Davi Thompson", age: 29, role: "Personal Trainer", department: "Fitness", startDate: "2021-03-15" },
   { id: 2, name: "Paloma Martinez", age: 26, role: "Yoga Instructor", department: "Group Classes", startDate: "2022-01-10" },
   { id: 3, name: "Jaxon Johnson", age: 34, role: "Fitness Manager", department: "Management", startDate: "2019-08-20" },
@@ -30,4 +38,4 @@ export const cellHighlightingConfig = {
   headers: cellHighlightingHeaders,
   rows: cellHighlightingData,
   tableProps: { selectableCells: true, selectableColumns: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts b/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts
index b49eb0bb3..14b9edda5 100644
--- a/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts
+++ b/packages/examples/vue/src/demos/cell-renderer/cell-renderer.demo-data.ts
@@ -1,6 +1,7 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+
 export type CellRendererEmployee = {
   id: number;
   name: string;
diff --git a/packages/examples/vue/src/demos/charts/ChartsDemo.vue b/packages/examples/vue/src/demos/charts/ChartsDemo.vue
index cb8b34f14..d93a91e14 100644
--- a/packages/examples/vue/src/demos/charts/ChartsDemo.vue
+++ b/packages/examples/vue/src/demos/charts/ChartsDemo.vue
@@ -4,6 +4,7 @@
     :column-resizing="chartsConfig.tableProps.columnResizing"
     :columns="chartsConfig.headers"
     :rows="chartsConfig.rows"
+    :get-row-id="getRowId"
     :selectable-cells="chartsConfig.tableProps.selectableCells"
     :height="height"
     :theme="theme"
@@ -11,9 +12,13 @@
 </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 { chartsConfig } from "./charts.demo-data";
+import type { ChartsProduct } from "./charts.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { height: "400px" });
+
+const getRowId = ({ row }: GetRowIdParams<ChartsProduct>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/charts/charts.demo-data.ts b/packages/examples/vue/src/demos/charts/charts.demo-data.ts
index 493706e5a..38cf97cab 100644
--- a/packages/examples/vue/src/demos/charts/charts.demo-data.ts
+++ b/packages/examples/vue/src/demos/charts/charts.demo-data.ts
@@ -1,6 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ChartsProduct {
+  id: number;
+  product: string;
+  category: string;
+  monthlySales: number[];
+  dailyViews: number[];
+  quarterlyRevenue: number[];
+  weeklyOrders: number[];
+  rating: number;
+}
 
 const generateTrendData = (baseValue: number, volatility: number, length: number = 12): number[] => {
   const data: number[] = [];
@@ -13,7 +23,7 @@ const generateTrendData = (baseValue: number, volatility: number, length: number
   return data;
 };
 
-export const chartsData = [
+export const chartsData: ChartsProduct[] = [
   { id: 1, product: "Laptop Pro", category: "Electronics", monthlySales: generateTrendData(150, 30, 12), dailyViews: generateTrendData(500, 100, 30), quarterlyRevenue: [45000, 52000, 48000, 61000], weeklyOrders: [23, 28, 31, 25, 29, 35, 38], rating: 4.5 },
   { id: 2, product: "Wireless Mouse", category: "Accessories", monthlySales: generateTrendData(300, 50, 12), dailyViews: generateTrendData(800, 150, 30), quarterlyRevenue: [12000, 15000, 18000, 21000], weeklyOrders: [45, 52, 48, 61, 58, 67, 71], rating: 4.2 },
   { id: 3, product: "USB-C Cable", category: "Accessories", monthlySales: generateTrendData(500, 80, 12), dailyViews: generateTrendData(1200, 200, 30), quarterlyRevenue: [8000, 9000, 7500, 10000], weeklyOrders: [78, 82, 75, 88, 91, 85, 93], rating: 4.7 },
@@ -28,7 +38,7 @@ export const chartsData = [
   { id: 12, product: "Smart Home Hub", category: "Electronics", monthlySales: generateTrendData(100, 25, 12), dailyViews: generateTrendData(400, 80, 30), quarterlyRevenue: [35000, 38000, 42000, 45000], weeklyOrders: [15, 18, 22, 19, 21, 24, 27], rating: 4.6 },
 ];
 
-export const chartsHeaders: VueColumnDef[] = [
+export const chartsHeaders: VueColumnDef<ChartsProduct>[] = [
   { accessor: "id", label: "ID", width: 70, sortable: true, type: "number" },
   { accessor: "product", label: "Product", width: 180, sortable: true, type: "string" },
   { accessor: "category", label: "Category", width: 120, sortable: true, type: "string" },
@@ -47,4 +57,4 @@ export const chartsConfig = {
     columnResizing: true,
     selectableCells: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/collapsible-columns/CollapsibleColumnsDemo.vue b/packages/examples/vue/src/demos/collapsible-columns/CollapsibleColumnsDemo.vue
index a897deec6..a7a7ee085 100644
--- a/packages/examples/vue/src/demos/collapsible-columns/CollapsibleColumnsDemo.vue
+++ b/packages/examples/vue/src/demos/collapsible-columns/CollapsibleColumnsDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="collapsibleColumnsConfig.headers"
     :rows="collapsibleColumnsConfig.rows"
+    :get-row-id="getRowId"
     :column-resizing="true"
     :enable-column-editor="true"
     :selectable-cells="true"
@@ -12,11 +13,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 { collapsibleColumnsConfig } from "./collapsible-columns.demo-data";
+import type { CollapsibleSalesRep } from "./collapsible-columns.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<CollapsibleSalesRep>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/collapsible-columns/collapsible-columns.demo-data.ts b/packages/examples/vue/src/demos/collapsible-columns/collapsible-columns.demo-data.ts
index c91ae05e0..7ab408179 100644
--- a/packages/examples/vue/src/demos/collapsible-columns/collapsible-columns.demo-data.ts
+++ b/packages/examples/vue/src/demos/collapsible-columns/collapsible-columns.demo-data.ts
@@ -1,8 +1,38 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef } from "@simple-table/vue";
+import type { VueCellRenderer, VueColumnDef } from "@simple-table/vue";
 
+export interface CollapsibleSalesRep {
+  id: number;
+  name: string;
+  region: string;
+  q1Sales: number;
+  q2Sales: number;
+  q3Sales: number;
+  q4Sales: number;
+  totalSales: number;
+  avgQuarterly: number;
+  jan: number;
+  feb: number;
+  mar: number;
+  apr: number;
+  may: number;
+  jun: number;
+  jul: number;
+  aug: number;
+  sep: number;
+  oct: number;
+  nov: number;
+  dec: number;
+  avgMonthly: number;
+  bestMonth: number;
+  softwareSales: number;
+  hardwareSales: number;
+  servicesSales: number;
+  topCategory: string;
+  categoryCount: number;
+}
 
-export const collapsibleColumnsData = [
+export const collapsibleColumnsData: CollapsibleSalesRep[] = [
   { id: 1, name: "Alice Thompson", region: "North America", q1Sales: 245000, q2Sales: 289000, q3Sales: 312000, q4Sales: 298000, totalSales: 1144000, avgQuarterly: 286000, jan: 78000, feb: 82000, mar: 85000, apr: 89000, may: 95000, jun: 105000, jul: 98000, aug: 102000, sep: 112000, oct: 108000, nov: 95000, dec: 95000, avgMonthly: 95333, bestMonth: 112000, softwareSales: 456000, hardwareSales: 342000, servicesSales: 346000, topCategory: "Software", categoryCount: 3 },
   { id: 2, name: "Marcus Chen", region: "Asia Pacific", q1Sales: 189000, q2Sales: 234000, q3Sales: 287000, q4Sales: 276000, totalSales: 986000, avgQuarterly: 246500, jan: 58000, feb: 62000, mar: 69000, apr: 72000, may: 78000, jun: 84000, jul: 89000, aug: 95000, sep: 103000, oct: 98000, nov: 89000, dec: 89000, avgMonthly: 82166, bestMonth: 103000, softwareSales: 398000, hardwareSales: 298000, servicesSales: 290000, topCategory: "Software", categoryCount: 3 },
   { id: 3, name: "Sofia Rodriguez", region: "Europe", q1Sales: 198000, q2Sales: 245000, q3Sales: 267000, q4Sales: 289000, totalSales: 999000, avgQuarterly: 249750, jan: 62000, feb: 66000, mar: 70000, apr: 78000, may: 82000, jun: 85000, jul: 85000, aug: 88000, sep: 94000, oct: 96000, nov: 97000, dec: 96000, avgMonthly: 83250, bestMonth: 97000, softwareSales: 389000, hardwareSales: 312000, servicesSales: 298000, topCategory: "Software", categoryCount: 3 },
@@ -17,21 +47,38 @@ export const collapsibleColumnsData = [
   { id: 12, name: "Christopher Lee", region: "Europe", q1Sales: 167000, q2Sales: 189000, q3Sales: 212000, q4Sales: 234000, totalSales: 802000, avgQuarterly: 200500, jan: 52000, feb: 55000, mar: 60000, apr: 61000, may: 63000, jun: 65000, jul: 68000, aug: 71000, sep: 73000, oct: 76000, nov: 78000, dec: 80000, avgMonthly: 66833, bestMonth: 80000, softwareSales: 320000, hardwareSales: 241000, servicesSales: 241000, topCategory: "Software", categoryCount: 3 },
 ];
 
-const fmt = (accessor: string) => ({ row }: { row: Record<string, unknown> }) =>
-  `$${((row[accessor] as number) || 0).toLocaleString()}`;
+const fmtCurrency: VueCellRenderer<CollapsibleSalesRep, number> = ({ value }) =>
+  `$${(value ?? 0).toLocaleString()}`;
 
-const monthCol = (accessor: string, label: string): VueColumnDef => ({
+type MonthKey =
+  | "jan"
+  | "feb"
+  | "mar"
+  | "apr"
+  | "may"
+  | "jun"
+  | "jul"
+  | "aug"
+  | "sep"
+  | "oct"
+  | "nov"
+  | "dec";
+
+const monthCol = (
+  accessor: MonthKey,
+  label: string,
+): VueColumnDef<CollapsibleSalesRep, number> => ({
   accessor,
   label,
   width: 100,
-  showWhen: "parentExpanded" as const,
+  showWhen: "parentExpanded",
   sortable: true,
   align: "right",
   type: "number",
-  cellRenderer: fmt(accessor),
+  cellRenderer: fmtCurrency,
 });
 
-export const collapsibleColumnsHeaders: VueColumnDef[] = [
+export const collapsibleColumnsHeaders: VueColumnDef<CollapsibleSalesRep>[] = [
   { accessor: "id", label: "ID", width: 60, sortable: true },
   { accessor: "name", label: "Sales Rep", minWidth: 150, width: "1fr", sortable: true },
   { accessor: "region", label: "Region", width: 140, sortable: true },
@@ -42,11 +89,11 @@ export const collapsibleColumnsHeaders: VueColumnDef[] = [
     collapsible: true,
     collapseDefault: true,
     children: [
-      { accessor: "totalSales", label: "Total Sales", width: 140, showWhen: "parentCollapsed" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("totalSales") },
-      { accessor: "q1Sales", label: "Q1", width: 120, showWhen: "parentExpanded" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("q1Sales") },
-      { accessor: "q2Sales", label: "Q2", width: 120, showWhen: "parentExpanded" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("q2Sales") },
-      { accessor: "q3Sales", label: "Q3", width: 120, showWhen: "parentExpanded" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("q3Sales") },
-      { accessor: "q4Sales", label: "Q4", width: 120, showWhen: "parentExpanded" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("q4Sales") },
+      { accessor: "totalSales", label: "Total Sales", width: 140, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
+      { accessor: "q1Sales", label: "Q1", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
+      { accessor: "q2Sales", label: "Q2", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
+      { accessor: "q3Sales", label: "Q3", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
+      { accessor: "q4Sales", label: "Q4", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
     ],
   },
   {
@@ -56,8 +103,8 @@ export const collapsibleColumnsHeaders: VueColumnDef[] = [
     collapsible: true,
     collapseDefault: true,
     children: [
-      { accessor: "avgMonthly", label: "Avg Monthly", width: 130, showWhen: "parentCollapsed" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("avgMonthly") },
-      { accessor: "bestMonth", label: "Best Month", width: 130, showWhen: "parentCollapsed" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("bestMonth") },
+      { accessor: "avgMonthly", label: "Avg Monthly", width: 130, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
+      { accessor: "bestMonth", label: "Best Month", width: 130, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
       monthCol("jan", "Jan"), monthCol("feb", "Feb"), monthCol("mar", "Mar"),
       monthCol("apr", "Apr"), monthCol("may", "May"), monthCol("jun", "Jun"),
       monthCol("jul", "Jul"), monthCol("aug", "Aug"), monthCol("sep", "Sep"),
@@ -71,10 +118,10 @@ export const collapsibleColumnsHeaders: VueColumnDef[] = [
     collapsible: true,
     collapseDefault: true,
     children: [
-      { accessor: "topCategory", label: "Top Category", width: 140, showWhen: "parentCollapsed" as const, sortable: true, type: "string" },
-      { accessor: "softwareSales", label: "Software", width: 130, showWhen: "parentExpanded" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("softwareSales") },
-      { accessor: "hardwareSales", label: "Hardware", width: 130, showWhen: "parentExpanded" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("hardwareSales") },
-      { accessor: "servicesSales", label: "Services", width: 130, showWhen: "parentExpanded" as const, sortable: true, align: "right", type: "number", cellRenderer: fmt("servicesSales") },
+      { accessor: "topCategory", label: "Top Category", width: 140, showWhen: "parentCollapsed", sortable: true, type: "string" },
+      { accessor: "softwareSales", label: "Software", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
+      { accessor: "hardwareSales", label: "Hardware", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
+      { accessor: "servicesSales", label: "Services", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
     ],
   },
 ];
@@ -88,4 +135,4 @@ export const collapsibleColumnsConfig = {
     selectableCells: true,
     columnReordering: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-alignment/ColumnAlignmentDemo.vue b/packages/examples/vue/src/demos/column-alignment/ColumnAlignmentDemo.vue
index 3eccf9284..ad8adbd80 100644
--- a/packages/examples/vue/src/demos/column-alignment/ColumnAlignmentDemo.vue
+++ b/packages/examples/vue/src/demos/column-alignment/ColumnAlignmentDemo.vue
@@ -2,17 +2,22 @@
   <SimpleTable
     :columns="columnAlignmentConfig.headers"
     :rows="columnAlignmentConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
   />
 </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 { columnAlignmentConfig } from "./column-alignment.demo-data";
+import type { ColumnAlignmentPlayer } from "./column-alignment.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<ColumnAlignmentPlayer>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/column-alignment/column-alignment.demo-data.ts b/packages/examples/vue/src/demos/column-alignment/column-alignment.demo-data.ts
index 83643bcf6..684a03c78 100644
--- a/packages/examples/vue/src/demos/column-alignment/column-alignment.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-alignment/column-alignment.demo-data.ts
@@ -1,8 +1,15 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ColumnAlignmentPlayer {
+  id: number;
+  name: string;
+  score: number;
+  rating: number;
+  status: string;
+}
 
-export const columnAlignmentHeaders: VueColumnDef[] = [
+export const columnAlignmentHeaders: VueColumnDef<ColumnAlignmentPlayer>[] = [
   { accessor: "id", label: "ID", width: 80, align: "left", type: "number" },
   { accessor: "name", label: "Name", minWidth: 100, width: "1fr", align: "center", type: "string" },
   { accessor: "score", label: "Score", width: 120, align: "right", type: "number" },
@@ -10,7 +17,7 @@ export const columnAlignmentHeaders: VueColumnDef[] = [
   { accessor: "status", label: "Status", width: 120, align: "left", type: "string" },
 ];
 
-export const columnAlignmentData = [
+export const columnAlignmentData: ColumnAlignmentPlayer[] = [
   { id: 1, name: "Camila Rodriguez", score: 94, rating: 4.9, status: "Active" },
   { id: 2, name: "Enzo Silva", score: 89, rating: 4.6, status: "Active" },
   { id: 3, name: "Yuki Kim", score: 96, rating: 4.8, status: "Active" },
@@ -28,4 +35,4 @@ export const columnAlignmentData = [
 export const columnAlignmentConfig = {
   headers: columnAlignmentHeaders,
   rows: columnAlignmentData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-editing/ColumnEditingDemo.vue b/packages/examples/vue/src/demos/column-editing/ColumnEditingDemo.vue
index e4adcad22..911c24670 100644
--- a/packages/examples/vue/src/demos/column-editing/ColumnEditingDemo.vue
+++ b/packages/examples/vue/src/demos/column-editing/ColumnEditingDemo.vue
@@ -14,6 +14,7 @@
     <SimpleTable
       :columns="headers"
       :rows="columnEditingData"
+      :get-row-id="getRowId"
       :height="height"
       :theme="theme"
       :enable-header-editing="true"
@@ -26,22 +27,25 @@
 <script setup lang="ts">
 import { ref, computed } 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 { columnEditingData, columnEditingHeaders } from "./column-editing.demo-data";
+import type { ColumnEditingEmployee } from "./column-editing.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
-const additionalColumns = ref<VueColumnDef[]>([]);
+const additionalColumns = ref<VueColumnDef<ColumnEditingEmployee>[]>([]);
 const lastAdded = ref("");
 
 const headers = computed(() => [...columnEditingHeaders, ...additionalColumns.value]);
 
+const getRowId = ({ row }: GetRowIdParams<ColumnEditingEmployee>) => row.id;
+
 function addColumn() {
   const n = additionalColumns.value.length + 1;
-  const col: VueColumnDef = {
+  const col: VueColumnDef<ColumnEditingEmployee> = {
     accessor: `custom-${n}`,
     label: `Custom ${n}`,
     width: 120,
@@ -51,7 +55,7 @@ function addColumn() {
   lastAdded.value = col.label;
 }
 
-function handleHeaderEdit(_header: VueColumnDef, newLabel: string) {
+function handleHeaderEdit(_header: VueColumnDef<ColumnEditingEmployee>, newLabel: string) {
   lastAdded.value = `Renamed to: ${newLabel}`;
 }
 </script>
diff --git a/packages/examples/vue/src/demos/column-editing/column-editing.demo-data.ts b/packages/examples/vue/src/demos/column-editing/column-editing.demo-data.ts
index d0488eb62..1384722ae 100644
--- a/packages/examples/vue/src/demos/column-editing/column-editing.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-editing/column-editing.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ColumnEditingEmployee {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+  email: string;
+}
 
-export const columnEditingHeaders: VueColumnDef[] = [
+export const columnEditingHeaders: VueColumnDef<ColumnEditingEmployee>[] = [
   { accessor: "id", label: "ID", width: 80, type: "number" },
   { accessor: "name", label: "Name", minWidth: 120, width: "1fr", type: "string" },
   { accessor: "age", label: "Age", width: 100, type: "number" },
@@ -10,7 +18,7 @@ export const columnEditingHeaders: VueColumnDef[] = [
   { accessor: "department", label: "Department", width: 150, type: "string" },
 ];
 
-export const columnEditingData = [
+export const columnEditingData: ColumnEditingEmployee[] = [
   { id: 1, name: "Marcus Rodriguez", age: 29, role: "Frontend Developer", department: "Engineering", email: "marcus.rodriguez@company.com" },
   { id: 2, name: "Sophia Chen", age: 27, role: "UX/UI Designer", department: "Design", email: "sophia.chen@company.com" },
   { id: 3, name: "Raj Patel", age: 34, role: "Engineering Manager", department: "Management", email: "raj.patel@company.com" },
@@ -29,4 +37,4 @@ export const columnEditingConfig = {
   headers: columnEditingHeaders,
   rows: columnEditingData,
   tableProps: { enableHeaderEditing: true, selectableColumns: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-editor-custom-renderer/ColumnEditorCustomRendererDemo.vue b/packages/examples/vue/src/demos/column-editor-custom-renderer/ColumnEditorCustomRendererDemo.vue
index d62f5d0cf..c33f22676 100644
--- a/packages/examples/vue/src/demos/column-editor-custom-renderer/ColumnEditorCustomRendererDemo.vue
+++ b/packages/examples/vue/src/demos/column-editor-custom-renderer/ColumnEditorCustomRendererDemo.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import {
   columnEditorCustomRendererConfig,
   COLUMN_EDITOR_TEXT,
   COLUMN_EDITOR_SEARCH_PLACEHOLDER,
 } from "./column-editor-custom-renderer.demo-data";
+import type { ColumnEditorCustomRendererEmployee } from "./column-editor-custom-renderer.demo-data";
 import ColumnEditorCustomRow from "./ColumnEditorCustomRow.vue";
 import "@simple-table/vue/styles.css";
 
@@ -13,6 +14,8 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
   height: "400px",
 });
 
+const getRowId = ({ row }: GetRowIdParams<ColumnEditorCustomRendererEmployee>) => row.id;
+
 const editorConfig = {
   text: COLUMN_EDITOR_TEXT,
   searchEnabled: true,
@@ -25,6 +28,7 @@ const editorConfig = {
   <SimpleTable
     :columns="columnEditorCustomRendererConfig.headers"
     :rows="columnEditorCustomRendererConfig.rows"
+    :get-row-id="getRowId"
     :enable-column-editor="true"
     :column-editor-config="editorConfig"
     :height="props.height"
diff --git a/packages/examples/vue/src/demos/column-editor-custom-renderer/column-editor-custom-renderer.demo-data.ts b/packages/examples/vue/src/demos/column-editor-custom-renderer/column-editor-custom-renderer.demo-data.ts
index df2234250..07e286c78 100644
--- a/packages/examples/vue/src/demos/column-editor-custom-renderer/column-editor-custom-renderer.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-editor-custom-renderer/column-editor-custom-renderer.demo-data.ts
@@ -1,19 +1,92 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ColumnEditorCustomRendererEmployee {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  salary: number;
+  department: string;
+  status: string;
+}
 
-export const columnEditorCustomRendererData: Row[] = [
-  { id: 1, name: "Alice Johnson", email: "alice@example.com", role: "Engineer", salary: 125000, department: "Engineering", status: "active" },
-  { id: 2, name: "Bob Martinez", email: "bob@example.com", role: "Designer", salary: 98000, department: "Design", status: "active" },
-  { id: 3, name: "Clara Chen", email: "clara@example.com", role: "PM", salary: 115000, department: "Product", status: "inactive" },
-  { id: 4, name: "David Kim", email: "david@example.com", role: "Engineer", salary: 132000, department: "Engineering", status: "active" },
-  { id: 5, name: "Elena Rossi", email: "elena@example.com", role: "Analyst", salary: 89000, department: "Analytics", status: "active" },
-  { id: 6, name: "Frank Müller", email: "frank@example.com", role: "Engineer", salary: 118000, department: "Engineering", status: "inactive" },
-  { id: 7, name: "Grace Park", email: "grace@example.com", role: "Designer", salary: 105000, department: "Design", status: "active" },
-  { id: 8, name: "Henry Patel", email: "henry@example.com", role: "Lead", salary: 145000, department: "Engineering", status: "active" },
+export const columnEditorCustomRendererData: ColumnEditorCustomRendererEmployee[] = [
+  {
+    id: 1,
+    name: "Alice Johnson",
+    email: "alice@example.com",
+    role: "Engineer",
+    salary: 125000,
+    department: "Engineering",
+    status: "active",
+  },
+  {
+    id: 2,
+    name: "Bob Martinez",
+    email: "bob@example.com",
+    role: "Designer",
+    salary: 98000,
+    department: "Design",
+    status: "active",
+  },
+  {
+    id: 3,
+    name: "Clara Chen",
+    email: "clara@example.com",
+    role: "PM",
+    salary: 115000,
+    department: "Product",
+    status: "inactive",
+  },
+  {
+    id: 4,
+    name: "David Kim",
+    email: "david@example.com",
+    role: "Engineer",
+    salary: 132000,
+    department: "Engineering",
+    status: "active",
+  },
+  {
+    id: 5,
+    name: "Elena Rossi",
+    email: "elena@example.com",
+    role: "Analyst",
+    salary: 89000,
+    department: "Analytics",
+    status: "active",
+  },
+  {
+    id: 6,
+    name: "Frank Müller",
+    email: "frank@example.com",
+    role: "Engineer",
+    salary: 118000,
+    department: "Engineering",
+    status: "inactive",
+  },
+  {
+    id: 7,
+    name: "Grace Park",
+    email: "grace@example.com",
+    role: "Designer",
+    salary: 105000,
+    department: "Design",
+    status: "active",
+  },
+  {
+    id: 8,
+    name: "Henry Patel",
+    email: "henry@example.com",
+    role: "Lead",
+    salary: 145000,
+    department: "Engineering",
+    status: "active",
+  },
 ];
 
-export const columnEditorCustomRendererHeaders: VueColumnDef[] = [
+export const columnEditorCustomRendererHeaders: VueColumnDef<ColumnEditorCustomRendererEmployee>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "Name", width: 170, type: "string", sortable: true },
   { accessor: "email", label: "Email", width: 200, type: "string" },
@@ -36,7 +109,7 @@ export const columnEditorCustomRendererConfig = {
   tableProps: {
     enableColumnEditor: true,
   },
-} as const;
+};
 
 export const COLUMN_EDITOR_TEXT = "Manage Columns";
 export const COLUMN_EDITOR_SEARCH_PLACEHOLDER = "Search columns…";
diff --git a/packages/examples/vue/src/demos/column-filtering/ColumnFilteringDemo.vue b/packages/examples/vue/src/demos/column-filtering/ColumnFilteringDemo.vue
index f48e5a969..4f0816a01 100644
--- a/packages/examples/vue/src/demos/column-filtering/ColumnFilteringDemo.vue
+++ b/packages/examples/vue/src/demos/column-filtering/ColumnFilteringDemo.vue
@@ -2,17 +2,22 @@
   <SimpleTable
     :columns="columnFilteringConfig.headers"
     :rows="columnFilteringConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
   />
 </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 { columnFilteringConfig } from "./column-filtering.demo-data";
+import type { ColumnFilteringEmployee } from "./column-filtering.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<ColumnFilteringEmployee>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/column-filtering/column-filtering.demo-data.ts b/packages/examples/vue/src/demos/column-filtering/column-filtering.demo-data.ts
index 8f202b94d..443ea7fac 100644
--- a/packages/examples/vue/src/demos/column-filtering/column-filtering.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-filtering/column-filtering.demo-data.ts
@@ -1,8 +1,17 @@
 // Self-contained demo table setup for this example.
-import type { Row, VueColumnDef } from "@simple-table/vue";
+import type { VueColumnDef, CellRendererProps } from "@simple-table/vue";
 
+export interface ColumnFilteringEmployee {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  startDate: string;
+  isActive: boolean;
+}
 
-export const COLUMN_FILTERING_DATA: Row[] = [
+export const COLUMN_FILTERING_DATA: ColumnFilteringEmployee[] = [
   {
     id: 1,
     name: "Bianca Rossi",
@@ -147,7 +156,7 @@ export const DEPARTMENT_OPTIONS = [
   { label: "Quality Assurance", value: "Quality Assurance" },
 ];
 
-export const columnFilteringHeaders: VueColumnDef[] = [
+export const columnFilteringHeaders: VueColumnDef<ColumnFilteringEmployee>[] = [
   {
     accessor: "id",
     label: "ID",
@@ -191,7 +200,7 @@ export const columnFilteringHeaders: VueColumnDef[] = [
     type: "number",
     sortable: true,
     filterable: true,
-    cellRenderer: ({ row }) => {
+    cellRenderer: ({ row }: CellRendererProps<ColumnFilteringEmployee>) => {
       const salary = row.salary as number;
       return `$${salary.toLocaleString()}`;
     },
@@ -218,4 +227,4 @@ export const columnFilteringHeaders: VueColumnDef[] = [
 export const columnFilteringConfig = {
   headers: columnFilteringHeaders,
   rows: COLUMN_FILTERING_DATA,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-pinning/ColumnPinningDemo.vue b/packages/examples/vue/src/demos/column-pinning/ColumnPinningDemo.vue
index 1ce46d8d4..de3c4f7d4 100644
--- a/packages/examples/vue/src/demos/column-pinning/ColumnPinningDemo.vue
+++ b/packages/examples/vue/src/demos/column-pinning/ColumnPinningDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="columnPinningConfig.headers"
     :rows="columnPinningConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :column-resizing="columnPinningConfig.tableProps.columnResizing"
@@ -9,11 +10,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 { columnPinningConfig } from "./column-pinning.demo-data";
+import type { ColumnPinningEmployee } from "./column-pinning.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<ColumnPinningEmployee>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/column-pinning/column-pinning.demo-data.ts b/packages/examples/vue/src/demos/column-pinning/column-pinning.demo-data.ts
index 37f19efbd..a16c6eb99 100644
--- a/packages/examples/vue/src/demos/column-pinning/column-pinning.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-pinning/column-pinning.demo-data.ts
@@ -1,8 +1,21 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ColumnPinningEmployee {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  department: string;
+  location: string;
+  joinDate: string;
+  salary: number;
+  manager: string;
+  status: string;
+  projects: number;
+}
 
-export const columnPinningHeaders: VueColumnDef[] = [
+export const columnPinningHeaders: VueColumnDef<ColumnPinningEmployee>[] = [
   { accessor: "name", label: "Name", width: 132, pinned: "left", type: "string" },
   { accessor: "email", label: "Email", width: 220, type: "string" },
   { accessor: "role", label: "Role", width: 150, type: "string" },
@@ -15,7 +28,7 @@ export const columnPinningHeaders: VueColumnDef[] = [
   { accessor: "projects", label: "Projects", width: 100, align: "right", pinned: "right", type: "number" },
 ];
 
-export const columnPinningData = [
+export const columnPinningData: ColumnPinningEmployee[] = [
   { id: 1, name: "Zara Nakamura", email: "zara.n@pixelstudio.game", role: "Lead Game Designer", department: "Game Design", location: "Tokyo", joinDate: "2019-03-12", salary: 145000, manager: "Hiroshi Tanaka", status: "Active", projects: 7 },
   { id: 2, name: "Phoenix Rodriguez", email: "phoenix.r@pixelstudio.game", role: "3D Artist", department: "Art & Animation", location: "Montreal", joinDate: "2020-11-08", salary: 98000, manager: "Elena Volkov", status: "Active", projects: 4 },
   { id: 3, name: "Kai Thompson", email: "kai.t@pixelstudio.game", role: "Senior Programmer", department: "Engineering", location: "San Francisco", joinDate: "2018-05-15", salary: 135000, manager: "Nova Singh", status: "Active", projects: 6 },
@@ -34,4 +47,4 @@ export const columnPinningConfig = {
   headers: columnPinningHeaders,
   rows: columnPinningData,
   tableProps: { columnResizing: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-reordering/ColumnReorderingDemo.vue b/packages/examples/vue/src/demos/column-reordering/ColumnReorderingDemo.vue
index 06d247509..4e3dee8bc 100644
--- a/packages/examples/vue/src/demos/column-reordering/ColumnReorderingDemo.vue
+++ b/packages/examples/vue/src/demos/column-reordering/ColumnReorderingDemo.vue
@@ -3,6 +3,7 @@
     :column-reordering="true"
     :columns="headers"
     :rows="columnReorderingConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     @column-order-change="handleColumnOrderChange"
@@ -12,17 +13,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 { columnReorderingConfig } from "./column-reordering.demo-data";
+import type { CrewMember } from "./column-reordering.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
-const headers = ref<VueColumnDef[]>([...columnReorderingConfig.headers]);
+const headers = ref<VueColumnDef<CrewMember>[]>([...columnReorderingConfig.headers]);
 
-const handleColumnOrderChange = (newHeaders: VueColumnDef[]) => {
+const handleColumnOrderChange = (newHeaders: VueColumnDef<CrewMember>[]) => {
   headers.value = newHeaders;
 };
+
+const getRowId = ({ row }: GetRowIdParams<CrewMember>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/column-reordering/column-reordering.demo-data.ts b/packages/examples/vue/src/demos/column-reordering/column-reordering.demo-data.ts
index 17752fb31..2e8d6cd7a 100644
--- a/packages/examples/vue/src/demos/column-reordering/column-reordering.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-reordering/column-reordering.demo-data.ts
@@ -1,8 +1,15 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface CrewMember {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+}
 
-export const columnReorderingHeaders: VueColumnDef[] = [
+export const columnReorderingHeaders: VueColumnDef<CrewMember>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "Name", width: "1fr", type: "string" },
   { accessor: "age", label: "Age", width: 80, align: "right", type: "number" },
@@ -29,4 +36,4 @@ export const columnReorderingConfig = {
   headers: columnReorderingHeaders,
   rows: columnReorderingData,
   tableProps: { columnReordering: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-resizing/ColumnResizingDemo.vue b/packages/examples/vue/src/demos/column-resizing/ColumnResizingDemo.vue
index dbac7bbfa..0ebb7e6c9 100644
--- a/packages/examples/vue/src/demos/column-resizing/ColumnResizingDemo.vue
+++ b/packages/examples/vue/src/demos/column-resizing/ColumnResizingDemo.vue
@@ -10,6 +10,7 @@
       :column-resizing="true"
       :columns="headers"
       :rows="columnResizingData"
+      :get-row-id="getRowId"
       :height="height"
       :theme="theme"
       @column-width-change="handleColumnWidthChange"
@@ -20,17 +21,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef } from "@simple-table/vue";
-import { columnResizingHeaders, columnResizingData, COLUMN_RESIZING_STORAGE_KEY } from "./column-resizing.demo-data";
+import type { Theme, VueColumnDef, GetRowIdParams } from "@simple-table/vue";
+import {
+  columnResizingHeaders,
+  columnResizingData,
+  COLUMN_RESIZING_STORAGE_KEY,
+} from "./column-resizing.demo-data";
+import type { OceanStaff } from "./column-resizing.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
-const headers = ref<VueColumnDef[]>([...columnResizingHeaders]);
+const headers = ref<VueColumnDef<OceanStaff>[]>([...columnResizingHeaders]);
 const saveMessage = ref("");
 
+const getRowId = ({ row }: GetRowIdParams<OceanStaff>) => row.id;
+
 onMounted(() => {
   try {
     const saved = localStorage.getItem(COLUMN_RESIZING_STORAGE_KEY);
@@ -44,7 +52,7 @@ onMounted(() => {
   } catch { /* ignore */ }
 });
 
-function handleColumnWidthChange(updatedHeaders: VueColumnDef[]) {
+function handleColumnWidthChange(updatedHeaders: VueColumnDef<OceanStaff>[]) {
   try {
     const widthMap = updatedHeaders.reduce(
       (acc: Record<string, unknown>, h) => { acc[h.accessor] = h.width; return acc; },
diff --git a/packages/examples/vue/src/demos/column-resizing/column-resizing.demo-data.ts b/packages/examples/vue/src/demos/column-resizing/column-resizing.demo-data.ts
index c984c701e..3ad1115af 100644
--- a/packages/examples/vue/src/demos/column-resizing/column-resizing.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-resizing/column-resizing.demo-data.ts
@@ -1,10 +1,18 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface OceanStaff {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+  startDate: string;
+}
 
 export const COLUMN_RESIZING_STORAGE_KEY = "columnResizingDemo_widths";
 
-export const columnResizingHeaders: VueColumnDef[] = [
+export const columnResizingHeaders: VueColumnDef<OceanStaff>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "First Name", width: "1fr", minWidth: 100, type: "string" },
   { accessor: "age", label: "Age", width: "1fr", minWidth: 50, type: "string" },
@@ -31,4 +39,4 @@ export const columnResizingData = [
 export const columnResizingConfig = {
   headers: columnResizingHeaders,
   rows: columnResizingData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-selection/ColumnSelectionDemo.vue b/packages/examples/vue/src/demos/column-selection/ColumnSelectionDemo.vue
index 7670da876..5cd0e9f63 100644
--- a/packages/examples/vue/src/demos/column-selection/ColumnSelectionDemo.vue
+++ b/packages/examples/vue/src/demos/column-selection/ColumnSelectionDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="columnSelectionConfig.headers"
     :rows="columnSelectionConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :selectable-columns="columnSelectionConfig.tableProps.selectableColumns"
@@ -9,11 +10,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 { columnSelectionConfig } from "./column-selection.demo-data";
+import type { TeamMember } from "./column-selection.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<TeamMember>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/column-selection/column-selection.demo-data.ts b/packages/examples/vue/src/demos/column-selection/column-selection.demo-data.ts
index 01684f60f..4aa236a43 100644
--- a/packages/examples/vue/src/demos/column-selection/column-selection.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-selection/column-selection.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface TeamMember {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+  email: string;
+}
 
-export const columnSelectionHeaders: VueColumnDef[] = [
+export const columnSelectionHeaders: VueColumnDef<TeamMember>[] = [
   { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
   { accessor: "name", label: "Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
   { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
@@ -30,4 +38,4 @@ export const columnSelectionConfig = {
   headers: columnSelectionHeaders,
   rows: columnSelectionData,
   tableProps: { selectableColumns: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-sorting/ColumnSortingDemo.vue b/packages/examples/vue/src/demos/column-sorting/ColumnSortingDemo.vue
index 417d5f689..2e2804b6e 100644
--- a/packages/examples/vue/src/demos/column-sorting/ColumnSortingDemo.vue
+++ b/packages/examples/vue/src/demos/column-sorting/ColumnSortingDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="columnSortingConfig.headers"
     :rows="columnSortingConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     initial-sort-column="age"
@@ -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 { columnSortingConfig } from "./column-sorting.demo-data";
+import type { FacultyMember } from "./column-sorting.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<FacultyMember>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/column-sorting/column-sorting.demo-data.ts b/packages/examples/vue/src/demos/column-sorting/column-sorting.demo-data.ts
index 093065b3d..2ff24243b 100644
--- a/packages/examples/vue/src/demos/column-sorting/column-sorting.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-sorting/column-sorting.demo-data.ts
@@ -1,9 +1,16 @@
 // Self-contained demo table setup for this example.
-import type { Row } from "@simple-table/vue";
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface FacultyMember {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+  startDate: string;
+}
 
-export const COLUMN_SORTING_DATA: Row[] = [
+export const COLUMN_SORTING_DATA: FacultyMember[] = [
   {
     id: 1,
     name: "Dr. Elena Vasquez",
@@ -103,7 +110,7 @@ export const COLUMN_SORTING_DATA: Row[] = [
 ];
 
 
-export const columnSortingHeaders: VueColumnDef[] = [
+export const columnSortingHeaders: VueColumnDef<FacultyMember>[] = [
   { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
   { accessor: "name", label: "Name", width: 180, sortable: true, type: "string" },
   { accessor: "age", label: "Age", width: 80, sortable: true, type: "number" },
@@ -141,3 +148,4 @@ export const columnSortingConfig = {
   headers: columnSortingHeaders,
   rows: COLUMN_SORTING_DATA,
 };
+
diff --git a/packages/examples/vue/src/demos/column-visibility/ColumnVisibilityDemo.vue b/packages/examples/vue/src/demos/column-visibility/ColumnVisibilityDemo.vue
index b9b6f87fa..16b030e73 100644
--- a/packages/examples/vue/src/demos/column-visibility/ColumnVisibilityDemo.vue
+++ b/packages/examples/vue/src/demos/column-visibility/ColumnVisibilityDemo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import {SimpleTable} from "@simple-table/vue";import type { ColumnVisibilityState, Theme } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { ColumnVisibilityState, Theme, GetRowIdParams } from "@simple-table/vue";
 import MarketingColumnEditorRow from "./MarketingColumnEditorRow.vue";
 import {
   columnVisibilityConfig,
@@ -7,6 +8,7 @@ import {
   loadColumnVisibilityDemoSaved,
   saveColumnVisibilityDemoState,
 } from "./column-visibility.demo-data";
+import type { VisibilityEmployee } from "./column-visibility.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -20,6 +22,8 @@ const columnEditorConfig = {
   rowRenderer: MarketingColumnEditorRow,
 };
 
+const getRowId = ({ row }: GetRowIdParams<VisibilityEmployee>) => row.id;
+
 function onColumnVisibilityChange(state: ColumnVisibilityState) {
   saveColumnVisibilityDemoState(state);
 }
@@ -29,6 +33,7 @@ function onColumnVisibilityChange(state: ColumnVisibilityState) {
   <SimpleTable
     :columns="columns"
     :rows="columnVisibilityConfig.rows"
+    :get-row-id="getRowId"
     :enable-column-editor="columnVisibilityConfig.tableProps.enableColumnEditor"
     :enable-column-editor-init-open="columnVisibilityConfig.tableProps.enableColumnEditorInitOpen"
     :column-editor-config="columnEditorConfig"
diff --git a/packages/examples/vue/src/demos/column-visibility/column-visibility.demo-data.ts b/packages/examples/vue/src/demos/column-visibility/column-visibility.demo-data.ts
index 7ccb7e4c1..af555ff28 100644
--- a/packages/examples/vue/src/demos/column-visibility/column-visibility.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-visibility/column-visibility.demo-data.ts
@@ -1,5 +1,17 @@
 // Self-contained demo table setup for this example (aligned with simple-table-marketing column visibility demo).
-import type { ColumnVisibilityState, VueColumnDef, Row } from "@simple-table/vue";
+import type { ColumnVisibilityState, VueColumnDef } from "@simple-table/vue";
+
+export interface VisibilityEmployee {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  role: string;
+  department: string;
+  location: string;
+  startDate: string;
+}
 
 export const COLUMN_VISIBILITY_DEMO_STORAGE_KEY = "columnVisibilityDemo";
 
@@ -22,7 +34,7 @@ export function saveColumnVisibilityDemoState(state: ColumnVisibilityState): voi
   }
 }
 
-export const columnVisibilityData: Row[] = [
+export const columnVisibilityData: VisibilityEmployee[] = [
   { id: 1, firstName: "Alice", lastName: "Johnson", email: "alice@example.com", phone: "555-0101", role: "Engineer", department: "Engineering", location: "NYC", startDate: "2021-03-15" },
   { id: 2, firstName: "Bob", lastName: "Martinez", email: "bob@example.com", phone: "555-0102", role: "Designer", department: "Design", location: "LA", startDate: "2022-07-22" },
   { id: 3, firstName: "Clara", lastName: "Chen", email: "clara@example.com", phone: "555-0103", role: "PM", department: "Product", location: "SF", startDate: "2020-01-10" },
@@ -33,7 +45,7 @@ export const columnVisibilityData: Row[] = [
   { id: 8, firstName: "Henry", lastName: "Patel", email: "henry@example.com", phone: "555-0108", role: "Lead", department: "Engineering", location: "DEN", startDate: "2018-05-20" },
 ];
 
-export const columnVisibilityHeaders: VueColumnDef[] = [
+export const columnVisibilityHeaders: VueColumnDef<VisibilityEmployee>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "firstName", label: "First Name", width: 120, type: "string" },
   { accessor: "lastName", label: "Last Name", width: 120, type: "string" },
@@ -51,9 +63,10 @@ export const columnVisibilityHeaders: VueColumnDef[] = [
   },
 ];
 
+/** Applies saved visibility + marketing-style defaults (email hidden when unset). */
 export function getColumnVisibilityDemoHeaders(
   savedVisibility: ColumnVisibilityState = loadColumnVisibilityDemoSaved(),
-): VueColumnDef[] {
+): VueColumnDef<VisibilityEmployee>[] {
   return columnVisibilityHeaders.map((header) => ({
     ...header,
     hide:
@@ -67,12 +80,12 @@ export const columnVisibilityConfig = {
   headers: columnVisibilityHeaders,
   rows: columnVisibilityData,
   tableProps: {
-    enableColumnEditor: true as const,
-    enableColumnEditorInitOpen: true as const,
+    enableColumnEditor: true,
+    enableColumnEditorInitOpen: true,
     columnEditorConfig: {
       text: "Manage Columns",
       searchEnabled: true,
       searchPlaceholder: "Search columns…",
     },
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/column-width/ColumnWidthDemo.vue b/packages/examples/vue/src/demos/column-width/ColumnWidthDemo.vue
index 86f1238fc..cc4f5414a 100644
--- a/packages/examples/vue/src/demos/column-width/ColumnWidthDemo.vue
+++ b/packages/examples/vue/src/demos/column-width/ColumnWidthDemo.vue
@@ -5,20 +5,25 @@
     :columns="columnWidthConfig.headers"
     :height="height"
     :rows="columnWidthConfig.rows"
+    :get-row-id="getRowId"
     :theme="theme"
   />
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
-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 { columnWidthConfig } from "./column-width.demo-data";
+import type { StartupEmployee } from "./column-width.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
+const getRowId = ({ row }: GetRowIdParams<StartupEmployee>) => row.id;
+
 const isMobile = ref(false);
 
 function checkMobile() {
diff --git a/packages/examples/vue/src/demos/column-width/column-width.demo-data.ts b/packages/examples/vue/src/demos/column-width/column-width.demo-data.ts
index 0144009f0..58a9e5e1a 100644
--- a/packages/examples/vue/src/demos/column-width/column-width.demo-data.ts
+++ b/packages/examples/vue/src/demos/column-width/column-width.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface StartupEmployee {
+  id: number;
+  name: string;
+  email: string;
+  age: number;
+  department: string;
+  salary: string;
+}
 
-export const columnWidthHeaders: VueColumnDef[] = [
+export const columnWidthHeaders: VueColumnDef<StartupEmployee>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "Name", width: "1fr", minWidth: 120, type: "string" },
   { accessor: "email", label: "Email", width: "1fr", minWidth: 180, type: "string" },
@@ -31,4 +39,4 @@ export const columnWidthConfig = {
   headers: columnWidthHeaders,
   rows: columnWidthData,
   tableProps: { columnResizing: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/crm/CRMDemo.vue b/packages/examples/vue/src/demos/crm/CRMDemo.vue
index 8bb243d23..e51900ca8 100644
--- a/packages/examples/vue/src/demos/crm/CRMDemo.vue
+++ b/packages/examples/vue/src/demos/crm/CRMDemo.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref, computed, h, defineComponent } from "vue";
-import type { Component } from "vue";
+import { ref, computed, h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { VueColumnDef, CellChangeProps, CellRendererProps, FooterRendererProps } from "@simple-table/vue";
+import type {
+  VueColumnDef,
+  CellChangeProps,
+  CellRendererProps,
+  FooterRendererProps,
+  GetRowIdParams,
+  VueFooterRenderer,
+} from "@simple-table/vue";
 import {
   crmData,
   CRM_THEME_COLORS_LIGHT,
@@ -32,322 +38,251 @@ const rowsPerPage = ref(100);
 
 type CrmColors = typeof CRM_THEME_COLORS_LIGHT;
 
-function makeContactCell(colors: CrmColors): Component {
-  return defineComponent({
-    name: "CrmContactCell",
-    setup(raw) {
-      return () => {
-        const p = raw as unknown as CellRendererProps;
-        const d = p.row as unknown as CRMLead;
-        const initials = d.name
-          .split(" ")
-          .map((n) => n[0])
-          .join("")
-          .toUpperCase();
-        return h("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, [
-          h(
-            "div",
-            {
-              style: {
-                width: "40px",
-                height: "40px",
-                borderRadius: "50%",
-                background: "linear-gradient(to right, oklch(75% .183 55.934), oklch(70.4% .191 22.216))",
-                color: "white",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: "12px",
-                fontWeight: "600",
-                flexShrink: "0",
-              },
-            },
-            initials,
-          ),
-          h("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, [
-            h(
-              "span",
-              {
-                style: {
-                  cursor: "pointer",
-                  fontSize: "14px",
-                  fontWeight: "600",
-                  color: colors.link,
-                },
-              },
-              d.name,
-            ),
-            h("div", { style: { fontSize: "12px", color: colors.textSecondary } }, d.title),
-            h("div", { style: { fontSize: "12px", color: colors.textSecondary } }, [
-              h("span", { style: { fontSize: "12px", color: colors.textTertiary } }, "@"),
-              ` ${d.company}`,
-            ]),
-          ]),
-        ]);
-      };
-    },
-  });
-}
+const getRowId = ({ row }: GetRowIdParams<CRMLead>) => row.id;
 
-function makeSignalCell(colors: CrmColors): Component {
-  return defineComponent({
-    name: "CrmSignalCell",
-    setup(raw) {
-      return () => {
-        const p = raw as unknown as CellRendererProps;
-        const d = p.row as unknown as CRMLead;
-        return h("div", [
-          h("div", { style: { color: colors.textSecondary, marginBottom: "4px", fontSize: "0.875rem" } }, [
-            "🧠 Just engaged with a ",
-            h(
-              "a",
-              {
-                href: "#",
-                style: { color: "#0077b5", textDecoration: "underline", cursor: "pointer" },
-                onClick: (e: MouseEvent) => e.preventDefault(),
-              },
-              "post",
-            ),
-          ]),
-          h("div", { style: { fontSize: "12px", color: colors.textTertiary } }, [
-            h("span", { style: { fontWeight: "600" } }, "Keyword:"),
-            ` ${d.signal}`,
-          ]),
-        ]);
-      };
-    },
-  });
-}
-
-function makeAiScoreCell(): Component {
-  return defineComponent({
-    name: "CrmAiScoreCell",
-    setup(raw) {
-      return () => {
-        const p = raw as unknown as CellRendererProps;
-        const d = p.row as unknown as CRMLead;
-        return h("div", { style: { fontSize: "0.875rem" } }, "🔥".repeat(d.aiScore));
-      };
-    },
-  });
-}
-
-function makeEmailCell(colors: CrmColors): Component {
-  return defineComponent({
-    name: "CrmEmailCell",
-    setup() {
-      return () => h(CrmEmailEnrich, { colors });
-    },
-  });
-}
-
-function makeTimeAgoCell(colors: CrmColors): Component {
-  return defineComponent({
-    name: "CrmTimeAgoCell",
-    setup(raw) {
-      return () => {
-        const p = raw as unknown as CellRendererProps;
-        const d = p.row as unknown as CRMLead;
-        return h("div", { style: { fontSize: "13px", color: colors.textSecondary } }, d.timeAgo);
-      };
-    },
-  });
-}
-
-function makeListCell(colors: CrmColors): Component {
-  return defineComponent({
-    name: "CrmListCell",
-    setup(raw) {
-      return () => {
-        const p = raw as unknown as CellRendererProps;
-        const d = p.row as unknown as CRMLead;
-        return h(
-          "a",
+function makeContactCell(colors: CrmColors) {
+  return ({ row }: CellRendererProps<CRMLead>) => {
+    const initials = row.name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase();
+    return h("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, [
+      h(
+        "div",
+        {
+          style: {
+            width: "40px",
+            height: "40px",
+            borderRadius: "50%",
+            background: "linear-gradient(to right, oklch(75% .183 55.934), oklch(70.4% .191 22.216))",
+            color: "white",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "12px",
+            fontWeight: "600",
+            flexShrink: "0",
+          },
+        },
+        initials,
+      ),
+      h("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, [
+        h(
+          "span",
           {
-            href: "#",
             style: {
               cursor: "pointer",
-              fontSize: "0.875rem",
-              color: colors.link,
-              textDecoration: "none",
+              fontSize: "14px",
               fontWeight: "600",
+              color: colors.link,
             },
-            onClick: (e: MouseEvent) => e.preventDefault(),
           },
-          d.list,
-        );
-      };
-    },
-  });
+          row.name,
+        ),
+        h("div", { style: { fontSize: "12px", color: colors.textSecondary } }, row.title),
+        h("div", { style: { fontSize: "12px", color: colors.textSecondary } }, [
+          h("span", { style: { fontSize: "12px", color: colors.textTertiary } }, "@"),
+          ` ${row.company}`,
+        ]),
+      ]),
+    ]);
+  };
 }
 
-function makeFitCell(colors: CrmColors): Component {
-  return defineComponent({
-    name: "CrmFitCell",
-    setup() {
-      return () => h(CrmFitButtons, { colors });
-    },
-  });
-}
-
-function makeContactNowCell(colors: CrmColors): Component {
-  return defineComponent({
-    name: "CrmContactNowCell",
-    setup() {
-      return () =>
+function makeSignalCell(colors: CrmColors) {
+  return ({ row }: CellRendererProps<CRMLead>) =>
+    h("div", [
+      h("div", { style: { color: colors.textSecondary, marginBottom: "4px", fontSize: "0.875rem" } }, [
+        "🧠 Just engaged with a ",
         h(
           "a",
           {
             href: "#",
-            style: {
-              cursor: "pointer",
-              fontSize: "0.875rem",
-              color: colors.link,
-              textDecoration: "none",
-              fontWeight: "600",
-            },
+            style: { color: "#0077b5", textDecoration: "underline", cursor: "pointer" },
             onClick: (e: MouseEvent) => e.preventDefault(),
           },
-          "Contact Now",
-        );
-    },
-  });
+          "post",
+        ),
+      ]),
+      h("div", { style: { fontSize: "12px", color: colors.textTertiary } }, [
+        h("span", { style: { fontWeight: "600" } }, "Keyword:"),
+        ` ${row.signal}`,
+      ]),
+    ]);
 }
 
-const CrmFooter = defineComponent({
-  name: "CrmFooter",
-  props: {
-    currentPage: { type: Number, required: true },
-    endRow: { type: Number, required: true },
-    hasNextPage: { type: Boolean, required: true },
-    hasPrevPage: { type: Boolean, required: true },
-    onNextPage: { type: Function, required: true },
-    onPageChange: { type: Function, required: true },
-    onPrevPage: { type: Function, required: true },
-    rowsPerPage: { type: Number, required: true },
-    startRow: { type: Number, required: true },
-    totalPages: { type: Number, required: true },
-    totalRows: { type: Number, required: true },
-  },
-  setup(footerProps) {
-    return () => {
-      const c = isDark.value ? CRM_FOOTER_COLORS_DARK : CRM_FOOTER_COLORS_LIGHT;
-      const fp = footerProps as unknown as FooterRendererProps;
-      const visiblePages = generateVisiblePages(fp.currentPage, fp.totalPages);
+function makeAiScoreCell() {
+  return ({ row }: CellRendererProps<CRMLead>) =>
+    h("div", { style: { fontSize: "0.875rem" } }, "🔥".repeat(row.aiScore));
+}
 
-      const makePageBtn = (
-        label: string,
-        onClick: () => void,
-        disabled: boolean,
-        active: boolean,
-        extraStyle?: Record<string, string>,
-      ) =>
-        h("button", {
-          type: "button",
-          disabled,
-          style: {
-            display: "inline-flex",
-            alignItems: "center",
-            padding: label.length > 1 ? "8px 16px" : "8px",
-            border: `1px solid ${c.buttonBorder}`,
-            backgroundColor: active ? c.activeBg : c.buttonBg,
-            fontSize: "14px",
-            fontWeight: "500",
-            color: active ? c.activeText : disabled ? c.buttonText : c.text,
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? "0.5" : "1",
-            ...extraStyle,
-          },
-          onClick: disabled ? undefined : onClick,
-        }, label);
+function makeEmailCell(colors: CrmColors) {
+  return () => h(CrmEmailEnrich, { colors });
+}
 
-      const perPageOptions = [25, 50, 100, 200, 10000] as const;
+function makeTimeAgoCell(colors: CrmColors) {
+  return ({ row }: CellRendererProps<CRMLead>) =>
+    h("div", { style: { fontSize: "13px", color: colors.textSecondary } }, row.timeAgo);
+}
 
-      return h(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "12px 16px",
-            borderTop: `1px solid ${c.border}`,
-            backgroundColor: c.bg,
-          },
+function makeListCell(colors: CrmColors) {
+  return ({ row }: CellRendererProps<CRMLead>) =>
+    h(
+      "a",
+      {
+        href: "#",
+        style: {
+          cursor: "pointer",
+          fontSize: "0.875rem",
+          color: colors.link,
+          textDecoration: "none",
+          fontWeight: "600",
         },
-        [
-          h("p", { style: { fontSize: "14px", color: c.text, margin: "0" } }, [
-            "Showing ",
-            h("span", { style: { fontWeight: "500" } }, String(fp.startRow)),
-            " to ",
-            h("span", { style: { fontWeight: "500" } }, String(fp.endRow)),
-            " of ",
-            h("span", { style: { fontWeight: "500" } }, String(fp.totalRows)),
-            " results",
-          ]),
-          h("div", { style: { display: "flex", alignItems: "center", gap: "16px" } }, [
-            h("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, [
-              h("label", { style: { fontSize: "14px", color: c.text } }, "Show:"),
-              h(
-                "select",
-                {
-                  style: {
-                    border: `1px solid ${c.inputBorder}`,
-                    borderRadius: "6px",
-                    padding: "4px 8px",
-                    fontSize: "14px",
-                    backgroundColor: c.inputBg,
-                    color: c.text,
-                    cursor: "pointer",
-                  },
-                  value: rowsPerPage.value,
-                  onChange: (e: Event) => {
-                    const v = parseInt((e.target as HTMLSelectElement).value, 10);
-                    rowsPerPage.value = v;
-                    fp.onPageChange(1);
-                  },
-                },
-                perPageOptions.map((opt) =>
-                  h("option", { value: String(opt) }, opt === 10000 ? "all" : String(opt)),
-                ),
-              ),
-              h("span", { style: { fontSize: "14px", color: c.text } }, "per page"),
-            ]),
-            h(
-              "nav",
-              {
-                style: {
-                  display: "inline-flex",
-                  borderRadius: "6px",
-                  boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
-                },
+        onClick: (e: MouseEvent) => e.preventDefault(),
+      },
+      row.list,
+    );
+}
+
+function makeFitCell(colors: CrmColors) {
+  return () => h(CrmFitButtons, { colors });
+}
+
+function makeContactNowCell(colors: CrmColors) {
+  return () =>
+    h(
+      "a",
+      {
+        href: "#",
+        style: {
+          cursor: "pointer",
+          fontSize: "0.875rem",
+          color: colors.link,
+          textDecoration: "none",
+          fontWeight: "600",
+        },
+        onClick: (e: MouseEvent) => e.preventDefault(),
+      },
+      "Contact Now",
+    );
+}
+
+const crmFooter: VueFooterRenderer = (fp: FooterRendererProps) => {
+  const c = isDark.value ? CRM_FOOTER_COLORS_DARK : CRM_FOOTER_COLORS_LIGHT;
+  const visiblePages = generateVisiblePages(fp.currentPage, fp.totalPages);
+
+  const makePageBtn = (
+    label: string,
+    onClick: () => void,
+    disabled: boolean,
+    active: boolean,
+    extraStyle?: Record<string, string>,
+  ) =>
+    h("button", {
+      type: "button",
+      disabled,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: label.length > 1 ? "8px 16px" : "8px",
+        border: `1px solid ${c.buttonBorder}`,
+        backgroundColor: active ? c.activeBg : c.buttonBg,
+        fontSize: "14px",
+        fontWeight: "500",
+        color: active ? c.activeText : disabled ? c.buttonText : c.text,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? "0.5" : "1",
+        ...extraStyle,
+      },
+      onClick: disabled ? undefined : onClick,
+    }, label);
+
+  const perPageOptions = [25, 50, 100, 200, 10000] as const;
+
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 16px",
+        borderTop: `1px solid ${c.border}`,
+        backgroundColor: c.bg,
+      },
+    },
+    [
+      h("p", { style: { fontSize: "14px", color: c.text, margin: "0" } }, [
+        "Showing ",
+        h("span", { style: { fontWeight: "500" } }, String(fp.startRow)),
+        " to ",
+        h("span", { style: { fontWeight: "500" } }, String(fp.endRow)),
+        " of ",
+        h("span", { style: { fontWeight: "500" } }, String(fp.totalRows)),
+        " results",
+      ]),
+      h("div", { style: { display: "flex", alignItems: "center", gap: "16px" } }, [
+        h("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, [
+          h("label", { style: { fontSize: "14px", color: c.text } }, "Show:"),
+          h(
+            "select",
+            {
+              style: {
+                border: `1px solid ${c.inputBorder}`,
+                borderRadius: "6px",
+                padding: "4px 8px",
+                fontSize: "14px",
+                backgroundColor: c.inputBg,
+                color: c.text,
+                cursor: "pointer",
+              },
+              value: rowsPerPage.value,
+              onChange: (e: Event) => {
+                const v = parseInt((e.target as HTMLSelectElement).value, 10);
+                rowsPerPage.value = v;
+                fp.onPageChange(1);
               },
-              [
-                makePageBtn("‹", () => fp.onPrevPage(), !fp.hasPrevPage, false, {
-                  borderTopLeftRadius: "6px",
-                  borderBottomLeftRadius: "6px",
-                }),
-                ...visiblePages.map((page, idx) =>
-                  makePageBtn(String(page), () => fp.onPageChange(page), false, page === fp.currentPage, {
-                    padding: "8px 16px",
-                    marginLeft: idx === 0 ? "0" : "-1px",
-                  }),
-                ),
-                makePageBtn("›", () => void fp.onNextPage(), !fp.hasNextPage, false, {
-                  borderTopRightRadius: "6px",
-                  borderBottomRightRadius: "6px",
-                  marginLeft: "-1px",
-                }),
-              ],
+            },
+            perPageOptions.map((opt) =>
+              h("option", { value: String(opt) }, opt === 10000 ? "all" : String(opt)),
             ),
-          ]),
-        ],
-      );
-    };
-  },
-});
+          ),
+          h("span", { style: { fontSize: "14px", color: c.text } }, "per page"),
+        ]),
+        h(
+          "nav",
+          {
+            style: {
+              display: "inline-flex",
+              borderRadius: "6px",
+              boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+            },
+          },
+          [
+            makePageBtn("‹", () => fp.onPrevPage(), !fp.hasPrevPage, false, {
+              borderTopLeftRadius: "6px",
+              borderBottomLeftRadius: "6px",
+            }),
+            ...visiblePages.map((page, idx) =>
+              makePageBtn(String(page), () => fp.onPageChange(page), false, page === fp.currentPage, {
+                padding: "8px 16px",
+                marginLeft: idx === 0 ? "0" : "-1px",
+              }),
+            ),
+            makePageBtn("›", () => void fp.onNextPage(), !fp.hasNextPage, false, {
+              borderTopRightRadius: "6px",
+              borderBottomRightRadius: "6px",
+              marginLeft: "-1px",
+            }),
+          ],
+        ),
+      ]),
+    ],
+  );
+};
 
-const headers = computed((): VueColumnDef[] => {
+const headers = computed((): VueColumnDef<CRMLead>[] => {
   const colors = isDark.value ? CRM_THEME_COLORS_DARK : CRM_THEME_COLORS_LIGHT;
 
   return [
@@ -450,7 +385,7 @@ const headers = computed((): VueColumnDef[] => {
   ];
 });
 
-const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps) => {
+const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps<CRMLead>) => {
   data.value = data.value.map((item) =>
     item.id === row.id ? { ...item, [accessor]: newValue } : item,
   );
@@ -461,6 +396,7 @@ const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps) => {
   <div :class="`custom-theme-container theme-${isDark ? 'custom-dark' : 'custom-light'}`">
     <SimpleTable
       :columns="headers"
+      :get-row-id="getRowId"
       :rows="data"
       :height="height"
       theme="custom"
@@ -470,7 +406,7 @@ const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps) => {
       :enable-pagination="true"
       :rows-per-page="rowsPerPage"
       :custom-theme="{ headerHeight: 48, rowHeight: 92 }"
-      :footer-renderer="CrmFooter"
+      :footer-renderer="crmFooter"
       @cell-edit="handleCellEdit"
     />
   </div>
diff --git a/packages/examples/vue/src/demos/crm/crm.demo-data.ts b/packages/examples/vue/src/demos/crm/crm.demo-data.ts
index 120a078c1..798b475ea 100644
--- a/packages/examples/vue/src/demos/crm/crm.demo-data.ts
+++ b/packages/examples/vue/src/demos/crm/crm.demo-data.ts
@@ -42,7 +42,7 @@ export function generateCRMData(count: number = 100): CRMLead[] {
 
 export const crmData = generateCRMData(100);
 
-export const crmHeaders: VueColumnDef[] = [
+export const crmHeaders: VueColumnDef<CRMLead>[] = [
   {
     accessor: "name",
     label: "CONTACT",
@@ -174,4 +174,4 @@ export const CRM_THEME_COLORS_DARK = {
 export const crmConfig = {
   headers: crmHeaders,
   rows: crmData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/crypto/CryptoDemo.vue b/packages/examples/vue/src/demos/crypto/CryptoDemo.vue
index 243807b30..5f54d6440 100644
--- a/packages/examples/vue/src/demos/crypto/CryptoDemo.vue
+++ b/packages/examples/vue/src/demos/crypto/CryptoDemo.vue
@@ -18,14 +18,15 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, TableAPI, Row, CellValue } from "@simple-table/vue";
+import type { Theme, TableAPI, CellValue, GetRowIdParams } from "@simple-table/vue";
 import { cryptoConfig } from "./crypto.demo-data";
+import type { CryptoCoin } from "./crypto.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { height: "70dvh" });
 
 const tableRef = ref<{ getAPI: () => TableAPI | null } | null>(null);
-const getRowId = ({ row }: { row: { id: string | number } }) => row.id;
+const getRowId = ({ row }: GetRowIdParams<CryptoCoin>) => row.id;
 let cleanupFn: (() => void) | null = null;
 
 const TICK_MS = 90;
@@ -42,9 +43,9 @@ function pickRandomSubset<T>(arr: T[], n: number): T[] {
   return copy.slice(0, Math.min(n, copy.length));
 }
 
-function applyRowPatch(api: TableAPI, rowId: string | number, patch: Partial<Row>) {
+function applyRowPatch(api: TableAPI, rowId: string | number, patch: Partial<CryptoCoin>) {
   for (const accessor of Object.keys(patch)) {
-    const newValue = patch[accessor];
+    const newValue = patch[accessor as keyof CryptoCoin];
     if (newValue === undefined) continue;
     api.updateData({ accessor, rowId, newValue: newValue as CellValue });
   }
@@ -67,7 +68,7 @@ function runTick(getApi: () => TableAPI | null | undefined) {
     const currentChange = (vr.row.change24h as number) ?? 0;
     const newChange = Math.round((currentChange + drift * 100) * 100) / 100;
     const history = vr.row.priceHistory as number[];
-    const patch: Partial<Row> = { price: newPriceRounded, change24h: newChange };
+    const patch: Partial<CryptoCoin> = { price: newPriceRounded, change24h: newChange };
     if (Array.isArray(history) && history.length > 0) {
       patch.priceHistory = [...history.slice(1), newPriceRounded];
     }
diff --git a/packages/examples/vue/src/demos/crypto/crypto.demo-data.ts b/packages/examples/vue/src/demos/crypto/crypto.demo-data.ts
index 1625dce79..7dcca4baa 100644
--- a/packages/examples/vue/src/demos/crypto/crypto.demo-data.ts
+++ b/packages/examples/vue/src/demos/crypto/crypto.demo-data.ts
@@ -1,8 +1,7 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
-import type { Row } from "@simple-table/vue";
 
-export interface CryptoCoin extends Row {
+export interface CryptoCoin {
   id: string;
   rank: number;
   name: string;
@@ -177,7 +176,7 @@ export function generateCryptoData(count = 200): CryptoCoin[] {
 const pct = ({ value }: { value: unknown }) =>
   typeof value === "number" ? formatSignedPercent(value) : "";
 
-export const cryptoHeaders: VueColumnDef[] = [
+export const cryptoHeaders: VueColumnDef<CryptoCoin>[] = [
   { accessor: "rank", label: "#", width: 56, align: "center", type: "number", pinned: "left", sortable: true, editable: false },
   {
     accessor: "name", label: "Asset", width: 200, align: "left", type: "string", pinned: "left", sortable: true, editable: false,
@@ -229,4 +228,4 @@ export const cryptoData = generateCryptoData(200);
 export const cryptoConfig = {
   headers: cryptoHeaders,
   rows: cryptoData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/csv-export/CsvExportDemo.vue b/packages/examples/vue/src/demos/csv-export/CsvExportDemo.vue
index 82ecb2ba8..cf7233b55 100644
--- a/packages/examples/vue/src/demos/csv-export/CsvExportDemo.vue
+++ b/packages/examples/vue/src/demos/csv-export/CsvExportDemo.vue
@@ -8,6 +8,7 @@
       ref="tableRef"
       :columns="headers"
       :rows="csvExportData"
+      :get-row-id="getRowId"
       :enable-column-editor="csvExportConfig.tableProps.enableColumnEditor"
       :selectable-cells="csvExportConfig.tableProps.selectableCells"
       :custom-theme="csvExportConfig.tableProps.customTheme"
@@ -20,8 +21,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, TableAPI, VueColumnDef } from "@simple-table/vue";
+import type { Theme, TableAPI, VueColumnDef, GetRowIdParams } from "@simple-table/vue";
 import { csvExportHeaders, csvExportData, csvExportConfig } from "./csv-export.demo-data";
+import type { CsvProduct } from "./csv-export.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -29,16 +31,17 @@ withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
 });
 
 const tableRef = ref<{ getAPI: () => TableAPI | null } | null>(null);
+const getRowId = ({ row }: GetRowIdParams<CsvProduct>) => row.id;
 
-const headers: VueColumnDef[] = csvExportHeaders.map((h) => {
-  if (h.accessor === "actions") {
+const headers: VueColumnDef<CsvProduct>[] = csvExportHeaders.map((col) => {
+  if (col.accessor === "actions") {
     return {
-      ...h,
+      ...col,
       cellRenderer: () =>
         `<button style="background:#3b82f6;color:white;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:bold">View</button>`,
     };
   }
-  return { ...h };
+  return { ...col };
 });
 
 function handleExport() {
diff --git a/packages/examples/vue/src/demos/csv-export/csv-export.demo-data.ts b/packages/examples/vue/src/demos/csv-export/csv-export.demo-data.ts
index 358d4175e..38be9b939 100644
--- a/packages/examples/vue/src/demos/csv-export/csv-export.demo-data.ts
+++ b/packages/examples/vue/src/demos/csv-export/csv-export.demo-data.ts
@@ -1,6 +1,17 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface CsvProduct {
+  id: string;
+  sku: string;
+  product: string;
+  category: string;
+  price: number;
+  stock: number;
+  sold: number;
+  revenue: number;
+  actions: string;
+}
 
 const CATEGORY_CODES: Record<string, string> = {
   electronics: "ELEC",
@@ -24,7 +35,7 @@ export const csvExportData = [
   { id: "db-4003", sku: "PRD-4003", product: "Desk Lamp LED", category: "Appliances", price: 44.99, stock: 201, sold: 198, revenue: 8908.02, actions: "" },
 ];
 
-export const csvExportHeaders: VueColumnDef[] = [
+export const csvExportHeaders: VueColumnDef<CsvProduct>[] = [
   { accessor: "id", label: "Internal ID", width: 80, type: "string", excludeFromRender: true },
   { accessor: "sku", label: "SKU", width: 100, sortable: true, type: "string" },
   { accessor: "product", label: "Product Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
@@ -73,4 +84,4 @@ export const csvExportConfig = {
   headers: csvExportHeaders,
   rows: csvExportData,
   tableProps: { enableColumnEditor: true, selectableCells: true, customTheme: { rowHeight: 32 } },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/custom-icons/CustomIconsDemo.vue b/packages/examples/vue/src/demos/custom-icons/CustomIconsDemo.vue
index eaca20db5..0a63fa01f 100644
--- a/packages/examples/vue/src/demos/custom-icons/CustomIconsDemo.vue
+++ b/packages/examples/vue/src/demos/custom-icons/CustomIconsDemo.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueIconsConfig } from "@simple-table/vue";
+import type { Theme, VueIconsConfig, GetRowIdParams } from "@simple-table/vue";
 import { customIconsConfig } from "./custom-icons.demo-data";
+import type { SoftwareRelease } from "./custom-icons.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -26,6 +27,8 @@ function iconSvg(pathD: string, color: string, strokeWidth = "2.5") {
   );
 }
 
+const getRowId = ({ row }: GetRowIdParams<SoftwareRelease>) => row.id;
+
 const icons: VueIconsConfig = {
   sortUp: iconSvg("M12 19V5M5 12l7-7 7 7", "#6366f1"),
   sortDown: iconSvg("M12 5v14M19 12l-7 7-7-7", "#6366f1"),
@@ -40,6 +43,7 @@ const icons: VueIconsConfig = {
   <SimpleTable
     :columns="customIconsConfig.headers"
     :rows="customIconsConfig.rows"
+    :get-row-id="getRowId"
     :icons="icons"
     :height="props.height"
     :theme="props.theme"
diff --git a/packages/examples/vue/src/demos/custom-icons/custom-icons.demo-data.ts b/packages/examples/vue/src/demos/custom-icons/custom-icons.demo-data.ts
index 77a5084cc..6d0867448 100644
--- a/packages/examples/vue/src/demos/custom-icons/custom-icons.demo-data.ts
+++ b/packages/examples/vue/src/demos/custom-icons/custom-icons.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface SoftwareRelease {
+  id: number;
+  name: string;
+  version: string;
+  status: string;
+  downloads: number;
+  date: string;
+}
 
-export const customIconsData: Row[] = [
+export const customIconsData: SoftwareRelease[] = [
   { id: 1, name: "Alpha Release", version: "1.0.0", status: "released", downloads: 15420, date: "2024-01-15" },
   { id: 2, name: "Beta Release", version: "1.1.0", status: "released", downloads: 28300, date: "2024-03-22" },
   { id: 3, name: "Hotfix", version: "1.1.1", status: "released", downloads: 31050, date: "2024-04-05" },
@@ -13,7 +21,7 @@ export const customIconsData: Row[] = [
   { id: 8, name: "Next Release", version: "2.2.0", status: "planned", downloads: 0, date: "2025-01-20" },
 ];
 
-export const customIconsHeaders: VueColumnDef[] = [
+export const customIconsHeaders: VueColumnDef<SoftwareRelease>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number", sortable: true },
   { accessor: "name", label: "Release", width: 170, type: "string", sortable: true },
   { accessor: "version", label: "Version", width: 100, type: "string", sortable: true },
@@ -39,4 +47,4 @@ export const customIconsHeaders: VueColumnDef[] = [
 export const customIconsConfig = {
   headers: customIconsHeaders,
   rows: customIconsData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/custom-theme/CustomThemeDemo.vue b/packages/examples/vue/src/demos/custom-theme/CustomThemeDemo.vue
index a1f7df1fe..c8b389fee 100644
--- a/packages/examples/vue/src/demos/custom-theme/CustomThemeDemo.vue
+++ b/packages/examples/vue/src/demos/custom-theme/CustomThemeDemo.vue
@@ -1,9 +1,13 @@
 <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 { customThemeConfig } from "./custom-theme.demo-data";
+import type { ThemeContact } from "./custom-theme.demo-data";
 import "@simple-table/vue/styles.css";
 import "./custom-theme.css";
 
+const getRowId = ({ row }: GetRowIdParams<ThemeContact>) => row.id;
+
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
@@ -13,6 +17,7 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
   <SimpleTable
     :columns="customThemeConfig.headers"
     :rows="customThemeConfig.rows"
+    :get-row-id="getRowId"
     :theme="props.theme ?? 'custom'"
     :custom-theme="customThemeConfig.tableProps.customTheme"
     :column-resizing="true"
diff --git a/packages/examples/vue/src/demos/custom-theme/custom-theme.demo-data.ts b/packages/examples/vue/src/demos/custom-theme/custom-theme.demo-data.ts
index 67b3aeff7..f4ff587e6 100644
--- a/packages/examples/vue/src/demos/custom-theme/custom-theme.demo-data.ts
+++ b/packages/examples/vue/src/demos/custom-theme/custom-theme.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ThemeContact {
+  id: number;
+  name: string;
+  phone: string;
+  email: string;
+  city: string;
+  status: string;
+}
 
-export const customThemeData: Row[] = [
+export const customThemeData: ThemeContact[] = [
   { id: 1, name: "Alice Johnson", phone: "2125551234", email: "alice@corp.com", city: "New York", status: "active" },
   { id: 2, name: "Bob Martinez", phone: "3105559876", email: "bob@corp.com", city: "Los Angeles", status: "active" },
   { id: 3, name: "Clara Chen", phone: "4155553210", email: "clara@corp.com", city: "San Francisco", status: "inactive" },
@@ -20,7 +28,7 @@ function formatPhone(raw: string): string {
   return raw;
 }
 
-export const customThemeHeaders: VueColumnDef[] = [
+export const customThemeHeaders: VueColumnDef<ThemeContact>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "Name", width: 170, type: "string", sortable: true },
   {
@@ -39,10 +47,9 @@ export const customThemeConfig = {
   headers: customThemeHeaders,
   rows: customThemeData,
   tableProps: {
-    theme: "custom" as const,
     customTheme: {
       rowHeight: 40,
       headerHeight: 44,
     },
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/dynamic-nested-tables/DynamicNestedTablesDemo.vue b/packages/examples/vue/src/demos/dynamic-nested-tables/DynamicNestedTablesDemo.vue
index e74b3d117..930efa7a6 100644
--- a/packages/examples/vue/src/demos/dynamic-nested-tables/DynamicNestedTablesDemo.vue
+++ b/packages/examples/vue/src/demos/dynamic-nested-tables/DynamicNestedTablesDemo.vue
@@ -5,7 +5,7 @@
     :expand-all="dynamicNestedTablesConfig.tableProps.expandAll"
     :height="height"
     :row-grouping="dynamicNestedTablesConfig.tableProps.rowGrouping"
-    :get-row-id="dynamicNestedTablesConfig.tableProps.getRowId"
+    :get-row-id="getRowId"
     :rows="rows"
     :on-row-group-expand="handleCompanyExpand"
     :theme="theme"
@@ -14,7 +14,8 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, OnRowGroupExpandProps } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, OnRowGroupExpandProps, GetRowIdParams } from "@simple-table/vue";
 import {
   dynamicNestedTablesConfig,
   dynamicNestedTablesData,
@@ -27,6 +28,8 @@ withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { heigh
 
 const rows = ref<DynamicCompany[]>([...dynamicNestedTablesData]);
 
+const getRowId = ({ row }: GetRowIdParams<DynamicCompany>) => row.id;
+
 async function handleCompanyExpand({
   row,
   groupingKey,
@@ -35,14 +38,13 @@ async function handleCompanyExpand({
   setLoading,
   setError,
   setEmpty,
-}: OnRowGroupExpandProps) {
+}: OnRowGroupExpandProps<DynamicCompany>) {
   if (!isExpanded) return;
   try {
     if (groupingKey === "divisions") {
-      const company = row as DynamicCompany;
-      if (company.divisions && company.divisions.length > 0) return;
+      if (row.divisions && row.divisions.length > 0) return;
       setLoading(true);
-      const divisions = await fetchDivisionsForCompany(company.id);
+      const divisions = await fetchDivisionsForCompany(row.id);
       if (divisions.length === 0) {
         setEmpty(true, "No divisions found for this company");
         return;
diff --git a/packages/examples/vue/src/demos/dynamic-nested-tables/dynamic-nested-tables.demo-data.ts b/packages/examples/vue/src/demos/dynamic-nested-tables/dynamic-nested-tables.demo-data.ts
index ac8ce208f..42489de5f 100644
--- a/packages/examples/vue/src/demos/dynamic-nested-tables/dynamic-nested-tables.demo-data.ts
+++ b/packages/examples/vue/src/demos/dynamic-nested-tables/dynamic-nested-tables.demo-data.ts
@@ -1,8 +1,7 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
-
-export interface DynamicCompany extends Row {
+export interface DynamicCompany {
   id: string;
   companyName: string;
   industry: string;
@@ -11,7 +10,7 @@ export interface DynamicCompany extends Row {
   divisions?: DynamicDivision[];
 }
 
-export interface DynamicDivision extends Row {
+export interface DynamicDivision {
   id: string;
   divisionName: string;
   revenue: string;
@@ -25,8 +24,22 @@ const simulateDelay = (ms: number) => new Promise((resolve) => setTimeout(resolv
 export const fetchDivisionsForCompany = async (companyId: string): Promise<DynamicDivision[]> => {
   await simulateDelay(800);
   const divisionCount = Math.floor(Math.random() * 3) + 2;
-  const divisionNames = ["Cloud Services", "AI Research", "Consumer Products", "Investment Banking", "Operations", "Engineering"];
-  const locations = ["San Francisco, CA", "New York, NY", "Boston, MA", "Seattle, WA", "Austin, TX", "Chicago, IL"];
+  const divisionNames = [
+    "Cloud Services",
+    "AI Research",
+    "Consumer Products",
+    "Investment Banking",
+    "Operations",
+    "Engineering",
+  ];
+  const locations = [
+    "San Francisco, CA",
+    "New York, NY",
+    "Boston, MA",
+    "Seattle, WA",
+    "Austin, TX",
+    "Chicago, IL",
+  ];
 
   return Array.from({ length: divisionCount }, (_, i) => ({
     id: `${companyId}-div-${i}`,
@@ -39,24 +52,114 @@ export const fetchDivisionsForCompany = async (companyId: string): Promise<Dynam
 };
 
 export const dynamicNestedTablesData: DynamicCompany[] = [
-  { id: "comp-1", companyName: "TechCorp Global", industry: "Technology", revenue: "$250M", employees: 1200 },
-  { id: "comp-2", companyName: "FinanceHub Inc", industry: "Financial Services", revenue: "$180M", employees: 850 },
-  { id: "comp-3", companyName: "HealthTech Solutions", industry: "Healthcare", revenue: "$320M", employees: 1500 },
-  { id: "comp-4", companyName: "RetailMax Corporation", industry: "Retail", revenue: "$420M", employees: 2100 },
-  { id: "comp-5", companyName: "EnergyFlow Systems", industry: "Energy", revenue: "$560M", employees: 1800 },
-  { id: "comp-6", companyName: "MediaVision Studios", industry: "Entertainment", revenue: "$290M", employees: 950 },
-  { id: "comp-7", companyName: "AutoDrive Industries", industry: "Automotive", revenue: "$680M", employees: 3200 },
-  { id: "comp-8", companyName: "CloudNet Services", industry: "Technology", revenue: "$195M", employees: 720 },
-  { id: "comp-9", companyName: "HealthCare Solutions", industry: "Healthcare", revenue: "$380M", employees: 1300 },
-  { id: "comp-10", companyName: "EducationTech Innovations", industry: "Education", revenue: "$240M", employees: 1050 },
-  { id: "comp-11", companyName: "EnergyFlow Systems", industry: "Energy", revenue: "$560M", employees: 1800 },
-  { id: "comp-12", companyName: "EnergyFlow Systems", industry: "Energy", revenue: "$560M", employees: 1800 },
-  { id: "comp-13", companyName: "EnergyFlow Systems", industry: "Energy", revenue: "$560M", employees: 1800 },
-  { id: "comp-14", companyName: "EnergyFlow Systems", industry: "Energy", revenue: "$560M", employees: 1800 },
-  { id: "comp-15", companyName: "EnergyFlow Systems", industry: "Energy", revenue: "$560M", employees: 1800 },
+  {
+    id: "comp-1",
+    companyName: "TechCorp Global",
+    industry: "Technology",
+    revenue: "$250M",
+    employees: 1200,
+  },
+  {
+    id: "comp-2",
+    companyName: "FinanceHub Inc",
+    industry: "Financial Services",
+    revenue: "$180M",
+    employees: 850,
+  },
+  {
+    id: "comp-3",
+    companyName: "HealthTech Solutions",
+    industry: "Healthcare",
+    revenue: "$320M",
+    employees: 1500,
+  },
+  {
+    id: "comp-4",
+    companyName: "RetailMax Corporation",
+    industry: "Retail",
+    revenue: "$420M",
+    employees: 2100,
+  },
+  {
+    id: "comp-5",
+    companyName: "EnergyFlow Systems",
+    industry: "Energy",
+    revenue: "$560M",
+    employees: 1800,
+  },
+  {
+    id: "comp-6",
+    companyName: "MediaVision Studios",
+    industry: "Entertainment",
+    revenue: "$290M",
+    employees: 950,
+  },
+  {
+    id: "comp-7",
+    companyName: "AutoDrive Industries",
+    industry: "Automotive",
+    revenue: "$680M",
+    employees: 3200,
+  },
+  {
+    id: "comp-8",
+    companyName: "CloudNet Services",
+    industry: "Technology",
+    revenue: "$195M",
+    employees: 720,
+  },
+  {
+    id: "comp-9",
+    companyName: "HealthCare Solutions",
+    industry: "Healthcare",
+    revenue: "$380M",
+    employees: 1300,
+  },
+  {
+    id: "comp-10",
+    companyName: "EducationTech Innovations",
+    industry: "Education",
+    revenue: "$240M",
+    employees: 1050,
+  },
+  {
+    id: "comp-11",
+    companyName: "EnergyFlow Systems",
+    industry: "Energy",
+    revenue: "$560M",
+    employees: 1800,
+  },
+  {
+    id: "comp-12",
+    companyName: "EnergyFlow Systems",
+    industry: "Energy",
+    revenue: "$560M",
+    employees: 1800,
+  },
+  {
+    id: "comp-13",
+    companyName: "EnergyFlow Systems",
+    industry: "Energy",
+    revenue: "$560M",
+    employees: 1800,
+  },
+  {
+    id: "comp-14",
+    companyName: "EnergyFlow Systems",
+    industry: "Energy",
+    revenue: "$560M",
+    employees: 1800,
+  },
+  {
+    id: "comp-15",
+    companyName: "EnergyFlow Systems",
+    industry: "Energy",
+    revenue: "$560M",
+    employees: 1800,
+  },
 ];
 
-export const dynamicNestedTablesDivisionHeaders: VueColumnDef[] = [
+export const dynamicNestedTablesDivisionHeaders: VueColumnDef<DynamicDivision>[] = [
   { accessor: "divisionName", label: "Division", width: 200 },
   { accessor: "revenue", label: "Revenue", width: 120 },
   { accessor: "profitMargin", label: "Profit Margin", width: 130 },
@@ -64,7 +167,7 @@ export const dynamicNestedTablesDivisionHeaders: VueColumnDef[] = [
   { accessor: "location", label: "Location", width: 180 },
 ];
 
-export const dynamicNestedTablesCompanyHeaders: VueColumnDef[] = [
+export const dynamicNestedTablesCompanyHeaders: VueColumnDef<DynamicCompany>[] = [
   {
     accessor: "companyName",
     label: "Company",
@@ -85,9 +188,8 @@ export const dynamicNestedTablesConfig = {
   headers: dynamicNestedTablesCompanyHeaders,
   rows: dynamicNestedTablesData,
   tableProps: {
-    rowGrouping: ["divisions"] as string[],
-    getRowId: ({ row }: { row: Record<string, unknown> }) => row.id as string,
+    rowGrouping: ["divisions"],
     expandAll: false,
     autoExpandColumns: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/dynamic-row-loading/DynamicRowLoadingDemo.vue b/packages/examples/vue/src/demos/dynamic-row-loading/DynamicRowLoadingDemo.vue
index 32648e167..a2d0f9bfc 100644
--- a/packages/examples/vue/src/demos/dynamic-row-loading/DynamicRowLoadingDemo.vue
+++ b/packages/examples/vue/src/demos/dynamic-row-loading/DynamicRowLoadingDemo.vue
@@ -7,7 +7,7 @@
     :height="height"
     :on-row-group-expand="handleRowExpand"
     :row-grouping="dynamicRowLoadingConfig.tableProps.rowGrouping"
-    :get-row-id="dynamicRowLoadingConfig.tableProps.getRowId"
+    :get-row-id="getRowId"
     :rows="rows"
     :selectable-cells="dynamicRowLoadingConfig.tableProps.selectableCells"
     :theme="theme"
@@ -17,20 +17,23 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, OnRowGroupExpandProps } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, OnRowGroupExpandProps, GetRowIdParams } from "@simple-table/vue";
 import {
   dynamicRowLoadingConfig,
   generateInitialRegions,
   fetchStoresForRegion,
   fetchProductsForStore,
 } from "./dynamic-row-loading.demo-data";
-import type { DynamicRegion, DynamicStore } from "./dynamic-row-loading.demo-data";
+import type { DynamicRegion, DynamicTreeRow } from "./dynamic-row-loading.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { height: "400px" });
 
 const rows = ref<DynamicRegion[]>(generateInitialRegions());
 
+const getRowId = ({ row }: GetRowIdParams<DynamicTreeRow>) => row.id;
+
 async function handleRowExpand({
   row,
   depth,
@@ -40,28 +43,31 @@ async function handleRowExpand({
   setError,
   setEmpty,
   rowIndexPath,
-}: OnRowGroupExpandProps) {
+}: OnRowGroupExpandProps<DynamicTreeRow>) {
   if (!isExpanded) return;
-  if (groupingKey && row[groupingKey] && (row[groupingKey] as unknown[]).length > 0) return;
+  if (groupingKey && row[groupingKey as keyof DynamicTreeRow] != null) {
+    const nested = row[groupingKey as keyof DynamicTreeRow];
+    if (Array.isArray(nested) && nested.length > 0) return;
+  }
 
   try {
-    if (depth === 0 && groupingKey === "stores") {
+    if (depth === 0 && groupingKey === "stores" && row.type === "region") {
       setLoading(true);
-      const stores = await fetchStoresForRegion((row as DynamicRegion).id);
+      const stores = await fetchStoresForRegion(row.id);
       setLoading(false);
       if (stores.length === 0) {
-        setEmpty(true, "No stores found");
+        setEmpty(true, "No stores found for this region");
         return;
       }
       const newRows = [...rows.value];
       newRows[rowIndexPath[0]].stores = stores;
       rows.value = newRows;
-    } else if (depth === 1 && groupingKey === "products") {
+    } else if (depth === 1 && groupingKey === "products" && row.type === "store") {
       setLoading(true);
-      const products = await fetchProductsForStore((row as DynamicStore).id);
+      const products = await fetchProductsForStore(row.id);
       setLoading(false);
       if (products.length === 0) {
-        setEmpty(true, "No products found");
+        setEmpty(true, "No products found for this store");
         return;
       }
       const newRows = [...rows.value];
diff --git a/packages/examples/vue/src/demos/dynamic-row-loading/dynamic-row-loading.demo-data.ts b/packages/examples/vue/src/demos/dynamic-row-loading/dynamic-row-loading.demo-data.ts
index 027eec0c0..a79a71412 100644
--- a/packages/examples/vue/src/demos/dynamic-row-loading/dynamic-row-loading.demo-data.ts
+++ b/packages/examples/vue/src/demos/dynamic-row-loading/dynamic-row-loading.demo-data.ts
@@ -1,8 +1,7 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
-
-export interface DynamicRegion extends Row {
+export interface DynamicRegion {
   id: string;
   name: string;
   type: "region";
@@ -14,7 +13,7 @@ export interface DynamicRegion extends Row {
   stores?: DynamicStore[];
 }
 
-export interface DynamicStore extends Row {
+export interface DynamicStore {
   id: string;
   name: string;
   type: "store";
@@ -26,7 +25,7 @@ export interface DynamicStore extends Row {
   products?: DynamicProduct[];
 }
 
-export interface DynamicProduct extends Row {
+export interface DynamicProduct {
   id: string;
   name: string;
   type: "product";
@@ -37,7 +36,10 @@ export interface DynamicProduct extends Row {
   lastUpdate: string;
 }
 
-export const dynamicRowLoadingHeaders: VueColumnDef[] = [
+/** Row union across grouping depths (region → store → product). */
+export type DynamicTreeRow = DynamicRegion | DynamicStore | DynamicProduct;
+
+export const dynamicRowLoadingHeaders: VueColumnDef<DynamicTreeRow>[] = [
   { accessor: "name", label: "Name", width: 280, expandable: true, type: "string", pinned: "left" },
   { accessor: "type", label: "Type", width: 100, type: "string" },
   {
@@ -130,7 +132,7 @@ const generateStoresForRegion = (regionId: string): DynamicStore[] => {
     return {
       id: storeId,
       name: STORE_NAMES[storeIndex % STORE_NAMES.length],
-      type: "store" as const,
+      type: "store",
       totalSales,
       totalRevenue: totalSales * avgPrice,
       avgRating: getRandomRating(storeId),
@@ -150,7 +152,7 @@ const generateProductsForStore = (storeId: string): DynamicProduct[] => {
     return {
       id: productId,
       name: PRODUCT_NAMES[(startIndex + i) % PRODUCT_NAMES.length],
-      type: "product" as const,
+      type: "product",
       totalSales,
       totalRevenue: totalSales * avgPrice,
       avgRating: getRandomRating(productId),
@@ -181,7 +183,7 @@ export const generateInitialRegions = (): DynamicRegion[] => {
     return {
       id: regionId,
       name,
-      type: "region" as const,
+      type: "region",
       totalSales,
       totalRevenue,
       activeStores: getRandomInt(regionId, 3, 4),
@@ -194,12 +196,11 @@ export const generateInitialRegions = (): DynamicRegion[] => {
 export const dynamicRowLoadingConfig = {
   headers: dynamicRowLoadingHeaders,
   tableProps: {
-    rowGrouping: ["stores", "products"] as string[],
-    getRowId: ({ row }: { row: Record<string, unknown> }) => row.id as string,
+    rowGrouping: ["stores", "products"],
     expandAll: false,
     columnResizing: true,
     selectableCells: true,
     oddEvenRowBackground: true,
     enableColumnEditor: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/empty-state/EmptyStateDemo.vue b/packages/examples/vue/src/demos/empty-state/EmptyStateDemo.vue
index 35bc108c2..8e5e56563 100644
--- a/packages/examples/vue/src/demos/empty-state/EmptyStateDemo.vue
+++ b/packages/examples/vue/src/demos/empty-state/EmptyStateDemo.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import { emptyStateConfig } from "./empty-state.demo-data";
+import type { EmptyEmployee } from "./empty-state.demo-data";
 import "@simple-table/vue/styles.css";
 
+const getRowId = ({ row }: GetRowIdParams<EmptyEmployee>) => row.id;
+
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
@@ -53,6 +56,7 @@ const tableEmptyStateRenderer = h(
   <SimpleTable
     :columns="emptyStateConfig.headers"
     :rows="emptyStateConfig.rows"
+    :get-row-id="getRowId"
     :table-empty-state-renderer="tableEmptyStateRenderer"
     :height="props.height"
     :theme="props.theme"
diff --git a/packages/examples/vue/src/demos/empty-state/empty-state.demo-data.ts b/packages/examples/vue/src/demos/empty-state/empty-state.demo-data.ts
index 2929c7617..e9d910810 100644
--- a/packages/examples/vue/src/demos/empty-state/empty-state.demo-data.ts
+++ b/packages/examples/vue/src/demos/empty-state/empty-state.demo-data.ts
@@ -1,10 +1,17 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface EmptyEmployee {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  department: string;
+}
 
-export const emptyStateData: Row[] = [];
+export const emptyStateData: EmptyEmployee[] = [];
 
-export const emptyStateHeaders: VueColumnDef[] = [
+export const emptyStateHeaders: VueColumnDef<EmptyEmployee>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "Name", width: 180, type: "string" },
   { accessor: "email", label: "Email", width: 220, type: "string" },
@@ -15,4 +22,4 @@ export const emptyStateHeaders: VueColumnDef[] = [
 export const emptyStateConfig = {
   headers: emptyStateHeaders,
   rows: emptyStateData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/external-filter/ExternalFilterDemo.vue b/packages/examples/vue/src/demos/external-filter/ExternalFilterDemo.vue
index e08f24958..67b2ab208 100644
--- a/packages/examples/vue/src/demos/external-filter/ExternalFilterDemo.vue
+++ b/packages/examples/vue/src/demos/external-filter/ExternalFilterDemo.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, TableFilterState } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, TableFilterState, GetRowIdParams } from "@simple-table/vue";
 import { externalFilterConfig, matchesFilter } from "./external-filter.demo-data";
+import type { FilterableEmployee } from "./external-filter.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -10,13 +12,15 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
 
 const filters = ref<TableFilterState>({});
 
+const getRowId = ({ row }: GetRowIdParams<FilterableEmployee>) => row.id;
+
 const filteredRows = computed(() => {
   const entries = Object.entries(filters.value);
   if (entries.length === 0) return externalFilterConfig.rows;
 
   return externalFilterConfig.rows.filter((row) =>
     entries.every(([accessor, filter]) =>
-      matchesFilter(row[accessor as keyof typeof row] as any, filter)
+      matchesFilter(row[accessor as keyof FilterableEmployee], filter)
     )
   );
 });
@@ -30,6 +34,7 @@ function handleFilterChange(newFilters: TableFilterState) {
   <SimpleTable
     :columns="externalFilterConfig.headers"
     :rows="filteredRows"
+    :get-row-id="getRowId"
     :external-filter-handling="true"
     :column-resizing="true"
     :height="props.height"
diff --git a/packages/examples/vue/src/demos/external-filter/external-filter.demo-data.ts b/packages/examples/vue/src/demos/external-filter/external-filter.demo-data.ts
index 1bb2bf63e..ae27fcaa9 100644
--- a/packages/examples/vue/src/demos/external-filter/external-filter.demo-data.ts
+++ b/packages/examples/vue/src/demos/external-filter/external-filter.demo-data.ts
@@ -1,6 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef, TableFilterState } from "@simple-table/vue";
 
+export interface FilterableEmployee {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  salary: number;
+  department: string;
+  active: boolean;
+  location: string;
+}
 
 type CellValue = string | number | boolean | null | undefined;
 
@@ -75,7 +85,7 @@ const LOCATION_OPTIONS = [
   { label: "Moscow", value: "Moscow" },
 ];
 
-export const externalFilterData = [
+export const externalFilterData: FilterableEmployee[] = [
   { id: 1, name: "Dr. Elena Vasquez", age: 42, email: "elena.vasquez@techcorp.com", salary: 145000, department: "AI Research", active: true, location: "San Francisco" },
   { id: 2, name: "Kai Tanaka", age: 29, email: "k.tanaka@techcorp.com", salary: 95000, department: "UX Design", active: true, location: "Tokyo" },
   { id: 3, name: "Amara Okafor", age: 35, email: "amara.okafor@techcorp.com", salary: 125000, department: "DevOps", active: false, location: "Lagos" },
@@ -90,7 +100,7 @@ export const externalFilterData = [
   { id: 12, name: "Dmitri Volkov", age: 39, email: "dmitri.volkov@techcorp.com", salary: 135000, department: "DevOps", active: true, location: "Moscow" },
 ];
 
-export const externalFilterHeaders: VueColumnDef[] = [
+export const externalFilterHeaders: VueColumnDef<FilterableEmployee>[] = [
   { accessor: "name", label: "Name", width: "1fr", minWidth: 120, filterable: true, type: "string" },
   { accessor: "age", label: "Age", width: 120, filterable: true, type: "number" },
   {
@@ -125,4 +135,4 @@ export const externalFilterConfig = {
   headers: externalFilterHeaders,
   rows: externalFilterData,
   tableProps: { externalFilterHandling: true, columnResizing: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/external-sort/ExternalSortDemo.vue b/packages/examples/vue/src/demos/external-sort/ExternalSortDemo.vue
index f0c07dc44..20e8a07b2 100644
--- a/packages/examples/vue/src/demos/external-sort/ExternalSortDemo.vue
+++ b/packages/examples/vue/src/demos/external-sort/ExternalSortDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="externalSortConfig.headers"
     :rows="sortedRows"
+    :get-row-id="getRowId"
     :external-sort-handling="true"
     :column-resizing="externalSortConfig.tableProps.columnResizing"
     :height="height"
@@ -12,8 +13,10 @@
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, SortColumn } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, SortColumn, GetRowIdParams } from "@simple-table/vue";
 import { externalSortConfig } from "./external-sort.demo-data";
+import type { SortableEmployee } from "./external-sort.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -22,12 +25,14 @@ withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
 
 const sortConfig = ref<SortColumn | null>(null);
 
+const getRowId = ({ row }: GetRowIdParams<SortableEmployee>) => row.id;
+
 const sortedRows = computed(() => {
   const data = [...externalSortConfig.rows];
   const sort = sortConfig.value;
   if (!sort) return data;
 
-  const accessor = sort.key.accessor as string;
+  const accessor = sort.key.accessor as keyof SortableEmployee;
   const dir = sort.direction === "asc" ? 1 : -1;
 
   return data.sort((a, b) => {
diff --git a/packages/examples/vue/src/demos/external-sort/external-sort.demo-data.ts b/packages/examples/vue/src/demos/external-sort/external-sort.demo-data.ts
index adc686bea..107ed7bbd 100644
--- a/packages/examples/vue/src/demos/external-sort/external-sort.demo-data.ts
+++ b/packages/examples/vue/src/demos/external-sort/external-sort.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface SortableEmployee {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  salary: number;
+  department: string;
+}
 
-export const externalSortData = [
+export const externalSortData: SortableEmployee[] = [
   { id: 1, name: "Dr. Elena Vasquez", age: 42, email: "elena.vasquez@techcorp.com", salary: 145000, department: "AI Research" },
   { id: 2, name: "Kai Tanaka", age: 29, email: "k.tanaka@techcorp.com", salary: 95000, department: "UX Design" },
   { id: 3, name: "Amara Okafor", age: 35, email: "amara.okafor@techcorp.com", salary: 125000, department: "DevOps" },
@@ -17,7 +25,7 @@ export const externalSortData = [
   { id: 12, name: "Dmitri Volkov", age: 39, email: "dmitri.volkov@techcorp.com", salary: 135000, department: "DevOps" },
 ];
 
-export const externalSortHeaders: VueColumnDef[] = [
+export const externalSortHeaders: VueColumnDef<SortableEmployee>[] = [
   { accessor: "name", label: "Name", width: "1fr", minWidth: 120, sortable: true, type: "string" },
   { accessor: "age", label: "Age", width: 120, sortable: true, type: "number" },
   { accessor: "department", label: "Department", width: 150, sortable: true, type: "string" },
@@ -37,4 +45,4 @@ export const externalSortConfig = {
   headers: externalSortHeaders,
   rows: externalSortData,
   tableProps: { externalSortHandling: true, columnResizing: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/footer-renderer/FooterRendererDemo.vue b/packages/examples/vue/src/demos/footer-renderer/FooterRendererDemo.vue
index 135c2d4cd..3161c7250 100644
--- a/packages/examples/vue/src/demos/footer-renderer/FooterRendererDemo.vue
+++ b/packages/examples/vue/src/demos/footer-renderer/FooterRendererDemo.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { defineComponent, h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, FooterRendererProps } from "@simple-table/vue";
+import type { Theme, FooterRendererProps, GetRowIdParams } from "@simple-table/vue";
 import { footerRendererConfig } from "./footer-renderer.demo-data";
+import type { CatalogProduct } from "./footer-renderer.demo-data";
 import "@simple-table/vue/styles.css";
 
+const getRowId = ({ row }: GetRowIdParams<CatalogProduct>) => row.id;
+
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
@@ -124,6 +127,7 @@ const FooterBar = defineComponent({
   <SimpleTable
     :columns="footerRendererConfig.headers"
     :rows="footerRendererConfig.rows"
+    :get-row-id="getRowId"
     :footer-renderer="FooterBar"
     :enable-pagination="true"
     :rows-per-page="10"
diff --git a/packages/examples/vue/src/demos/footer-renderer/footer-renderer.demo-data.ts b/packages/examples/vue/src/demos/footer-renderer/footer-renderer.demo-data.ts
index 270016a1e..184fa76c4 100644
--- a/packages/examples/vue/src/demos/footer-renderer/footer-renderer.demo-data.ts
+++ b/packages/examples/vue/src/demos/footer-renderer/footer-renderer.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface CatalogProduct {
+  id: number;
+  product: string;
+  category: string;
+  price: number;
+  stock: number;
+  status: string;
+}
 
-export const footerRendererHeaders: VueColumnDef[] = [
+export const footerRendererHeaders: VueColumnDef<CatalogProduct>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "product", label: "Product Name", width: 220, type: "string" },
   { accessor: "category", label: "Category", width: 150, type: "string" },
@@ -11,7 +19,7 @@ export const footerRendererHeaders: VueColumnDef[] = [
   { accessor: "status", label: "Status", width: "1fr", type: "string" },
 ];
 
-export const footerRendererData: Row[] = [
+export const footerRendererData: CatalogProduct[] = [
   { id: 1, product: "MacBook Pro 16-inch M3 Max", category: "Laptops", price: 3499, stock: 28, status: "In Stock" },
   { id: 2, product: "Dell XPS 15 OLED Touchscreen", category: "Laptops", price: 2299, stock: 42, status: "In Stock" },
   { id: 3, product: "ThinkPad X1 Carbon Gen 11", category: "Laptops", price: 1899, stock: 35, status: "In Stock" },
@@ -66,4 +74,4 @@ export const footerRendererConfig = {
     enablePagination: true,
     rowsPerPage: 10,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/header-renderer/HeaderRendererDemo.vue b/packages/examples/vue/src/demos/header-renderer/HeaderRendererDemo.vue
index b4cc0ada2..146dd410f 100644
--- a/packages/examples/vue/src/demos/header-renderer/HeaderRendererDemo.vue
+++ b/packages/examples/vue/src/demos/header-renderer/HeaderRendererDemo.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, defineComponent, h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef, Row } from "@simple-table/vue";
+import type { Theme, VueColumnDef, GetRowIdParams } from "@simple-table/vue";
 import { headerRendererConfig } from "./header-renderer.demo-data";
+import type { HeaderEmployee } from "./header-renderer.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -20,8 +21,8 @@ const sortedData = computed(() => {
   const acc = sortAccessor.value;
   const dir = sortDirection.value;
   return [...headerRendererConfig.rows].sort((a, b) => {
-    const aVal = a[acc];
-    const bVal = b[acc];
+    const aVal = a[acc as keyof HeaderEmployee];
+    const bVal = b[acc as keyof HeaderEmployee];
     if (aVal === bVal) return 0;
     const cmp =
       typeof aVal === "number" && typeof bVal === "number"
@@ -31,7 +32,7 @@ const sortedData = computed(() => {
   });
 });
 
-function makeSortableHeader(col: VueColumnDef) {
+function makeSortableHeader(col: VueColumnDef<HeaderEmployee>) {
   return defineComponent({
     name: `SortHeader-${String(col.accessor)}`,
     setup() {
@@ -80,19 +81,22 @@ function makeSortableHeader(col: VueColumnDef) {
   });
 }
 
-const headers = computed(() =>
+const headers = computed((): VueColumnDef<HeaderEmployee>[] =>
   headerRendererConfig.headers.map((col) => ({
     ...col,
     sortable: false,
     headerRenderer: makeSortableHeader(col),
   })),
 );
+
+const getRowId = ({ row }: GetRowIdParams<HeaderEmployee>) => row.id;
 </script>
 
 <template>
   <SimpleTable
     :columns="headers"
-    :rows="sortedData as Row[]"
+    :rows="sortedData"
+    :get-row-id="getRowId"
     :height="props.height"
     :theme="props.theme"
   />
diff --git a/packages/examples/vue/src/demos/header-renderer/header-renderer.demo-data.ts b/packages/examples/vue/src/demos/header-renderer/header-renderer.demo-data.ts
index c1b34f3a9..5b216692c 100644
--- a/packages/examples/vue/src/demos/header-renderer/header-renderer.demo-data.ts
+++ b/packages/examples/vue/src/demos/header-renderer/header-renderer.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface HeaderEmployee {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  salary: number;
+  department: string;
+}
 
-export const headerRendererData: Row[] = [
+export const headerRendererData: HeaderEmployee[] = [
   { id: 1, name: "Alice Johnson", email: "alice@example.com", role: "Engineer", salary: 125000, department: "Engineering" },
   { id: 2, name: "Bob Martinez", email: "bob@example.com", role: "Designer", salary: 98000, department: "Design" },
   { id: 3, name: "Clara Chen", email: "clara@example.com", role: "PM", salary: 115000, department: "Product" },
@@ -13,7 +21,7 @@ export const headerRendererData: Row[] = [
   { id: 8, name: "Henry Patel", email: "henry@example.com", role: "Lead", salary: 145000, department: "Engineering" },
 ];
 
-export const headerRendererHeaders: VueColumnDef[] = [
+export const headerRendererHeaders: VueColumnDef<HeaderEmployee>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number", sortable: true },
   { accessor: "name", label: "Employee Name", width: 180, type: "string", sortable: true },
   { accessor: "email", label: "Email Address", width: 200, type: "string" },
@@ -29,4 +37,4 @@ export const headerRendererConfig = {
     selectableCells: true,
     columnResizing: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/hr/HRDemo.vue b/packages/examples/vue/src/demos/hr/HRDemo.vue
index ef566eb78..69da70987 100644
--- a/packages/examples/vue/src/demos/hr/HRDemo.vue
+++ b/packages/examples/vue/src/demos/hr/HRDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, h, type VNodeChild } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef, CellRendererProps, CellChangeProps } from "@simple-table/vue";
+import type { Theme, VueColumnDef, CellRendererProps, CellChangeProps, GetRowIdParams } from "@simple-table/vue";
 import { hrConfig, getHRThemeColors, HR_STATUS_COLOR_MAP } from "./hr.demo-data";
 import type { HREmployee } from "./hr.demo-data";
 import "@simple-table/vue/styles.css";
@@ -10,6 +10,8 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
   height: "400px",
 });
 
+const getRowId = ({ row }: GetRowIdParams<HREmployee>) => row.id;
+
 function hv(
   tag: string,
   styles?: Record<string, string | number | undefined>,
@@ -18,9 +20,9 @@ function hv(
   return h(tag, { style: styles ?? {} }, children ?? []);
 }
 
-const renderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
+const renderers: Record<string, (p: CellRendererProps<HREmployee>) => VNodeChild> = {
   fullName: ({ row, theme }) => {
-    const d = row as unknown as HREmployee;
+    const d = row;
     const c = getHRThemeColors(theme);
     const initials = `${d.firstName?.charAt(0) || ""}${d.lastName?.charAt(0) || ""}`;
 
@@ -49,7 +51,7 @@ const renderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
   },
 
   performanceScore: ({ row, theme }) => {
-    const d = row as unknown as HREmployee;
+    const d = row;
     const score = d.performanceScore;
     const c = getHRThemeColors(theme);
     const color = score >= 90 ? c.progressSuccess : score >= 65 ? c.progressNormal : c.progressException;
@@ -88,7 +90,7 @@ const renderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
   },
 
   hireDate: ({ row, theme }) => {
-    const d = row as unknown as HREmployee;
+    const d = row;
     if (!d.hireDate) return "";
     const [year, month, day] = d.hireDate.split("-").map(Number);
     const date = new Date(year, month - 1, day);
@@ -105,13 +107,13 @@ const renderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
   },
 
   salary: ({ row, theme }) => {
-    const d = row as unknown as HREmployee;
+    const d = row;
     const c = getHRThemeColors(theme);
     return hv("span", { color: c.gray }, [`$${d.salary.toLocaleString()}`]);
   },
 
   status: ({ row, theme }) => {
-    const d = row as unknown as HREmployee;
+    const d = row;
     if (!d.status) return "";
     const c = getHRThemeColors(theme);
     const colorKey = HR_STATUS_COLOR_MAP[d.status] || "default";
@@ -132,7 +134,7 @@ const renderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
   },
 };
 
-const headers: VueColumnDef[] = hrConfig.headers.map((col) => {
+const headers: VueColumnDef<HREmployee>[] = hrConfig.headers.map((col) => {
   const renderer = renderers[col.accessor as string];
   return renderer ? { ...col, cellRenderer: renderer } : { ...col };
 });
@@ -142,7 +144,7 @@ const rowHeight = 48;
 const heightNum = typeof props.height === "number" ? props.height : 400;
 const rowsPerPage = Math.floor(heightNum / rowHeight);
 
-const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps) => {
+const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps<HREmployee>) => {
   data.value = data.value.map((item) =>
     item.id === row.id ? { ...item, [accessor]: newValue } : item,
   );
@@ -153,6 +155,7 @@ const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps) => {
   <SimpleTable
     :columns="headers"
     :rows="data"
+    :get-row-id="getRowId"
     :height="props.height"
     :theme="props.theme"
     :column-reordering="true"
diff --git a/packages/examples/vue/src/demos/hr/hr.demo-data.ts b/packages/examples/vue/src/demos/hr/hr.demo-data.ts
index a57577ed9..4ab7cfea8 100644
--- a/packages/examples/vue/src/demos/hr/hr.demo-data.ts
+++ b/packages/examples/vue/src/demos/hr/hr.demo-data.ts
@@ -55,7 +55,7 @@ export function generateHRData(count: number = 100): HREmployee[] {
 
 export const hrData = generateHRData(100);
 
-export const hrHeaders: VueColumnDef[] = [
+export const hrHeaders: VueColumnDef<HREmployee>[] = [
   { accessor: "fullName", label: "Employee", width: 220, sortable: true, editable: false, align: "left", pinned: "left", type: "string" },
   {
     accessor: "performanceScore", label: "Performance", width: 160, sortable: true, editable: true, align: "center", type: "number",
@@ -123,4 +123,4 @@ export const HR_STATUS_COLOR_MAP: Record<string, HRTagColorKey> = {
 export const hrConfig = {
   headers: hrHeaders,
   rows: hrData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/infinite-scroll/InfiniteScrollDemo.vue b/packages/examples/vue/src/demos/infinite-scroll/InfiniteScrollDemo.vue
index 72074ab9d..97e4e30f6 100644
--- a/packages/examples/vue/src/demos/infinite-scroll/InfiniteScrollDemo.vue
+++ b/packages/examples/vue/src/demos/infinite-scroll/InfiniteScrollDemo.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, Row } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import { infiniteScrollConfig, generateInfiniteScrollData } from "./infinite-scroll.demo-data";
+import type { InfiniteScrollEmployee } from "./infinite-scroll.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -11,19 +13,21 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
 const MAX_ROWS = 200;
 const BATCH_SIZE = 15;
 
-const rows = ref<Row[]>(generateInfiniteScrollData(0, 30) as Row[]);
+const rows = ref<InfiniteScrollEmployee[]>(generateInfiniteScrollData(0, 30));
 const loading = ref(false);
 const hasMore = ref(true);
 
+const getRowId = ({ row }: GetRowIdParams<InfiniteScrollEmployee>) => row.id;
+
 const statusText = computed(() =>
-  `${rows.value.length} rows loaded${hasMore.value ? "" : " (all loaded)"}`
+  `${rows.value.length} rows loaded${hasMore.value ? "" : " (all loaded)"}`,
 );
 
 function handleLoadMore() {
   if (loading.value || !hasMore.value) return;
   loading.value = true;
   setTimeout(() => {
-    const newRows = generateInfiniteScrollData(rows.value.length, BATCH_SIZE) as Row[];
+    const newRows = generateInfiniteScrollData(rows.value.length, BATCH_SIZE);
     rows.value = [...rows.value, ...newRows];
     if (rows.value.length >= MAX_ROWS) hasMore.value = false;
     loading.value = false;
@@ -36,6 +40,7 @@ function handleLoadMore() {
     <div style="margin-bottom: 8px; font-size: 13px; color: #666">{{ statusText }}</div>
     <SimpleTable
       :columns="infiniteScrollConfig.headers"
+      :get-row-id="getRowId"
       :rows="rows"
       :is-loading="loading"
       :on-load-more="handleLoadMore"
diff --git a/packages/examples/vue/src/demos/infinite-scroll/infinite-scroll.demo-data.ts b/packages/examples/vue/src/demos/infinite-scroll/infinite-scroll.demo-data.ts
index 75597c9fb..939eeafda 100644
--- a/packages/examples/vue/src/demos/infinite-scroll/infinite-scroll.demo-data.ts
+++ b/packages/examples/vue/src/demos/infinite-scroll/infinite-scroll.demo-data.ts
@@ -1,13 +1,20 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface InfiniteScrollEmployee {
+  id: number;
+  name: string;
+  email: string;
+  department: string;
+  salary: number;
+}
 
 const FIRST_NAMES = ["Elena", "Kai", "Amara", "Santiago", "Priya", "Magnus", "Zara", "Luca", "Sarah", "Olumide", "Isabella", "Dmitri"];
 const LAST_NAMES = ["Vasquez", "Tanaka", "Okafor", "Rodriguez", "Chakraborty", "Eriksson", "Al-Rashid", "Rossi", "Kim", "Adebayo", "Chen", "Volkov"];
 const DEPARTMENTS = ["Engineering", "AI Research", "UX Design", "DevOps", "Marketing", "Product", "Sales", "Finance"];
 
-export function generateInfiniteScrollData(startIndex: number, count: number): Row[] {
-  const rows: Row[] = [];
+export function generateInfiniteScrollData(startIndex: number, count: number): InfiniteScrollEmployee[] {
+  const rows: InfiniteScrollEmployee[] = [];
   for (let i = 0; i < count; i++) {
     const idx = startIndex + i;
     const first = FIRST_NAMES[idx % FIRST_NAMES.length];
@@ -23,7 +30,7 @@ export function generateInfiniteScrollData(startIndex: number, count: number): R
   return rows;
 }
 
-export const infiniteScrollHeaders: VueColumnDef[] = [
+export const infiniteScrollHeaders: VueColumnDef<InfiniteScrollEmployee>[] = [
   { accessor: "id", label: "ID", width: 80, type: "number" },
   { accessor: "name", label: "Name", width: "1fr", minWidth: 120 },
   { accessor: "email", label: "Email", width: 250 },
@@ -41,4 +48,4 @@ export const infiniteScrollHeaders: VueColumnDef[] = [
 export const infiniteScrollConfig = {
   headers: infiniteScrollHeaders,
   rows: generateInfiniteScrollData(0, 30),
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/infrastructure/InfrastructureDemo.vue b/packages/examples/vue/src/demos/infrastructure/InfrastructureDemo.vue
index 2656fe35e..8ef71900b 100644
--- a/packages/examples/vue/src/demos/infrastructure/InfrastructureDemo.vue
+++ b/packages/examples/vue/src/demos/infrastructure/InfrastructureDemo.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, h } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, TableAPI, VueColumnDef, CellRendererProps, Row, CellValue } from "@simple-table/vue";
+import type { Theme, TableAPI, VueColumnDef, CellRendererProps, Row, CellValue, GetRowIdParams } from "@simple-table/vue";
 import {
   infrastructureConfig,
   infrastructureData,
@@ -139,31 +139,29 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
 });
 
 const tableRef = ref<{ getAPI: () => TableAPI | null } | null>(null);
-const getRowId = ({ row }: { row: { id: string | number } }) => row.id;
+const getRowId = ({ row }: GetRowIdParams<InfrastructureServer>) => row.id;
 
 function applyRenderers(
-  hdrs: readonly VueColumnDef[],
-  map: Record<string, (p: CellRendererProps) => unknown>,
-): VueColumnDef[] {
+  hdrs: readonly VueColumnDef<InfrastructureServer>[],
+  map: Record<string, (p: CellRendererProps<InfrastructureServer>) => unknown>,
+): VueColumnDef<InfrastructureServer>[] {
   return hdrs.map((h) => {
     const renderer = map[h.accessor as string];
-    const clone: VueColumnDef = renderer ? { ...h, cellRenderer: renderer } : { ...h };
+    const clone: VueColumnDef<InfrastructureServer> = renderer ? { ...h, cellRenderer: renderer } : { ...h };
     if (h.children) clone.children = applyRenderers(h.children, map);
     return clone;
   });
 }
 
-const headers = computed((): VueColumnDef[] => {
+const headers = computed((): VueColumnDef<InfrastructureServer>[] => {
   const t = props.theme || "light";
 
-  const serverIdRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as InfrastructureServer;
-    return h("span", { style: { fontFamily: "monospace", fontSize: "0.85rem" } }, d.serverId);
+  const serverIdRenderer = ({ row }: CellRendererProps<InfrastructureServer>) => {
+    return h("span", { style: { fontFamily: "monospace", fontSize: "0.85rem" } }, row.serverId);
   };
 
-  const cpuRenderer = ({ row, theme }: CellRendererProps) => {
-    const d = row as unknown as InfrastructureServer;
-    const cpu = d.cpuUsage;
+  const cpuRenderer = ({ row, theme }: CellRendererProps<InfrastructureServer>) => {
+    const cpu = row.cpuUsage;
     const s = getInfraMetricColorStyles(cpu, theme || t, "cpu");
     return h("div", { style: { display: "flex", justifyContent: "end" } }, [
       h(
@@ -183,9 +181,8 @@ const headers = computed((): VueColumnDef[] => {
     ]);
   };
 
-  const memoryRenderer = ({ row, theme }: CellRendererProps) => {
-    const d = row as unknown as InfrastructureServer;
-    const mem = d.memoryUsage;
+  const memoryRenderer = ({ row, theme }: CellRendererProps<InfrastructureServer>) => {
+    const mem = row.memoryUsage;
     const s = getInfraMetricColorStyles(mem, theme || t, "memory");
     return h("div", { style: { display: "flex", justifyContent: "end" } }, [
       h(
@@ -205,14 +202,12 @@ const headers = computed((): VueColumnDef[] => {
     ]);
   };
 
-  const diskRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as InfrastructureServer;
-    return `${d.diskUsage.toFixed(1)}%`;
+  const diskRenderer = ({ row }: CellRendererProps<InfrastructureServer>) => {
+    return `${row.diskUsage.toFixed(1)}%`;
   };
 
-  const responseRenderer = ({ row, theme }: CellRendererProps) => {
-    const d = row as unknown as InfrastructureServer;
-    const rt = d.responseTime;
+  const responseRenderer = ({ row, theme }: CellRendererProps<InfrastructureServer>) => {
+    const rt = row.responseTime;
     const s = getInfraMetricColorStyles(rt, theme || t, "response");
     return h(
       "span",
@@ -227,9 +222,8 @@ const headers = computed((): VueColumnDef[] => {
     );
   };
 
-  const statusRenderer = ({ row, theme }: CellRendererProps) => {
-    const d = row as unknown as InfrastructureServer;
-    const status = d.status;
+  const statusRenderer = ({ row, theme }: CellRendererProps<InfrastructureServer>) => {
+    const status = row.status;
     const s = getInfraStatusColors(status, theme || t);
     return h(
       "div",
diff --git a/packages/examples/vue/src/demos/infrastructure/infrastructure.demo-data.ts b/packages/examples/vue/src/demos/infrastructure/infrastructure.demo-data.ts
index 6a2dfc6c5..42bf64a80 100644
--- a/packages/examples/vue/src/demos/infrastructure/infrastructure.demo-data.ts
+++ b/packages/examples/vue/src/demos/infrastructure/infrastructure.demo-data.ts
@@ -1,5 +1,5 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
 export interface InfrastructureServer {
   id: number;
@@ -50,7 +50,7 @@ const STATUSES: Array<InfrastructureServer["status"]> = [
   "offline",
 ];
 
-export function generateInfrastructureData(count: number = 50): Row[] {
+export function generateInfrastructureData(count: number = 50): InfrastructureServer[] {
   return Array.from({ length: count }, (_, i) => {
     const prefix = SERVER_PREFIXES[i % SERVER_PREFIXES.length];
     const num = String(i + 1).padStart(3, "0");
@@ -75,7 +75,7 @@ export function generateInfrastructureData(count: number = 50): Row[] {
 
 export const infrastructureData = generateInfrastructureData(50);
 
-export const infrastructureHeaders: VueColumnDef[] = [
+export const infrastructureHeaders: VueColumnDef<InfrastructureServer>[] = [
   {
     accessor: "serverId",
     align: "left",
@@ -255,4 +255,4 @@ export function getInfraStatusColors(status: string, theme: string) {
 export const infrastructureConfig = {
   headers: infrastructureHeaders,
   rows: infrastructureData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/live-update/LiveUpdateDemo.vue b/packages/examples/vue/src/demos/live-update/LiveUpdateDemo.vue
index 224895d45..cb3eaf832 100644
--- a/packages/examples/vue/src/demos/live-update/LiveUpdateDemo.vue
+++ b/packages/examples/vue/src/demos/live-update/LiveUpdateDemo.vue
@@ -11,19 +11,21 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, TableAPI } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, TableAPI, GetRowIdParams } from "@simple-table/vue";
 import { liveUpdateConfig, liveUpdateData } from "./live-update.demo-data";
+import type { LiveUpdateProduct } from "./live-update.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { height: "400px" });
 
 const tableRef = ref<{ getAPI: () => TableAPI | null } | null>(null);
-const getRowId = ({ row }: { row: { id: number } }) => row.id;
+const getRowId = ({ row }: GetRowIdParams<LiveUpdateProduct>) => row.id;
 
 let cleanupFn: (() => void) | null = null;
 
 onMounted(() => {
-  const currentData = JSON.parse(JSON.stringify(liveUpdateData));
+  const currentData: LiveUpdateProduct[] = JSON.parse(JSON.stringify(liveUpdateData));
   const timerMap = new Map<string | number, ReturnType<typeof setTimeout>>();
   const currentPeriodSales = new Map<string | number, number>();
   let isActive = true;
@@ -38,7 +40,7 @@ onMounted(() => {
         if (!isActive) return;
         const api = getAPI();
         if (!api) return;
-        const idx = currentData.findIndex((r: any) => r.id === rowId);
+        const idx = currentData.findIndex((r: LiveUpdateProduct) => r.id === rowId);
         if (idx === -1) return;
         const product = currentData[idx];
 
@@ -90,7 +92,7 @@ onMounted(() => {
   const salesRotate = setInterval(() => {
     const api = getAPI();
     if (!api || !isActive) return;
-    currentData.forEach((row: any, i: number) => {
+    currentData.forEach((row: LiveUpdateProduct, i: number) => {
       if (Array.isArray(row.salesHistory)) {
         const rid = row.id;
         const sp = currentPeriodSales.get(rid) || 0;
diff --git a/packages/examples/vue/src/demos/live-update/live-update.demo-data.ts b/packages/examples/vue/src/demos/live-update/live-update.demo-data.ts
index 51e282f29..c626ac393 100644
--- a/packages/examples/vue/src/demos/live-update/live-update.demo-data.ts
+++ b/packages/examples/vue/src/demos/live-update/live-update.demo-data.ts
@@ -1,8 +1,17 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface LiveUpdateProduct {
+  id: number;
+  product: string;
+  price: number;
+  stock: number;
+  sales: number;
+  stockHistory: number[];
+  salesHistory: number[];
+}
 
-export const liveUpdateHeaders: VueColumnDef[] = [
+export const liveUpdateHeaders: VueColumnDef<LiveUpdateProduct>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "product", label: "Product", width: 180, type: "string" },
   {
@@ -40,7 +49,7 @@ export const generateSalesHistory = (_currentSales: number, length = 12) => {
   return history;
 };
 
-export const liveUpdateData = [
+export const liveUpdateData: LiveUpdateProduct[] = [
   { id: 1, product: "Organic Green Tea", price: 24.99, stock: 156, sales: 342, stockHistory: generateStockHistory(156), salesHistory: generateSalesHistory(342) },
   { id: 2, product: "Bluetooth Headphones", price: 89.99, stock: 73, sales: 187, stockHistory: generateStockHistory(73), salesHistory: generateSalesHistory(187) },
   { id: 3, product: "Bamboo Yoga Mat", price: 45.99, stock: 92, sales: 256, stockHistory: generateStockHistory(92), salesHistory: generateSalesHistory(256) },
@@ -58,4 +67,4 @@ export const liveUpdateData = [
 export const liveUpdateConfig = {
   headers: liveUpdateHeaders,
   rows: liveUpdateData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/loading-state/LoadingStateDemo.vue b/packages/examples/vue/src/demos/loading-state/LoadingStateDemo.vue
index f94312145..0831dc4c5 100644
--- a/packages/examples/vue/src/demos/loading-state/LoadingStateDemo.vue
+++ b/packages/examples/vue/src/demos/loading-state/LoadingStateDemo.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, Row } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import { loadingStateConfig } from "./loading-state.demo-data";
+import type { LoadingStateEmployee } from "./loading-state.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -9,7 +11,9 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
 });
 
 const isLoading = ref(true);
-const data = ref<Row[]>([]);
+const data = ref<LoadingStateEmployee[]>([]);
+
+const getRowId = ({ row }: GetRowIdParams<LoadingStateEmployee>) => row.id;
 
 function loadData() {
   isLoading.value = true;
@@ -38,6 +42,7 @@ onMounted(() => {
     </div>
     <SimpleTable
       :columns="loadingStateConfig.headers"
+      :get-row-id="getRowId"
       :rows="data"
       :is-loading="isLoading"
       :height="props.height"
diff --git a/packages/examples/vue/src/demos/loading-state/loading-state.demo-data.ts b/packages/examples/vue/src/demos/loading-state/loading-state.demo-data.ts
index 74da09ad8..971183b7c 100644
--- a/packages/examples/vue/src/demos/loading-state/loading-state.demo-data.ts
+++ b/packages/examples/vue/src/demos/loading-state/loading-state.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface LoadingStateEmployee {
+  id: number;
+  name: string;
+  age: number;
+  department: string;
+  salary: number;
+  status: string;
+}
 
-export const loadingStateData = [
+export const loadingStateData: LoadingStateEmployee[] = [
   { id: 1, name: "Dr. Elena Vasquez", age: 42, department: "AI Research", salary: 145000, status: "Active" },
   { id: 2, name: "Kai Tanaka", age: 29, department: "UX Design", salary: 95000, status: "Active" },
   { id: 3, name: "Amara Okafor", age: 35, department: "DevOps", salary: 125000, status: "On Leave" },
@@ -13,7 +21,7 @@ export const loadingStateData = [
   { id: 8, name: "Luca Rossi", age: 26, department: "Marketing", salary: 75000, status: "Active" },
 ];
 
-export const loadingStateHeaders: VueColumnDef[] = [
+export const loadingStateHeaders: VueColumnDef<LoadingStateEmployee>[] = [
   { accessor: "name", label: "Name", width: "1fr", minWidth: 120 },
   { accessor: "age", label: "Age", width: 80, type: "number" },
   { accessor: "department", label: "Department", width: 150 },
@@ -31,4 +39,4 @@ export const loadingStateHeaders: VueColumnDef[] = [
 export const loadingStateConfig = {
   headers: loadingStateHeaders,
   rows: loadingStateData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/manufacturing/ManufacturingDemo.vue b/packages/examples/vue/src/demos/manufacturing/ManufacturingDemo.vue
index 6a2d6a7c0..5962680d1 100644
--- a/packages/examples/vue/src/demos/manufacturing/ManufacturingDemo.vue
+++ b/packages/examples/vue/src/demos/manufacturing/ManufacturingDemo.vue
@@ -1,7 +1,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 { manufacturingConfig, getManufacturingStatusColors } from "./manufacturing.demo-data";
 import type { ManufacturingRow } from "./manufacturing.demo-data";
 import "@simple-table/vue/styles.css";
@@ -10,25 +10,25 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
   height: "400px",
 });
 
-function getHeaders(): VueColumnDef[] {
+const getRowId = ({ row }: GetRowIdParams<ManufacturingRow>) => row.id;
+
+function getHeaders(): VueColumnDef<ManufacturingRow>[] {
   return manufacturingConfig.headers.map((col) => {
     if (col.accessor === "productLine") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          return d.stations
-            ? h("span", { style: { fontWeight: "bold" } }, d.productLine)
-            : d.productLine;
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          return r.stations
+            ? h("span", { style: { fontWeight: "bold" } }, r.productLine)
+            : r.productLine;
         },
       };
     }
     if (col.accessor === "station") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          if (d.stations) return h("span", { style: { color: "#6b7280" } }, d.id);
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          if (r.stations) return h("span", { style: { color: "#6b7280" } }, r.id);
           return h("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, [
             h(
               "span",
@@ -42,9 +42,9 @@ function getHeaders(): VueColumnDef[] {
                   borderRadius: "4px",
                 },
               },
-              d.id,
+              r.id,
             ),
-            h("span", d.station),
+            h("span", r.station),
           ]);
         },
       };
@@ -52,10 +52,9 @@ function getHeaders(): VueColumnDef[] {
     if (col.accessor === "status") {
       return {
         ...col,
-        cellRenderer: ({ row: r, theme }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          if (d.stations) return "—";
-          const colors = getManufacturingStatusColors(d.status, theme);
+        cellRenderer: ({ row: r, theme }: CellRendererProps<ManufacturingRow>) => {
+          if (r.stations) return "—";
+          const colors = getManufacturingStatusColors(r.status, theme);
           return h(
             "span",
             {
@@ -70,7 +69,7 @@ function getHeaders(): VueColumnDef[] {
                 fontWeight: "600",
               },
             },
-            d.status,
+            r.status,
           );
         },
       };
@@ -78,30 +77,27 @@ function getHeaders(): VueColumnDef[] {
     if (col.accessor === "outputRate" || col.accessor === "defectCount" || col.accessor === "energy") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          const value = d[col.accessor as keyof ManufacturingRow] as number;
-          return h("div", { style: d.stations ? { fontWeight: "bold" } : {} }, value.toLocaleString());
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          const value = r[col.accessor as keyof ManufacturingRow] as number;
+          return h("div", { style: r.stations ? { fontWeight: "bold" } : {} }, value.toLocaleString());
         },
       };
     }
     if (col.accessor === "cycletime") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          if (d.stations)
-            return h("span", { style: { fontWeight: "bold" } }, d.cycletime.toFixed(1));
-          return h("span", String(d.cycletime));
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          if (r.stations)
+            return h("span", { style: { fontWeight: "bold" } }, r.cycletime.toFixed(1));
+          return h("span", String(r.cycletime));
         },
       };
     }
     if (col.accessor === "efficiency") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          const color = d.efficiency >= 90 ? "#52c41a" : d.efficiency >= 75 ? "#1890ff" : "#ff4d4f";
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          const color = r.efficiency >= 90 ? "#52c41a" : r.efficiency >= 75 ? "#1890ff" : "#ff4d4f";
           return h("div", { style: { width: "100%", display: "flex", flexDirection: "column" } }, [
             h(
               "div",
@@ -118,7 +114,7 @@ function getHeaders(): VueColumnDef[] {
                 h("div", {
                   style: {
                     height: "100%",
-                    width: `${d.efficiency}%`,
+                    width: `${r.efficiency}%`,
                     backgroundColor: color,
                     borderRadius: "100px",
                   },
@@ -132,10 +128,10 @@ function getHeaders(): VueColumnDef[] {
                   fontSize: "12px",
                   textAlign: "center",
                   marginTop: "4px",
-                  fontWeight: d.stations ? "bold" : "normal",
+                  fontWeight: r.stations ? "bold" : "normal",
                 },
               },
-              `${d.efficiency}%`,
+              `${r.efficiency}%`,
             ),
           ]);
         },
@@ -144,13 +140,12 @@ function getHeaders(): VueColumnDef[] {
     if (col.accessor === "defectRate") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          const color = d.defectRate < 1 ? "#16a34a" : d.defectRate < 3 ? "#f59e0b" : "#dc2626";
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          const color = r.defectRate < 1 ? "#16a34a" : r.defectRate < 3 ? "#f59e0b" : "#dc2626";
           return h(
             "span",
-            { style: { color, fontWeight: d.stations ? "bold" : "normal" } },
-            `${d.defectRate.toFixed(2)}%`,
+            { style: { color, fontWeight: r.stations ? "bold" : "normal" } },
+            `${r.defectRate.toFixed(2)}%`,
           );
         },
       };
@@ -158,13 +153,12 @@ function getHeaders(): VueColumnDef[] {
     if (col.accessor === "downtime") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          const color = d.downtime < 1 ? "#16a34a" : d.downtime < 2 ? "#f59e0b" : "#dc2626";
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          const color = r.downtime < 1 ? "#16a34a" : r.downtime < 2 ? "#f59e0b" : "#dc2626";
           return h(
             "span",
-            { style: { color, fontWeight: d.stations ? "bold" : "normal" } },
-            d.downtime.toFixed(2),
+            { style: { color, fontWeight: r.stations ? "bold" : "normal" } },
+            r.downtime.toFixed(2),
           );
         },
       };
@@ -172,21 +166,19 @@ function getHeaders(): VueColumnDef[] {
     if (col.accessor === "utilization") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          if (d.stations)
-            return h("span", { style: { fontWeight: "bold" } }, `${d.utilization.toFixed(0)}%`);
-          return `${d.utilization}%`;
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          if (r.stations)
+            return h("span", { style: { fontWeight: "bold" } }, `${r.utilization.toFixed(0)}%`);
+          return `${r.utilization}%`;
         },
       };
     }
     if (col.accessor === "maintenanceDate") {
       return {
         ...col,
-        cellRenderer: ({ row: r }: CellRendererProps) => {
-          const d = r as unknown as ManufacturingRow;
-          if (d.stations) return "—";
-          const [year, month, day] = d.maintenanceDate.split("-").map(Number);
+        cellRenderer: ({ row: r }: CellRendererProps<ManufacturingRow>) => {
+          if (r.stations) return "—";
+          const [year, month, day] = r.maintenanceDate.split("-").map(Number);
           const date = new Date(year, month - 1, day);
           const today = new Date();
           const diffDays = Math.ceil((date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
@@ -228,6 +220,7 @@ const headers = getHeaders();
   <SimpleTable
     :columns="headers"
     :rows="manufacturingConfig.rows"
+    :get-row-id="getRowId"
     :height="props.height"
     :theme="props.theme"
     :column-resizing="true"
diff --git a/packages/examples/vue/src/demos/manufacturing/manufacturing.demo-data.ts b/packages/examples/vue/src/demos/manufacturing/manufacturing.demo-data.ts
index 0cea69f50..2fcb7029f 100644
--- a/packages/examples/vue/src/demos/manufacturing/manufacturing.demo-data.ts
+++ b/packages/examples/vue/src/demos/manufacturing/manufacturing.demo-data.ts
@@ -83,7 +83,7 @@ export function generateManufacturingData(count: number = 8): ManufacturingRow[]
 
 export const manufacturingData = generateManufacturingData(8);
 
-export const manufacturingHeaders: VueColumnDef[] = [
+export const manufacturingHeaders: VueColumnDef<ManufacturingRow>[] = [
   { accessor: "productLine", label: "Production Line", width: 180, expandable: true, sortable: true, editable: false, align: "left", type: "string" },
   { accessor: "station", label: "Workstation", width: 150, sortable: true, editable: false, align: "left", type: "string" },
   { accessor: "machineType", label: "Machine Type", width: 150, sortable: true, editable: false, align: "left", type: "string" },
@@ -122,4 +122,4 @@ export function getManufacturingStatusColors(status: string, theme?: string) {
 export const manufacturingConfig = {
   headers: manufacturingHeaders,
   rows: manufacturingData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/music/MusicDemo.vue b/packages/examples/vue/src/demos/music/MusicDemo.vue
index 77afe8b59..595d78eb0 100644
--- a/packages/examples/vue/src/demos/music/MusicDemo.vue
+++ b/packages/examples/vue/src/demos/music/MusicDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, h, type VNodeChild } from "vue";
+import { ref, computed, h, type VNodeChild } 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 { musicConfig, getMusicThemeColors } from "./music.demo-data";
 import type { MusicArtist } from "./music.demo-data";
 import "@simple-table/vue/styles.css";
@@ -11,6 +11,13 @@ const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme
   height: "400px",
 });
 
+function musicNumber(row: MusicArtist, key: string): number {
+  const value = row[key];
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return Number(value) || 0;
+  return 0;
+}
+
 function hv(
   tag: string,
   styles?: Record<string, string | number | undefined>,
@@ -68,25 +75,26 @@ function growthMetric(
 }
 
 function applyRenderers(
-  hdrs: readonly VueColumnDef[],
-  map: Record<string, (p: CellRendererProps) => VNodeChild>,
-): VueColumnDef[] {
-  return hdrs.map((h) => {
-    const renderer = map[h.accessor as string];
-    const clone: VueColumnDef = renderer ? { ...h, cellRenderer: renderer } : { ...h };
-    if (h.children) {
-      clone.children = applyRenderers(h.children, map);
+  hdrs: readonly VueColumnDef<MusicArtist>[],
+  map: Record<string, (p: CellRendererProps<MusicArtist>) => VNodeChild>,
+): VueColumnDef<MusicArtist>[] {
+  return hdrs.map((col) => {
+    const renderer = map[col.accessor as string];
+    const clone: VueColumnDef<MusicArtist> = renderer ? { ...col, cellRenderer: renderer } : { ...col };
+    if (col.children) {
+      clone.children = applyRenderers(col.children, map);
     }
     return clone;
   });
 }
 
-const headers = computed(() => {
+const getRowId = ({ row }: GetRowIdParams<MusicArtist>) => row.id;
+
+const headers = computed((): VueColumnDef<MusicArtist>[] => {
   const c = getMusicThemeColors(props.theme);
 
-  const artistRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
-    const name = d.artistName;
+  const artistRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
+    const name = row.artistName;
     let hash = 0;
     for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
     const avatar = hv("div", {
@@ -97,9 +105,9 @@ const headers = computed(() => {
     }, [name.charAt(0).toUpperCase()]);
 
     const tags = hv("div", { display: "flex", gap: "6px", flexWrap: "wrap" }, [
-      tag(d.growthStatus, "default", c),
-      tag(d.mood, "default", c),
-      tag(d.genre, "default", c),
+      tag(row.growthStatus as string, "default", c),
+      tag(row.mood as string, "default", c),
+      tag(row.genre, "default", c),
     ]);
 
     const info = hv("div", { display: "flex", flexDirection: "column", gap: "6px", flex: "1" }, [
@@ -110,82 +118,74 @@ const headers = computed(() => {
     return hv("div", { display: "flex", alignItems: "center", gap: "12px" }, [avatar, info]);
   };
 
-  const artistTypeRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
+  const artistTypeRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
     return hv("div", { display: "flex", flexDirection: "column", gap: "4px" }, [
-      hv("div", { fontSize: "13px", color: c.gray }, [`${d.artistType}, ${d.pronouns}`]),
-      hv("div", { fontSize: "12px", color: c.gray }, [d.recordLabel]),
-      hv("div", { fontSize: "12px", color: c.gray }, [`Lyrics Language: ${d.lyricsLanguage}`]),
+      hv("div", { fontSize: "13px", color: c.gray }, [`${row.artistType}, ${row.pronouns}`]),
+      hv("div", { fontSize: "12px", color: c.gray }, [row.recordLabel]),
+      hv("div", { fontSize: "12px", color: c.gray }, [`Lyrics Language: ${String(row.lyricsLanguage ?? "")}`]),
     ]);
   };
 
-  const followersRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
+  const followersRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
     return hv("div", { display: "flex", flexDirection: "column", gap: "4px", alignItems: "flex-start" }, [
-      hv("div", { fontSize: "14px", color: c.gray }, [d.followersFormatted]),
-      tag(`↑ +${d.followersGrowthFormatted} (${d.followersGrowthPercent.toFixed(2)}%)`, "green", c),
+      hv("div", { fontSize: "14px", color: c.gray }, [String(row.followersFormatted ?? "")]),
+      tag(`↑ +${String(row.followersGrowthFormatted ?? "")} (${musicNumber(row, "followersGrowthPercent").toFixed(2)}%)`, "green", c),
     ]);
   };
 
-  const playlistReachRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
-    const growth = d.playlistReachChange;
+  const playlistReachRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
+    const growth = musicNumber(row, "playlistReachChange");
     const isPos = growth >= 0;
-    const formatted = d.playlistReachChangeFormatted;
-    const pct = Math.abs(d.playlistReachChangePercent).toFixed(2);
+    const formatted = String(row.playlistReachChangeFormatted ?? "");
+    const pct = Math.abs(musicNumber(row, "playlistReachChangePercent")).toFixed(2);
     return hv("div", { display: "flex", flexDirection: "column", gap: "4px" }, [
-      hv("div", { fontSize: "14px", color: c.gray }, [d.playlistReachFormatted]),
+      hv("div", { fontSize: "14px", color: c.gray }, [String(row.playlistReachFormatted ?? "")]),
       tag(`${isPos ? "↑" : "↓"} ${isPos ? "+" : ""}${formatted} (${pct}%)`, isPos ? "green" : "red", c),
     ]);
   };
 
-  const playlistCountRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
+  const playlistCountRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
     return hv("div", { display: "flex", flexDirection: "column", gap: "4px", alignItems: "flex-start" }, [
-      hv("div", { fontSize: "14px", color: c.gray }, [d.playlistCount.toLocaleString()]),
-      tag(`↑ +${d.playlistCountGrowth} (${d.playlistCountGrowthPercent.toFixed(2)}%)`, "green", c),
+      hv("div", { fontSize: "14px", color: c.gray }, [musicNumber(row, "playlistCount").toLocaleString()]),
+      tag(`↑ +${musicNumber(row, "playlistCountGrowth")} (${musicNumber(row, "playlistCountGrowthPercent").toFixed(2)}%)`, "green", c),
     ]);
   };
 
-  const monthlyListenersRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
-    const growth = d.monthlyListenersChange;
+  const monthlyListenersRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
+    const growth = musicNumber(row, "monthlyListenersChange");
     const isPos = growth >= 0;
-    const formatted = d.monthlyListenersChangeFormatted;
-    const pct = Math.abs(d.monthlyListenersChangePercent).toFixed(2);
+    const formatted = String(row.monthlyListenersChangeFormatted ?? "");
+    const pct = Math.abs(musicNumber(row, "monthlyListenersChangePercent")).toFixed(2);
     return hv("div", { display: "flex", flexDirection: "column", gap: "4px" }, [
-      hv("div", { fontSize: "14px", color: c.gray }, [d.monthlyListenersFormatted]),
+      hv("div", { fontSize: "14px", color: c.gray }, [String(row.monthlyListenersFormatted ?? "")]),
       tag(`${isPos ? "↑" : "↓"} ${isPos ? "+" : ""}${formatted} (${pct}%)`, isPos ? "green" : "red", c),
     ]);
   };
 
-  const popularityRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
-    const pct = d.popularityChangePercent;
+  const popularityRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
+    const pct = musicNumber(row, "popularityChangePercent");
     const isPos = pct >= 0;
     return hv("div", { display: "flex", justifyContent: "center" }, [
-      growthMetric(`${d.popularity}/100`, pct, c, { isPositive: isPos, showSign: false }),
+      growthMetric(`${musicNumber(row, "popularity")}/100`, pct, c, { isPositive: isPos, showSign: false }),
     ]);
   };
 
-  const conversionRateRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
-    return hv("span", { color: c.gray }, [`${d.conversionRate.toFixed(2)}%`]);
+  const conversionRateRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
+    return hv("span", { color: c.gray }, [`${musicNumber(row, "conversionRate").toFixed(2)}%`]);
   };
 
-  const ratioRenderer = ({ row }: CellRendererProps) => {
-    const d = row as unknown as MusicArtist;
-    return hv("span", { color: c.gray }, [`${d.reachFollowersRatio.toFixed(1)}x`]);
+  const ratioRenderer = ({ row }: CellRendererProps<MusicArtist>) => {
+    return hv("span", { color: c.gray }, [`${musicNumber(row, "reachFollowersRatio").toFixed(1)}x`]);
   };
 
-  const growthCell = (valueKey: string, pctKey: string, signed: boolean) => ({ row }: CellRendererProps) => {
-    const d = row as unknown as Record<string, number>;
-    const val = d[valueKey];
-    const pct = d[pctKey];
-    return growthMetric(val, pct, c, { isPositive: signed ? val >= 0 : true, align: "right" });
-  };
+  const growthCell = (valueKey: string, pctKey: string, signed: boolean) =>
+    ({ row }: CellRendererProps<MusicArtist>) => {
+      const val = musicNumber(row, valueKey);
+      const pct = musicNumber(row, pctKey);
+      return growthMetric(val, pct, c, { isPositive: signed ? val >= 0 : true, align: "right" });
+    };
 
-  const rendererMap: Record<string, (p: CellRendererProps) => VNodeChild> = {
+  const rendererMap: Record<string, (p: CellRendererProps<MusicArtist>) => VNodeChild> = {
     artistName: artistRenderer,
     artistType: artistTypeRenderer,
     followers: followersRenderer,
@@ -217,6 +217,7 @@ const headers = computed(() => {
   <div class="music-theme-container" style="font-family: Inter">
     <SimpleTable
       :columns="headers"
+      :get-row-id="getRowId"
       :rows="[...musicConfig.rows]"
       :height="props.height"
       :theme="props.theme"
diff --git a/packages/examples/vue/src/demos/music/music.demo-data.ts b/packages/examples/vue/src/demos/music/music.demo-data.ts
index cdfdc2cf7..809a0c517 100644
--- a/packages/examples/vue/src/demos/music/music.demo-data.ts
+++ b/packages/examples/vue/src/demos/music/music.demo-data.ts
@@ -1,159 +1,253 @@
-// Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+// Self-contained demo data for the Music example.
+//
+// This produces a wide, real-world-shaped artist analytics dataset (~60 columns)
+// that mirrors the kind of multi-platform reporting grid consumers build on top
+// of Simple Table. Data is generated at runtime via a deterministic PRNG so the
+// rows (and any diffs) stay stable across reloads.
+
 export interface MusicArtist {
-  id: number;
+  id: string;
   rank: number;
+  rankChange: number;
   artistName: string;
   artistType: string;
   pronouns: string;
   recordLabel: string;
-  lyricsLanguage: string;
   genre: string;
-  mood: string;
-  growthStatus: string;
-  followers: number;
-  followersFormatted: string;
-  followersGrowthFormatted: string;
-  followersGrowthPercent: number;
-  followers7DayGrowth: number;
-  followers7DayGrowthPercent: number;
-  followers28DayGrowth: number;
-  followers28DayGrowthPercent: number;
-  followers60DayGrowth: number;
-  followers60DayGrowthPercent: number;
-  popularity: number;
-  popularityChangePercent: number;
-  playlistReach: number;
-  playlistReachFormatted: string;
-  playlistReachChange: number;
-  playlistReachChangeFormatted: string;
-  playlistReachChangePercent: number;
-  playlistReach7DayGrowth: number;
-  playlistReach7DayGrowthPercent: number;
-  playlistReach28DayGrowth: number;
-  playlistReach28DayGrowthPercent: number;
-  playlistReach60DayGrowth: number;
-  playlistReach60DayGrowthPercent: number;
-  playlistCount: number;
-  playlistCountGrowth: number;
-  playlistCountGrowthPercent: number;
-  playlistCount7DayGrowth: number;
-  playlistCount7DayGrowthPercent: number;
-  playlistCount28DayGrowth: number;
-  playlistCount28DayGrowthPercent: number;
-  playlistCount60DayGrowth: number;
-  playlistCount60DayGrowthPercent: number;
-  monthlyListeners: number;
-  monthlyListenersFormatted: string;
-  monthlyListenersChange: number;
-  monthlyListenersChangeFormatted: string;
-  monthlyListenersChangePercent: number;
-  monthlyListeners7DayGrowth: number;
-  monthlyListeners7DayGrowthPercent: number;
-  monthlyListeners28DayGrowth: number;
-  monthlyListeners28DayGrowthPercent: number;
-  monthlyListeners60DayGrowth: number;
-  monthlyListeners60DayGrowthPercent: number;
-  conversionRate: number;
-  reachFollowersRatio: number;
+  country: string;
+  countryFlag: string;
+  continent: string;
+  score: number;
+  scoreChange: number;
+  earliestAlbumReleaseDate: string;
+  latestAlbumReleaseDate: string;
+  audienceAge: Record<string, number>;
+  audienceGender: { f: number; m: number };
+  // Single-value rates / ratios / scores
+  spotifyPopularity: number;
+  spotifyPopularityChangePercent: number;
+  spotifyFollowersToListenersRatio: number;
+  spotifyReachFollowersRatio: number;
+  youtubeEngagementRate: number;
+  instagramEngagementRate: number;
+  tiktokEngagementRate: number;
+  tiktokEngagementRateChange: number;
+  // Each platform metric expands to `<key>`, `<key>Formatted`,
+  // `<key>ChangeFormatted`, `<key>ChangePercent` (see METRICS below).
+  [key: string]: string | number | Record<string, number> | undefined;
 }
 
+// Deterministic PRNG so regenerating produces stable data (and stable diffs).
+function createRng(seed: number) {
+  let state = seed;
+  return () => {
+    state = (state * 1664525 + 1013904223) % 4294967296;
+    return state / 4294967296;
+  };
+}
 
-const ARTIST_NAMES = ["Luna Nova", "The Midnight Echo", "Astral Frequency", "Crimson Tide", "Echo Chamber", "Neon Pulse", "Celestial Drift", "Violet Storm", "Arctic Monkeys", "Glass Animals", "Tame Impala", "Beach House", "Radiohead", "Portishead", "Massive Attack", "Bonobo", "Four Tet", "Caribou", "Jamie xx", "Burial"];
-const ARTIST_TYPES = ["Solo Artist", "Band", "Duo", "Collective", "DJ/Producer"];
-const PRONOUNS = ["she/her", "he/him", "they/them", "she/they", "he/they"];
-const RECORD_LABELS = ["Universal", "Sony Music", "Warner", "Independent", "Sub Pop", "XL Recordings", "4AD", "Warp Records", "Ninja Tune", "Domino"];
-const LANGUAGES = ["English", "Spanish", "French", "Portuguese", "Korean", "Japanese", "Multilingual"];
-const GENRES = ["Pop", "Rock", "Electronic", "Hip Hop", "R&B", "Indie", "Alternative", "Jazz", "Folk", "Metal"];
-const MOODS = ["Energetic", "Chill", "Dark", "Uplifting", "Melancholic", "Dreamy", "Aggressive", "Romantic"];
-const GROWTH_STATUSES = ["Rising", "Established", "Viral", "Steady", "Declining", "Breakthrough"];
-
-function formatNumber(n: number): string {
-  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
-  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
-  return n.toString();
+function formatCompact(n: number): string {
+  const abs = Math.abs(n);
+  if (abs >= 1e9) return `${(n / 1e9).toFixed(2)}B`;
+  if (abs >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
+  if (abs >= 1e3) return `${(n / 1e3).toFixed(2)}K`;
+  return `${Math.round(n)}`;
 }
 
-export function generateMusicData(count: number = 50): MusicArtist[] {
-  return Array.from({ length: count }, (_, i) => {
-    const followers = Math.floor(10000 + Math.random() * 5000000);
-    const followersGrowth = Math.floor(followers * (0.01 + Math.random() * 0.05));
-    const playlistReach = Math.floor(followers * (0.5 + Math.random() * 3));
-    const playlistReachChange = Math.floor(playlistReach * ((Math.random() - 0.3) * 0.1));
-    const playlistCount = Math.floor(50 + Math.random() * 5000);
-    const playlistCountGrowth = Math.floor(playlistCount * (0.01 + Math.random() * 0.05));
-    const monthlyListeners = Math.floor(followers * (1 + Math.random() * 5));
-    const monthlyListenersChange = Math.floor(monthlyListeners * ((Math.random() - 0.3) * 0.08));
-    const growthMultiplier = () => 0.01 + Math.random() * 0.03;
-    const randomGrowth = (base: number) => Math.floor(base * growthMultiplier());
-    const randomGrowthPercent = () => Math.round((0.5 + Math.random() * 5) * 100) / 100;
-    const randomGrowthSigned = (base: number) => { const v = Math.floor(base * ((Math.random() - 0.3) * 0.05)); return v; };
-    const randomGrowthSignedPercent = () => { const v = Math.round(((Math.random() - 0.3) * 5) * 100) / 100; return v; };
+const ARTISTS = [
+  "Aurora Vale", "Neon Tigers", "Mika Sol", "The Velvet Echo", "Kairo",
+  "Lumen", "Sasha Frost", "Midnight Cartel", "Indigo Wave", "Rico Mendez",
+  "Halcyon", "Petra Lune", "The Drifters Club", "Yuki Mori", "Saint Cyprian",
+  "Nova Rae", "Echo Park Kids", "Dante Cruz", "Marisol", "The Paper Lanterns",
+  "Bly", "Cassius Gray", "Florae", "Tobias Wren", "Lola Sky",
+  "Phantom Bloom", "Ren Akiyama", "The Saltwater Saints", "Vivienne Cole", "Ozma",
+  "Calla Hart", "Brixton Row", "Sable", "The Northern Hum", "Adira",
+  "Felix Stone", "Marigold", "The Glasshouse", "Nadia Volkov", "Sunset 88",
+  "Caspian", "Wren & Wolf", "Lyric Monroe", "The Tidewater", "Esme",
+  "Kingsley Ace", "Pale Horizon", "Octavia", "The Brass Hearts", "Zaire",
+];
 
+const ARTIST_TYPES = ["Solo Artist", "Band", "Duo", "Collective", "Producer"];
+const PRONOUNS = ["She/Her", "He/Him", "They/Them"];
+const LABELS = [
+  "UMG (Republic Records)", "Sony Music", "Warner Records", "Atlantic", "Columbia",
+  "Capitol", "Interscope", "Independent", "Def Jam", "RCA",
+];
+const GENRES = ["Pop", "Hip-Hop", "Indie", "R&B", "Electronic", "Rock", "Latin", "K-Pop"];
+const REGIONS = [
+  { country: "United States", flag: "🇺🇸", continent: "North America" },
+  { country: "United Kingdom", flag: "🇬🇧", continent: "Europe" },
+  { country: "South Korea", flag: "🇰🇷", continent: "Asia" },
+  { country: "Brazil", flag: "🇧🇷", continent: "South America" },
+  { country: "Canada", flag: "🇨🇦", continent: "North America" },
+  { country: "Germany", flag: "🇩🇪", continent: "Europe" },
+  { country: "Japan", flag: "🇯🇵", continent: "Asia" },
+  { country: "France", flag: "🇫🇷", continent: "Europe" },
+  { country: "Mexico", flag: "🇲🇽", continent: "North America" },
+  { country: "Australia", flag: "🇦🇺", continent: "Oceania" },
+];
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+// Each metric describes a "stat" column: a big total + period-over-period change.
+// `base` controls magnitude.
+const METRICS: [string, number][] = [
+  // Followers / fans across platforms
+  ["spotifyFollowers", 90e6],
+  ["youtubeSubscribers", 45e6],
+  ["instagramFollowers", 120e6],
+  ["tiktokFollowers", 28e6],
+  ["deezerFans", 9e6],
+  ["facebookFollowers", 60e6],
+  ["twitterFollowers", 55e6],
+  ["soundcloudFollowers", 900e3],
+  ["songkickFans", 4e6],
+  ["snapchatSubscribers", 1.2e6],
+  ["blueskyFollowers", 8e6],
+  ["twitchFollowers", 600e3],
+  ["lineMusicArtistLikes", 500e3],
+  ["melonArtistFans", 80e3],
+  // Spotify performance
+  ["spotifyMonthlyListeners", 70e6],
+  // YouTube performance
+  ["youtubeChannelViews", 30e9],
+  ["youtubeDailyVideoViews", 12e6],
+  ["youtubeMonthlyListeners", 250e6],
+  // Engagement / plays
+  ["tiktokLikes", 200e6],
+  ["wikipediaViews", 18e3],
+  ["pandoraLifetimeStreams", 10e9],
+  ["pandoraListeners28Day", 4e6],
+  ["pandoraLifetimeStationsAdded", 40e6],
+  ["facebookTalks", 40e3],
+  ["lineMusicLikes", 900e3],
+  ["lineMusicMvPlays", 28e3],
+  ["lineMusicPlays", 120e6],
+  ["melonVideoLikes", 7e3],
+  ["melonVideoViews", 900e3],
+  ["tiktokTopVideoViews", 200e9],
+  ["soundcloudPlays", 70e6],
+  ["boomplayFavorites", 300e3],
+  ["boomplayPlays", 5e6],
+  // Playlists
+  ["spotifyPlaylistReach", 900e6],
+  ["spotifyPlaylistCount", 1.5e6],
+  ["youtubePlaylistCount", 1e3],
+  ["deezerPlaylistCount", 1e3],
+  ["itunesPlaylistCount", 2.5e3],
+  ["amazonPlaylistCount", 1.5e3],
+  ["deezerPlaylistReach", 55e6],
+  // Airwaves / discovery
+  ["tiktokTrackPosts", 100e6],
+  ["airplayStreams", 8e6],
+  ["siriusxmStreams", 140e3],
+  ["geniusPageviews", 250e6],
+  ["shazamCount", 240e6],
+  ["twitterTweetCount", 800],
+];
+
+export function generateMusicData(count: number = 2000): MusicArtist[] {
+  const rand = createRng(1337);
+  const between = (min: number, max: number) => min + rand() * (max - min);
+  const intBetween = (min: number, max: number) => Math.round(between(min, max));
+  const pick = <T>(arr: T[]): T => arr[Math.floor(rand() * arr.length)];
+  const formatDate = (year: number) => `${pick(MONTHS)} ${intBetween(1, 28)}, ${year}`;
+
+  const buildMetric = (key: string, base: number): Record<string, number | string> => {
+    const value = Math.round(base * between(0.35, 1.4));
+    const changePercent = +between(-12, 18).toFixed(2);
+    const change = Math.round((value * changePercent) / 100);
     return {
-      id: i + 1,
-      rank: i + 1,
-      artistName: ARTIST_NAMES[i % ARTIST_NAMES.length],
-      artistType: ARTIST_TYPES[i % ARTIST_TYPES.length],
-      pronouns: PRONOUNS[i % PRONOUNS.length],
-      recordLabel: RECORD_LABELS[i % RECORD_LABELS.length],
-      lyricsLanguage: LANGUAGES[i % LANGUAGES.length],
-      genre: GENRES[i % GENRES.length],
-      mood: MOODS[i % MOODS.length],
-      growthStatus: GROWTH_STATUSES[i % GROWTH_STATUSES.length],
-      followers,
-      followersFormatted: formatNumber(followers),
-      followersGrowthFormatted: formatNumber(followersGrowth),
-      followersGrowthPercent: Math.round((followersGrowth / followers) * 10000) / 100,
-      followers7DayGrowth: randomGrowth(followers),
-      followers7DayGrowthPercent: randomGrowthPercent(),
-      followers28DayGrowth: randomGrowth(followers) * 3,
-      followers28DayGrowthPercent: randomGrowthPercent() * 2,
-      followers60DayGrowth: randomGrowth(followers) * 6,
-      followers60DayGrowthPercent: randomGrowthPercent() * 3,
-      popularity: Math.floor(30 + Math.random() * 70),
-      popularityChangePercent: Math.round(((Math.random() - 0.4) * 10) * 100) / 100,
-      playlistReach,
-      playlistReachFormatted: formatNumber(playlistReach),
-      playlistReachChange,
-      playlistReachChangeFormatted: formatNumber(Math.abs(playlistReachChange)),
-      playlistReachChangePercent: Math.round((playlistReachChange / playlistReach) * 10000) / 100,
-      playlistReach7DayGrowth: randomGrowthSigned(playlistReach),
-      playlistReach7DayGrowthPercent: randomGrowthSignedPercent(),
-      playlistReach28DayGrowth: randomGrowthSigned(playlistReach) * 3,
-      playlistReach28DayGrowthPercent: randomGrowthSignedPercent() * 2,
-      playlistReach60DayGrowth: randomGrowthSigned(playlistReach) * 5,
-      playlistReach60DayGrowthPercent: randomGrowthSignedPercent() * 3,
-      playlistCount,
-      playlistCountGrowth,
-      playlistCountGrowthPercent: Math.round((playlistCountGrowth / playlistCount) * 10000) / 100,
-      playlistCount7DayGrowth: randomGrowth(playlistCount),
-      playlistCount7DayGrowthPercent: randomGrowthPercent(),
-      playlistCount28DayGrowth: randomGrowth(playlistCount) * 3,
-      playlistCount28DayGrowthPercent: randomGrowthPercent() * 2,
-      playlistCount60DayGrowth: randomGrowth(playlistCount) * 5,
-      playlistCount60DayGrowthPercent: randomGrowthPercent() * 3,
-      monthlyListeners,
-      monthlyListenersFormatted: formatNumber(monthlyListeners),
-      monthlyListenersChange,
-      monthlyListenersChangeFormatted: formatNumber(Math.abs(monthlyListenersChange)),
-      monthlyListenersChangePercent: Math.round((monthlyListenersChange / monthlyListeners) * 10000) / 100,
-      monthlyListeners7DayGrowth: randomGrowthSigned(monthlyListeners),
-      monthlyListeners7DayGrowthPercent: randomGrowthSignedPercent(),
-      monthlyListeners28DayGrowth: randomGrowthSigned(monthlyListeners) * 3,
-      monthlyListeners28DayGrowthPercent: randomGrowthSignedPercent() * 2,
-      monthlyListeners60DayGrowth: randomGrowthSigned(monthlyListeners) * 5,
-      monthlyListeners60DayGrowthPercent: randomGrowthSignedPercent() * 3,
-      conversionRate: Math.round((1 + Math.random() * 15) * 100) / 100,
-      reachFollowersRatio: Math.round((playlistReach / followers) * 10) / 10,
+      [key]: value,
+      [`${key}Formatted`]: formatCompact(value),
+      [`${key}ChangeFormatted`]: formatCompact(change),
+      [`${key}ChangePercent`]: changePercent,
+    };
+  };
+
+  const buildRates = () => ({
+    spotifyPopularity: intBetween(60, 99),
+    spotifyPopularityChangePercent: +between(-3, 3).toFixed(2),
+    spotifyFollowersToListenersRatio: +between(40, 220).toFixed(1),
+    spotifyReachFollowersRatio: +between(1.2, 9).toFixed(2),
+    youtubeEngagementRate: +between(0.05, 0.6).toFixed(2),
+    instagramEngagementRate: +between(0.4, 3.2).toFixed(2),
+    tiktokEngagementRate: +between(1.5, 8).toFixed(2),
+    tiktokEngagementRateChange: +between(-0.6, 0.6).toFixed(2),
+  });
+
+  const buildAudienceAge = (): Record<string, number> => {
+    // weighted toward 18-34, like a typical pop audience
+    const raw: Record<string, number> = {
+      "13-17": between(4, 14),
+      "18-24": between(25, 45),
+      "25-34": between(20, 40),
+      "35-44": between(6, 18),
+      "45-59": between(3, 12),
+      "60+": between(1, 6),
     };
+    const total = Object.values(raw).reduce((a, b) => a + b, 0);
+    const age: Record<string, number> = {};
+    for (const k of Object.keys(raw)) age[k] = Math.round((raw[k] / total) * 100);
+    return age;
+  };
+
+  const buildAudienceGender = () => {
+    const f = intBetween(35, 70);
+    return { f, m: 100 - f };
+  };
+
+  const rows: MusicArtist[] = Array.from({ length: count }, (_, i) => {
+    // Cycle through the base name pool, adding a suffix once we wrap around so
+    // every row stays unique even past the 50 seed names.
+    const baseName = ARTISTS[i % ARTISTS.length];
+    const cycle = Math.floor(i / ARTISTS.length);
+    const artistName = cycle === 0 ? baseName : `${baseName} ${cycle + 1}`;
+
+    const region = pick(REGIONS);
+    const earliestYear = intBetween(2003, 2018);
+    const row = {
+      id: `artist-${i + 1}`,
+      rank: i + 1,
+      rankChange: intBetween(-6, 6),
+      artistName,
+      artistType: pick(ARTIST_TYPES),
+      pronouns: pick(PRONOUNS),
+      recordLabel: pick(LABELS),
+      genre: pick(GENRES),
+      country: region.country,
+      countryFlag: region.flag,
+      continent: region.continent,
+      score: +between(45, 99.9).toFixed(1),
+      scoreChange: +between(-2.5, 2.5).toFixed(1),
+      earliestAlbumReleaseDate: formatDate(earliestYear),
+      latestAlbumReleaseDate: formatDate(intBetween(earliestYear + 1, 2026)),
+      audienceAge: buildAudienceAge(),
+      audienceGender: buildAudienceGender(),
+      ...buildRates(),
+    } as MusicArtist;
+
+    for (const [key, base] of METRICS) {
+      Object.assign(row, buildMetric(key, base));
+    }
+
+    return row;
   });
+
+  // Sort by score desc and re-rank so #1 is the top performer.
+  rows.sort((a, b) => b.score - a.score);
+  rows.forEach((row, idx) => {
+    row.rank = idx + 1;
+  });
+
+  return rows;
 }
 
-export const musicData = generateMusicData(50);
+export const musicData = generateMusicData(2000);
 
-export const musicHeaders: VueColumnDef[] = [
+export const musicHeaders: VueColumnDef<MusicArtist>[] = [
   { accessor: "rank", label: "#", width: 60, sortable: true, editable: false, align: "center", type: "number", pinned: "left" },
   { accessor: "artistName", label: "Artist", width: 330, sortable: true, editable: false, align: "left", type: "string", pinned: "left" },
   { accessor: "artistType", label: "Identity", width: 280, sortable: false, editable: false, align: "left", type: "string" },
@@ -198,6 +292,11 @@ export const musicHeaders: VueColumnDef[] = [
   { accessor: "reachFollowersRatio", label: "Reach/Followers Ratio", width: 220, sortable: true, editable: false, align: "right", type: "number" },
 ];
 
+export const musicConfig = {
+  headers: musicHeaders,
+  rows: musicData,
+};
+
 export const MUSIC_THEME_COLORS: Record<string, Record<string, string>> = {
   "modern-light": { gray: "#374151", grayMuted: "#9ca3af", success: "#16a34a", successBg: "#f0fdf4", error: "#dc2626", errorBg: "#fef2f2", primary: "#2563eb", primaryBg: "#eff6ff", warning: "#d97706", warningBg: "#fffbeb", tagBorder: "#e5e7eb", tagBg: "#ffffff", tagText: "#000000", highScore: "#16a34a", mediumScore: "#2563eb", lowScore: "#f59e0b", veryLowScore: "#ef4444" },
   light: { gray: "#374151", grayMuted: "#9ca3af", success: "#16a34a", successBg: "#f0fdf4", error: "#dc2626", errorBg: "#fef2f2", primary: "#2563eb", primaryBg: "#eff6ff", warning: "#d97706", warningBg: "#fffbeb", tagBorder: "#e5e7eb", tagBg: "#ffffff", tagText: "#000000", highScore: "#16a34a", mediumScore: "#2563eb", lowScore: "#f59e0b", veryLowScore: "#ef4444" },
@@ -208,8 +307,3 @@ export const MUSIC_THEME_COLORS: Record<string, Record<string, string>> = {
 export function getMusicThemeColors(theme?: string): Record<string, string> {
   return MUSIC_THEME_COLORS[theme || "modern-light"] || MUSIC_THEME_COLORS["modern-light"];
 }
-
-export const musicConfig = {
-  headers: musicHeaders,
-  rows: musicData,
-} as const;
diff --git a/packages/examples/vue/src/demos/nested-headers/NestedHeadersDemo.vue b/packages/examples/vue/src/demos/nested-headers/NestedHeadersDemo.vue
index a42b90f17..eec026f76 100644
--- a/packages/examples/vue/src/demos/nested-headers/NestedHeadersDemo.vue
+++ b/packages/examples/vue/src/demos/nested-headers/NestedHeadersDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="nestedHeadersConfig.headers"
     :rows="nestedHeadersConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :column-resizing="nestedHeadersConfig.tableProps.columnResizing"
@@ -9,11 +10,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 { nestedHeadersConfig } from "./nested-headers.demo-data";
+import type { StudentScores } from "./nested-headers.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<StudentScores>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/nested-headers/nested-headers.demo-data.ts b/packages/examples/vue/src/demos/nested-headers/nested-headers.demo-data.ts
index b5f092ea4..8a4bf08d9 100644
--- a/packages/examples/vue/src/demos/nested-headers/nested-headers.demo-data.ts
+++ b/packages/examples/vue/src/demos/nested-headers/nested-headers.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface StudentScores {
+  id: number;
+  name: string;
+  mathScore: number;
+  scienceScore: number;
+  historyScore: number;
+  grade: string;
+}
 
-export const nestedHeadersHeaders: VueColumnDef[] = [
+export const nestedHeadersHeaders: VueColumnDef<StudentScores>[] = [
   { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
   { accessor: "name", label: "Name", width: "1fr", sortable: true, type: "string" },
   {
@@ -20,7 +28,7 @@ export const nestedHeadersHeaders: VueColumnDef[] = [
   { accessor: "grade", label: "Overall Grade", width: 120, sortable: true, type: "string", align: "center" },
 ];
 
-export const nestedHeadersData = [
+export const nestedHeadersData: StudentScores[] = [
   { id: 1, name: "Aria Chen", mathScore: 94, scienceScore: 89, historyScore: 92, grade: "A" },
   { id: 2, name: "Kai Rodriguez", mathScore: 81, scienceScore: 85, historyScore: 78, grade: "B" },
   { id: 3, name: "Luna Nakamura", mathScore: 96, scienceScore: 94, historyScore: 93, grade: "A" },
@@ -38,4 +46,4 @@ export const nestedHeadersConfig = {
   headers: nestedHeadersHeaders,
   rows: nestedHeadersData,
   tableProps: { columnResizing: true },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/pagination/PaginationDemo.vue b/packages/examples/vue/src/demos/pagination/PaginationDemo.vue
index d9bc8d085..87c21e813 100644
--- a/packages/examples/vue/src/demos/pagination/PaginationDemo.vue
+++ b/packages/examples/vue/src/demos/pagination/PaginationDemo.vue
@@ -5,6 +5,7 @@
     :is-loading="isLoading"
     :on-next-page="onNextPage"
     :rows="rows"
+    :get-row-id="getRowId"
     :rows-per-page="PAGINATION_ROWS_PER_PAGE"
     :enable-pagination="true"
     :theme="theme"
@@ -13,13 +14,17 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-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 { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
+import type { HotelStaff } from "./pagination.demo-data";
 import "@simple-table/vue/styles.css";
 
-const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {});
+withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {});
 
-const rows = ref(paginationData.slice(0, PAGINATION_ROWS_PER_PAGE));
+const getRowId = ({ row }: GetRowIdParams<HotelStaff>) => row.id;
+
+const rows = ref<HotelStaff[]>(paginationData.slice(0, PAGINATION_ROWS_PER_PAGE));
 const isLoading = ref(false);
 
 const onNextPage = async (pageIndex: number) => {
diff --git a/packages/examples/vue/src/demos/pagination/pagination.demo-data.ts b/packages/examples/vue/src/demos/pagination/pagination.demo-data.ts
index ea322c8d1..f6e5dc4f6 100644
--- a/packages/examples/vue/src/demos/pagination/pagination.demo-data.ts
+++ b/packages/examples/vue/src/demos/pagination/pagination.demo-data.ts
@@ -1,10 +1,18 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface HotelStaff {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  department: string;
+  status: string;
+}
 
 export const PAGINATION_ROWS_PER_PAGE = 9;
 
-export const paginationHeaders: VueColumnDef[] = [
+export const paginationHeaders: VueColumnDef<HotelStaff>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   { accessor: "name", label: "Name", width: "1fr", minWidth: 100, type: "string" },
   { accessor: "email", label: "Email", width: 200, type: "string" },
@@ -13,7 +21,7 @@ export const paginationHeaders: VueColumnDef[] = [
   { accessor: "status", label: "Status", width: 110, type: "string" },
 ];
 
-export const paginationData: Row[] = [
+export const paginationData: HotelStaff[] = [
   { id: 1, name: "Miguel Santos", email: "miguel.santos@grandhotel.com", role: "Guest Relations Manager", department: "Front Office", status: "Active" },
   { id: 2, name: "Carmen Delacroix", email: "carmen.d@grandhotel.com", role: "Head Concierge", department: "Concierge", status: "Active" },
   { id: 3, name: "Dimitri Petrov", email: "dimitri.p@grandhotel.com", role: "Executive Chef", department: "Culinary", status: "Active" },
@@ -50,4 +58,4 @@ export const paginationConfig = {
     rowsPerPage: PAGINATION_ROWS_PER_PAGE,
     enablePagination: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/pivot/PivotDemo.vue b/packages/examples/vue/src/demos/pivot/PivotDemo.vue
index ab691ba24..c5880de70 100644
--- a/packages/examples/vue/src/demos/pivot/PivotDemo.vue
+++ b/packages/examples/vue/src/demos/pivot/PivotDemo.vue
@@ -23,6 +23,7 @@
     <SimpleTable
       :columns="pivotDemoConfig.headers"
       :rows="pivotDemoConfig.rows"
+      :get-row-id="getRowId"
       :pivot="active.pivot"
       :column-resizing="true"
       :expand-all="nestedRows"
@@ -36,8 +37,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import { pivotDemoConfig, pivotPresets } from "./pivot.demo-data";
+import type { PivotFact } from "./pivot.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -49,4 +51,6 @@ const active = computed(
   () => pivotPresets.find((p) => p.id === activeId.value) ?? pivotPresets[0]
 );
 const nestedRows = computed(() => active.value.pivot.rows.length > 1);
+
+const getRowId = ({ row }: GetRowIdParams<PivotFact>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/pivot/pivot.demo-data.ts b/packages/examples/vue/src/demos/pivot/pivot.demo-data.ts
index aa7294fe3..b8bf7a1c5 100644
--- a/packages/examples/vue/src/demos/pivot/pivot.demo-data.ts
+++ b/packages/examples/vue/src/demos/pivot/pivot.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 pivotHeaders: VueColumnDef[] = [
+export interface PivotFact {
+  id: string;
+  region: string;
+  country: string;
+  category: string;
+  product: string;
+  channel: string;
+  year: number;
+  quarter: string;
+  sales: number;
+  units: number;
+  cost: number;
+}
+
+export const pivotHeaders: VueColumnDef<PivotFact>[] = [
   { accessor: "region", label: "Region", width: 110, type: "string" },
   { accessor: "country", label: "Country", width: 100, type: "string" },
   { accessor: "category", label: "Category", width: 110, type: "string" },
@@ -35,33 +49,32 @@ export const pivotHeaders: 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 generatePivotRows(): Row[] {
-  const rows: Row[] = [];
+export function generatePivotRows(): PivotFact[] {
+  const rows: PivotFact[] = [];
   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) {
+                // Sparse facts — skip ~1/3 of combinations
                 if ((id + year + quarter.charCodeAt(1) + channel.length) % 5 !== 0) {
                   id++;
                   continue;
@@ -91,7 +104,7 @@ export function generatePivotRows(): Row[] {
   return rows;
 }
 
-export const pivotRows: Row[] = generatePivotRows();
+export const pivotRows: PivotFact[] = generatePivotRows();
 
 export type PivotPreset = {
   id: string;
diff --git a/packages/examples/vue/src/demos/programmatic-control/ProgrammaticControlDemo.vue b/packages/examples/vue/src/demos/programmatic-control/ProgrammaticControlDemo.vue
index 348a2e8ed..57678d850 100644
--- a/packages/examples/vue/src/demos/programmatic-control/ProgrammaticControlDemo.vue
+++ b/packages/examples/vue/src/demos/programmatic-control/ProgrammaticControlDemo.vue
@@ -24,6 +24,7 @@
       ref="tableRef"
       :columns="headers"
       :rows="programmaticControlConfig.rows"
+      :get-row-id="getRowId"
       :height="height"
       :theme="theme"
     />
@@ -33,8 +34,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, TableAPI, VueColumnDef } from "@simple-table/vue";
+import type { Theme, TableAPI, VueColumnDef, CellRendererProps, GetRowIdParams } from "@simple-table/vue";
 import { programmaticControlConfig, PROGRAMMATIC_CONTROL_STATUS_COLORS } from "./programmatic-control.demo-data";
+import type { ProgrammaticControlProduct } from "./programmatic-control.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -43,19 +45,20 @@ withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
 
 const tableRef = ref<{ getAPI: () => TableAPI | null } | null>(null);
 const statusMessage = ref("No status message");
+const getRowId = ({ row }: GetRowIdParams<ProgrammaticControlProduct>) => row.id;
 
-const headers: VueColumnDef[] = programmaticControlConfig.headers.map((h) => {
-  if (h.accessor === "status") {
+const headers: VueColumnDef<ProgrammaticControlProduct>[] = programmaticControlConfig.headers.map((col) => {
+  if (col.accessor === "status") {
     return {
-      ...h,
-      cellRenderer: ({ row }: { row: Record<string, unknown> }) => {
-        const s = String(row.status);
+      ...col,
+      cellRenderer: ({ row }: CellRendererProps<ProgrammaticControlProduct>) => {
+        const s = row.status;
         const colors = PROGRAMMATIC_CONTROL_STATUS_COLORS[s] ?? { bg: "#f3f4f6", color: "#374151" };
         return `<span style="background:${colors.bg};color:${colors.color};padding:4px 8px;border-radius:4px;font-size:12px;font-weight:bold">${s}</span>`;
       },
     };
   }
-  return { ...h };
+  return { ...col };
 });
 
 function handleSortByName() {
diff --git a/packages/examples/vue/src/demos/programmatic-control/programmatic-control.demo-data.ts b/packages/examples/vue/src/demos/programmatic-control/programmatic-control.demo-data.ts
index 7139d2a91..dfef6558b 100644
--- a/packages/examples/vue/src/demos/programmatic-control/programmatic-control.demo-data.ts
+++ b/packages/examples/vue/src/demos/programmatic-control/programmatic-control.demo-data.ts
@@ -1,6 +1,14 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ProgrammaticControlProduct {
+  id: number;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+  status: string;
+}
 
 export const STATUS_COLORS: Record<string, { bg: string; color: string }> = {
   Available: { bg: "#dcfce7", color: "#166534" },
@@ -8,7 +16,7 @@ export const STATUS_COLORS: Record<string, { bg: string; color: string }> = {
   "Out of Stock": { bg: "#fee2e2", color: "#991b1b" },
 };
 
-export const programmaticControlData = [
+export const programmaticControlData: ProgrammaticControlProduct[] = [
   { id: 1, name: "Wireless Keyboard", category: "Electronics", price: 49.99, stock: 145, status: "Available" },
   { id: 2, name: "Ergonomic Mouse", category: "Electronics", price: 29.99, stock: 12, status: "Low Stock" },
   { id: 3, name: "USB-C Hub", category: "Electronics", price: 39.99, stock: 234, status: "Available" },
@@ -23,7 +31,7 @@ export const programmaticControlData = [
   { id: 12, name: "Desk Lamp LED", category: "Appliances", price: 44.99, stock: 0, status: "Out of Stock" },
 ];
 
-export const programmaticControlHeaders: VueColumnDef[] = [
+export const programmaticControlHeaders: VueColumnDef<ProgrammaticControlProduct>[] = [
   { accessor: "id", label: "ID", width: 70, type: "number", sortable: true, filterable: true },
   { accessor: "name", label: "Product Name", width: "1fr", minWidth: 150, type: "string", sortable: true, filterable: true },
   {
@@ -51,6 +59,6 @@ export const programmaticControlHeaders: VueColumnDef[] = [
 export const programmaticControlConfig = {
   headers: programmaticControlHeaders,
   rows: programmaticControlData,
-} as const;
+};
 
 export { STATUS_COLORS as PROGRAMMATIC_CONTROL_STATUS_COLORS };
diff --git a/packages/examples/vue/src/demos/quick-filter/QuickFilterDemo.vue b/packages/examples/vue/src/demos/quick-filter/QuickFilterDemo.vue
index 29bbf082f..3638a7e87 100644
--- a/packages/examples/vue/src/demos/quick-filter/QuickFilterDemo.vue
+++ b/packages/examples/vue/src/demos/quick-filter/QuickFilterDemo.vue
@@ -57,6 +57,7 @@
     <SimpleTable
       :columns="quickFilterConfig.headers"
       :rows="quickFilterConfig.rows"
+      :get-row-id="getRowId"
       :height="height"
       :theme="theme"
       :quick-filter="{ text: searchText, mode: filterMode, caseSensitive }"
@@ -66,14 +67,18 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, QuickFilterMode } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, QuickFilterMode, GetRowIdParams } from "@simple-table/vue";
 import { quickFilterConfig } from "./quick-filter.demo-data";
+import type { QuickFilterEmployee } from "./quick-filter.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
+const getRowId = ({ row }: GetRowIdParams<QuickFilterEmployee>) => row.id;
+
 const searchText = ref("");
 const filterMode = ref<QuickFilterMode>("simple");
 const caseSensitive = ref(false);
diff --git a/packages/examples/vue/src/demos/quick-filter/quick-filter.demo-data.ts b/packages/examples/vue/src/demos/quick-filter/quick-filter.demo-data.ts
index f9316a6e1..73903b204 100644
--- a/packages/examples/vue/src/demos/quick-filter/quick-filter.demo-data.ts
+++ b/packages/examples/vue/src/demos/quick-filter/quick-filter.demo-data.ts
@@ -1,8 +1,17 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface QuickFilterEmployee {
+  id: number;
+  name: string;
+  age: number;
+  department: string;
+  salary: number;
+  status: string;
+  location: string;
+}
 
-export const quickFilterHeaders: VueColumnDef[] = [
+export const quickFilterHeaders: VueColumnDef<QuickFilterEmployee>[] = [
   { accessor: "name", label: "Employee Name", width: 180, type: "string" },
   { accessor: "age", label: "Age", width: 80, type: "number" },
   { accessor: "department", label: "Department", width: 140, type: "string" },
@@ -11,7 +20,7 @@ export const quickFilterHeaders: VueColumnDef[] = [
   { accessor: "location", label: "Location", width: 140, type: "string" },
 ];
 
-export const quickFilterData = [
+export const quickFilterData: QuickFilterEmployee[] = [
   { id: 1, name: "Alice Johnson", age: 28, department: "Engineering", salary: 95000, status: "Active", location: "New York" },
   { id: 2, name: "Bob Smith", age: 35, department: "Sales", salary: 75000, status: "Active", location: "Los Angeles" },
   { id: 3, name: "Charlie Davis", age: 42, department: "Engineering", salary: 110000, status: "Active", location: "San Francisco" },
@@ -29,5 +38,4 @@ export const quickFilterData = [
 export const quickFilterConfig = {
   headers: quickFilterHeaders,
   rows: quickFilterData,
-  tableProps: { quickFilter: { text: "", mode: "simple" as const, caseSensitive: false } },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/quick-start/QuickStartDemo.vue b/packages/examples/vue/src/demos/quick-start/QuickStartDemo.vue
index 20a938721..b6ecc8244 100644
--- a/packages/examples/vue/src/demos/quick-start/QuickStartDemo.vue
+++ b/packages/examples/vue/src/demos/quick-start/QuickStartDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="quickStartConfig.headers"
     :rows="quickStartConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :enable-column-editor="quickStartConfig.tableProps.enableColumnEditor"
@@ -11,11 +12,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 { quickStartConfig } from "./quick-start.demo-data";
+import type { QuickStartEmployee } from "./quick-start.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "300px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<QuickStartEmployee>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/quick-start/quick-start.demo-data.ts b/packages/examples/vue/src/demos/quick-start/quick-start.demo-data.ts
index bc545fe14..df6bc1223 100644
--- a/packages/examples/vue/src/demos/quick-start/quick-start.demo-data.ts
+++ b/packages/examples/vue/src/demos/quick-start/quick-start.demo-data.ts
@@ -1,9 +1,16 @@
 // Self-contained demo table setup for this example.
-import type { Row } from "@simple-table/vue";
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface QuickStartEmployee {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+  startDate: string;
+}
 
-export const QUICK_START_DATA: Row[] = [
+export const QUICK_START_DATA: QuickStartEmployee[] = [
   {
     id: 1,
     name: "Marcus Rodriguez",
@@ -103,7 +110,7 @@ export const QUICK_START_DATA: Row[] = [
 ];
 
 
-export const quickStartHeaders: VueColumnDef[] = [
+export const quickStartHeaders: VueColumnDef<QuickStartEmployee>[] = [
   { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
   {
     accessor: "name",
@@ -127,4 +134,4 @@ export const quickStartConfig = {
     selectableCells: true,
     customTheme: { rowHeight: 32 },
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/row-grouping/RowGroupingDemo.vue b/packages/examples/vue/src/demos/row-grouping/RowGroupingDemo.vue
index 86a7905b9..5f6a92e53 100644
--- a/packages/examples/vue/src/demos/row-grouping/RowGroupingDemo.vue
+++ b/packages/examples/vue/src/demos/row-grouping/RowGroupingDemo.vue
@@ -14,7 +14,7 @@
       :rows="rowGroupingConfig.rows"
       :row-grouping="rowGroupingConfig.tableProps.rowGrouping"
       :enable-sticky-parents="true"
-      :get-row-id="rowGroupingConfig.tableProps.getRowId"
+      :get-row-id="getRowId"
       :column-resizing="true"
       :height="height"
       :theme="theme"
@@ -24,8 +24,10 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import {SimpleTable} from "@simple-table/vue";import type { Theme, TableAPI } from "@simple-table/vue";
+import { SimpleTable } from "@simple-table/vue";
+import type { Theme, TableAPI, GetRowIdParams } from "@simple-table/vue";
 import { rowGroupingConfig } from "./row-grouping.demo-data";
+import type { OrgUnit } from "./row-grouping.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
@@ -33,6 +35,7 @@ withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
 });
 
 const tableRef = ref<{ getAPI: () => TableAPI | null } | null>(null);
+const getRowId = ({ row }: GetRowIdParams<OrgUnit>) => row.id;
 
 function btnStyle(color: string) {
   return {
diff --git a/packages/examples/vue/src/demos/row-grouping/row-grouping.demo-data.ts b/packages/examples/vue/src/demos/row-grouping/row-grouping.demo-data.ts
index bd57a48f1..0c2508d68 100644
--- a/packages/examples/vue/src/demos/row-grouping/row-grouping.demo-data.ts
+++ b/packages/examples/vue/src/demos/row-grouping/row-grouping.demo-data.ts
@@ -1,8 +1,22 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+/** Shared metrics at every grouping depth; nesting uses rowGrouping keys. */
+export interface OrgUnit {
+  id: string;
+  organization: string;
+  employees: number;
+  budget: string;
+  performance: string;
+  location: string;
+  growthRate: string;
+  status: string;
+  established: string;
+  divisions?: OrgUnit[];
+  departments?: OrgUnit[];
+}
 
-export const rowGroupingHeaders: VueColumnDef[] = [
+export const rowGroupingHeaders: VueColumnDef<OrgUnit>[] = [
   { accessor: "organization", label: "Organization", width: 200, expandable: true, type: "string" },
   { accessor: "employees", label: "Employees", width: 100, type: "number" },
   { accessor: "budget", label: "Annual Budget", width: 140, type: "string" },
@@ -13,7 +27,7 @@ export const rowGroupingHeaders: VueColumnDef[] = [
   { accessor: "established", label: "Est. Date", width: 110, type: "date" },
 ];
 
-export const rowGroupingData = [
+export const rowGroupingData: OrgUnit[] = [
   {
     id: "company-1",
     organization: "TechSolutions Inc.",
@@ -197,9 +211,8 @@ export const rowGroupingConfig = {
   headers: rowGroupingHeaders,
   rows: rowGroupingData,
   tableProps: {
-    rowGrouping: ["divisions", "departments"] as string[],
+    rowGrouping: ["divisions", "departments"],
     enableStickyParents: true,
-    getRowId: ({ row }: { row: Record<string, unknown> }) => String(row.id),
     columnResizing: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/row-height/RowHeightDemo.vue b/packages/examples/vue/src/demos/row-height/RowHeightDemo.vue
index 7c8f17a9e..2335fc903 100644
--- a/packages/examples/vue/src/demos/row-height/RowHeightDemo.vue
+++ b/packages/examples/vue/src/demos/row-height/RowHeightDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="rowHeightConfig.headers"
     :rows="rowHeightConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :custom-theme="rowHeightConfig.tableProps.customTheme"
@@ -9,11 +10,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 { rowHeightConfig } from "./row-height.demo-data";
+import type { ArchitectStaff } from "./row-height.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<ArchitectStaff>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/row-height/row-height.demo-data.ts b/packages/examples/vue/src/demos/row-height/row-height.demo-data.ts
index d22882159..885953a88 100644
--- a/packages/examples/vue/src/demos/row-height/row-height.demo-data.ts
+++ b/packages/examples/vue/src/demos/row-height/row-height.demo-data.ts
@@ -1,8 +1,15 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface ArchitectStaff {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+}
 
-export const rowHeightHeaders: VueColumnDef[] = [
+export const rowHeightHeaders: VueColumnDef<ArchitectStaff>[] = [
   { accessor: "id", label: "ID", width: 80, type: "number" },
   { accessor: "name", label: "Name", minWidth: 150, width: "1fr", type: "string" },
   { accessor: "age", label: "Age", width: 100, type: "string" },
@@ -10,7 +17,7 @@ export const rowHeightHeaders: VueColumnDef[] = [
   { accessor: "department", label: "Department", minWidth: 180, width: "1fr", type: "string" },
 ];
 
-export const rowHeightData = [
+export const rowHeightData: ArchitectStaff[] = [
   { id: 1, name: "Valentina Romano", age: 34, role: "Principal Architect", department: "Design" },
   { id: 2, name: "Mateo Fernandez", age: 29, role: "Project Architect", department: "Design" },
   { id: 3, name: "Amira Okafor", age: 41, role: "Design Director", department: "Leadership" },
@@ -29,4 +36,4 @@ export const rowHeightConfig = {
   headers: rowHeightHeaders,
   rows: rowHeightData,
   tableProps: { customTheme: { rowHeight: 32 } },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/row-selection/RowSelectionDemo.vue b/packages/examples/vue/src/demos/row-selection/RowSelectionDemo.vue
index 67c9dfa65..b6e9d3fb9 100644
--- a/packages/examples/vue/src/demos/row-selection/RowSelectionDemo.vue
+++ b/packages/examples/vue/src/demos/row-selection/RowSelectionDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, RowSelectionChangeProps, VueColumnDef } from "@simple-table/vue";
+import type { Theme, RowSelectionChangeProps, VueColumnDef, CellRendererProps, GetRowIdParams } from "@simple-table/vue";
 import { rowSelectionConfig, rowSelectionData } from "./row-selection.demo-data";
 import type { LibraryBook } from "./row-selection.demo-data";
 import "@simple-table/vue/styles.css";
@@ -11,6 +11,7 @@ withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
 });
 
 const selectedBooks = ref<LibraryBook[]>([]);
+const getRowId = ({ row }: GetRowIdParams<LibraryBook>) => row.id;
 
 const selectedTitles = computed(() =>
   selectedBooks.value.length > 0
@@ -18,21 +19,21 @@ const selectedTitles = computed(() =>
     : "None",
 );
 
-const headers: VueColumnDef[] = rowSelectionConfig.headers.map((h) => {
-  if (h.accessor === "status") {
+const headers: VueColumnDef<LibraryBook>[] = rowSelectionConfig.headers.map((col) => {
+  if (col.accessor === "status") {
     return {
-      ...h,
-      cellRenderer: ({ row }: { row: Record<string, unknown> }) => {
-        const s = String(row.status);
+      ...col,
+      cellRenderer: ({ row }: CellRendererProps<LibraryBook>) => {
+        const s = row.status;
         const color = s === "Available" ? "#16a34a" : s === "Checked Out" ? "#ea580c" : "#dc2626";
         return `<span style="color:${color};font-weight:bold">${s}</span>`;
       },
     };
   }
-  return { ...h };
+  return { ...col };
 });
 
-function handleRowSelectionChange(props: RowSelectionChangeProps) {
+function handleRowSelectionChange(props: RowSelectionChangeProps<LibraryBook>) {
   selectedBooks.value = rowSelectionData.filter((book) =>
     props.selectedRows.has(String(book.id)),
   );
@@ -57,6 +58,7 @@ function handleRowSelectionChange(props: RowSelectionChangeProps) {
 
     <SimpleTable
       :columns="headers"
+      :get-row-id="getRowId"
       :rows="rowSelectionConfig.rows"
       :enable-row-selection="true"
       :column-resizing="true"
diff --git a/packages/examples/vue/src/demos/row-selection/row-selection.demo-data.ts b/packages/examples/vue/src/demos/row-selection/row-selection.demo-data.ts
index ac94f4ea4..cda16d262 100644
--- a/packages/examples/vue/src/demos/row-selection/row-selection.demo-data.ts
+++ b/packages/examples/vue/src/demos/row-selection/row-selection.demo-data.ts
@@ -31,7 +31,7 @@ export const rowSelectionData: LibraryBook[] = [
   { id: 1012, isbn: "978-0593229439", title: "Climate Solutions for Tomorrow", author: "Dr. Hassan Al-Rashid", genre: "Environmental Science", yearPublished: 2022, pages: 398, rating: 4.8, status: "Available", librarySection: "Science" },
 ];
 
-export const rowSelectionHeaders: VueColumnDef[] = [
+export const rowSelectionHeaders: VueColumnDef<LibraryBook>[] = [
   { accessor: "id", label: "Book ID", width: 80, sortable: true, type: "number" },
   { accessor: "isbn", label: "ISBN", width: 120, sortable: true, type: "string" },
   { accessor: "title", label: "Title", minWidth: 150, width: "1fr", sortable: true, type: "string" },
@@ -53,4 +53,4 @@ export const rowSelectionConfig = {
     columnReordering: true,
     selectableCells: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/sales/SalesDemo.vue b/packages/examples/vue/src/demos/sales/SalesDemo.vue
index 2202eb371..ee1c4a5e1 100644
--- a/packages/examples/vue/src/demos/sales/SalesDemo.vue
+++ b/packages/examples/vue/src/demos/sales/SalesDemo.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, h, type VNodeChild } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, VueColumnDef, CellRendererProps, CellChangeProps, Row } from "@simple-table/vue";
+import type {
+  Theme,
+  VueColumnDef,
+  CellRendererProps,
+  CellChangeProps,
+  GetRowIdParams,
+} from "@simple-table/vue";
 import { getThemeColors, salesHeadersCore, salesSampleRows, type SalesRow } from "./sales.demo-data";
 import "@simple-table/vue/styles.css";
 
@@ -23,10 +29,9 @@ function hv(
   return h(tag, { style: styles ?? {} }, children ?? []);
 }
 
-const salesRenderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
+const salesRenderers: Record<string, (p: CellRendererProps<SalesRow>) => VNodeChild> = {
   dealValue: ({ row, theme }) => {
-    if (row.dealValue === "—") return "—";
-    const value = (row as unknown as SalesRow).dealValue;
+    const value = row.dealValue;
     const colors = getThemeColors(theme);
     let color = colors.gray;
     let fontWeight = "normal";
@@ -41,9 +46,7 @@ const salesRenderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
   },
 
   isWon: ({ row }) => {
-    if (row.isWon === "—") return "—";
-    const d = row as unknown as SalesRow;
-    const s = d.isWon ? { bg: "#f6ffed", text: "#2a6a0d" } : { bg: "#fff1f0", text: "#a8071a" };
+    const s = row.isWon ? { bg: "#f6ffed", text: "#2a6a0d" } : { bg: "#fff1f0", text: "#a8071a" };
     return hv(
       "span",
       {
@@ -55,21 +58,19 @@ const salesRenderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
         borderRadius: "2px",
         display: "inline-block",
       },
-      [d.isWon ? "Won" : "Lost"],
+      [row.isWon ? "Won" : "Lost"],
     );
   },
 
   commission: ({ row, theme }) => {
-    if (row.commission === "—") return "—";
-    const value = (row as unknown as SalesRow).commission;
+    const value = row.commission;
     const colors = getThemeColors(theme);
     if (value === 0) return hv("span", { color: colors.grayMuted }, ["$0.00"]);
     return `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   },
 
   profitMargin: ({ row, theme }) => {
-    if (row.profitMargin === "—") return "—";
-    const value = (row as unknown as SalesRow).profitMargin;
+    const value = row.profitMargin;
     const colors = getThemeColors(theme);
     let color = colors.gray;
     let fontWeight = "normal";
@@ -108,8 +109,7 @@ const salesRenderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
   },
 
   dealProfit: ({ row, theme }) => {
-    if (row.dealProfit === "—") return "—";
-    const value = (row as unknown as SalesRow).dealProfit;
+    const value = row.dealProfit;
     const colors = getThemeColors(theme);
     if (value === 0) return hv("span", { color: colors.grayMuted }, ["$0.00"]);
     let color = colors.gray;
@@ -126,22 +126,23 @@ const salesRenderers: Record<string, (p: CellRendererProps) => VNodeChild> = {
 };
 
 function applyRenderers(
-  hdrs: readonly VueColumnDef[],
-  map: Record<string, (p: CellRendererProps) => VNodeChild>,
-): VueColumnDef[] {
-  return hdrs.map((h) => {
-    const renderer = map[h.accessor as string];
-    const clone: VueColumnDef = renderer ? { ...h, cellRenderer: renderer } : { ...h };
-    if (h.children) {
-      clone.children = applyRenderers(h.children, map);
+  hdrs: readonly VueColumnDef<SalesRow>[],
+  map: Record<string, (p: CellRendererProps<SalesRow>) => VNodeChild>,
+): VueColumnDef<SalesRow>[] {
+  return hdrs.map((col) => {
+    const renderer = map[col.accessor as string];
+    const clone: VueColumnDef<SalesRow> = renderer ? { ...col, cellRenderer: renderer } : { ...col };
+    if (col.children) {
+      clone.children = applyRenderers(col.children, map);
     }
     return clone;
   });
 }
 
 const headers = applyRenderers(salesHeadersCore, salesRenderers);
+const getRowId = ({ row }: GetRowIdParams<SalesRow>) => row.id;
 
-const data = ref<Row[]>((salesSampleRows.map((r) => ({ ...r })) as Row[]));
+const data = ref<SalesRow[]>(salesSampleRows.map((r) => ({ ...r })));
 const isMobile = ref(false);
 
 const checkMobile = () => {
@@ -157,16 +158,17 @@ onUnmounted(() => {
   window.removeEventListener("resize", checkMobile);
 });
 
-const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps) => {
+const handleCellEdit = ({ accessor, newValue, row }: CellChangeProps<SalesRow>) => {
   data.value = data.value.map((item) =>
     item.id === row.id ? { ...item, [accessor]: newValue } : item,
-  ) as Row[];
+  );
 };
 </script>
 
 <template>
   <SimpleTable
     :columns="headers"
+    :get-row-id="getRowId"
     :rows="data"
     :height="formatTableHeight(props.height)"
     :theme="props.theme"
diff --git a/packages/examples/vue/src/demos/sales/sales.demo-data.ts b/packages/examples/vue/src/demos/sales/sales.demo-data.ts
index ae4fc83b0..078ebf81b 100644
--- a/packages/examples/vue/src/demos/sales/sales.demo-data.ts
+++ b/packages/examples/vue/src/demos/sales/sales.demo-data.ts
@@ -143,7 +143,7 @@ const SALES_SAMPLE_INBOUND: SalesInboundRow[] = [
 
 export const salesSampleRows: SalesRow[] = processSalesData(SALES_SAMPLE_INBOUND);
 
-export const salesHeadersCore: VueColumnDef[] = [
+export const salesHeadersCore: VueColumnDef<SalesRow>[] = [
   {
     accessor: "repName",
     label: "Sales Representative",
@@ -292,8 +292,8 @@ export const salesHeadersCore: VueColumnDef[] = [
           { label: "Training", value: "Training" },
           { label: "Support", value: "Support" },
         ],
-        valueGetter: ({ row }: ValueGetterProps) => {
-          const category = row.category as string;
+        valueGetter: ({ row }: ValueGetterProps<SalesRow>) => {
+          const category = row.category;
           const priorityMap: Record<string, number> = {
             Software: 1,
             Consulting: 2,
@@ -308,3 +308,44 @@ export const salesHeadersCore: VueColumnDef[] = [
     ],
   },
 ];
+const FIRST_NAMES = [
+  "Sophie", "Akira", "Thomas", "Valentina", "Isabella", "Emily", "Olivia", "Marcus",
+  "Nina", "James", "Elena", "Chen", "Priya", "Lars", "Amélie", "Diego", "Fatima",
+  "Henrik", "Yuki", "Grace", "Liam", "Noah", "Mia", "Lucas", "Aria",
+];
+
+const LAST_NAMES = [
+  "Dubois", "Tanaka", "Müller", "Diaz", "Fernandez", "Davis", "Bennett", "Webb",
+  "Kowalski", "Okafor", "Rossi", "Wei", "Sharma", "Hansen", "Laurent", "Alvarez",
+  "Al-Farsi", "Berg", "Sato", "O'Malley", "Nguyen", "Schmidt", "Costa", "Ivanova", "Park",
+];
+
+const CATEGORIES = ["Software", "Hardware", "Services", "Consulting", "Training", "Support"];
+
+const pick = <T>(items: readonly T[]): T => items[Math.floor(Math.random() * items.length)];
+
+const randomBetween = (min: number, max: number) => min + Math.random() * (max - min);
+
+const randomCloseDate = () => {
+  const start = new Date(2026, 0, 1).getTime();
+  const end = new Date(2026, 11, 31).getTime();
+  const date = new Date(start + Math.random() * (end - start));
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+/** Generates `count` randomized inbound sales rows, then processes derived fields. */
+export function generateSalesData(count = 240): SalesRow[] {
+  const inbound: SalesInboundRow[] = Array.from({ length: count }, (_, index) => ({
+    id: `SALE-${index}`,
+    repName: `${pick(FIRST_NAMES)} ${pick(LAST_NAMES)}`,
+    dealSize: parseFloat(randomBetween(100, 250000).toFixed(2)),
+    isWon: Math.random() > 0.35,
+    profitMargin: parseFloat(randomBetween(0.25, 0.75).toFixed(2)),
+    closeDate: randomCloseDate(),
+    category: pick(CATEGORIES),
+  }));
+  return processSalesData(inbound);
+}
diff --git a/packages/examples/vue/src/demos/single-row-children/SingleRowChildrenDemo.vue b/packages/examples/vue/src/demos/single-row-children/SingleRowChildrenDemo.vue
index 67f2aac4f..59d5a3c6f 100644
--- a/packages/examples/vue/src/demos/single-row-children/SingleRowChildrenDemo.vue
+++ b/packages/examples/vue/src/demos/single-row-children/SingleRowChildrenDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="singleRowChildrenConfig.headers"
     :rows="singleRowChildrenConfig.rows"
+    :get-row-id="getRowId"
     :column-resizing="singleRowChildrenConfig.tableProps.columnResizing"
     :selectable-cells="singleRowChildrenConfig.tableProps.selectableCells"
     :height="height"
@@ -10,9 +11,13 @@
 </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 { singleRowChildrenConfig } from "./single-row-children.demo-data";
+import type { StudentRecord } from "./single-row-children.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { height: "400px" });
+
+const getRowId = ({ row }: GetRowIdParams<StudentRecord>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/single-row-children/single-row-children.demo-data.ts b/packages/examples/vue/src/demos/single-row-children/single-row-children.demo-data.ts
index 21a10ebb5..cb5cb9536 100644
--- a/packages/examples/vue/src/demos/single-row-children/single-row-children.demo-data.ts
+++ b/packages/examples/vue/src/demos/single-row-children/single-row-children.demo-data.ts
@@ -1,8 +1,19 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface StudentRecord {
+  id: number;
+  studentId: string;
+  studentName: string;
+  gradeLevel: string;
+  overallGPA: number;
+  mathGrade: number;
+  scienceGrade: number;
+  englishGrade: number;
+  historyGrade: number;
+}
 
-export const singleRowChildrenData = [
+export const singleRowChildrenData: StudentRecord[] = [
   { id: 1, studentId: "STU-2024-001", studentName: "Alexandra Martinez", gradeLevel: "10th Grade", overallGPA: 3.85, mathGrade: 92, scienceGrade: 88, englishGrade: 91, historyGrade: 89 },
   { id: 2, studentId: "STU-2024-002", studentName: "Benjamin Foster", gradeLevel: "11th Grade", overallGPA: 3.65, mathGrade: 85, scienceGrade: 87, englishGrade: 89, historyGrade: 86 },
   { id: 3, studentId: "STU-2024-003", studentName: "Chloe Nakamura", gradeLevel: "12th Grade", overallGPA: 3.95, mathGrade: 96, scienceGrade: 94, englishGrade: 95, historyGrade: 93 },
@@ -16,7 +27,7 @@ export const singleRowChildrenData = [
   { id: 11, studentId: "STU-2024-011", studentName: "Keiko Tanaka", gradeLevel: "12th Grade", overallGPA: 3.9, mathGrade: 94, scienceGrade: 93, englishGrade: 96, historyGrade: 92 },
 ];
 
-export const singleRowChildrenHeaders: VueColumnDef[] = [
+export const singleRowChildrenHeaders: VueColumnDef<StudentRecord>[] = [
   { accessor: "studentId", label: "Student ID", width: 160, sortable: true, type: "string" },
   { accessor: "gradeLevel", label: "Grade Level", width: 150, sortable: true, type: "string" },
   {
@@ -44,4 +55,4 @@ export const singleRowChildrenConfig = {
     columnResizing: true,
     selectableCells: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/soccer/SoccerDemo.vue b/packages/examples/vue/src/demos/soccer/SoccerDemo.vue
index 2ba88a462..5e22f1b2b 100644
--- a/packages/examples/vue/src/demos/soccer/SoccerDemo.vue
+++ b/packages/examples/vue/src/demos/soccer/SoccerDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="soccerConfig.headers"
     :rows="soccerConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     column-reordering
@@ -16,9 +17,12 @@
 
 <script setup lang="ts">
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import { soccerConfig } from "./soccer.demo-data";
+import type { SoccerPlayer } from "./soccer.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), { height: "70dvh" });
+
+const getRowId = ({ row }: GetRowIdParams<SoccerPlayer>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/soccer/soccer.demo-data.ts b/packages/examples/vue/src/demos/soccer/soccer.demo-data.ts
index 4b0d9ba76..0ebfc0679 100644
--- a/packages/examples/vue/src/demos/soccer/soccer.demo-data.ts
+++ b/packages/examples/vue/src/demos/soccer/soccer.demo-data.ts
@@ -1,10 +1,9 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
-import type { Row } from "@simple-table/vue";
 
 export type SoccerPosition = "GK" | "DEF" | "MID" | "FWD";
 
-export interface SoccerPlayer extends Row {
+export interface SoccerPlayer {
   id: string;
   rank: number;
   rankChange: number;
@@ -125,7 +124,7 @@ export function generateSoccerData(count = 200): SoccerPlayer[] {
   return players;
 }
 
-export const soccerHeaders: VueColumnDef[] = [
+export const soccerHeaders: VueColumnDef<SoccerPlayer>[] = [
   { accessor: "rank", label: "#", width: 56, align: "center", type: "number", pinned: "left", sortable: true, editable: false },
   {
     accessor: "name", label: "Player", width: 220, align: "left", type: "string", pinned: "left", sortable: true, editable: false,
@@ -185,4 +184,4 @@ export const soccerData = generateSoccerData(200);
 export const soccerConfig = {
   headers: soccerHeaders,
   rows: soccerData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/table-height/TableHeightDemo.vue b/packages/examples/vue/src/demos/table-height/TableHeightDemo.vue
index f8ee75632..4dee64504 100644
--- a/packages/examples/vue/src/demos/table-height/TableHeightDemo.vue
+++ b/packages/examples/vue/src/demos/table-height/TableHeightDemo.vue
@@ -22,6 +22,7 @@
     <SimpleTable
       :columns="tableHeightConfig.headers"
       :rows="tableHeightConfig.rows"
+      :get-row-id="getRowId"
       :height="selectedHeight"
       :theme="theme"
     />
@@ -30,14 +31,18 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-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 { tableHeightConfig } from "./table-height.demo-data";
+import type { HeightDemoEmployee } from "./table-height.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
+const getRowId = ({ row }: GetRowIdParams<HeightDemoEmployee>) => row.id;
+
 const heights = ["200px", "300px", "400px"];
 const selectedHeight = ref("400px");
 </script>
diff --git a/packages/examples/vue/src/demos/table-height/table-height.demo-data.ts b/packages/examples/vue/src/demos/table-height/table-height.demo-data.ts
index e1f16bcc3..45c6f6dff 100644
--- a/packages/examples/vue/src/demos/table-height/table-height.demo-data.ts
+++ b/packages/examples/vue/src/demos/table-height/table-height.demo-data.ts
@@ -1,8 +1,16 @@
 // Self-contained demo table setup for this example.
 import type { VueColumnDef } from "@simple-table/vue";
 
+export interface HeightDemoEmployee {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  department: string;
+  status: string;
+}
 
-export const tableHeightHeaders: VueColumnDef[] = [
+export const tableHeightHeaders: VueColumnDef<HeightDemoEmployee>[] = [
   { accessor: "id", label: "ID", width: 80, type: "number" },
   { accessor: "name", label: "Name", minWidth: 150, width: "1fr", type: "string" },
   { accessor: "email", label: "Email", minWidth: 200, width: "1fr", type: "string" },
@@ -11,7 +19,7 @@ export const tableHeightHeaders: VueColumnDef[] = [
   { accessor: "status", label: "Status", width: 120, type: "string" },
 ];
 
-export const tableHeightData = [
+export const tableHeightData: HeightDemoEmployee[] = [
   { id: 1, name: "Alice Chen", email: "alice@example.com", role: "Senior Engineer", department: "Engineering", status: "Active" },
   { id: 2, name: "Bob Martinez", email: "bob@example.com", role: "Product Manager", department: "Product", status: "Active" },
   { id: 3, name: "Carol Williams", email: "carol@example.com", role: "Designer", department: "Design", status: "Active" },
@@ -32,4 +40,4 @@ export const tableHeightData = [
 export const tableHeightConfig = {
   headers: tableHeightHeaders,
   rows: tableHeightData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/themes/ThemesDemo.vue b/packages/examples/vue/src/demos/themes/ThemesDemo.vue
index 50962e18e..902e45d52 100644
--- a/packages/examples/vue/src/demos/themes/ThemesDemo.vue
+++ b/packages/examples/vue/src/demos/themes/ThemesDemo.vue
@@ -22,6 +22,7 @@
     <SimpleTable
       :columns="themesConfig.headers"
       :rows="themesConfig.rows"
+      :get-row-id="getRowId"
       :height="height"
       :theme="selectedTheme"
     />
@@ -30,13 +31,17 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-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 { themesConfig, AVAILABLE_THEMES } from "./themes.demo-data";
+import type { ThemeDemoStaff } from "./themes.demo-data";
 import "@simple-table/vue/styles.css";
 
 const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
 
+const getRowId = ({ row }: GetRowIdParams<ThemeDemoStaff>) => row.id;
+
 const selectedTheme = ref<Theme>(props.theme ?? "light");
 </script>
diff --git a/packages/examples/vue/src/demos/themes/themes.demo-data.ts b/packages/examples/vue/src/demos/themes/themes.demo-data.ts
index 147fe473c..eeaa0c045 100644
--- a/packages/examples/vue/src/demos/themes/themes.demo-data.ts
+++ b/packages/examples/vue/src/demos/themes/themes.demo-data.ts
@@ -10,7 +10,15 @@ export const AVAILABLE_THEMES: { value: Theme; label: string }[] = [
   { value: "neutral", label: "Neutral" },
 ];
 
-export const themesHeaders: VueColumnDef[] = [
+export interface ThemeDemoStaff {
+  id: number;
+  name: string;
+  email: string;
+  department: string;
+  status: string;
+}
+
+export const themesHeaders: VueColumnDef<ThemeDemoStaff>[] = [
   { accessor: "id", label: "ID", width: 80, type: "number" },
   { accessor: "name", label: "Name", minWidth: 100, width: "1fr", type: "string" },
   { accessor: "email", label: "Email", width: 220, type: "string" },
@@ -18,7 +26,7 @@ export const themesHeaders: VueColumnDef[] = [
   { accessor: "status", label: "Status", width: 120, type: "string" },
 ];
 
-export const themesData = [
+export const themesData: ThemeDemoStaff[] = [
   { id: 1, name: "Dr. Sarah Mitchell", email: "s.mitchell@cityhospital.org", department: "Cardiology", status: "Active" },
   { id: 2, name: "Nurse Emily Chen", email: "e.chen@cityhospital.org", department: "Emergency", status: "Active" },
   { id: 3, name: "Dr. Marcus Williams", email: "m.williams@cityhospital.org", department: "Neurology", status: "Active" },
@@ -36,4 +44,4 @@ export const themesData = [
 export const themesConfig = {
   headers: themesHeaders,
   rows: themesData,
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/tooltip/TooltipDemo.vue b/packages/examples/vue/src/demos/tooltip/TooltipDemo.vue
index b33fef255..0adfe80ce 100644
--- a/packages/examples/vue/src/demos/tooltip/TooltipDemo.vue
+++ b/packages/examples/vue/src/demos/tooltip/TooltipDemo.vue
@@ -1,17 +1,22 @@
 <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 { tooltipConfig } from "./tooltip.demo-data";
+import type { TooltipProduct } from "./tooltip.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<TooltipProduct>) => row.id;
 </script>
 
 <template>
   <SimpleTable
     :columns="tooltipConfig.headers"
     :rows="tooltipConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :column-resizing="true"
diff --git a/packages/examples/vue/src/demos/tooltip/tooltip.demo-data.ts b/packages/examples/vue/src/demos/tooltip/tooltip.demo-data.ts
index 16a760d7d..5b62a3fa1 100644
--- a/packages/examples/vue/src/demos/tooltip/tooltip.demo-data.ts
+++ b/packages/examples/vue/src/demos/tooltip/tooltip.demo-data.ts
@@ -1,8 +1,17 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface TooltipProduct {
+  id: number;
+  productName: string;
+  category: string;
+  price: number;
+  stock: number;
+  rating: number;
+  lastUpdated: string;
+}
 
-export const tooltipData: Row[] = [
+export const tooltipData: TooltipProduct[] = [
   { id: 1, productName: "MacBook Pro M3 Max", category: "Laptops", price: 3299.99, stock: 12, rating: 4.8, lastUpdated: "2024-01-15" },
   { id: 2, productName: "Logitech MX Master 3S", category: "Peripherals", price: 99.99, stock: 45, rating: 4.6, lastUpdated: "2024-01-18" },
   { id: 3, productName: "Samsung 49-inch Ultrawide Monitor", category: "Displays", price: 899.99, stock: 8, rating: 4.7, lastUpdated: "2024-01-20" },
@@ -20,7 +29,7 @@ export const tooltipData: Row[] = [
   { id: 15, productName: "Corsair K95 RGB Platinum", category: "Peripherals", price: 199.99, stock: 16, rating: 4.5, lastUpdated: "2024-02-18" },
 ];
 
-export const tooltipHeaders: VueColumnDef[] = [
+export const tooltipHeaders: VueColumnDef<TooltipProduct>[] = [
   { accessor: "productName", label: "Product", width: 200, sortable: true, tooltip: "Complete product name including model specifications and key features" },
   { accessor: "category", label: "Category", width: 150, sortable: true, filterable: true, tooltip: "Product classification: Laptops, Displays, or Peripherals for easy filtering" },
   {
@@ -53,4 +62,4 @@ export const tooltipConfig = {
     columnReordering: true,
     selectableCells: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/value-formatter/ValueFormatterDemo.vue b/packages/examples/vue/src/demos/value-formatter/ValueFormatterDemo.vue
index 49e248cac..3d0af3989 100644
--- a/packages/examples/vue/src/demos/value-formatter/ValueFormatterDemo.vue
+++ b/packages/examples/vue/src/demos/value-formatter/ValueFormatterDemo.vue
@@ -2,6 +2,7 @@
   <SimpleTable
     :columns="valueFormatterConfig.headers"
     :rows="valueFormatterConfig.rows"
+    :get-row-id="getRowId"
     :height="height"
     :theme="theme"
     :selectable-cells="valueFormatterConfig.tableProps.selectableCells"
@@ -9,11 +10,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 { valueFormatterConfig } from "./value-formatter.demo-data";
+import type { FormattedEmployee } from "./value-formatter.demo-data";
 import "@simple-table/vue/styles.css";
 
 withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
   height: "400px",
 });
+
+const getRowId = ({ row }: GetRowIdParams<FormattedEmployee>) => row.id;
 </script>
diff --git a/packages/examples/vue/src/demos/value-formatter/value-formatter.demo-data.ts b/packages/examples/vue/src/demos/value-formatter/value-formatter.demo-data.ts
index e225078ae..670159df2 100644
--- a/packages/examples/vue/src/demos/value-formatter/value-formatter.demo-data.ts
+++ b/packages/examples/vue/src/demos/value-formatter/value-formatter.demo-data.ts
@@ -1,8 +1,18 @@
 // Self-contained demo table setup for this example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
 
+export interface FormattedEmployee {
+  id: number;
+  firstName: string;
+  lastName: string;
+  salary: number;
+  joinDate: string;
+  performanceScore: number;
+  balance: number;
+  department: string;
+}
 
-export const valueFormatterData: Row[] = [
+export const valueFormatterData: FormattedEmployee[] = [
   { id: 1, firstName: "Isabella", lastName: "Romano", salary: 125000, joinDate: "2021-03-15", performanceScore: 0.945, balance: 1250.50, department: "Engineering" },
   { id: 2, firstName: "Ethan", lastName: "McKenzie", salary: 98500, joinDate: "2022-07-22", performanceScore: 0.875, balance: -150.00, department: "Marketing" },
   { id: 3, firstName: "Zoe", lastName: "Patterson", salary: 110000, joinDate: "2020-01-10", performanceScore: 0.923, balance: 0, department: "Sales" },
@@ -26,7 +36,7 @@ const DEPARTMENT_CODES: Record<string, string> = {
   operations: "OPS",
 };
 
-export const valueFormatterHeaders: VueColumnDef[] = [
+export const valueFormatterHeaders: VueColumnDef<FormattedEmployee>[] = [
   { accessor: "id", label: "ID", width: 60, type: "number" },
   {
     accessor: "firstName",
@@ -34,7 +44,7 @@ export const valueFormatterHeaders: VueColumnDef[] = [
     width: 180,
     type: "string",
     valueFormatter: ({ value, row }) => {
-      return `${value as string} ${row.lastName as string}`;
+      return `${value as string} ${row.lastName}`;
     },
   },
   {
@@ -102,4 +112,4 @@ export const valueFormatterConfig = {
   tableProps: {
     selectableCells: true,
   },
-} as const;
+};
diff --git a/packages/examples/vue/src/demos/window-infinite-scroll/WindowInfiniteScrollDemo.vue b/packages/examples/vue/src/demos/window-infinite-scroll/WindowInfiniteScrollDemo.vue
index eb8f813f0..44095b05c 100644
--- a/packages/examples/vue/src/demos/window-infinite-scroll/WindowInfiniteScrollDemo.vue
+++ b/packages/examples/vue/src/demos/window-infinite-scroll/WindowInfiniteScrollDemo.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { SimpleTable } from "@simple-table/vue";
-import type { Theme, Row } from "@simple-table/vue";
+import type { Theme, GetRowIdParams } from "@simple-table/vue";
 import {
   generateWindowScrollRows,
   windowScrollHeaders,
 } from "./window-infinite-scroll.demo-data";
+import type { WindowScrollEmployee } from "./window-infinite-scroll.demo-data";
 import "@simple-table/vue/styles.css";
 
 // `height` is intentionally ignored — this demo is about *not* setting one.
@@ -18,7 +19,7 @@ const LOAD_DELAY_MS = 350;
 
 const wrapperRef = ref<HTMLDivElement | null>(null);
 
-const rows = ref<Row[]>(generateWindowScrollRows(0, INITIAL_ROWS));
+const rows = ref<WindowScrollEmployee[]>(generateWindowScrollRows(0, INITIAL_ROWS));
 const loading = ref(false);
 const hasMore = ref(true);
 
@@ -34,7 +35,7 @@ const statusLabel = computed(() =>
 // In a regular app outside this preview shell, pass scrollParent="window".
 const getScrollParent = () => wrapperRef.value?.parentElement ?? null;
 
-const getRowId = (p: { row: Row }) => String((p.row as { id?: number })?.id);
+const getRowId = ({ row }: GetRowIdParams<WindowScrollEmployee>) => String(row.id);
 
 function handleLoadMore() {
   if (loading.value || !hasMore.value) return;
diff --git a/packages/examples/vue/src/demos/window-infinite-scroll/window-infinite-scroll.demo-data.ts b/packages/examples/vue/src/demos/window-infinite-scroll/window-infinite-scroll.demo-data.ts
index 964949fd5..0bb36aee7 100644
--- a/packages/examples/vue/src/demos/window-infinite-scroll/window-infinite-scroll.demo-data.ts
+++ b/packages/examples/vue/src/demos/window-infinite-scroll/window-infinite-scroll.demo-data.ts
@@ -1,5 +1,15 @@
 // Self-contained data + headers for the window-scroll infinite scroll example.
-import type { VueColumnDef, Row } from "@simple-table/vue";
+import type { VueColumnDef } from "@simple-table/vue";
+
+export interface WindowScrollEmployee {
+  id: number;
+  name: string;
+  email: string;
+  department: string;
+  status: string;
+  tenureYears: number;
+  salary: number;
+}
 
 const FIRST_NAMES = [
   "Elena",
@@ -52,10 +62,13 @@ const DEPARTMENTS = [
   "Customer Success",
 ];
 
-const STATUSES = ["Active", "On Leave", "Remote", "Onsite"] as const;
+const STATUSES = ["Active", "On Leave", "Remote", "Onsite"];
 
-export function generateWindowScrollRows(startIndex: number, count: number): Row[] {
-  const rows: Row[] = [];
+export function generateWindowScrollRows(
+  startIndex: number,
+  count: number,
+): WindowScrollEmployee[] {
+  const rows: WindowScrollEmployee[] = [];
   for (let i = 0; i < count; i++) {
     const idx = startIndex + i;
     const first = FIRST_NAMES[idx % FIRST_NAMES.length];
@@ -73,7 +86,7 @@ export function generateWindowScrollRows(startIndex: number, count: number): Row
   return rows;
 }
 
-export const windowScrollHeaders: VueColumnDef[] = [
+export const windowScrollHeaders: VueColumnDef<WindowScrollEmployee>[] = [
   { accessor: "id", label: "ID", width: 80, type: "number", align: "right" },
   { accessor: "name", label: "Name", width: "1fr", minWidth: 160 },
   { accessor: "email", label: "Email", width: 260 },