Docs Components Uncategorized

DataGrid

type DataGridDemoRow = {
  id: string;
  service: string;
  environment: "Production" | "Staging";
  region: string;
  version: string;
  status: "Healthy" | "Monitoring" | "Degraded" | "Incident" | "Maintenance";
  owner: string;
  p95: number;
  errorRate: string;
  deployedAt: string;
};
 
/**
 * Deterministic, anonymised deployment telemetry. The row and column counts
 * deliberately exercise vertical virtualization, horizontal overflow,
 * status scanning, numeric sorting, filtering, editing, and selection.
 */
const dataGridFixture = {
  caption: "Production service health",
  selectedIds: ["checkout-eu", "identity-us"],
  columns: [
    { key: "service", header: "Service", width: 190, sortable: true, filterable: true },
    { key: "environment", header: "Environment", width: 130, sortable: true, filterable: true, filterType: "set" },
    { key: "region", header: "Region", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "version", header: "Version", width: 120, sortable: true },
    { key: "status", header: "Status", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "owner", header: "Owner", width: 170, sortable: true, filterable: true },
    { key: "p95", header: "p95 ms", width: 110, sortable: true, filterable: true, filterType: "number", editable: true },
    { key: "errorRate", header: "Error rate", width: 120, sortable: true },
    { key: "deployedAt", header: "Last deployed", width: 180, sortable: true },
  ],
  rows: [
    { id: "checkout-eu", service: "Checkout API", environment: "Production", region: "eu-west-1", version: "v4.18.2", status: "Healthy", owner: "Payments", p95: 182, errorRate: "0.08%", deployedAt: "23 Aug, 09:42" },
    { id: "identity-us", service: "Identity", environment: "Production", region: "us-east-1", version: "v7.6.0", status: "Monitoring", owner: "Platform Identity", p95: 264, errorRate: "0.31%", deployedAt: "23 Aug, 09:18" },
    { id: "catalog-eu", service: "Product catalog", environment: "Production", region: "eu-west-1", version: "v12.3.1", status: "Healthy", owner: "Commerce Core", p95: 96, errorRate: "0.03%", deployedAt: "23 Aug, 08:55" },
    { id: "pricing-us", service: "Pricing engine", environment: "Production", region: "us-east-1", version: "v9.14.4", status: "Degraded", owner: "Revenue Systems", p95: 487, errorRate: "1.42%", deployedAt: "23 Aug, 08:34" },
    { id: "orders-eu", service: "Order orchestration", environment: "Production", region: "eu-central-1", version: "v5.22.0", status: "Healthy", owner: "Fulfilment", p95: 218, errorRate: "0.11%", deployedAt: "23 Aug, 08:12" },
    { id: "search-ap", service: "Search gateway", environment: "Production", region: "ap-southeast-2", version: "v11.8.3", status: "Healthy", owner: "Discovery", p95: 144, errorRate: "0.05%", deployedAt: "23 Aug, 07:49" },
    { id: "fraud-us", service: "Fraud decisioning", environment: "Production", region: "us-east-1", version: "v3.9.7", status: "Incident", owner: "Risk", p95: 732, errorRate: "4.86%", deployedAt: "23 Aug, 07:31" },
    { id: "notifications-eu", service: "Notifications", environment: "Production", region: "eu-west-1", version: "v8.2.5", status: "Healthy", owner: "Customer Comms", p95: 121, errorRate: "0.07%", deployedAt: "23 Aug, 07:06" },
    { id: "inventory-us", service: "Inventory ledger", environment: "Production", region: "us-west-2", version: "v6.17.1", status: "Monitoring", owner: "Supply Chain", p95: 305, errorRate: "0.62%", deployedAt: "23 Aug, 06:44" },
    { id: "shipping-eu", service: "Shipping quotes", environment: "Production", region: "eu-central-1", version: "v10.4.0", status: "Healthy", owner: "Logistics", p95: 198, errorRate: "0.09%", deployedAt: "23 Aug, 06:20" },
    { id: "tax-us", service: "Tax calculation", environment: "Production", region: "us-east-1", version: "v4.11.9", status: "Maintenance", owner: "Finance Platform", p95: 356, errorRate: "0.18%", deployedAt: "23 Aug, 05:58" },
    { id: "accounts-ap", service: "Customer accounts", environment: "Production", region: "ap-southeast-1", version: "v13.0.2", status: "Healthy", owner: "Customer Platform", p95: 173, errorRate: "0.06%", deployedAt: "23 Aug, 05:35" },
    { id: "recommendations-eu", service: "Recommendations", environment: "Production", region: "eu-west-1", version: "v2.26.6", status: "Degraded", owner: "Personalisation", p95: 541, errorRate: "1.08%", deployedAt: "23 Aug, 05:11" },
    { id: "media-us", service: "Media pipeline", environment: "Production", region: "us-west-2", version: "v7.12.8", status: "Healthy", owner: "Content Systems", p95: 238, errorRate: "0.14%", deployedAt: "23 Aug, 04:47" },
    { id: "webhooks-eu", service: "Partner webhooks", environment: "Production", region: "eu-central-1", version: "v5.7.3", status: "Monitoring", owner: "Integrations", p95: 279, errorRate: "0.44%", deployedAt: "23 Aug, 04:23" },
    { id: "ledger-us", service: "Payments ledger", environment: "Production", region: "us-east-1", version: "v14.2.0", status: "Healthy", owner: "Payments", p95: 167, errorRate: "0.02%", deployedAt: "23 Aug, 03:59" },
    { id: "checkout-stg", service: "Checkout API", environment: "Staging", region: "eu-west-1", version: "v4.19.0-rc.2", status: "Monitoring", owner: "Payments", p95: 211, errorRate: "0.23%", deployedAt: "23 Aug, 03:36" },
    { id: "identity-stg", service: "Identity", environment: "Staging", region: "us-east-1", version: "v7.7.0-rc.1", status: "Healthy", owner: "Platform Identity", p95: 195, errorRate: "0.09%", deployedAt: "23 Aug, 03:12" },
    { id: "catalog-stg", service: "Product catalog", environment: "Staging", region: "eu-west-1", version: "v12.4.0-beta.3", status: "Healthy", owner: "Commerce Core", p95: 104, errorRate: "0.04%", deployedAt: "23 Aug, 02:48" },
    { id: "pricing-stg", service: "Pricing engine", environment: "Staging", region: "us-east-1", version: "v9.15.0-rc.4", status: "Healthy", owner: "Revenue Systems", p95: 226, errorRate: "0.12%", deployedAt: "23 Aug, 02:24" },
    { id: "orders-stg", service: "Order orchestration", environment: "Staging", region: "eu-central-1", version: "v5.23.0-beta.1", status: "Maintenance", owner: "Fulfilment", p95: 318, errorRate: "0.20%", deployedAt: "23 Aug, 02:01" },
    { id: "search-stg", service: "Search gateway", environment: "Staging", region: "ap-southeast-2", version: "v11.9.0-rc.2", status: "Healthy", owner: "Discovery", p95: 133, errorRate: "0.03%", deployedAt: "23 Aug, 01:38" },
    { id: "fraud-stg", service: "Fraud decisioning", environment: "Staging", region: "us-east-1", version: "v3.10.0-beta.5", status: "Monitoring", owner: "Risk", p95: 289, errorRate: "0.51%", deployedAt: "23 Aug, 01:14" },
    { id: "notifications-stg", service: "Notifications", environment: "Staging", region: "eu-west-1", version: "v8.3.0-rc.1", status: "Healthy", owner: "Customer Comms", p95: 118, errorRate: "0.05%", deployedAt: "23 Aug, 00:50" },
    { id: "inventory-stg", service: "Inventory ledger", environment: "Staging", region: "us-west-2", version: "v6.18.0-beta.2", status: "Degraded", owner: "Supply Chain", p95: 463, errorRate: "1.17%", deployedAt: "23 Aug, 00:27" },
    { id: "shipping-stg", service: "Shipping quotes", environment: "Staging", region: "eu-central-1", version: "v10.5.0-rc.3", status: "Healthy", owner: "Logistics", p95: 176, errorRate: "0.08%", deployedAt: "22 Aug, 23:53" },
    { id: "tax-stg", service: "Tax calculation", environment: "Staging", region: "us-east-1", version: "v4.12.0-beta.1", status: "Healthy", owner: "Finance Platform", p95: 207, errorRate: "0.10%", deployedAt: "22 Aug, 23:29" },
    { id: "accounts-stg", service: "Customer accounts", environment: "Staging", region: "ap-southeast-1", version: "v13.1.0-rc.2", status: "Monitoring", owner: "Customer Platform", p95: 247, errorRate: "0.38%", deployedAt: "22 Aug, 23:05" },
    { id: "recommendations-stg", service: "Recommendations", environment: "Staging", region: "eu-west-1", version: "v2.27.0-beta.4", status: "Healthy", owner: "Personalisation", p95: 201, errorRate: "0.15%", deployedAt: "22 Aug, 22:41" },
    { id: "webhooks-stg", service: "Partner webhooks", environment: "Staging", region: "eu-central-1", version: "v5.8.0-rc.1", status: "Healthy", owner: "Integrations", p95: 188, errorRate: "0.07%", deployedAt: "22 Aug, 22:17" },
  ] satisfies readonly DataGridDemoRow[],
} as const;
 
