DataGrid Grouping

Overview

Group a realistic banking operations dataset by one or more fields with the built-in group panel, grouped headers, and the same unified DataGrid state used by sorting, filtering, and paging.

The example below uses transaction records with account type, status, city, amount, and posted date so the grouping behavior is easier to read in a real-world grid.

Related DataGrid topics

Use these guides when grouping needs to work together with the rest of the grid workflow.

DataGrid Overview
Data Operations
Sorting
Filtering
Pagination

Automatic grouping

This first example groups transaction activity by accountType and then status. Turn on [groupable], provide [group], and the grid groups local rows internally.

The same state is exposed through (dataStateChange), which is what keeps grouped filtering, sorting, and paging aligned without a second docs-only state model.

Loading interactive DataGrid example…

Local grouping

Use ngbGroupData when the app needs grouped output outside the rendered grid, or use ngbApplyDataGridOperations when grouping should stay aligned with the current local filtering, sorting, and paging rules.

Current automatic state

{
  "page": 1,
  "pageIndex": 0,
  "skip": 0,
  "pageSize": 8,
  "sort": [],
  "group": [
    {
      "field": "accountType",
      "dir": "asc"
    },
    {
      "field": "status",
      "dir": "asc"
    }
  ],
  "filter": {
    "logic": "and",
    "filters": []
  },
  "globalFilter": ""
}

Local group helper output

