feat(solid): add TData/TValue generics with typed cell-editing demo

packages/examples/solid/src/demos/aggregate-functions/AggregateFunctionsDemo.tsx

@@ -9,6 +9,7 @@ export default function AggregateFunctionsDemo(props: {
   return (
     <SimpleTable
       columns={aggregateFunctionsConfig.headers}
+      getRowId={({ row }) => row.id}
       rows={aggregateFunctionsConfig.rows}
       rowGrouping={aggregateFunctionsConfig.tableProps.rowGrouping}
       columnResizing

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

@@ -1,8 +1,21 @@
 // Self-contained demo table setup for this example.
 import type { SolidColumnDef } from "@simple-table/solid";
 
+/** 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: SolidColumnDef[] = [
+export const aggregateFunctionsHeaders: SolidColumnDef<AggregateFunctionsRow>[] = [
   { accessor: "name", label: "Name", width: 200, expandable: true, type: "string" },
   {
     accessor: "followers",
@@ -66,7 +79,7 @@ export const aggregateFunctionsHeaders: SolidColumnDef[] = [
   { accessor: "status", label: "Status", width: 120, type: "string" },
 ];
 
-export const aggregateFunctionsData = [
+export const aggregateFunctionsData: AggregateFunctionsRow[] = [
   {
     id: 1,
     name: "StreamFlix",
@@ -187,7 +200,7 @@ export const aggregateFunctionsConfig = {
   headers: aggregateFunctionsHeaders,
   rows: aggregateFunctionsData,
   tableProps: {
-    rowGrouping: ["categories", "creators"] as string[],
+    rowGrouping: ["categories", "creators"],
     columnResizing: true,
   },
-} as const;
+};

packages/examples/solid/src/demos/analytics/AnalyticsDemo.tsx

@@ -1,7 +1,7 @@
 import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
 import { SimpleTable } from "@simple-table/solid";
 import type { TableAPI, Theme } from "@simple-table/solid";
-import { analyticsDemoConfig, analyticsPresets } from "./analytics.demo-data";
+import { analyticsDemoConfig, analyticsPresets, type AnalyticsFactRow } from "./analytics.demo-data";
 import "@simple-table/solid/styles.css";
 
 function formatHeight(height?: string | number | null): string {
@@ -17,7 +17,7 @@ export default function AnalyticsDemo(props: {
   const [activeId, setActiveId] = createSignal(analyticsPresets[0].id);
   const [tableHeightPx, setTableHeightPx] = createSignal<number | null>(null);
   let tableHost: HTMLDivElement | undefined;
-  let tableApi: TableAPI | undefined;
+  let tableApi: TableAPI<AnalyticsFactRow> | undefined;
 
   const active = createMemo(
     () => analyticsPresets.find((p) => p.id === activeId()) ?? analyticsPresets[0]

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

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

packages/examples/solid/src/demos/animations/AnimationsDemo.tsx

@@ -1,22 +1,27 @@
 import { createSignal } from "solid-js";
 import { SimpleTable } from "@simple-table/solid";
-import type { Theme } from "@simple-table/solid";
-import { animationsConfig } from "./animations.demo-data";
+import type { Theme, SolidColumnDef } from "@simple-table/solid";
+import { animationsConfig, type AnimationsCrewMember } from "./animations.demo-data";
 import "@simple-table/solid/styles.css";
 
 export default function AnimationsDemo(props: { height?: string | number; theme?: Theme }) {
   const [headers, setHeaders] = createSignal([...animationsConfig.headers]);
 
+  const handleColumnOrderChange = (newHeaders: SolidColumnDef<AnimationsCrewMember>[]) => {
+    setHeaders(newHeaders);
+  };
+
   return (
     <SimpleTable
-      columnReordering
+      columnReordering={animationsConfig.tableProps.columnReordering}
       columns={headers()}
-      enableColumnEditor
-      enableColumnEditorInitOpen
+      enableColumnEditor={animationsConfig.tableProps.enableColumnEditor}
+      enableColumnEditorInitOpen={animationsConfig.tableProps.enableColumnEditorInitOpen}
+      getRowId={({ row }) => row.id}
       rows={animationsConfig.rows}
       height={props.height ?? "400px"}
       theme={props.theme}
-      onColumnOrderChange={setHeaders}
+      onColumnOrderChange={handleColumnOrderChange}
     />
   );
 }

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

@@ -1,8 +1,15 @@
 // Self-contained demo table setup for this example.
 import type { SolidColumnDef } from "@simple-table/solid";
 
+export interface AnimationsCrewMember {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+  department: string;
+}
 
-export const animationsHeaders: SolidColumnDef[] = [
+export const animationsHeaders: SolidColumnDef<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: SolidColumnDef[] = [
   },
 ];
 
-export const animationsData = [
+export const animationsData: AnimationsCrewMember[] = [
   { id: 1, name: "Captain Stella Vega", age: 38, role: "Mission Commander", department: "Flight Operations" },
   { id: 2, name: "Dr. Cosmos Rivera", age: 34, role: "Astrophysicist", department: "Science" },
   { id: 3, name: "Commander Nebula Johnson", age: 42, role: "Operations Director", department: "Mission Control" },
@@ -37,4 +44,4 @@ export const animationsConfig = {
   headers: animationsHeaders,
   rows: animationsData,
   tableProps: { columnReordering: true, enableColumnEditor: true, enableColumnEditorInitOpen: true },
-} as const;
+};

packages/examples/solid/src/demos/billing/BillingDemo.tsx

@@ -1,17 +1,17 @@
-import {SimpleTable} from "@simple-table/solid";import type { Theme, SolidColumnDef, CellRendererProps } from "@simple-table/solid";
+import { SimpleTable } from "@simple-table/solid";
+import type { Theme, SolidColumnDef, CellRendererProps } from "@simple-table/solid";
 import { billingConfig } from "./billing.demo-data";
 import type { BillingRow } from "./billing.demo-data";
 import "@simple-table/solid/styles.css";
 
 export default function BillingDemo(props: { height?: string | number; theme?: Theme }) {
-  const headers: SolidColumnDef[] = billingConfig.headers.map((h) => {
+  const headers: SolidColumnDef<BillingRow>[] = billingConfig.headers.map((h) => {
     if (h.accessor === "name") {
       return {
         ...h,
-        cellRenderer: ({ row }: CellRendererProps) => {
-          const d = row as unknown as BillingRow;
-          return <div class={d.type === "account" ? "font-semibold" : ""}>{d.name}</div>;
-        },
+        cellRenderer: ({ row }: CellRendererProps<BillingRow>) => (
+          <div class={row.type === "account" ? "font-semibold" : ""}>{row.name}</div>
+        ),
       };
     }
     return h;
@@ -23,6 +23,7 @@ export default function BillingDemo(props: { height?: string | number; theme?: T
       columnResizing
       columns={headers}
       enableColumnEditor
+      getRowId={({ row }) => row.id}
       height={props.height ?? "400px"}
       initialSortColumn="amount"
       initialSortDirection="desc"

packages/examples/solid/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(): SolidColumnDef[] {
-  const headers: SolidColumnDef[] = [];
+function generateMonthHeaders(): SolidColumnDef<BillingRow>[] {
+  const headers: SolidColumnDef<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(): SolidColumnDef[] {
   return headers;
 }
 
-export const billingHeaders: SolidColumnDef[] = [
+export const billingHeaders: SolidColumnDef<BillingRow>[] = [
   {
     accessor: "name",
     label: "Name",
@@ -196,4 +213,4 @@ export const billingHeaders: SolidColumnDef[] = [
 export const billingConfig = {
   headers: billingHeaders,
   rows: billingData,
-} as const;
+};

packages/examples/solid/src/demos/cell-clicking/CellClickingDemo.tsx

@@ -11,11 +11,11 @@ export default function CellClickingDemo(props: { height?: string | number; them
   const [selectedTask, setSelectedTask] = createSignal<ProjectTask | null>(null);
   const [rows, setRows] = createSignal<ProjectTask[]>([...cellClickingData]);
 
-  const headers: SolidColumnDef[] = cellClickingHeaders.map((h) => {
+  const headers: SolidColumnDef<ProjectTask>[] = cellClickingHeaders.map((h) => {
     if (h.accessor === "priority") {
       return {
         ...h,
-        cellRenderer: (cr: CellRendererProps) => {
+        cellRenderer: (cr: CellRendererProps<ProjectTask>) => {
           const p = String(cr.row.priority);
           const color = p === "High" ? "#ef4444" : p === "Medium" ? "#f59e0b" : "#10b981";
           return (
@@ -29,7 +29,7 @@ export default function CellClickingDemo(props: { height?: string | number; them
     if (h.accessor === "status") {
       return {
         ...h,
-        cellRenderer: (cr: CellRendererProps) => {
+        cellRenderer: (cr: CellRendererProps<ProjectTask>) => {
           const s = String(cr.row.status);
           const bg = s === "Completed" ? "#dcfce7" : s === "In Progress" ? "#fef3c7" : "#fee2e2";
           const c = s === "Completed" ? "#166534" : s === "In Progress" ? "#92400e" : "#991b1b";
@@ -79,8 +79,8 @@ export default function CellClickingDemo(props: { height?: string | number; them
 
   const isDark = createMemo(() => props.theme === "modern-dark" || props.theme === "dark");
 
-  const handleCellClick = ({ accessor, rowIndex, value, row }: CellClickProps) => {
-    const task = row as ProjectTask;
+  const handleCellClick = ({ accessor, rowIndex, value, row }: CellClickProps<ProjectTask>) => {
+    const task = row;
     switch (accessor) {
       case "priority":
         setClickInfo(`Filtering by ${value} priority`);
@@ -187,6 +187,7 @@ export default function CellClickingDemo(props: { height?: string | number; them
       <SimpleTable
         columnResizing
         columns={headers}
+        getRowId={({ row }) => row.id}
         height={props.height ?? "320px"}
         onCellClick={handleCellClick}
         rows={rows()}