import { DataGrid } from "@grassroot/ui-react";
 
export default function DataGridDemo() {
  return (
    <DataGrid
      rowData={dataGridFixture.rows}
      columnDefs={dataGridFixture.columns}
      getRowId={(row) => row.id}
      caption={dataGridFixture.caption}
      selectionMode="multiple"
      defaultSelectedIds={dataGridFixture.selectedIds}
      showQuickFilter
      showExportButton
    />
  );
}

<script setup lang="ts">
type DataGridDemoRow = {
  id: string;
  service: string;
  environment: "Production" | "Staging";
  region: string;
  version: string;
  status: "Healthy" | "Monitoring" | "Degraded" | "Incident" | "Maintenance";
  owner: string;
  p95: number;
  errorRate: string;
  deployedAt: string;
};
 
/**
 * Deterministic, anonymised deployment telemetry. The row and column counts
 * deliberately exercise vertical virtualization, horizontal overflow,
 * status scanning, numeric sorting, filtering, editing, and selection.
 */
const dataGridFixture = {
  caption: "Production service health",
  selectedIds: ["checkout-eu", "identity-us"],
  columns: [
    { key: "service", header: "Service", width: 190, sortable: true, filterable: true },
    { key: "environment", header: "Environment", width: 130, sortable: true, filterable: true, filterType: "set" },
    { key: "region", header: "Region", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "version", header: "Version", width: 120, sortable: true },
    { key: "status", header: "Status", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "owner", header: "Owner", width: 170, sortable: true, filterable: true },
    { key: "p95", header: "p95 ms", width: 110, sortable: true, filterable: true, filterType: "number", editable: true },
    { key: "errorRate", header: "Error rate", width: 120, sortable: true },
    { key: "deployedAt", header: "Last deployed", width: 180, sortable: true },
  ],
  rows: [
    { id: "checkout-eu", service: "Checkout API", environment: "Production", region: "eu-west-1", version: "v4.18.2", status: "Healthy", owner: "Payments", p95: 182, errorRate: "0.08%", deployedAt: "23 Aug, 09:42" },
    { id: "identity-us", service: "Identity", environment: "Production", region: "us-east-1", version: "v7.6.0", status: "Monitoring", owner: "Platform Identity", p95: 264, errorRate: "0.31%", deployedAt: "23 Aug, 09:18" },
    { id: "catalog-eu", service: "Product catalog", environment: "Production", region: "eu-west-1", version: "v12.3.1", status: "Healthy", owner: "Commerce Core", p95: 96, errorRate: "0.03%", deployedAt: "23 Aug, 08:55" },
    { id: "pricing-us", service: "Pricing engine", environment: "Production", region: "us-east-1", version: "v9.14.4", status: "Degraded", owner: "Revenue Systems", p95: 487, errorRate: "1.42%", deployedAt: "23 Aug, 08:34" },
    { id: "orders-eu", service: "Order orchestration", environment: "Production", region: "eu-central-1", version: "v5.22.0", status: "Healthy", owner: "Fulfilment", p95: 218, errorRate: "0.11%", deployedAt: "23 Aug, 08:12" },
    { id: "search-ap", service: "Search gateway", environment: "Production", region: "ap-southeast-2", version: "v11.8.3", status: "Healthy", owner: "Discovery", p95: 144, errorRate: "0.05%", deployedAt: "23 Aug, 07:49" },
    { id: "fraud-us", service: "Fraud decisioning", environment: "Production", region: "us-east-1", version: "v3.9.7", status: "Incident", owner: "Risk", p95: 732, errorRate: "4.86%", deployedAt: "23 Aug, 07:31" },
    { id: "notifications-eu", service: "Notifications", environment: "Production", region: "eu-west-1", version: "v8.2.5", status: "Healthy", owner: "Customer Comms", p95: 121, errorRate: "0.07%", deployedAt: "23 Aug, 07:06" },
    { id: "inventory-us", service: "Inventory ledger", environment: "Production", region: "us-west-2", version: "v6.17.1", status: "Monitoring", owner: "Supply Chain", p95: 305, errorRate: "0.62%", deployedAt: "23 Aug, 06:44" },
    { id: "shipping-eu", service: "Shipping quotes", environment: "Production", region: "eu-central-1", version: "v10.4.0", status: "Healthy", owner: "Logistics", p95: 198, errorRate: "0.09%", deployedAt: "23 Aug, 06:20" },
    { id: "tax-us", service: "Tax calculation", environment: "Production", region: "us-east-1", version: "v4.11.9", status: "Maintenance", owner: "Finance Platform", p95: 356, errorRate: "0.18%", deployedAt: "23 Aug, 05:58" },
    { id: "accounts-ap", service: "Customer accounts", environment: "Production", region: "ap-southeast-1", version: "v13.0.2", status: "Healthy", owner: "Customer Platform", p95: 173, errorRate: "0.06%", deployedAt: "23 Aug, 05:35" },
    { id: "recommendations-eu", service: "Recommendations", environment: "Production", region: "eu-west-1", version: "v2.26.6", status: "Degraded", owner: "Personalisation", p95: 541, errorRate: "1.08%", deployedAt: "23 Aug, 05:11" },
    { id: "media-us", service: "Media pipeline", environment: "Production", region: "us-west-2", version: "v7.12.8", status: "Healthy", owner: "Content Systems", p95: 238, errorRate: "0.14%", deployedAt: "23 Aug, 04:47" },
    { id: "webhooks-eu", service: "Partner webhooks", environment: "Production", region: "eu-central-1", version: "v5.7.3", status: "Monitoring", owner: "Integrations", p95: 279, errorRate: "0.44%", deployedAt: "23 Aug, 04:23" },
    { id: "ledger-us", service: "Payments ledger", environment: "Production", region: "us-east-1", version: "v14.2.0", status: "Healthy", owner: "Payments", p95: 167, errorRate: "0.02%", deployedAt: "23 Aug, 03:59" },
    { id: "checkout-stg", service: "Checkout API", environment: "Staging", region: "eu-west-1", version: "v4.19.0-rc.2", status: "Monitoring", owner: "Payments", p95: 211, errorRate: "0.23%", deployedAt: "23 Aug, 03:36" },
    { id: "identity-stg", service: "Identity", environment: "Staging", region: "us-east-1", version: "v7.7.0-rc.1", status: "Healthy", owner: "Platform Identity", p95: 195, errorRate: "0.09%", deployedAt: "23 Aug, 03:12" },
    { id: "catalog-stg", service: "Product catalog", environment: "Staging", region: "eu-west-1", version: "v12.4.0-beta.3", status: "Healthy", owner: "Commerce Core", p95: 104, errorRate: "0.04%", deployedAt: "23 Aug, 02:48" },
    { id: "pricing-stg", service: "Pricing engine", environment: "Staging", region: "us-east-1", version: "v9.15.0-rc.4", status: "Healthy", owner: "Revenue Systems", p95: 226, errorRate: "0.12%", deployedAt: "23 Aug, 02:24" },
    { id: "orders-stg", service: "Order orchestration", environment: "Staging", region: "eu-central-1", version: "v5.23.0-beta.1", status: "Maintenance", owner: "Fulfilment", p95: 318, errorRate: "0.20%", deployedAt: "23 Aug, 02:01" },
    { id: "search-stg", service: "Search gateway", environment: "Staging", region: "ap-southeast-2", version: "v11.9.0-rc.2", status: "Healthy", owner: "Discovery", p95: 133, errorRate: "0.03%", deployedAt: "23 Aug, 01:38" },
    { id: "fraud-stg", service: "Fraud decisioning", environment: "Staging", region: "us-east-1", version: "v3.10.0-beta.5", status: "Monitoring", owner: "Risk", p95: 289, errorRate: "0.51%", deployedAt: "23 Aug, 01:14" },
    { id: "notifications-stg", service: "Notifications", environment: "Staging", region: "eu-west-1", version: "v8.3.0-rc.1", status: "Healthy", owner: "Customer Comms", p95: 118, errorRate: "0.05%", deployedAt: "23 Aug, 00:50" },
    { id: "inventory-stg", service: "Inventory ledger", environment: "Staging", region: "us-west-2", version: "v6.18.0-beta.2", status: "Degraded", owner: "Supply Chain", p95: 463, errorRate: "1.17%", deployedAt: "23 Aug, 00:27" },
    { id: "shipping-stg", service: "Shipping quotes", environment: "Staging", region: "eu-central-1", version: "v10.5.0-rc.3", status: "Healthy", owner: "Logistics", p95: 176, errorRate: "0.08%", deployedAt: "22 Aug, 23:53" },
    { id: "tax-stg", service: "Tax calculation", environment: "Staging", region: "us-east-1", version: "v4.12.0-beta.1", status: "Healthy", owner: "Finance Platform", p95: 207, errorRate: "0.10%", deployedAt: "22 Aug, 23:29" },
    { id: "accounts-stg", service: "Customer accounts", environment: "Staging", region: "ap-southeast-1", version: "v13.1.0-rc.2", status: "Monitoring", owner: "Customer Platform", p95: 247, errorRate: "0.38%", deployedAt: "22 Aug, 23:05" },
    { id: "recommendations-stg", service: "Recommendations", environment: "Staging", region: "eu-west-1", version: "v2.27.0-beta.4", status: "Healthy", owner: "Personalisation", p95: 201, errorRate: "0.15%", deployedAt: "22 Aug, 22:41" },
    { id: "webhooks-stg", service: "Partner webhooks", environment: "Staging", region: "eu-central-1", version: "v5.8.0-rc.1", status: "Healthy", owner: "Integrations", p95: 188, errorRate: "0.07%", deployedAt: "22 Aug, 22:17" },
  ] satisfies readonly DataGridDemoRow[],
} as const;
 