[
  {
    "field": "accountType",
    "value": "Checking",
    "dir": "asc",
    "level": 0,
    "count": 30,
    "items": [
      {
        "field": "status",
        "value": "Cancelled",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700112,
            "customer": "Harper Hall",
            "accountNumber": "CHK-041204",
            "accountType": "Checking",
            "transactionType": "Payment",
            "status": "Cancelled",
            "city": "Berlin",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 1744,
            "postedAt": "2026-01-10"
          },
          {
            "id": 700144,
            "customer": "Harper Hall",
            "accountNumber": "CHK-041748",
            "accountType": "Checking",
            "transactionType": "Deposit",
            "status": "Cancelled",
            "city": "Berlin",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 1563,
            "postedAt": "2026-03-25"
          },
          {
            "id": 700176,
            "customer": "Harper Hall",
            "accountNumber": "CHK-042292",
            "accountType": "Checking",
            "transactionType": "Interest",
            "status": "Cancelled",
            "city": "Berlin",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 105,
            "postedAt": "2026-05-13"
          },
          {
            "id": 700208,
            "customer": "Harper Hall",
            "accountNumber": "CHK-042836",
            "accountType": "Checking",
            "transactionType": "Transfer",
            "status": "Cancelled",
            "city": "Berlin",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 5881,
            "postedAt": "2026-01-01"
          }
        ]
      },
      {
        "field": "status",
        "value": "Completed",
        "dir": "asc",
        "level": 1,
        "count": 19,
        "items": [
          {
            "id": 700100,
            "customer": "Ava Thompson",
            "accountNumber": "CHK-041000",
            "accountType": "Checking",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Toronto",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 335,
            "postedAt": "2026-01-01"
          },
          {
            "id": 700108,
            "customer": "Amelia Davis",
            "accountNumber": "CHK-041136",
            "accountType": "Checking",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Amsterdam",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 309,
            "postedAt": "2026-03-25"
          },
          {
            "id": 700116,
            "customer": "Abigail Torres",
            "accountNumber": "CHK-041272",
            "accountType": "Checking",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Toronto",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 145,
            "postedAt": "2026-05-22"
          },
          {
            "id": 700120,
            "customer": "Scarlett Campbell",
            "accountNumber": "CHK-041340",
            "accountType": "Checking",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Seoul",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 240,
            "postedAt": "2026-03-07"
          },
          {
            "id": 700124,
            "customer": "Chloe Carter",
            "accountNumber": "CHK-041408",
            "accountType": "Checking",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Amsterdam",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 50,
            "postedAt": "2026-01-19"
          },
          {
            "id": 700132,
            "customer": "Ava Thompson",
            "accountNumber": "CHK-041544",
            "accountType": "Checking",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Toronto",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 21,
            "postedAt": "2026-03-16"
          },
          {
            "id": 700140,
            "customer": "Amelia Davis",
            "accountNumber": "CHK-041680",
            "accountType": "Checking",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Amsterdam",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 37,
            "postedAt": "2026-05-13"
          },
          {
            "id": 700148,
            "customer": "Abigail Torres",
            "accountNumber": "CHK-041816",
            "accountType": "Checking",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Toronto",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 561,
            "postedAt": "2026-01-10"
          },
          {
            "id": 700152,
            "customer": "Scarlett Campbell",
            "accountNumber": "CHK-041884",
            "accountType": "Checking",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Seoul",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 2659,
            "postedAt": "2026-05-22"
          },
          {
            "id": 700156,
            "customer": "Chloe Carter",
            "accountNumber": "CHK-041952",
            "accountType": "Checking",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Amsterdam",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 1657,
            "postedAt": "2026-03-07"
          },
          {
            "id": 700164,
            "customer": "Ava Thompson",
            "accountNumber": "CHK-042088",
            "accountType": "Checking",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Toronto",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 1068,
            "postedAt": "2026-05-04"
          },
          {
            "id": 700172,
            "customer": "Amelia Davis",
            "accountNumber": "CHK-042224",
            "accountType": "Checking",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Amsterdam",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 864,
            "postedAt": "2026-01-01"
          },
          {
            "id": 700180,
            "customer": "Abigail Torres",
            "accountNumber": "CHK-042360",
            "accountType": "Checking",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Toronto",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 1960,
            "postedAt": "2026-03-25"
          },
          {
            "id": 700184,
            "customer": "Scarlett Campbell",
            "accountNumber": "CHK-042428",
            "accountType": "Checking",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Seoul",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 25,
            "postedAt": "2026-01-10"
          },
          {
            "id": 700188,
            "customer": "Chloe Carter",
            "accountNumber": "CHK-042496",
            "accountType": "Checking",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Amsterdam",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 231,
            "postedAt": "2026-05-22"
          },
          {
            "id": 700196,
            "customer": "Ava Thompson",
            "accountNumber": "CHK-042632",
            "accountType": "Checking",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Toronto",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 1327,
            "postedAt": "2026-01-19"
          },
          {
            "id": 700204,
            "customer": "Amelia Davis",
            "accountNumber": "CHK-042768",
            "accountType": "Checking",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Amsterdam",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 683,
            "postedAt": "2026-03-16"
          },
          {
            "id": 700212,
            "customer": "Abigail Torres",
            "accountNumber": "CHK-042904",
            "accountType": "Checking",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Toronto",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 1779,
            "postedAt": "2026-05-13"
          },
          {
            "id": 700216,
            "customer": "Scarlett Campbell",
            "accountNumber": "CHK-042972",
            "accountType": "Checking",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Seoul",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 777,
            "postedAt": "2026-03-25"
          }
        ]
      },
      {
        "field": "status",
        "value": "Failed",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700104,
            "customer": "Sophia Kim",
            "accountNumber": "CHK-041068",
            "accountType": "Checking",
            "transactionType": "Payment",
            "status": "Failed",
            "city": "Seoul",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 648,
            "postedAt": "2026-05-13"
          },
          {
            "id": 700136,
            "customer": "Sophia Kim",
            "accountNumber": "CHK-041612",
            "accountType": "Checking",
            "transactionType": "Withdrawal",
            "status": "Failed",
            "city": "Seoul",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 807,
            "postedAt": "2026-01-01"
          },
          {
            "id": 700168,
            "customer": "Sophia Kim",
            "accountNumber": "CHK-042156",
            "accountType": "Checking",
            "transactionType": "Interest",
            "status": "Failed",
            "city": "Seoul",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 269,
            "postedAt": "2026-03-16"
          },
          {
            "id": 700200,
            "customer": "Sophia Kim",
            "accountNumber": "CHK-042700",
            "accountType": "Checking",
            "transactionType": "Fee",
            "status": "Failed",
            "city": "Seoul",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 12,
            "postedAt": "2026-05-04"
          }
        ]
      },
      {
        "field": "status",
        "value": "Pending",
        "dir": "asc",
        "level": 1,
        "count": 3,
        "items": [
          {
            "id": 700128,
            "customer": "Lily Parker",
            "accountNumber": "CHK-041476",
            "accountType": "Checking",
            "transactionType": "Withdrawal",
            "status": "Pending",
            "city": "Berlin",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 1111,
            "postedAt": "2026-05-04"
          },
          {
            "id": 700160,
            "customer": "Lily Parker",
            "accountNumber": "CHK-042020",
            "accountType": "Checking",
            "transactionType": "Deposit",
            "status": "Pending",
            "city": "Berlin",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 3755,
            "postedAt": "2026-01-19"
          },
          {
            "id": 700192,
            "customer": "Lily Parker",
            "accountNumber": "CHK-042564",
            "accountType": "Checking",
            "transactionType": "Fee",
            "status": "Pending",
            "city": "Berlin",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 41,
            "postedAt": "2026-03-07"
          }
        ]
      }
    ]
  },
  {
    "field": "accountType",
    "value": "Credit Card",
    "dir": "asc",
    "level": 0,
    "count": 30,
    "items": [
      {
        "field": "status",
        "value": "Cancelled",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700106,
            "customer": "Isabella Nguyen",
            "accountNumber": "CRD-041102",
            "accountType": "Credit Card",
            "transactionType": "Withdrawal",
            "status": "Cancelled",
            "city": "Tokyo",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 897,
            "postedAt": "2026-01-19"
          },
          {
            "id": 700138,
            "customer": "Isabella Nguyen",
            "accountNumber": "CRD-041646",
            "accountType": "Credit Card",
            "transactionType": "Interest",
            "status": "Cancelled",
            "city": "Tokyo",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 303,
            "postedAt": "2026-03-07"
          },
          {
            "id": 700170,
            "customer": "Isabella Nguyen",
            "accountNumber": "CRD-042190",
            "accountType": "Credit Card",
            "transactionType": "Fee",
            "status": "Cancelled",
            "city": "Tokyo",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 42,
            "postedAt": "2026-05-22"
          },
          {
            "id": 700202,
            "customer": "Isabella Nguyen",
            "accountNumber": "CRD-042734",
            "accountType": "Credit Card",
            "transactionType": "Payment",
            "status": "Cancelled",
            "city": "Tokyo",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 2514,
            "postedAt": "2026-01-10"
          }
        ]
      },
      {
        "field": "status",
        "value": "Completed",
        "dir": "asc",
        "level": 1,
        "count": 19,
        "items": [
          {
            "id": 700102,
            "customer": "Mia Johnson",
            "accountNumber": "CRD-041034",
            "accountType": "Credit Card",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Chicago",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 51,
            "postedAt": "2026-03-07"
          },
          {
            "id": 700110,
            "customer": "Charlotte Lewis",
            "accountNumber": "CRD-041170",
            "accountType": "Credit Card",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "New York",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 22,
            "postedAt": "2026-05-04"
          },
          {
            "id": 700114,
            "customer": "Evelyn Young",
            "accountNumber": "CRD-041238",
            "accountType": "Credit Card",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Mumbai",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 2673,
            "postedAt": "2026-03-16"
          },
          {
            "id": 700118,
            "customer": "Ella Baker",
            "accountNumber": "CRD-041306",
            "accountType": "Credit Card",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Chicago",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 3071,
            "postedAt": "2026-01-01"
          },
          {
            "id": 700126,
            "customer": "Zoey Evans",
            "accountNumber": "CRD-041442",
            "accountType": "Credit Card",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "New York",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 4167,
            "postedAt": "2026-03-25"
          },
          {
            "id": 700134,
            "customer": "Mia Johnson",
            "accountNumber": "CRD-041578",
            "accountType": "Credit Card",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Chicago",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 2298,
            "postedAt": "2026-05-22"
          },
          {
            "id": 700142,
            "customer": "Charlotte Lewis",
            "accountNumber": "CRD-041714",
            "accountType": "Credit Card",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "New York",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 794,
            "postedAt": "2026-01-19"
          },
          {
            "id": 700146,
            "customer": "Evelyn Young",
            "accountNumber": "CRD-041782",
            "accountType": "Credit Card",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Mumbai",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 139,
            "postedAt": "2026-05-04"
          },
          {
            "id": 700150,
            "customer": "Ella Baker",
            "accountNumber": "CRD-041850",
            "accountType": "Credit Card",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Chicago",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 1890,
            "postedAt": "2026-03-16"
          },
          {
            "id": 700158,
            "customer": "Zoey Evans",
            "accountNumber": "CRD-041986",
            "accountType": "Credit Card",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "New York",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 1021,
            "postedAt": "2026-05-13"
          },
          {
            "id": 700166,
            "customer": "Mia Johnson",
            "accountNumber": "CRD-042122",
            "accountType": "Credit Card",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Chicago",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 717,
            "postedAt": "2026-01-10"
          },
          {
            "id": 700174,
            "customer": "Charlotte Lewis",
            "accountNumber": "CRD-042258",
            "accountType": "Credit Card",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "New York",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 1793,
            "postedAt": "2026-03-07"
          },
          {
            "id": 700178,
            "customer": "Evelyn Young",
            "accountNumber": "CRD-042326",
            "accountType": "Credit Card",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Mumbai",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 2191,
            "postedAt": "2026-01-19"
          },
          {
            "id": 700182,
            "customer": "Ella Baker",
            "accountNumber": "CRD-042394",
            "accountType": "Credit Card",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Chicago",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 2889,
            "postedAt": "2026-05-04"
          },
          {
            "id": 700190,
            "customer": "Zoey Evans",
            "accountNumber": "CRD-042530",
            "accountType": "Credit Card",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "New York",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 3985,
            "postedAt": "2026-01-01"
          },
          {
            "id": 700198,
            "customer": "Mia Johnson",
            "accountNumber": "CRD-042666",
            "accountType": "Credit Card",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Chicago",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 263,
            "postedAt": "2026-03-25"
          },
          {
            "id": 700206,
            "customer": "Charlotte Lewis",
            "accountNumber": "CRD-042802",
            "accountType": "Credit Card",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "New York",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 519,
            "postedAt": "2026-05-22"
          },
          {
            "id": 700210,
            "customer": "Evelyn Young",
            "accountNumber": "CRD-042870",
            "accountType": "Credit Card",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Mumbai",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 1010,
            "postedAt": "2026-03-07"
          },
          {
            "id": 700214,
            "customer": "Ella Baker",
            "accountNumber": "CRD-042938",
            "accountType": "Credit Card",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Chicago",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 40,
            "postedAt": "2026-01-19"
          }
        ]
      },
      {
        "field": "status",
        "value": "Failed",
        "dir": "asc",
        "level": 1,
        "count": 3,
        "items": [
          {
            "id": 700130,
            "customer": "Hannah Edwards",
            "accountNumber": "CRD-041510",
            "accountType": "Credit Card",
            "transactionType": "Deposit",
            "status": "Failed",
            "city": "Mumbai",
            "category": "Shopping",
            "relationshipManager": "Jon Vega",
            "amount": 4865,
            "postedAt": "2026-01-10"
          },
          {
            "id": 700162,
            "customer": "Hannah Edwards",
            "accountNumber": "CRD-042054",
            "accountType": "Credit Card",
            "transactionType": "Fee",
            "status": "Failed",
            "city": "Mumbai",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 36,
            "postedAt": "2026-03-25"
          },
          {
            "id": 700194,
            "customer": "Hannah Edwards",
            "accountNumber": "CRD-042598",
            "accountType": "Credit Card",
            "transactionType": "Payment",
            "status": "Failed",
            "city": "Mumbai",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 1418,
            "postedAt": "2026-05-13"
          }
        ]
      },
      {
        "field": "status",
        "value": "Pending",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700122,
            "customer": "Grace Perez",
            "accountNumber": "CRD-041374",
            "accountType": "Credit Card",
            "transactionType": "Deposit",
            "status": "Pending",
            "city": "Tokyo",
            "category": "Dining",
            "relationshipManager": "Maya Chen",
            "amount": 3769,
            "postedAt": "2026-05-13"
          },
          {
            "id": 700154,
            "customer": "Grace Perez",
            "accountNumber": "CRD-041918",
            "accountType": "Credit Card",
            "transactionType": "Fee",
            "status": "Pending",
            "city": "Tokyo",
            "category": "Investment",
            "relationshipManager": "Omar Hassan",
            "amount": 20,
            "postedAt": "2026-01-01"
          },
          {
            "id": 700186,
            "customer": "Grace Perez",
            "accountNumber": "CRD-042462",
            "accountType": "Credit Card",
            "transactionType": "Transfer",
            "status": "Pending",
            "city": "Tokyo",
            "category": "Travel",
            "relationshipManager": "Nina Brooks",
            "amount": 3287,
            "postedAt": "2026-03-16"
          },
          {
            "id": 700218,
            "customer": "Grace Perez",
            "accountNumber": "CRD-043006",
            "accountType": "Credit Card",
            "transactionType": "Withdrawal",
            "status": "Pending",
            "city": "Tokyo",
            "category": "Insurance",
            "relationshipManager": "Ari Patel",
            "amount": 141,
            "postedAt": "2026-05-04"
          }
        ]
      }
    ]
  },
  {
    "field": "accountType",
    "value": "Investment",
    "dir": "asc",
    "level": 0,
    "count": 30,
    "items": [
      {
        "field": "status",
        "value": "Cancelled",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700103,
            "customer": "Liam Patel",
            "accountNumber": "INV-041051",
            "accountType": "Investment",
            "transactionType": "Deposit",
            "status": "Cancelled",
            "city": "Madrid",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 2946,
            "postedAt": "2026-04-10"
          },
          {
            "id": 700135,
            "customer": "Liam Patel",
            "accountNumber": "INV-041595",
            "accountType": "Investment",
            "transactionType": "Interest",
            "status": "Cancelled",
            "city": "Madrid",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 668,
            "postedAt": "2026-06-25"
          },
          {
            "id": 700167,
            "customer": "Liam Patel",
            "accountNumber": "INV-042139",
            "accountType": "Investment",
            "transactionType": "Transfer",
            "status": "Cancelled",
            "city": "Madrid",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 2464,
            "postedAt": "2026-02-13"
          },
          {
            "id": 700199,
            "customer": "Liam Patel",
            "accountNumber": "INV-042683",
            "accountType": "Investment",
            "transactionType": "Withdrawal",
            "status": "Cancelled",
            "city": "Madrid",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 338,
            "postedAt": "2026-04-01"
          }
        ]
      },
      {
        "field": "status",
        "value": "Completed",
        "dir": "asc",
        "level": 1,
        "count": 19,
        "items": [
          {
            "id": 700107,
            "customer": "Lucas Brown",
            "accountNumber": "INV-041119",
            "accountType": "Investment",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Sydney",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 3344,
            "postedAt": "2026-02-22"
          },
          {
            "id": 700111,
            "customer": "Elijah Walker",
            "accountNumber": "INV-041187",
            "accountType": "Investment",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Paris",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 4042,
            "postedAt": "2026-06-07"
          },
          {
            "id": 700115,
            "customer": "Benjamin Scott",
            "accountNumber": "INV-041255",
            "accountType": "Investment",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Johannesburg",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 4440,
            "postedAt": "2026-04-19"
          },
          {
            "id": 700123,
            "customer": "Michael Roberts",
            "accountNumber": "INV-041391",
            "accountType": "Investment",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Sydney",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 1384,
            "postedAt": "2026-06-16"
          },
          {
            "id": 700131,
            "customer": "Levi Stewart",
            "accountNumber": "INV-041527",
            "accountType": "Investment",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Johannesburg",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 2480,
            "postedAt": "2026-02-13"
          },
          {
            "id": 700139,
            "customer": "Lucas Brown",
            "accountNumber": "INV-041663",
            "accountType": "Investment",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Sydney",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 1218,
            "postedAt": "2026-04-10"
          },
          {
            "id": 700143,
            "customer": "Elijah Walker",
            "accountNumber": "INV-041731",
            "accountType": "Investment",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Paris",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 43,
            "postedAt": "2026-02-22"
          },
          {
            "id": 700147,
            "customer": "Benjamin Scott",
            "accountNumber": "INV-041799",
            "accountType": "Investment",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Johannesburg",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 914,
            "postedAt": "2026-06-07"
          },
          {
            "id": 700155,
            "customer": "Michael Roberts",
            "accountNumber": "INV-041935",
            "accountType": "Investment",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Sydney",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 610,
            "postedAt": "2026-02-04"
          },
          {
            "id": 700163,
            "customer": "Levi Stewart",
            "accountNumber": "INV-042071",
            "accountType": "Investment",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Johannesburg",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 6366,
            "postedAt": "2026-04-01"
          },
          {
            "id": 700171,
            "customer": "Lucas Brown",
            "accountNumber": "INV-042207",
            "accountType": "Investment",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Sydney",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 3162,
            "postedAt": "2026-06-25"
          },
          {
            "id": 700175,
            "customer": "Elijah Walker",
            "accountNumber": "INV-042275",
            "accountType": "Investment",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Paris",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 3560,
            "postedAt": "2026-04-10"
          },
          {
            "id": 700179,
            "customer": "Benjamin Scott",
            "accountNumber": "INV-042343",
            "accountType": "Investment",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Johannesburg",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 536,
            "postedAt": "2026-02-22"
          },
          {
            "id": 700187,
            "customer": "Michael Roberts",
            "accountNumber": "INV-042479",
            "accountType": "Investment",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Sydney",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 792,
            "postedAt": "2026-04-19"
          },
          {
            "id": 700195,
            "customer": "Levi Stewart",
            "accountNumber": "INV-042615",
            "accountType": "Investment",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Johannesburg",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 628,
            "postedAt": "2026-06-16"
          },
          {
            "id": 700203,
            "customer": "Lucas Brown",
            "accountNumber": "INV-042751",
            "accountType": "Investment",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Sydney",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 18,
            "postedAt": "2026-02-13"
          },
          {
            "id": 700207,
            "customer": "Elijah Walker",
            "accountNumber": "INV-042819",
            "accountType": "Investment",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Paris",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 1434,
            "postedAt": "2026-06-25"
          },
          {
            "id": 700211,
            "customer": "Benjamin Scott",
            "accountNumber": "INV-042887",
            "accountType": "Investment",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Johannesburg",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 34,
            "postedAt": "2026-04-10"
          },
          {
            "id": 700219,
            "customer": "Michael Roberts",
            "accountNumber": "INV-043023",
            "accountType": "Investment",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Sydney",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 3388,
            "postedAt": "2026-06-07"
          }
        ]
      },
      {
        "field": "status",
        "value": "Failed",
        "dir": "asc",
        "level": 1,
        "count": 3,
        "items": [
          {
            "id": 700127,
            "customer": "Jack Turner",
            "accountNumber": "INV-041459",
            "accountType": "Investment",
            "transactionType": "Interest",
            "status": "Failed",
            "city": "Paris",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 832,
            "postedAt": "2026-04-01"
          },
          {
            "id": 700159,
            "customer": "Jack Turner",
            "accountNumber": "INV-042003",
            "accountType": "Investment",
            "transactionType": "Transfer",
            "status": "Failed",
            "city": "Paris",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 4268,
            "postedAt": "2026-06-16"
          },
          {
            "id": 700191,
            "customer": "Jack Turner",
            "accountNumber": "INV-042547",
            "accountType": "Investment",
            "transactionType": "Payment",
            "status": "Failed",
            "city": "Paris",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 1600,
            "postedAt": "2026-02-04"
          }
        ]
      },
      {
        "field": "status",
        "value": "Pending",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700119,
            "customer": "Alexander Green",
            "accountNumber": "INV-041323",
            "accountType": "Investment",
            "transactionType": "Interest",
            "status": "Pending",
            "city": "Madrid",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 576,
            "postedAt": "2026-02-04"
          },
          {
            "id": 700151,
            "customer": "Alexander Green",
            "accountNumber": "INV-041867",
            "accountType": "Investment",
            "transactionType": "Fee",
            "status": "Pending",
            "city": "Madrid",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 14,
            "postedAt": "2026-04-19"
          },
          {
            "id": 700183,
            "customer": "Alexander Green",
            "accountNumber": "INV-042411",
            "accountType": "Investment",
            "transactionType": "Payment",
            "status": "Pending",
            "city": "Madrid",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 3104,
            "postedAt": "2026-06-07"
          },
          {
            "id": 700215,
            "customer": "Alexander Green",
            "accountNumber": "INV-042955",
            "accountType": "Investment",
            "transactionType": "Withdrawal",
            "status": "Pending",
            "city": "Madrid",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 1130,
            "postedAt": "2026-02-22"
          }
        ]
      }
    ]
  },
  {
    "field": "accountType",
    "value": "Savings",
    "dir": "asc",
    "level": 0,
    "count": 30,
    "items": [
      {
        "field": "status",
        "value": "Cancelled",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700109,
            "customer": "Mason Clark",
            "accountNumber": "SVG-041153",
            "accountType": "Savings",
            "transactionType": "Withdrawal",
            "status": "Cancelled",
            "city": "Sao Paulo",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 1308,
            "postedAt": "2026-04-01"
          },
          {
            "id": 700141,
            "customer": "Mason Clark",
            "accountNumber": "SVG-041697",
            "accountType": "Savings",
            "transactionType": "Deposit",
            "status": "Cancelled",
            "city": "Sao Paulo",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 1332,
            "postedAt": "2026-06-16"
          },
          {
            "id": 700173,
            "customer": "Mason Clark",
            "accountNumber": "SVG-042241",
            "accountType": "Savings",
            "transactionType": "Fee",
            "status": "Cancelled",
            "city": "Sao Paulo",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 48,
            "postedAt": "2026-02-04"
          },
          {
            "id": 700205,
            "customer": "Mason Clark",
            "accountNumber": "SVG-042785",
            "accountType": "Savings",
            "transactionType": "Transfer",
            "status": "Cancelled",
            "city": "Sao Paulo",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 5650,
            "postedAt": "2026-04-19"
          }
        ]
      },
      {
        "field": "status",
        "value": "Completed",
        "dir": "asc",
        "level": 1,
        "count": 19,
        "items": [
          {
            "id": 700105,
            "customer": "Ethan Rivera",
            "accountNumber": "SVG-041085",
            "accountType": "Savings",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "London",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 354,
            "postedAt": "2026-06-16"
          },
          {
            "id": 700113,
            "customer": "James Allen",
            "accountNumber": "SVG-041221",
            "accountType": "Savings",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Dubai",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 28,
            "postedAt": "2026-02-13"
          },
          {
            "id": 700117,
            "customer": "Henry Adams",
            "accountNumber": "SVG-041289",
            "accountType": "Savings",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Singapore",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 1004,
            "postedAt": "2026-06-25"
          },
          {
            "id": 700121,
            "customer": "Daniel Mitchell",
            "accountNumber": "SVG-041357",
            "accountType": "Savings",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "London",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 44,
            "postedAt": "2026-04-10"
          },
          {
            "id": 700129,
            "customer": "Owen Collins",
            "accountNumber": "SVG-041493",
            "accountType": "Savings",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Dubai",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 4338,
            "postedAt": "2026-06-07"
          },
          {
            "id": 700137,
            "customer": "Ethan Rivera",
            "accountNumber": "SVG-041629",
            "accountType": "Savings",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "London",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 5434,
            "postedAt": "2026-02-04"
          },
          {
            "id": 700145,
            "customer": "James Allen",
            "accountNumber": "SVG-041765",
            "accountType": "Savings",
            "transactionType": "Transfer",
            "status": "Completed",
            "city": "Dubai",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 330,
            "postedAt": "2026-04-01"
          },
          {
            "id": 700149,
            "customer": "Henry Adams",
            "accountNumber": "SVG-041833",
            "accountType": "Savings",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Singapore",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 82,
            "postedAt": "2026-02-13"
          },
          {
            "id": 700153,
            "customer": "Daniel Mitchell",
            "accountNumber": "SVG-041901",
            "accountType": "Savings",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "London",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 2221,
            "postedAt": "2026-06-25"
          },
          {
            "id": 700161,
            "customer": "Owen Collins",
            "accountNumber": "SVG-042037",
            "accountType": "Savings",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Dubai",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 717,
            "postedAt": "2026-02-22"
          },
          {
            "id": 700169,
            "customer": "Ethan Rivera",
            "accountNumber": "SVG-042173",
            "accountType": "Savings",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "London",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 428,
            "postedAt": "2026-04-19"
          },
          {
            "id": 700177,
            "customer": "James Allen",
            "accountNumber": "SVG-042309",
            "accountType": "Savings",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "Dubai",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 124,
            "postedAt": "2026-06-16"
          },
          {
            "id": 700181,
            "customer": "Henry Adams",
            "accountNumber": "SVG-042377",
            "accountType": "Savings",
            "transactionType": "Fee",
            "status": "Completed",
            "city": "Singapore",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 19,
            "postedAt": "2026-04-01"
          },
          {
            "id": 700185,
            "customer": "Daniel Mitchell",
            "accountNumber": "SVG-042445",
            "accountType": "Savings",
            "transactionType": "Withdrawal",
            "status": "Completed",
            "city": "London",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 1220,
            "postedAt": "2026-02-13"
          },
          {
            "id": 700193,
            "customer": "Owen Collins",
            "accountNumber": "SVG-042581",
            "accountType": "Savings",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "Dubai",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 4156,
            "postedAt": "2026-04-10"
          },
          {
            "id": 700201,
            "customer": "Ethan Rivera",
            "accountNumber": "SVG-042717",
            "accountType": "Savings",
            "transactionType": "Deposit",
            "status": "Completed",
            "city": "London",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 5252,
            "postedAt": "2026-06-07"
          },
          {
            "id": 700209,
            "customer": "James Allen",
            "accountNumber": "SVG-042853",
            "accountType": "Savings",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "Dubai",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 462,
            "postedAt": "2026-02-04"
          },
          {
            "id": 700213,
            "customer": "Henry Adams",
            "accountNumber": "SVG-042921",
            "accountType": "Savings",
            "transactionType": "Payment",
            "status": "Completed",
            "city": "Singapore",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 1341,
            "postedAt": "2026-06-16"
          },
          {
            "id": 700217,
            "customer": "Daniel Mitchell",
            "accountNumber": "SVG-042989",
            "accountType": "Savings",
            "transactionType": "Interest",
            "status": "Completed",
            "city": "London",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 298,
            "postedAt": "2026-04-01"
          }
        ]
      },
      {
        "field": "status",
        "value": "Failed",
        "dir": "asc",
        "level": 1,
        "count": 4,
        "items": [
          {
            "id": 700101,
            "customer": "Noah Martinez",
            "accountNumber": "SVG-041017",
            "accountType": "Savings",
            "transactionType": "Payment",
            "status": "Failed",
            "city": "Singapore",
            "category": "Mortgage",
            "relationshipManager": "Nina Brooks",
            "amount": 297,
            "postedAt": "2026-02-04"
          },
          {
            "id": 700133,
            "customer": "Noah Martinez",
            "accountNumber": "SVG-041561",
            "accountType": "Savings",
            "transactionType": "Deposit",
            "status": "Failed",
            "city": "Singapore",
            "category": "Utilities",
            "relationshipManager": "Ari Patel",
            "amount": 5036,
            "postedAt": "2026-04-19"
          },
          {
            "id": 700165,
            "customer": "Noah Martinez",
            "accountNumber": "SVG-042105",
            "accountType": "Savings",
            "transactionType": "Interest",
            "status": "Failed",
            "city": "Singapore",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 174,
            "postedAt": "2026-06-07"
          },
          {
            "id": 700197,
            "customer": "Noah Martinez",
            "accountNumber": "SVG-042649",
            "accountType": "Savings",
            "transactionType": "Transfer",
            "status": "Failed",
            "city": "Singapore",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 4554,
            "postedAt": "2026-02-22"
          }
        ]
      },
      {
        "field": "status",
        "value": "Pending",
        "dir": "asc",
        "level": 1,
        "count": 3,
        "items": [
          {
            "id": 700125,
            "customer": "Sebastian Phillips",
            "accountNumber": "SVG-041425",
            "accountType": "Savings",
            "transactionType": "Withdrawal",
            "status": "Pending",
            "city": "Sao Paulo",
            "category": "Tuition",
            "relationshipManager": "Jon Vega",
            "amount": 700,
            "postedAt": "2026-02-22"
          },
          {
            "id": 700157,
            "customer": "Sebastian Phillips",
            "accountNumber": "SVG-041969",
            "accountType": "Savings",
            "transactionType": "Interest",
            "status": "Pending",
            "city": "Sao Paulo",
            "category": "Salary",
            "relationshipManager": "Maya Chen",
            "amount": 338,
            "postedAt": "2026-04-10"
          },
          {
            "id": 700189,
            "customer": "Sebastian Phillips",
            "accountNumber": "SVG-042513",
            "accountType": "Savings",
            "transactionType": "Transfer",
            "status": "Pending",
            "city": "Sao Paulo",
            "category": "Healthcare",
            "relationshipManager": "Omar Hassan",
            "amount": 3458,
            "postedAt": "2026-06-25"
          }
        ]
      }
    ]
  }
]

