-
- {pivotPresets.map((preset) => {
- const selected = preset.id === activeId;
- return (
-
- );
- })}
-
+
+
row.id}
+ getRowId={({ row }) => (row?.id == null ? undefined : String(row.id))}
/>
);
diff --git a/packages/examples/solid/src/demos/pivot/PivotDemo.tsx b/packages/examples/solid/src/demos/pivot/PivotDemo.tsx
index 0da4921c7..855736b93 100644
--- a/packages/examples/solid/src/demos/pivot/PivotDemo.tsx
+++ b/packages/examples/solid/src/demos/pivot/PivotDemo.tsx
@@ -1,54 +1,63 @@
-import { createMemo, createSignal, For } from "solid-js";
+import { createSignal } from "solid-js";
import { SimpleTable } from "@simple-table/solid";
-import type { Theme } from "@simple-table/solid";
-import { pivotDemoConfig, pivotPresets } from "./pivot.demo-data";
+import type { PivotConfig, Theme } from "@simple-table/solid";
+import { pivotDemoConfig } from "./pivot.demo-data";
import "@simple-table/solid/styles.css";
+const INITIAL_PIVOT: PivotConfig = {
+ rows: ["region", "product"],
+ columns: ["quarter"],
+ values: [{ accessor: "sales", aggregation: { type: "sum" } }],
+};
+
export default function PivotDemo(props: {
height?: string | number;
theme?: Theme;
}) {
- const [activeId, setActiveId] = createSignal(pivotPresets[0].id);
- const active = createMemo(
- () => pivotPresets.find((p) => p.id === activeId()) ?? pivotPresets[0]
- );
+ const [pivotEnabled, setPivotEnabled] = createSignal(true);
+ const [pivot, setPivot] = createSignal
(INITIAL_PIVOT);
+
+ const handlePivotEnabledChange = (enabled: boolean) => {
+ setPivotEnabled(enabled);
+ if (enabled && pivot() === null) {
+ setPivot(INITIAL_PIVOT);
+ }
+ };
return (
-
-
-
- {(preset) => {
- const selected = () => preset.id === activeId();
- return (
-
- );
- }}
-
-
+
+
row.id}
rows={pivotDemoConfig.rows}
- pivot={active().pivot}
+ autoExpandColumns
columnResizing
- height={props.height ?? "400px"}
+ enableColumnEditor
+ enableColumnEditorInitOpen
+ enablePivotPanel={pivotEnabled()}
+ height={props.height ?? "500px"}
+ pivot={pivotEnabled() ? pivot() : null}
+ onPivotChange={setPivot}
selectableCells
theme={props.theme}
+ getRowId={({ row }) => (row?.id == null ? undefined : String(row.id))}
/>
);
diff --git a/packages/examples/svelte/src/demos/pivot/PivotDemo.svelte b/packages/examples/svelte/src/demos/pivot/PivotDemo.svelte
index 0e51df5cc..2bf065ca6 100644
--- a/packages/examples/svelte/src/demos/pivot/PivotDemo.svelte
+++ b/packages/examples/svelte/src/demos/pivot/PivotDemo.svelte
@@ -1,39 +1,56 @@
-
-
- {#each pivotPresets as preset}
-
- {/each}
-
+
+
(pivot = next)}
+ autoExpandColumns={true}
columnResizing={true}
+ enableColumnEditor={true}
+ enableColumnEditorInitOpen={true}
+ enablePivotPanel={pivotEnabled}
selectableCells={true}
+ {getRowId}
{height}
{theme}
/>
diff --git a/packages/examples/vanilla/src/demos/pivot/PivotDemo.ts b/packages/examples/vanilla/src/demos/pivot/PivotDemo.ts
index 9328f4d77..7dcb76592 100644
--- a/packages/examples/vanilla/src/demos/pivot/PivotDemo.ts
+++ b/packages/examples/vanilla/src/demos/pivot/PivotDemo.ts
@@ -1,62 +1,69 @@
import { SimpleTableVanilla } from "simple-table-core";
-import type { PivotFact } from "./pivot.demo-data";
-import type { Theme, GetRowIdParams } from "simple-table-core";
-import { pivotDemoConfig, pivotPresets } from "./pivot.demo-data";
+import type { PivotConfig, Theme } from "simple-table-core";
+import { pivotDemoConfig } from "./pivot.demo-data";
import "simple-table-core/styles.css";
-const getRowId = ({ row }: GetRowIdParams) => row.id;
+const INITIAL_PIVOT: PivotConfig = {
+ rows: ["region", "product"],
+ columns: ["quarter"],
+ values: [{ accessor: "sales", aggregation: { type: "sum" } }],
+};
+
export function renderPivotDemo(
container: HTMLElement,
options?: { height?: string | number; theme?: Theme }
-): SimpleTableVanilla {
- let activeId = pivotPresets[0].id;
- let table: SimpleTableVanilla | null = null;
+): SimpleTableVanilla {
+ let pivotEnabled = true;
+ let pivot: PivotConfig | null = INITIAL_PIVOT;
+ let table: SimpleTableVanilla | null = null;
const root = document.createElement("div");
- root.style.cssText = "display:flex;flex-direction:column;gap:12px;width:100%";
- const buttons = document.createElement("div");
- buttons.style.cssText = "display:flex;flex-wrap:wrap;gap:8px";
+ const label = document.createElement("label");
+ label.style.cssText =
+ "display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;color:#374151";
- const tableHost = document.createElement("div");
- tableHost.style.cssText = "width:100%";
-
- const paintButtons = () => {
- buttons.replaceChildren();
- for (const preset of pivotPresets) {
- const btn = document.createElement("button");
- btn.type = "button";
- btn.textContent = preset.label;
- const selected = preset.id === activeId;
- btn.style.cssText = `padding:6px 12px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-weight:500;background:${
- selected ? "#2563eb" : "#e5e7eb"
- };color:${selected ? "#fff" : "#374151"}`;
- btn.addEventListener("click", () => {
- activeId = preset.id;
- paintButtons();
- const active = pivotPresets.find((p) => p.id === activeId) ?? pivotPresets[0];
- table?.updateConfig({
- pivot: active.pivot,
- });
- });
- buttons.appendChild(btn);
+ const checkbox = document.createElement("input");
+ checkbox.type = "checkbox";
+ checkbox.checked = true;
+ checkbox.setAttribute("aria-label", "Pivot mode");
+ checkbox.addEventListener("change", () => {
+ pivotEnabled = checkbox.checked;
+ if (pivotEnabled && pivot === null) {
+ pivot = INITIAL_PIVOT;
}
- };
+ table?.updateConfig({
+ pivot: pivotEnabled ? pivot : null,
+ enablePivotPanel: pivotEnabled,
+ });
+ });
- paintButtons();
- root.append(buttons, tableHost);
+ const text = document.createElement("span");
+ text.textContent = "Pivot mode";
+ label.append(checkbox, text);
+
+ const tableHost = document.createElement("div");
+ tableHost.style.width = "100%";
+ root.append(label, tableHost);
container.replaceChildren(root);
- const active = pivotPresets.find((p) => p.id === activeId) ?? pivotPresets[0];
table = new SimpleTableVanilla(tableHost, {
- getRowId,
columns: pivotDemoConfig.headers,
rows: pivotDemoConfig.rows,
- pivot: active.pivot,
+ pivot,
+ autoExpandColumns: true,
columnResizing: true,
- height: options?.height ?? "400px",
+ enableColumnEditor: true,
+ enableColumnEditorInitOpen: true,
+ enablePivotPanel: true,
+ height: options?.height ?? "500px",
selectableCells: true,
theme: options?.theme,
+ getRowId: ({ row }) => (row?.id == null ? undefined : String(row.id)),
+ onPivotChange: (next) => {
+ pivot = next;
+ },
});
+
return table;
}
diff --git a/packages/examples/vue/src/demos/pivot/PivotDemo.vue b/packages/examples/vue/src/demos/pivot/PivotDemo.vue
index 09e6a6cd1..8322f9d03 100644
--- a/packages/examples/vue/src/demos/pivot/PivotDemo.vue
+++ b/packages/examples/vue/src/demos/pivot/PivotDemo.vue
@@ -1,54 +1,69 @@
-
-
-
-
+
+