import { DataGrid } from "@grassroot/ui-vue";
 
const getRowId = (row: unknown) => (row as DataGridDemoRow).id;
</script>
 
<template>
  <DataGrid
    :row-data="dataGridFixture.rows"
    :column-defs="dataGridFixture.columns"
    :get-row-id="getRowId"
    :caption="dataGridFixture.caption"
    selection-mode="multiple"
    :default-selected-ids="dataGridFixture.selectedIds"
    :show-quick-filter="true"
    :show-export-button="true"
  />
</template>

import { Component } from "@angular/core";
type DataGridDemoRow = {
  id: string;
  service: string;
  environment: "Production" | "Staging";
  region: string;
  version: string;
  status: "Healthy" | "Monitoring" | "Degraded" | "Incident" | "Maintenance";
  owner: string;
  p95: number;
  errorRate: string;
  deployedAt: string;
};
 
/**
 * Deterministic, anonymised deployment telemetry. The row and column counts
 * deliberately exercise vertical virtualization, horizontal overflow,
 * status scanning, numeric sorting, filtering, editing, and selection.
 */
const dataGridFixture = {
  caption: "Production service health",
  selectedIds: ["checkout-eu", "identity-us"],
  columns: [
    { key: "service", header: "Service", width: 190, sortable: true, filterable: true },
    { key: "environment", header: "Environment", width: 130, sortable: true, filterable: true, filterType: "set" },
    { key: "region", header: "Region", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "version", header: "Version", width: 120, sortable: true },
    { key: "status", header: "Status", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "owner", header: "Owner", width: 170, sortable: true, filterable: true },
    { key: "p95", header: "p95 ms", width: 110, sortable: true, filterable: true, filterType: "number", editable: true },
    { key: "errorRate", header: "Error rate", width: 120, sortable: true },
    { key: "deployedAt", header: "Last deployed", width: 180, sortable: true },
  ],
  rows: [
    { id: "checkout-eu", service: "Checkout API", environment: "Production", region: "eu-west-1", version: "v4.18.2", status: "Healthy", owner: "Payments", p95: 182, errorRate: "0.08%", deployedAt: "23 Aug, 09:42" },
    { id: "identity-us", service: "Identity", environment: "Production", region: "us-east-1", version: "v7.6.0", status: "Monitoring", owner: "Platform Identity", p95: 264, errorRate: "0.31%", deployedAt: "23 Aug, 09:18" },
    { id: "catalog-eu", service: "Product catalog", environment: "Production", region: "eu-west-1", version: "v12.3.1", status: "Healthy", owner: "Commerce Core", p95: 96, errorRate: "0.03%", deployedAt: "23 Aug, 08:55" },
    { id: "pricing-us", service: "Pricing engine", environment: "Production", region: "us-east-1", version: "v9.14.4", status: "Degraded", owner: "Revenue Systems", p95: 487, errorRate: "1.42%", deployedAt: "23 Aug, 08:34" },
    { id: "orders-eu", service: "Order orchestration", environment: "Production", region: "eu-central-1", version: "v5.22.0", status: "Healthy", owner: "Fulfilment", p95: 218, errorRate: "0.11%", deployedAt: "23 Aug, 08:12" },
    { id: "search-ap", service: "Search gateway", environment: "Production", region: "ap-southeast-2", version: "v11.8.3", status: "Healthy", owner: "Discovery", p95: 144, errorRate: "0.05%", deployedAt: "23 Aug, 07:49" },
    { id: "fraud-us", service: "Fraud decisioning", environment: "Production", region: "us-east-1", version: "v3.9.7", status: "Incident", owner: "Risk", p95: 732, errorRate: "4.86%", deployedAt: "23 Aug, 07:31" },
    { id: "notifications-eu", service: "Notifications", environment: "Production", region: "eu-west-1", version: "v8.2.5", status: "Healthy", owner: "Customer Comms", p95: 121, errorRate: "0.07%", deployedAt: "23 Aug, 07:06" },
    { id: "inventory-us", service: "Inventory ledger", environment: "Production", region: "us-west-2", version: "v6.17.1", status: "Monitoring", owner: "Supply Chain", p95: 305, errorRate: "0.62%", deployedAt: "23 Aug, 06:44" },
    { id: "shipping-eu", service: "Shipping quotes", environment: "Production", region: "eu-central-1", version: "v10.4.0", status: "Healthy", owner: "Logistics", p95: 198, errorRate: "0.09%", deployedAt: "23 Aug, 06:20" },
    { id: "tax-us", service: "Tax calculation", environment: "Production", region: "us-east-1", version: "v4.11.9", status: "Maintenance", owner: "Finance Platform", p95: 356, errorRate: "0.18%", deployedAt: "23 Aug, 05:58" },
    { id: "accounts-ap", service: "Customer accounts", environment: "Production", region: "ap-southeast-1", version: "v13.0.2", status: "Healthy", owner: "Customer Platform", p95: 173, errorRate: "0.06%", deployedAt: "23 Aug, 05:35" },
    { id: "recommendations-eu", service: "Recommendations", environment: "Production", region: "eu-west-1", version: "v2.26.6", status: "Degraded", owner: "Personalisation", p95: 541, errorRate: "1.08%", deployedAt: "23 Aug, 05:11" },
    { id: "media-us", service: "Media pipeline", environment: "Production", region: "us-west-2", version: "v7.12.8", status: "Healthy", owner: "Content Systems", p95: 238, errorRate: "0.14%", deployedAt: "23 Aug, 04:47" },
    { id: "webhooks-eu", service: "Partner webhooks", environment: "Production", region: "eu-central-1", version: "v5.7.3", status: "Monitoring", owner: "Integrations", p95: 279, errorRate: "0.44%", deployedAt: "23 Aug, 04:23" },
    { id: "ledger-us", service: "Payments ledger", environment: "Production", region: "us-east-1", version: "v14.2.0", status: "Healthy", owner: "Payments", p95: 167, errorRate: "0.02%", deployedAt: "23 Aug, 03:59" },
    { id: "checkout-stg", service: "Checkout API", environment: "Staging", region: "eu-west-1", version: "v4.19.0-rc.2", status: "Monitoring", owner: "Payments", p95: 211, errorRate: "0.23%", deployedAt: "23 Aug, 03:36" },
    { id: "identity-stg", service: "Identity", environment: "Staging", region: "us-east-1", version: "v7.7.0-rc.1", status: "Healthy", owner: "Platform Identity", p95: 195, errorRate: "0.09%", deployedAt: "23 Aug, 03:12" },
    { id: "catalog-stg", service: "Product catalog", environment: "Staging", region: "eu-west-1", version: "v12.4.0-beta.3", status: "Healthy", owner: "Commerce Core", p95: 104, errorRate: "0.04%", deployedAt: "23 Aug, 02:48" },
    { id: "pricing-stg", service: "Pricing engine", environment: "Staging", region: "us-east-1", version: "v9.15.0-rc.4", status: "Healthy", owner: "Revenue Systems", p95: 226, errorRate: "0.12%", deployedAt: "23 Aug, 02:24" },
    { id: "orders-stg", service: "Order orchestration", environment: "Staging", region: "eu-central-1", version: "v5.23.0-beta.1", status: "Maintenance", owner: "Fulfilment", p95: 318, errorRate: "0.20%", deployedAt: "23 Aug, 02:01" },
    { id: "search-stg", service: "Search gateway", environment: "Staging", region: "ap-southeast-2", version: "v11.9.0-rc.2", status: "Healthy", owner: "Discovery", p95: 133, errorRate: "0.03%", deployedAt: "23 Aug, 01:38" },
    { id: "fraud-stg", service: "Fraud decisioning", environment: "Staging", region: "us-east-1", version: "v3.10.0-beta.5", status: "Monitoring", owner: "Risk", p95: 289, errorRate: "0.51%", deployedAt: "23 Aug, 01:14" },
    { id: "notifications-stg", service: "Notifications", environment: "Staging", region: "eu-west-1", version: "v8.3.0-rc.1", status: "Healthy", owner: "Customer Comms", p95: 118, errorRate: "0.05%", deployedAt: "23 Aug, 00:50" },
    { id: "inventory-stg", service: "Inventory ledger", environment: "Staging", region: "us-west-2", version: "v6.18.0-beta.2", status: "Degraded", owner: "Supply Chain", p95: 463, errorRate: "1.17%", deployedAt: "23 Aug, 00:27" },
    { id: "shipping-stg", service: "Shipping quotes", environment: "Staging", region: "eu-central-1", version: "v10.5.0-rc.3", status: "Healthy", owner: "Logistics", p95: 176, errorRate: "0.08%", deployedAt: "22 Aug, 23:53" },
    { id: "tax-stg", service: "Tax calculation", environment: "Staging", region: "us-east-1", version: "v4.12.0-beta.1", status: "Healthy", owner: "Finance Platform", p95: 207, errorRate: "0.10%", deployedAt: "22 Aug, 23:29" },
    { id: "accounts-stg", service: "Customer accounts", environment: "Staging", region: "ap-southeast-1", version: "v13.1.0-rc.2", status: "Monitoring", owner: "Customer Platform", p95: 247, errorRate: "0.38%", deployedAt: "22 Aug, 23:05" },
    { id: "recommendations-stg", service: "Recommendations", environment: "Staging", region: "eu-west-1", version: "v2.27.0-beta.4", status: "Healthy", owner: "Personalisation", p95: 201, errorRate: "0.15%", deployedAt: "22 Aug, 22:41" },
    { id: "webhooks-stg", service: "Partner webhooks", environment: "Staging", region: "eu-central-1", version: "v5.8.0-rc.1", status: "Healthy", owner: "Integrations", p95: 188, errorRate: "0.07%", deployedAt: "22 Aug, 22:17" },
  ] satisfies readonly DataGridDemoRow[],
} as const;
 