Automatic code snippet

      group: NgbDataGridGroupDescriptor[] = [
  { field: 'accountType', dir: 'asc' },
  { field: 'status', dir: 'asc' },
];

<ngb-datagrid
  [columns]="columns"
  [data]="transactions"
  [groupable]="true"
  [group]="group"
  [enableSorting]="true"
  [filterable]="'row'"
  [dataOperations]="true"
  [pageable]="{ pageSizes: [8, 16], info: true }"
  [pageSize]="8"
  (groupChange)="group = $event.group"
  (dataStateChange)="state = $event"
></ngb-datagrid>

Manual grouping

The same banking dataset also works in app-owned or server-owned flows. Here the page keeps the current request in component state, sends it through the local helper, and returns only the current leaf rows plus the full total count.

Server-side grouping

In this mock API flow, the request groups transactions by city first. The outgoing NgbDataGridState already includes the current group descriptors, so a real backend could shape the grouped result before returning the next page.

If the backend also returns grouped metadata, bind it through [groupedData]. The grid can render server-owned grouped rows without inventing extra docs-only logic.
Manual modeShowing 6 of 120 transactions

Loading interactive DataGrid example…

Current manual state

{
  "page": 1,
  "pageIndex": 0,
  "skip": 0,
  "pageSize": 6,
  "sort": [],
  "group": [
    {
      "field": "city",
      "dir": "asc"
    }
  ],
  "filter": {
    "logic": "and",
    "filters": []
  },
  "globalFilter": ""
}

