All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Data Query Overview

The Data Query is a package for applying the sorting, filtering, grouping, and aggregate data operations.

The package exports functions which help you perform in-memory data operations. It also serializes the data descriptors according to the OData v4 URI specification.

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-data-query
  2. Once installed, you can import individual functions and then use the Data Query package.

    import { process, orderBy, filterBy, /* etc...*/ } from '@progress/kendo-data-query';

Process Helpers for Bulk Operations

The Data Query provides functions that help you handle the following bulk data operations:

The following example demonstrates how to group, sort, and filter data by using a single helper function.

import { process } from '@progress/kendo-data-query';

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Cajun Seasoning", "unitPrice": 22, "unitsInStock": 53, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
      "category": { "categoryName": "Condiments" }
    }
];

const result = process(data, {
    group: [{
        field: 'category.categoryName',
        aggregates: [
            { aggregate: "sum", field: "unitPrice" },
            { aggregate: "sum", field: "unitsInStock" }
        ]
    }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
            { field: "discontinued", operator: "eq", value: true },
            { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

console.log(JSON.stringify(result, null, 2));
/* output
{
  "data": [
    { "aggregates": {
        "unitPrice": { "sum": 53.35 },
        "unitsInStock": { "sum": 66 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
          "category": { "categoryName": "Condiments" }
        },
        { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
          "category": { "categoryName": "Condiments" }
        }
      ],
      "value": "Condiments"
    },
    {
      "aggregates": {
        "unitPrice": { "sum": 37 },
        "unitsInStock": { "sum": 56 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        },
        { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        }
      ],
      "value": "Beverages"
    }
  ],
  "total": 4
}
*/

Sorting

To sort an array of objects based on a field and direction, use the orderBy helper function. The method accepts a data array and one or more SortDescriptors.

import { orderBy } from '@progress/kendo-data-query';

const data = [
  { name: "Pork", category: "Food", subcategory: "Meat" },
  { name: "Pepper", category: "Food", subcategory: "Vegetables" },
  { name: "Beef", category: "Food", subcategory: "Meat" }
];

const result = orderBy(data, [{ field: "name", dir: "asc" }]);

console.log(result);

/* output
[
  { "name": "Beef", "category": "Food", "subcategory": "Meat" },
  { "name": "Pepper", "category": "Food", "subcategory": "Vegetables" },
  { "name": "Pork", "category": "Food", "subcategory": "Meat" }
]
*/

Filtering

To filter an array of objects, use the filterBy helper function. The method accepts a data array and one or more FilterDescriptors.

import { filterBy } from '@progress/kendo-data-query';

const data = [
    { name: "Pork", category: "Food", subcategory: "Meat" },
    { name: "Pepper", category: "Food", subcategory: "Vegetables" },
    { name: "Beef", category: "Food", subcategory: "Meat" }
];

const result = filterBy(data, {
    logic: 'and',
    filters: [
        { field: "name", operator: "startswith", value: "p", ignoreCase: true },
        { field: "subcategory", operator: "eq", value: "Meat" },
    ]
});

console.log(JSON.stringify(result, null, 2));
/* output
[
    { "name": "Pork", "category": "Food", "subcategory": "Meat" }
]
*/

Grouping

To split the data array into sets, use the groupBy helper function. The method accepts a data array and one or more GroupDescriptors.

import { groupBy } from '@progress/kendo-data-query';

const data = [
    { name: "Pork", category: "Food", subcategory: "Meat" },
    { name: "Pepper", category: "Food", subcategory: "Vegetables" },
    { name: "Beef", category: "Food", subcategory: "Meat" }
];

const result = groupBy(data, [{ field: "category" }, { field: "subcategory", dir: "desc" }]);

console.log(JSON.stringify(result, null, 2));
/* output
[
  { "aggregates": {},  "field": "category",
    "items": [
        {"aggregates": {}, "field": "subcategory",
        "items": [
            { "name": "Pork", "category": "Food", "subcategory": "Meat" },
            { "name": "Beef", "category": "Food", "subcategory": "Meat" }
        ],
        "value": "Meat"
      },
      { "aggregates": {}, "field": "subcategory",
        "items": [
            {"name": "Pepper", "category": "Food", "subcategory": "Vegetables"}
        ],
        "value": "Vegetables"
      }
    ],
    "value": "Food"
  }
]
*/

Aggregates

To aggregate data based on the AggregateDescriptor, use the aggregateBy helper function.

import { aggregateBy } from '@progress/kendo-data-query';

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39 },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17 },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13 }
];

const result = aggregateBy(data, [
      { field: 'productName', aggregate: 'count' },
      { field: 'unitPrice', aggregate: 'sum' },
      { field: 'unitPrice', aggregate: 'average' },
      { field: 'unitsInStock', aggregate: 'min' },
      { field: 'unitsInStock', aggregate: 'max' },
]);


console.log(JSON.stringify(result, null, 2));
/* output
{
    "productName": { "count": 3 },
    "unitPrice": { "sum": 47, "average": 15.666666666666666 },
    "unitsInStock": { "min": 13, "max": 39 }
}
*/
In this article