import { GrassrootDataGrid } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-data-grid-demo",
  standalone: true,
  imports: [GrassrootDataGrid],
  host: { style: "display: contents" },
  template: `
    <grassroot-data-grid
      [rowData]="fixture.rows"
      [columnDefs]="fixture.columns"
      [getRowId]="getRowId"
      [caption]="fixture.caption"
      selectionMode="multiple"
      [defaultSelectedIds]="fixture.selectedIds"
      [showQuickFilter]="true"
      [showExportButton]="true"
    />
  `,
})
export class DataGridDemoComponent {
  protected readonly fixture = dataGridFixture;
  protected readonly getRowId = (row: unknown) => (row as DataGridDemoRow).id;
}
 
export default DataGridDemoComponent;

<script lang="ts">
  type DataGridDemoRow = {
    id: string;
    service: string;
    environment: "Production" | "Staging";
    region: string;
    version: string;
    status: "Healthy" | "Monitoring" | "Degraded" | "Incident" | "Maintenance";
    owner: string;
    p95: number;
    errorRate: string;
    deployedAt: string;
  };
 
  /**
   * Deterministic, anonymised deployment telemetry. The row and column counts
   * deliberately exercise vertical virtualization, horizontal overflow,
   * status scanning, numeric sorting, filtering, editing, and selection.
   */
  const dataGridFixture = {
    caption: "Production service health",
    selectedIds: ["checkout-eu", "identity-us"],
    columns: [
      { key: "service", header: "Service", width: 190, sortable: true, filterable: true },
      { key: "environment", header: "Environment", width: 130, sortable: true, filterable: true, filterType: "set" },
      { key: "region", header: "Region", width: 140, sortable: true, filterable: true, filterType: "set" },
      { key: "version", header: "Version", width: 120, sortable: true },
      { key: "status", header: "Status", width: 140, sortable: true, filterable: true, filterType: "set" },
      { key: "owner", header: "Owner", width: 170, sortable: true, filterable: true },
      { key: "p95", header: "p95 ms", width: 110, sortable: true, filterable: true, filterType: "number", editable: true },
      { key: "errorRate", header: "Error rate", width: 120, sortable: true },
      { key: "deployedAt", header: "Last deployed", width: 180, sortable: true },
    ],
    rows: [
      { id: "checkout-eu", service: "Checkout API", environment: "Production", region: "eu-west-1", version: "v4.18.2", status: "Healthy", owner: "Payments", p95: 182, errorRate: "0.08%", deployedAt: "23 Aug, 09:42" },
      { id: "identity-us", service: "Identity", environment: "Production", region: "us-east-1", version: "v7.6.0", status: "Monitoring", owner: "Platform Identity", p95: 264, errorRate: "0.31%", deployedAt: "23 Aug, 09:18" },
      { id: "catalog-eu", service: "Product catalog", environment: "Production", region: "eu-west-1", version: "v12.3.1", status: "Healthy", owner: "Commerce Core", p95: 96, errorRate: "0.03%", deployedAt: "23 Aug, 08:55" },
      { id: "pricing-us", service: "Pricing engine", environment: "Production", region: "us-east-1", version: "v9.14.4", status: "Degraded", owner: "Revenue Systems", p95: 487, errorRate: "1.42%", deployedAt: "23 Aug, 08:34" },
      { id: "orders-eu", service: "Order orchestration", environment: "Production", region: "eu-central-1", version: "v5.22.0", status: "Healthy", owner: "Fulfilment", p95: 218, errorRate: "0.11%", deployedAt: "23 Aug, 08:12" },
      { id: "search-ap", service: "Search gateway", environment: "Production", region: "ap-southeast-2", version: "v11.8.3", status: "Healthy", owner: "Discovery", p95: 144, errorRate: "0.05%", deployedAt: "23 Aug, 07:49" },
      { id: "fraud-us", service: "Fraud decisioning", environment: "Production", region: "us-east-1", version: "v3.9.7", status: "Incident", owner: "Risk", p95: 732, errorRate: "4.86%", deployedAt: "23 Aug, 07:31" },
      { id: "notifications-eu", service: "Notifications", environment: "Production", region: "eu-west-1", version: "v8.2.5", status: "Healthy", owner: "Customer Comms", p95: 121, errorRate: "0.07%", deployedAt: "23 Aug, 07:06" },
      { id: "inventory-us", service: "Inventory ledger", environment: "Production", region: "us-west-2", version: "v6.17.1", status: "Monitoring", owner: "Supply Chain", p95: 305, errorRate: "0.62%", deployedAt: "23 Aug, 06:44" },
      { id: "shipping-eu", service: "Shipping quotes", environment: "Production", region: "eu-central-1", version: "v10.4.0", status: "Healthy", owner: "Logistics", p95: 198, errorRate: "0.09%", deployedAt: "23 Aug, 06:20" },
      { id: "tax-us", service: "Tax calculation", environment: "Production", region: "us-east-1", version: "v4.11.9", status: "Maintenance", owner: "Finance Platform", p95: 356, errorRate: "0.18%", deployedAt: "23 Aug, 05:58" },
      { id: "accounts-ap", service: "Customer accounts", environment: "Production", region: "ap-southeast-1", version: "v13.0.2", status: "Healthy", owner: "Customer Platform", p95: 173, errorRate: "0.06%", deployedAt: "23 Aug, 05:35" },
      { id: "recommendations-eu", service: "Recommendations", environment: "Production", region: "eu-west-1", version: "v2.26.6", status: "Degraded", owner: "Personalisation", p95: 541, errorRate: "1.08%", deployedAt: "23 Aug, 05:11" },
      { id: "media-us", service: "Media pipeline", environment: "Production", region: "us-west-2", version: "v7.12.8", status: "Healthy", owner: "Content Systems", p95: 238, errorRate: "0.14%", deployedAt: "23 Aug, 04:47" },
      { id: "webhooks-eu", service: "Partner webhooks", environment: "Production", region: "eu-central-1", version: "v5.7.3", status: "Monitoring", owner: "Integrations", p95: 279, errorRate: "0.44%", deployedAt: "23 Aug, 04:23" },
      { id: "ledger-us", service: "Payments ledger", environment: "Production", region: "us-east-1", version: "v14.2.0", status: "Healthy", owner: "Payments", p95: 167, errorRate: "0.02%", deployedAt: "23 Aug, 03:59" },
      { id: "checkout-stg", service: "Checkout API", environment: "Staging", region: "eu-west-1", version: "v4.19.0-rc.2", status: "Monitoring", owner: "Payments", p95: 211, errorRate: "0.23%", deployedAt: "23 Aug, 03:36" },
      { id: "identity-stg", service: "Identity", environment: "Staging", region: "us-east-1", version: "v7.7.0-rc.1", status: "Healthy", owner: "Platform Identity", p95: 195, errorRate: "0.09%", deployedAt: "23 Aug, 03:12" },
      { id: "catalog-stg", service: "Product catalog", environment: "Staging", region: "eu-west-1", version: "v12.4.0-beta.3", status: "Healthy", owner: "Commerce Core", p95: 104, errorRate: "0.04%", deployedAt: "23 Aug, 02:48" },
      { id: "pricing-stg", service: "Pricing engine", environment: "Staging", region: "us-east-1", version: "v9.15.0-rc.4", status: "Healthy", owner: "Revenue Systems", p95: 226, errorRate: "0.12%", deployedAt: "23 Aug, 02:24" },
      { id: "orders-stg", service: "Order orchestration", environment: "Staging", region: "eu-central-1", version: "v5.23.0-beta.1", status: "Maintenance", owner: "Fulfilment", p95: 318, errorRate: "0.20%", deployedAt: "23 Aug, 02:01" },
      { id: "search-stg", service: "Search gateway", environment: "Staging", region: "ap-southeast-2", version: "v11.9.0-rc.2", status: "Healthy", owner: "Discovery", p95: 133, errorRate: "0.03%", deployedAt: "23 Aug, 01:38" },
      { id: "fraud-stg", service: "Fraud decisioning", environment: "Staging", region: "us-east-1", version: "v3.10.0-beta.5", status: "Monitoring", owner: "Risk", p95: 289, errorRate: "0.51%", deployedAt: "23 Aug, 01:14" },
      { id: "notifications-stg", service: "Notifications", environment: "Staging", region: "eu-west-1", version: "v8.3.0-rc.1", status: "Healthy", owner: "Customer Comms", p95: 118, errorRate: "0.05%", deployedAt: "23 Aug, 00:50" },
      { id: "inventory-stg", service: "Inventory ledger", environment: "Staging", region: "us-west-2", version: "v6.18.0-beta.2", status: "Degraded", owner: "Supply Chain", p95: 463, errorRate: "1.17%", deployedAt: "23 Aug, 00:27" },
      { id: "shipping-stg", service: "Shipping quotes", environment: "Staging", region: "eu-central-1", version: "v10.5.0-rc.3", status: "Healthy", owner: "Logistics", p95: 176, errorRate: "0.08%", deployedAt: "22 Aug, 23:53" },
      { id: "tax-stg", service: "Tax calculation", environment: "Staging", region: "us-east-1", version: "v4.12.0-beta.1", status: "Healthy", owner: "Finance Platform", p95: 207, errorRate: "0.10%", deployedAt: "22 Aug, 23:29" },
      { id: "accounts-stg", service: "Customer accounts", environment: "Staging", region: "ap-southeast-1", version: "v13.1.0-rc.2", status: "Monitoring", owner: "Customer Platform", p95: 247, errorRate: "0.38%", deployedAt: "22 Aug, 23:05" },
      { id: "recommendations-stg", service: "Recommendations", environment: "Staging", region: "eu-west-1", version: "v2.27.0-beta.4", status: "Healthy", owner: "Personalisation", p95: 201, errorRate: "0.15%", deployedAt: "22 Aug, 22:41" },
      { id: "webhooks-stg", service: "Partner webhooks", environment: "Staging", region: "eu-central-1", version: "v5.8.0-rc.1", status: "Healthy", owner: "Integrations", p95: 188, errorRate: "0.07%", deployedAt: "22 Aug, 22:17" },
    ] satisfies readonly DataGridDemoRow[],
  } as const;
 
  import { DataGrid } from "@grassroot/ui-svelte";
 
  const getRowId = (row: unknown) => (row as DataGridDemoRow).id;