Returned page

[
  {
    "id": 700100,
    "customer": "Ava Thompson",
    "accountNumber": "CHK-041000",
    "accountType": "Checking",
    "transactionType": "Deposit",
    "status": "Completed",
    "city": "Toronto",
    "category": "Shopping",
    "relationshipManager": "Jon Vega",
    "amount": 335,
    "postedAt": "2026-01-01"
  },
  {
    "id": 700101,
    "customer": "Noah Martinez",
    "accountNumber": "SVG-041017",
    "accountType": "Savings",
    "transactionType": "Payment",
    "status": "Failed",
    "city": "Singapore",
    "category": "Mortgage",
    "relationshipManager": "Nina Brooks",
    "amount": 297,
    "postedAt": "2026-02-04"
  },
  {
    "id": 700102,
    "customer": "Mia Johnson",
    "accountNumber": "CRD-041034",
    "accountType": "Credit Card",
    "transactionType": "Fee",
    "status": "Completed",
    "city": "Chicago",
    "category": "Dining",
    "relationshipManager": "Maya Chen",
    "amount": 51,
    "postedAt": "2026-03-07"
  },
  {
    "id": 700103,
    "customer": "Liam Patel",
    "accountNumber": "INV-041051",
    "accountType": "Investment",
    "transactionType": "Deposit",
    "status": "Cancelled",
    "city": "Madrid",
    "category": "Utilities",
    "relationshipManager": "Ari Patel",
    "amount": 2946,
    "postedAt": "2026-04-10"
  },
  {
    "id": 700104,
    "customer": "Sophia Kim",
    "accountNumber": "CHK-041068",
    "accountType": "Checking",
    "transactionType": "Payment",
    "status": "Failed",
    "city": "Seoul",
    "category": "Investment",
    "relationshipManager": "Omar Hassan",
    "amount": 648,
    "postedAt": "2026-05-13"
  },
  {
    "id": 700105,
    "customer": "Ethan Rivera",
    "accountNumber": "SVG-041085",
    "accountType": "Savings",
    "transactionType": "Interest",
    "status": "Completed",
    "city": "London",
    "category": "Tuition",
    "relationshipManager": "Jon Vega",
    "amount": 354,
    "postedAt": "2026-06-16"
  }
]

