@c8y/apps/tutorial/grids/server-grid-example/server-grid-example.component.html

Cumulocity IoT applications

<c8y-title>Data grid examples</c8y-title>

<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Data grid with server-side filtering/sorting</h4>
  </div>
  <div class="card-block">
    <p>The following example features <code>DataGridComponent</code> and:</p>
    <ul>
      <li>setting custom titles and labels</li>
      <li>defining columns with inline objects</li>
      <li>defining a custom column with a class</li>
      <li>using custom components for header cell, data cell and filtering form</li>
      <li>building inventory query and loading data with <code>serverSideDataCallback</code></li>
      <li>event handlers for: items selection, individual actions, bulk actions, config changes</li>
      <li>setting up a view for empty list</li>
    </ul>

    <c8y-data-grid
      [title]="title"
      [loadMoreItemsLabel]="loadMoreItemsLabel"
      [loadingItemsLabel]="loadingItemsLabel"
      [displayOptions]="displayOptions"
      [columns]="columns"
      [pagination]="pagination"
      [infiniteScroll]="infiniteScroll"
      [serverSideDataCallback]="serverSideDataCallback"
      [refresh]="refresh"
      (rowClick)="onRowClick($event)"
      [actionControls]="actionControls"
      [selectable]="selectable"
      (itemsSelect)="onItemsSelect($event)"
      [bulkActionControls]="bulkActionControls"
      (onConfigChange)="onConfigChange($event)"
    >
      <c8y-ui-empty-state
        [icon]="'search'"
        [title]="'No results to display.' | translate"
        [subtitle]="'Refine your search terms or check your spelling.' | translate"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </c8y-data-grid>
  </div>
</div>