</script>
 
<DataGrid
  rowData={dataGridFixture.rows}
  columnDefs={dataGridFixture.columns}
  getRowId={getRowId}
  caption={dataGridFixture.caption}
  selectionMode="multiple"
  defaultSelectedIds={dataGridFixture.selectedIds}
  showQuickFilter
  showExportButton
/>

/** @jsxImportSource solid-js */
type DataGridDemoRow = {
  id: string;
  service: string;
  environment: "Production" | "Staging";
  region: string;
  version: string;
  status: "Healthy" | "Monitoring" | "Degraded" | "Incident" | "Maintenance";
  owner: string;
  p95: number;
  errorRate: string;
  deployedAt: string;
};
 
/**
 * Deterministic, anonymised deployment telemetry. The row and column counts
 * deliberately exercise vertical virtualization, horizontal overflow,
 * status scanning, numeric sorting, filtering, editing, and selection.
 */
const dataGridFixture = {
  caption: "Production service health",
  selectedIds: ["checkout-eu", "identity-us"],
  columns: [
    { key: "service", header: "Service", width: 190, sortable: true, filterable: true },
    { key: "environment", header: "Environment", width: 130, sortable: true, filterable: true, filterType: "set" },
    { key: "region", header: "Region", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "version", header: "Version", width: 120, sortable: true },
    { key: "status", header: "Status", width: 140, sortable: true, filterable: true, filterType: "set" },
    { key: "owner", header: "Owner", width: 170, sortable: true, filterable: true },
    { key: "p95", header: "p95 ms", width: 110, sortable: true, filterable: true, filterType: "number", editable: true },
    { key: "errorRate", header: "Error rate", width: 120, sortable: true },
    { key: "deployedAt", header: "Last deployed", width: 180, sortable: true },
  ],
  rows: [
    { id: "checkout-eu", service: "Checkout API", environment: "Production", region: "eu-west-1", version: "v4.18.2", status: "Healthy", owner: "Payments", p95: 182, errorRate: "0.08%", deployedAt: "23 Aug, 09:42" },
    { id: "identity-us", service: "Identity", environment: "Production", region: "us-east-1", version: "v7.6.0", status: "Monitoring", owner: "Platform Identity", p95: 264, errorRate: "0.31%", deployedAt: "23 Aug, 09:18" },
    { id: "catalog-eu", service: "Product catalog", environment: "Production", region: "eu-west-1", version: "v12.3.1", status: "Healthy", owner: "Commerce Core", p95: 96, errorRate: "0.03%", deployedAt: "23 Aug, 08:55" },
    { id: "pricing-us", service: "Pricing engine", environment: "Production", region: "us-east-1", version: "v9.14.4", status: "Degraded", owner: "Revenue Systems", p95: 487, errorRate: "1.42%", deployedAt: "23 Aug, 08:34" },
    { id: "orders-eu", service: "Order orchestration", environment: "Production", region: "eu-central-1", version: "v5.22.0", status: "Healthy", owner: "Fulfilment", p95: 218, errorRate: "0.11%", deployedAt: "23 Aug, 08:12" },
    { id: "search-ap", service: "Search gateway", environment: "Production", region: "ap-southeast-2", version: "v11.8.3", status: "Healthy", owner: "Discovery", p95: 144, errorRate: "0.05%", deployedAt: "23 Aug, 07:49" },
    { id: "fraud-us", service: "Fraud decisioning", environment: "Production", region: "us-east-1", version: "v3.9.7", status: "Incident", owner: "Risk", p95: 732, errorRate: "4.86%", deployedAt: "23 Aug, 07:31" },
    { id: "notifications-eu", service: "Notifications", environment: "Production", region: "eu-west-1", version: "v8.2.5", status: "Healthy", owner: "Customer Comms", p95: 121, errorRate: "0.07%", deployedAt: "23 Aug, 07:06" },
    { id: "inventory-us", service: "Inventory ledger", environment: "Production", region: "us-west-2", version: "v6.17.1", status: "Monitoring", owner: "Supply Chain", p95: 305, errorRate: "0.62%", deployedAt: "23 Aug, 06:44" },
    { id: "shipping-eu", service: "Shipping quotes", environment: "Production", region: "eu-central-1", version: "v10.4.0", status: "Healthy", owner: "Logistics", p95: 198, errorRate: "0.09%", deployedAt: "23 Aug, 06:20" },
    { id: "tax-us", service: "Tax calculation", environment: "Production", region: "us-east-1", version: "v4.11.9", status: "Maintenance", owner: "Finance Platform", p95: 356, errorRate: "0.18%", deployedAt: "23 Aug, 05:58" },
    { id: "accounts-ap", service: "Customer accounts", environment: "Production", region: "ap-southeast-1", version: "v13.0.2", status: "Healthy", owner: "Customer Platform", p95: 173, errorRate: "0.06%", deployedAt: "23 Aug, 05:35" },
    { id: "recommendations-eu", service: "Recommendations", environment: "Production", region: "eu-west-1", version: "v2.26.6", status: "Degraded", owner: "Personalisation", p95: 541, errorRate: "1.08%", deployedAt: "23 Aug, 05:11" },
    { id: "media-us", service: "Media pipeline", environment: "Production", region: "us-west-2", version: "v7.12.8", status: "Healthy", owner: "Content Systems", p95: 238, errorRate: "0.14%", deployedAt: "23 Aug, 04:47" },
    { id: "webhooks-eu", service: "Partner webhooks", environment: "Production", region: "eu-central-1", version: "v5.7.3", status: "Monitoring", owner: "Integrations", p95: 279, errorRate: "0.44%", deployedAt: "23 Aug, 04:23" },
    { id: "ledger-us", service: "Payments ledger", environment: "Production", region: "us-east-1", version: "v14.2.0", status: "Healthy", owner: "Payments", p95: 167, errorRate: "0.02%", deployedAt: "23 Aug, 03:59" },
    { id: "checkout-stg", service: "Checkout API", environment: "Staging", region: "eu-west-1", version: "v4.19.0-rc.2", status: "Monitoring", owner: "Payments", p95: 211, errorRate: "0.23%", deployedAt: "23 Aug, 03:36" },
    { id: "identity-stg", service: "Identity", environment: "Staging", region: "us-east-1", version: "v7.7.0-rc.1", status: "Healthy", owner: "Platform Identity", p95: 195, errorRate: "0.09%", deployedAt: "23 Aug, 03:12" },
    { id: "catalog-stg", service: "Product catalog", environment: "Staging", region: "eu-west-1", version: "v12.4.0-beta.3", status: "Healthy", owner: "Commerce Core", p95: 104, errorRate: "0.04%", deployedAt: "23 Aug, 02:48" },
    { id: "pricing-stg", service: "Pricing engine", environment: "Staging", region: "us-east-1", version: "v9.15.0-rc.4", status: "Healthy", owner: "Revenue Systems", p95: 226, errorRate: "0.12%", deployedAt: "23 Aug, 02:24" },
    { id: "orders-stg", service: "Order orchestration", environment: "Staging", region: "eu-central-1", version: "v5.23.0-beta.1", status: "Maintenance", owner: "Fulfilment", p95: 318, errorRate: "0.20%", deployedAt: "23 Aug, 02:01" },
    { id: "search-stg", service: "Search gateway", environment: "Staging", region: "ap-southeast-2", version: "v11.9.0-rc.2", status: "Healthy", owner: "Discovery", p95: 133, errorRate: "0.03%", deployedAt: "23 Aug, 01:38" },
    { id: "fraud-stg", service: "Fraud decisioning", environment: "Staging", region: "us-east-1", version: "v3.10.0-beta.5", status: "Monitoring", owner: "Risk", p95: 289, errorRate: "0.51%", deployedAt: "23 Aug, 01:14" },
    { id: "notifications-stg", service: "Notifications", environment: "Staging", region: "eu-west-1", version: "v8.3.0-rc.1", status: "Healthy", owner: "Customer Comms", p95: 118, errorRate: "0.05%", deployedAt: "23 Aug, 00:50" },
    { id: "inventory-stg", service: "Inventory ledger", environment: "Staging", region: "us-west-2", version: "v6.18.0-beta.2", status: "Degraded", owner: "Supply Chain", p95: 463, errorRate: "1.17%", deployedAt: "23 Aug, 00:27" },
    { id: "shipping-stg", service: "Shipping quotes", environment: "Staging", region: "eu-central-1", version: "v10.5.0-rc.3", status: "Healthy", owner: "Logistics", p95: 176, errorRate: "0.08%", deployedAt: "22 Aug, 23:53" },
    { id: "tax-stg", service: "Tax calculation", environment: "Staging", region: "us-east-1", version: "v4.12.0-beta.1", status: "Healthy", owner: "Finance Platform", p95: 207, errorRate: "0.10%", deployedAt: "22 Aug, 23:29" },
    { id: "accounts-stg", service: "Customer accounts", environment: "Staging", region: "ap-southeast-1", version: "v13.1.0-rc.2", status: "Monitoring", owner: "Customer Platform", p95: 247, errorRate: "0.38%", deployedAt: "22 Aug, 23:05" },
    { id: "recommendations-stg", service: "Recommendations", environment: "Staging", region: "eu-west-1", version: "v2.27.0-beta.4", status: "Healthy", owner: "Personalisation", p95: 201, errorRate: "0.15%", deployedAt: "22 Aug, 22:41" },
    { id: "webhooks-stg", service: "Partner webhooks", environment: "Staging", region: "eu-central-1", version: "v5.8.0-rc.1", status: "Healthy", owner: "Integrations", p95: 188, errorRate: "0.07%", deployedAt: "22 Aug, 22:17" },
  ] satisfies readonly DataGridDemoRow[],
} as const;
 