Manual code snippet

      state: NgbDataGridState = {
  page: 1,
  pageSize: 6,
  sort: [],
  group: [{ field: 'city', dir: 'asc' }],
  filter: { logic: 'and', filters: [] },
  globalFilter: '',
};

onServerStateChange(state: NgbDataGridState): void {
  this.state = { ...state, group: state.group ?? this.state.group ?? [] };
  const result = ngbApplyDataGridOperations(this.transactions, {
    columns: this.columns,
    state: this.state,
  });
  this.rows = result.data;
  this.total = result.total;
}

API information

APITypeUsage
[groupable]boolean | NgbDataGridGroupingSettingsEnables the group panel and grouped row rendering. Use `showFooter` for grouped footer rows.
[group]NgbDataGridGroupDescriptor[]Sets the active ordered group descriptors.
[groupedData]NgbDataGridGroupResult<T>[] | nullOptional processed grouped result input for manual or server-owned grouping flows.
(groupChange)NgbDataGridGroupChangeEmits after panel drag, chip removal, or direction changes.
(dataStateChange)EventEmitter<NgbDataGridState>Carries the combined page, sort, filter, search, and group state.
NgbDataGridGroupDescriptorinterfacePublic grouping descriptor with `field`, optional `dir`, and optional per-group `aggregates`.
NgbDataGridGroupResult<T>interfaceNested grouping metadata returned by the local helper, including optional per-group aggregate results.
ngbGroupData(data, descriptors) => NgbDataGridGroupResult[]Reusable local grouping helper for one or more fields.
ngbApplyDataGridOperations(data, options) => NgbDataGridDataResultReusable helper that keeps grouping aligned with the rest of the local operation pipeline.

