dependencies dependencies cluster_DataGridModule cluster_DataGridModule_declarations cluster_DataGridModule_exports cluster_DataGridModule_imports CellRendererComponent CellRendererComponent DataGridModule DataGridModule CellRendererComponent->DataGridModule CellRendererDefDirective CellRendererDefDirective CellRendererDefDirective->DataGridModule ColumnDirective ColumnDirective ColumnDirective->DataGridModule ConfigureCustomColumnComponent ConfigureCustomColumnComponent ConfigureCustomColumnComponent->DataGridModule DataGridComponent DataGridComponent DataGridComponent->DataGridModule FilteringFormRendererComponent FilteringFormRendererComponent FilteringFormRendererComponent->DataGridModule FilteringFormRendererDefDirective FilteringFormRendererDefDirective FilteringFormRendererDefDirective->DataGridModule HeaderCellRendererDefDirective HeaderCellRendererDefDirective HeaderCellRendererDefDirective->DataGridModule IsControlVisiblePipe IsControlVisiblePipe IsControlVisiblePipe->DataGridModule CellRendererDefDirective CellRendererDefDirective DataGridModule->CellRendererDefDirective ColumnDirective ColumnDirective DataGridModule->ColumnDirective DataGridComponent DataGridComponent DataGridModule->DataGridComponent FilteringFormRendererDefDirective FilteringFormRendererDefDirective DataGridModule->FilteringFormRendererDefDirective HeaderCellRendererDefDirective HeaderCellRendererDefDirective DataGridModule->HeaderCellRendererDefDirective IsControlVisiblePipe IsControlVisiblePipe DataGridModule->IsControlVisiblePipe CommonModule CommonModule CommonModule->DataGridModule DynamicFormsModule DynamicFormsModule DynamicFormsModule->DataGridModule FormsModule FormsModule FormsModule->DataGridModule ModalModule ModalModule ModalModule->DataGridModule ProductExperienceModule ProductExperienceModule ProductExperienceModule->DataGridModule

Data grid module

This module provides components and classes for loading, displaying, filtering, and sorting data in a grid.

DataGridComponent

See the documentation of the main component DataGridComponent for further details.

Examples

You can find examples of data grid usage in our tutorial application. Create a new tutorial-based app and run it:

npx @c8y/cli new examples tutorial
cd examples
npm install
npm start -- -u https://your-cumulocity-tenant.cumulocity.com

Then go to "Data grid" in the left navigation menu.

Client-side data grid

This tab demonstrates how to:

  • define the list of columns to be displayed
  • pass static set of data
  • filter and sort data on client side
  • use event handlers for: items selection, individual actions, bulk actions, config changes
Client-side data grid example

Server-sdie data grid

This tab demonstrates how to:

  • set custom titles and labels
  • define columns with inline objects
  • define a custom column with a class
  • use custom components for header cell, data cell and filtering form
  • build inventory query and load data with serverSideDataCallback
  • set up event handlers for: items selection, individual actions, bulk actions, config changes
  • set up a view for empty list
Server-side data grid example

results matching ""

    No results matching ""