import { DataGrid } from "@grassroot/ui-solid";
 
const getRowId = (row: unknown) => (row as DataGridDemoRow).id;
 
export default function DataGridDemo() {
  return (
    <DataGrid
      rowData={dataGridFixture.rows}
      columnDefs={dataGridFixture.columns}
      getRowId={getRowId}
      caption={dataGridFixture.caption}
      selectionMode="multiple"
      defaultSelectedIds={dataGridFixture.selectedIds}
      showQuickFilter
      showExportButton
    />
  );
}

Installation

API Reference

Import

import { DataGrid } from "@grassroot/ui-react";

Props

Prop

Type

Default

Requirement

mode

"virtualized" | "paginated" | undefined

—

optional

caption

string | undefined

—

optional

columnDefs

readonly GridColumnDef<T>[]

—

required

getRowId

(row: T, index: number) => string

—

required

selectionMode

SelectionMode | undefined

—

optional

selectedIds

readonly string[] | undefined

—

optional

defaultSelectedIds

readonly string[] | undefined

—

optional

onSelectedIdsChange

(((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) | undefined

—

optional

onSortModelChange

(((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) | undefined

—

optional

filterModel

GridFilterModel | undefined

—

optional

defaultFilterModel

GridFilterModel | undefined

—

optional

groupBy

readonly string[] | undefined

—

optional

defaultGroupBy

readonly string[] | undefined

—

optional

aggFor

Readonly<Record<string, "max" | "min" | "sum" | "avg" | "count" | "custom">> | undefined

—

optional

Prop: mode
Type: "virtualized" | "paginated" | undefined
Default: —
Requirement: optional

Prop: caption
Type: string | undefined
Default: —
Requirement: optional

Prop: columnDefs
Type: readonly GridColumnDef<T>[]
Default: —
Requirement: required

Prop: getRowId
Type: (row: T, index: number) => string
Default: —
Requirement: required

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) | undefined
Default: —
Requirement: optional

Prop: onSortModelChange
Type: (((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) | undefined
Default: —
Requirement: optional

Prop: filterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: defaultFilterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: groupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultGroupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: aggFor
Type: Readonly<Record<string, "max" | "min" | "sum" | "avg" | "count" | "custom">> | undefined
Default: —
Requirement: optional

Prop: pagination
Type: PaginationInput | undefined
Default: —
Requirement: optional

Prop: onFilterModelChange
Type: (((filterModel: GridFilterModel) => void) & ((filterModel: GridFilterModel) => void)) | undefined
Default: —
Requirement: optional

Prop: onGroupByChange
Type: (((groupBy: readonly string[]) => void) & ((groupBy: readonly string[]) => void)) | undefined
Default: —
Requirement: optional

Prop: onPageChange
Type: (((page: number) => void) & ((page: number) => void)) | undefined
Default: —
Requirement: optional

Prop: validateCell
Type: (((value: unknown, params: GridCellParams<T>) => import("@grassroot/ui-headless-core").GridCellValidation) & ((value: unknown, params: GridCellParams<T>) => GridCellValidation)) | undefined
Default: —
Requirement: optional

Prop: onEditCommit
Type: (((detail: import("@grassroot/ui-headless-core").GridEditCommitDetail<T>) => void) & ((detail: GridEditCommitDetail<T>) => void)) | undefined
Default: —
Requirement: optional

Prop: onEditCancel
Type: (((detail: { readonly rowId: string; readonly colKey: string; }) => void) & ((detail: { readonly rowId: string; readonly colKey: string; }) => void)) | undefined
Default: —
Requirement: optional

Prop: onColumnStateChange
Type: (((columnState: GridColumnState) => void) & ((columnState: GridColumnState) => void)) | undefined
Default: —
Requirement: optional

Prop: ssrRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: blockSize
Type: number | undefined
Default: —
Requirement: optional

Prop: loadMoreThreshold
Type: number | undefined
Default: —
Requirement: optional

Prop: loading
Type: boolean | undefined
Default: —
Requirement: optional

Prop: rowModel
Type: "client" | "server" | "infinite" | undefined
Default: —
Requirement: optional

Prop: rowData
Type: readonly T[] | undefined
Default: —
Requirement: optional

Prop: dataSource
Type: import("@grassroot/ui-headless-core").GridDataSource<T> | undefined
Default: —
Requirement: optional

Prop: initialRowData
Type: readonly T[] | undefined
Default: —
Requirement: optional

Prop: initialRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: showQuickFilter
Type: boolean | undefined
Default: —
Requirement: optional

Prop: showExportButton
Type: boolean | undefined
Default: —
Requirement: optional

Prop: onExportCSV
Type: (((csv: string) => void) & ((csv: string) => void)) | undefined
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) \| undefined`
`onSortModelChange`	`(((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) \| undefined`
`onFilterModelChange`	`(((filterModel: GridFilterModel) => void) & ((filterModel: GridFilterModel) => void)) \| undefined`
`onGroupByChange`	`(((groupBy: readonly string[]) => void) & ((groupBy: readonly string[]) => void)) \| undefined`
`onPageChange`	`(((page: number) => void) & ((page: number) => void)) \| undefined`
`onEditCommit`	`(((detail: import("@grassroot/ui-headless-core").GridEditCommitDetail<T>) => void) & ((detail: GridEditCommitDetail<T>) => void)) \| undefined`
`onEditCancel`	`(((detail: { readonly rowId: string; readonly colKey: string; }) => void) & ((detail: { readonly rowId: string; readonly colKey: string; }) => void)) \| undefined`
`onColumnStateChange`	`(((columnState: GridColumnState) => void) & ((columnState: GridColumnState) => void)) \| undefined`
`onExportCSV`	`(((csv: string) => void) & ((csv: string) => void)) \| undefined`

Content regions

emptyMessage
error
renderCell

Import

import { DataGrid } from "@grassroot/ui-vue";

Props

Prop

Type

Default

Requirement

rowData

readonly unknown[] | undefined

—

optional

rowModel

"client" | "server" | "infinite" | undefined

—

optional

dataSource

GridDataSource<unknown> | undefined

—

optional

initialRowData

readonly unknown[] | undefined

—

optional

initialRowCount

number | undefined

—

optional

blockSize

number | undefined

—

optional

loadMoreThreshold

number | undefined

—

optional

columnDefs

readonly GridColumnDef<unknown>[]

—

required

getRowId

(row: unknown, index: number) => string

—

required

caption

string | undefined

—

optional

selectionMode

SelectionMode | undefined

—

optional

selectedIds

readonly string[] | undefined

—

optional

defaultSelectedIds

readonly string[] | undefined

—

optional

onSelectedIdsChange

((detail: SelectionChangeDetail) => void) | undefined

—

optional

Prop: rowData
Type: readonly unknown[] | undefined
Default: —
Requirement: optional

Prop: rowModel
Type: "client" | "server" | "infinite" | undefined
Default: —
Requirement: optional

Prop: dataSource
Type: GridDataSource<unknown> | undefined
Default: —
Requirement: optional

Prop: initialRowData
Type: readonly unknown[] | undefined
Default: —
Requirement: optional

Prop: initialRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: blockSize
Type: number | undefined
Default: —
Requirement: optional

Prop: loadMoreThreshold
Type: number | undefined
Default: —
Requirement: optional

Prop: columnDefs
Type: readonly GridColumnDef<unknown>[]
Default: —
Requirement: required

Prop: getRowId
Type: (row: unknown, index: number) => string
Default: —
Requirement: required

Prop: caption
Type: string | undefined
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: ((detail: SelectionChangeDetail) => void) | undefined
Default: —
Requirement: optional

Prop: onSortModelChange
Type: ((sortModel: readonly GridSortEntry[]) => void) | undefined
Default: —
Requirement: optional

Prop: filterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: defaultFilterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: groupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultGroupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: aggFor
Type: Readonly<Record<string, "sum" | "avg" | "count" | "min" | "max" | "custom">> | undefined
Default: —
Requirement: optional

Prop: mode
Type: "virtualized" | "paginated" | undefined
Default: —
Requirement: optional

Prop: pagination
Type: PaginationInput | undefined
Default: —
Requirement: optional

Prop: onFilterModelChange
Type: ((filterModel: GridFilterModel) => void) | undefined
Default: —
Requirement: optional

Prop: onGroupByChange
Type: ((groupBy: readonly string[]) => void) | undefined
Default: —
Requirement: optional

Prop: onPageChange
Type: ((page: number) => void) | undefined
Default: —
Requirement: optional

Prop: validateCell
Type: ((value: unknown, params: GridCellParams<unknown>) => GridCellValidation) | undefined
Default: —
Requirement: optional

Prop: onEditCommit
Type: ((detail: GridEditCommitDetail<unknown>) => void) | undefined
Default: —
Requirement: optional

Prop: onEditCancel
Type: ((detail: { readonly rowId: string; readonly colKey: string; }) => void) | undefined
Default: —
Requirement: optional

Prop: onColumnStateChange
Type: ((columnState: GridColumnState) => void) | undefined
Default: —
Requirement: optional

Prop: renderCell
Type: ((row: unknown, column: GridColumnDef<unknown>) => unknown) | undefined
Default: —
Requirement: optional

Prop: loading
Type: boolean | undefined
Default: —
Requirement: optional

Prop: error
Type: unknown
Default: —
Requirement: optional

Prop: emptyMessage
Type: unknown
Default: —
Requirement: optional

Prop: showQuickFilter
Type: boolean | undefined
Default: —
Requirement: optional

Prop: showExportButton
Type: boolean | undefined
Default: —
Requirement: optional

Prop: ssrRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: onExportCSV
Type: ((csv: string) => void) | undefined
Default: —
Requirement: optional

Events

Event	Payload
`selectedIdsChange`	`[detail: SelectionChangeDetail]`
`sortModelChange`	`[sortModel: readonly GridSortEntry[]]`
`filterModelChange`	`[model: GridFilterModel]`
`groupByChange`	`[groupBy: readonly string[]]`
`pageChange`	`[page: number]`
`editCommit`	`[detail: GridEditCommitDetail<unknown>]`
`editCancel`	`[detail: { readonly rowId: string; readonly colKey: string }]`
`columnStateChange`	`[columnState: GridColumnState]`
`exportCSV`	`[csv: string]`

Content regions

cell
emptyMessage
error

Import

import { Component } from "@angular/core";
import { GrassrootDataGrid } from "@grassroot/ui-angular";

Props

Prop

Type

Default

Requirement

rowData

readonly unknown[]

[]

optional

rowModel

"client" | "server" | "infinite"

"client"

optional

dataSource

GridDataSource<unknown>

—

optional

initialRowData

readonly unknown[]

—

optional

initialRowCount

number

—

optional

blockSize

number

—

optional

loadMoreThreshold

number

—

optional

columnDefs

readonly GridColumnDef<unknown>[]

—

required

getRowId

(row: unknown, index: number) => string

—

required

caption

string

"Data grid"

optional

selectionMode

SelectionMode

"none"

optional

selectedIds

readonly string[] | undefined

undefined

optional

defaultSelectedIds

readonly string[]

—

optional

onSelectedIdsChange

(detail: SelectionChangeDetail) => void

—

optional

Prop: rowData
Type: readonly unknown[]
Default: []
Requirement: optional

Prop: rowModel
Type: "client" | "server" | "infinite"
Default: "client"
Requirement: optional

Prop: dataSource
Type: GridDataSource<unknown>
Default: —
Requirement: optional

Prop: initialRowData
Type: readonly unknown[]
Default: —
Requirement: optional

Prop: initialRowCount
Type: number
Default: —
Requirement: optional

Prop: blockSize
Type: number
Default: —
Requirement: optional

Prop: loadMoreThreshold
Type: number
Default: —
Requirement: optional

Prop: columnDefs
Type: readonly GridColumnDef<unknown>[]
Default: —
Requirement: required

Prop: getRowId
Type: (row: unknown, index: number) => string
Default: —
Requirement: required

Prop: caption
Type: string
Default: "Data grid"
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: undefined
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (detail: SelectionChangeDetail) => void
Default: —
Requirement: optional

Prop: onSortModelChange
Type: (sortModel: readonly GridSortEntry[]) => void
Default: —
Requirement: optional

Prop: filterModel
Type: GridFilterModel
Default: —
Requirement: optional

Prop: defaultFilterModel
Type: GridFilterModel
Default: —
Requirement: optional

Prop: groupBy
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultGroupBy
Type: readonly string[]
Default: —
Requirement: optional

Prop: aggFor
Type: Readonly<Record<string, "sum" | "avg" | "count" | "min" | "max" | "custom">>
Default: —
Requirement: optional

Prop: mode
Type: "virtualized" | "paginated"
Default: "virtualized"
Requirement: optional

Prop: pagination
Type: PaginationInput
Default: —
Requirement: optional

Prop: onFilterModelChange
Type: (filterModel: GridFilterModel) => void
Default: —
Requirement: optional

Prop: onGroupByChange
Type: (groupBy: readonly string[]) => void
Default: —
Requirement: optional

Prop: onPageChange
Type: (page: number) => void
Default: —
Requirement: optional

Prop: validateCell
Type: (value: unknown, params: GridCellParams<unknown>) => GridCellValidation
Default: —
Requirement: optional

Prop: onEditCommit
Type: (detail: GridEditCommitDetail<unknown>) => void
Default: —
Requirement: optional

Prop: onEditCancel
Type: (detail: { readonly rowId: string; readonly colKey: string }) => void
Default: —
Requirement: optional

Prop: onColumnStateChange
Type: (columnState: GridColumnState) => void
Default: —
Requirement: optional

Prop: renderCell
Type: (row: unknown, column: GridColumnDef<unknown>) => unknown
Default: —
Requirement: optional

Prop: loading
Type: boolean
Default: false
Requirement: optional

Prop: error
Type: unknown
Default: —
Requirement: optional

Prop: emptyMessage
Type: unknown
Default: "No rows"
Requirement: optional

Prop: showQuickFilter
Type: boolean
Default: true
Requirement: optional

Prop: showExportButton
Type: boolean
Default: false
Requirement: optional

Prop: onExportCSV
Type: (csv: string) => void
Default: —
Requirement: optional

Prop: ssrRowCount
Type: number
Default: —
Requirement: optional

Prop: className
Type: string
Default: "data-grid-root"
Requirement: optional

Events

Event	Payload
`selectedIdsChange`	`SelectionChangeDetail`
`sortModelChange`	`readonly GridSortEntry[]`
`filterModelChange`	`GridFilterModel`
`groupByChange`	`readonly string[]`
`pageChange`	`number`
`editCommit`	`GridEditCommitDetail<unknown>`
`editCancel`	`{ readonly rowId: string; readonly colKey: string }`
`columnStateChange`	`GridColumnState`
`exportCSV`	`string`

Content regions

cell
emptyMessage
error

Import

import { DataGrid } from "@grassroot/ui-svelte";

Props

Prop

Type

Default

Requirement

columnDefs

readonly GridColumnDef<T>[]

—

required

getRowId

(row: T, index: number) => string

—

required

caption

string | undefined

—

optional

selectionMode

SelectionMode | undefined

—

optional

selectedIds

readonly string[] | undefined

—

optional

defaultSelectedIds

readonly string[] | undefined

—

optional

onSelectedIdsChange

(((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) | undefined

—

optional

onSortModelChange

(((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) | undefined

—

optional

filterModel

GridFilterModel | undefined

—

optional

defaultFilterModel

GridFilterModel | undefined

—

optional

groupBy

readonly string[] | undefined

—

optional

defaultGroupBy

readonly string[] | undefined

—

optional

aggFor

Readonly<Record<string, "sum" | "avg" | "count" | "min" | "max" | "custom">> | undefined

—

optional

mode

"virtualized" | "paginated" | undefined

—

optional

Prop: columnDefs
Type: readonly GridColumnDef<T>[]
Default: —
Requirement: required

Prop: getRowId
Type: (row: T, index: number) => string
Default: —
Requirement: required

Prop: caption
Type: string | undefined
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) | undefined
Default: —
Requirement: optional

Prop: onSortModelChange
Type: (((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) | undefined
Default: —
Requirement: optional

Prop: filterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: defaultFilterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: groupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultGroupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: aggFor
Type: Readonly<Record<string, "sum" | "avg" | "count" | "min" | "max" | "custom">> | undefined
Default: —
Requirement: optional

Prop: mode
Type: "virtualized" | "paginated" | undefined
Default: —
Requirement: optional

Prop: pagination
Type: PaginationInput | undefined
Default: —
Requirement: optional

Prop: onFilterModelChange
Type: (((filterModel: GridFilterModel) => void) & ((filterModel: GridFilterModel) => void)) | undefined
Default: —
Requirement: optional

Prop: onGroupByChange
Type: (((groupBy: readonly string[]) => void) & ((groupBy: readonly string[]) => void)) | undefined
Default: —
Requirement: optional

Prop: onPageChange
Type: (((page: number) => void) & ((page: number) => void)) | undefined
Default: —
Requirement: optional

Prop: validateCell
Type: (((value: unknown, params: GridCellParams<unknown>) => GridCellValidation) & ((value: unknown, params: GridCellParams<unknown>) => GridCellValidation)) | undefined
Default: —
Requirement: optional

Prop: onEditCommit
Type: (((detail: GridEditCommitDetail<unknown>) => void) & ((detail: GridEditCommitDetail<unknown>) => void)) | undefined
Default: —
Requirement: optional

Prop: onEditCancel
Type: (((detail: { readonly rowId: string; readonly colKey: string; }) => void) & ((detail: { readonly rowId: string; readonly colKey: string; }) => void)) | undefined
Default: —
Requirement: optional

Prop: onColumnStateChange
Type: (((columnState: GridColumnState) => void) & ((columnState: GridColumnState) => void)) | undefined
Default: —
Requirement: optional

Prop: renderCell
Type: (((row: unknown, column: GridColumnDef<unknown>) => unknown) & ((row: unknown, column: GridColumnDef<unknown>) => unknown)) | undefined
Default: —
Requirement: optional

Prop: ssrRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: blockSize
Type: number
Default: —
Requirement: optional

Prop: loadMoreThreshold
Type: number
Default: —
Requirement: optional

Prop: loading
Type: boolean | undefined
Default: —
Requirement: optional

Prop: rowModel
Type: "client" | "server" | "infinite" | undefined
Default: —
Requirement: optional

Prop: rowData
Type: readonly unknown[] | undefined
Default: —
Requirement: optional

Prop: dataSource
Type: GridDataSource<unknown> | undefined
Default: —
Requirement: optional

Prop: initialRowData
Type: readonly unknown[] | undefined
Default: —
Requirement: optional

Prop: initialRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: showQuickFilter
Type: boolean | undefined
Default: —
Requirement: optional

Prop: showExportButton
Type: boolean | undefined
Default: —
Requirement: optional

Prop: onExportCSV
Type: (((csv: string) => void) & ((csv: string) => void)) | undefined
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) \| undefined`
`onSortModelChange`	`(((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) \| undefined`
`onFilterModelChange`	`(((filterModel: GridFilterModel) => void) & ((filterModel: GridFilterModel) => void)) \| undefined`
`onGroupByChange`	`(((groupBy: readonly string[]) => void) & ((groupBy: readonly string[]) => void)) \| undefined`
`onPageChange`	`(((page: number) => void) & ((page: number) => void)) \| undefined`
`onEditCommit`	`(((detail: GridEditCommitDetail<unknown>) => void) & ((detail: GridEditCommitDetail<unknown>) => void)) \| undefined`
`onEditCancel`	`(((detail: { readonly rowId: string; readonly colKey: string; }) => void) & ((detail: { readonly rowId: string; readonly colKey: string; }) => void)) \| undefined`
`onColumnStateChange`	`(((columnState: GridColumnState) => void) & ((columnState: GridColumnState) => void)) \| undefined`
`onExportCSV`	`(((csv: string) => void) & ((csv: string) => void)) \| undefined`

Content regions

cell
emptyMessage
error

Import

import { DataGrid } from "@grassroot/ui-solid";

Props

Prop

Type

Default

Requirement

columnDefs

readonly GridColumnDef<T>[]

—

required

getRowId

(row: T, index: number) => string

—

required

caption

string | undefined

—

optional

selectionMode

SelectionMode | undefined

—

optional

selectedIds

readonly string[] | undefined

—

optional

defaultSelectedIds

readonly string[] | undefined

—

optional

onSelectedIdsChange

(((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) | undefined

—

optional

onSortModelChange

(((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) | undefined

—

optional

filterModel

GridFilterModel | undefined

—

optional

defaultFilterModel

GridFilterModel | undefined

—

optional

groupBy

readonly string[] | undefined

—

optional

defaultGroupBy

readonly string[] | undefined

—

optional

aggFor

Readonly<Record<string, "sum" | "avg" | "count" | "min" | "max" | "custom">> | undefined

—

optional

mode

"virtualized" | "paginated" | undefined

—

optional

Prop: columnDefs
Type: readonly GridColumnDef<T>[]
Default: —
Requirement: required

Prop: getRowId
Type: (row: T, index: number) => string
Default: —
Requirement: required

Prop: caption
Type: string | undefined
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) | undefined
Default: —
Requirement: optional

Prop: onSortModelChange
Type: (((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) | undefined
Default: —
Requirement: optional

Prop: filterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: defaultFilterModel
Type: GridFilterModel | undefined
Default: —
Requirement: optional

Prop: groupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultGroupBy
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: aggFor
Type: Readonly<Record<string, "sum" | "avg" | "count" | "min" | "max" | "custom">> | undefined
Default: —
Requirement: optional

Prop: mode
Type: "virtualized" | "paginated" | undefined
Default: —
Requirement: optional

Prop: pagination
Type: PaginationInput | undefined
Default: —
Requirement: optional

Prop: onFilterModelChange
Type: (((filterModel: GridFilterModel) => void) & ((filterModel: GridFilterModel) => void)) | undefined
Default: —
Requirement: optional

Prop: onGroupByChange
Type: (((groupBy: readonly string[]) => void) & ((groupBy: readonly string[]) => void)) | undefined
Default: —
Requirement: optional

Prop: onPageChange
Type: (((page: number) => void) & ((page: number) => void)) | undefined
Default: —
Requirement: optional

Prop: validateCell
Type: (((value: unknown, params: GridCellParams<unknown>) => GridCellValidation) & ((value: unknown, params: GridCellParams<unknown>) => GridCellValidation)) | undefined
Default: —
Requirement: optional

Prop: onEditCommit
Type: (((detail: GridEditCommitDetail<unknown>) => void) & ((detail: GridEditCommitDetail<unknown>) => void)) | undefined
Default: —
Requirement: optional

Prop: onEditCancel
Type: (((detail: { readonly rowId: string; readonly colKey: string; }) => void) & ((detail: { readonly rowId: string; readonly colKey: string; }) => void)) | undefined
Default: —
Requirement: optional

Prop: onColumnStateChange
Type: (((columnState: GridColumnState) => void) & ((columnState: GridColumnState) => void)) | undefined
Default: —
Requirement: optional

Prop: ssrRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: blockSize
Type: number
Default: —
Requirement: optional

Prop: loadMoreThreshold
Type: number
Default: —
Requirement: optional

Prop: loading
Type: boolean | undefined
Default: —
Requirement: optional

Prop: error
Type: number | boolean | Node | JSX.ArrayElement | (string & {}) | null | undefined
Default: —
Requirement: optional

Prop: rowModel
Type: "client" | "server" | "infinite" | undefined
Default: —
Requirement: optional

Prop: rowData
Type: readonly unknown[] | undefined
Default: —
Requirement: optional

Prop: dataSource
Type: GridDataSource<unknown> | undefined
Default: —
Requirement: optional

Prop: initialRowData
Type: readonly unknown[] | undefined
Default: —
Requirement: optional

Prop: initialRowCount
Type: number | undefined
Default: —
Requirement: optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: showQuickFilter
Type: boolean | undefined
Default: —
Requirement: optional

Prop: showExportButton
Type: boolean | undefined
Default: —
Requirement: optional

Prop: onExportCSV
Type: (((csv: string) => void) & ((csv: string) => void)) | undefined
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(((detail: SelectionChangeDetail) => void) & ((detail: SelectionChangeDetail) => void)) \| undefined`
`onSortModelChange`	`(((sortModel: readonly GridSortEntry[]) => void) & ((sortModel: readonly GridSortEntry[]) => void)) \| undefined`
`onFilterModelChange`	`(((filterModel: GridFilterModel) => void) & ((filterModel: GridFilterModel) => void)) \| undefined`
`onGroupByChange`	`(((groupBy: readonly string[]) => void) & ((groupBy: readonly string[]) => void)) \| undefined`
`onPageChange`	`(((page: number) => void) & ((page: number) => void)) \| undefined`
`onEditCommit`	`(((detail: GridEditCommitDetail<unknown>) => void) & ((detail: GridEditCommitDetail<unknown>) => void)) \| undefined`
`onEditCancel`	`(((detail: { readonly rowId: string; readonly colKey: string; }) => void) & ((detail: { readonly rowId: string; readonly colKey: string; }) => void)) \| undefined`
`onColumnStateChange`	`(((columnState: GridColumnState) => void) & ((columnState: GridColumnState) => void)) \| undefined`
`onExportCSV`	`(((csv: string) => void) & ((csv: string) => void)) \| undefined`

Content regions

emptyMessage
renderCell