Usage notes and limitations

  • Use [group] for the initial grouping state and (groupChange) when the host app owns that state.
  • (dataStateChange) includes group so sorting, filtering, paging, and grouping stay in one request payload.
  • ngbGroupData is useful when the app needs a grouped preview or local analysis outside the rendered grid.
  • Grouped rendering works with local data automatically. In manual flows, return the current leaf rows and total count for the active request.
  • Row reordering is intentionally disabled while grouping is active.
  • Counts shown in grouped headers reflect the current processed result set, not a separate aggregate endpoint.

Continue through grouping

Move between the overview, templates, aggregates, and sticky grouped row guides without losing context.

Current page

Grouping OverviewOpen

Start with local and manual grouping, shared state, and the base grouped grid flow.

Next guide

Custom Templates

Customize grouped headers, grouped cells, and grouped footer rows with public directives.

Next guide

Aggregates

Add grouped totals, counts, averages, and min or max values to real grouped rows.

Next guide

Sticky Headers and Footers

Keep grouped context pinned while scrolling through large grouped result sets.

© 2026 ngbootstrap

This project is not affiliated with ng-bootstrap or ngx-bootstrap. Those projects focus mainly on Bootstrap components for Angular. ngbootstrap focuses on Angular UI for data-heavy apps, especially Data Grid, Angular-native Form Builder, drag and drop workflows, documentation examples, and performance-focused Angular patterns.