Grouping and calculations

Grouping helps people scan categories. Footer calculations answer questions about the filtered result: total stock, average price, or number of non-empty values.

Configuration example

Start from the React quick start or Vue quick start. The following file extends their product catalog. Pass this configuration through getTableConfig in React or config in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const groupingConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: {
    ...productConfig.table,
    enableGrouping: true,
    enableCalculations: true,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const groupingConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: {
    ...productConfig.table,
    enableGrouping: true,
    enableCalculations: true,
  },
});

Column defaults

defaultCalculation chooses the initial footer calculation. enableCalculation: false excludes a column. enableGrouping: false excludes a column from grouping choices. Persisted views and current user choices can override defaults.

Grouping with server pagination

Groups organize the rows currently loaded on the page. With server pagination, a group may continue on another page; its visible row count is not a global category count. Use server aggregates for totals across the complete filtered result.

Calculate the complete filtered result

Provide aggregate when the server can compute the requested calculations efficiently. It receives search, filters, advanced rules and the calculations map. Return results[columnId] with a machine value (raw) and formatted label, plus the matching row count. Without an aggregate action, the table may retrieve additional list pages. Never silently return a current-page subtotal as a full-result total.

Validate a stock total

The stock recipe starts at 18 units. Editing the desk from 12 to 15 should produce 21 units. Filtering to Draft should show zero. Grouping changes presentation; it must not change which records belong to the query.

For mutations, follow the explicit footer-cache refresh in the stock recipe. The verified React registry refreshes row data and footer calculations through separate query keys.

Calculate stock totals

Declare Sum on Stock and enable footer calculations. The stock recipe shows how to refresh totals after a validated write.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: { ...productConfig.table, enableCalculations: true },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: { ...productConfig.table, enableCalculations: true },
});

Limit grouping to a meaningful field

Keep Status groupable and exclude numerical measures from the grouping picker. Table mode supports up to two grouping fields when the schema offers them.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) => ({
      ...column,
      enableGrouping: column.id === "status",
    })),
  },
  table: { ...productConfig.table, enableGrouping: true },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) => ({
      ...column,
      enableGrouping: column.id === "status",
    })),
  },
  table: { ...productConfig.table, enableGrouping: true },
});