@c8y/apps/tutorial/grids/client-grid-example/client-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 client-side filtering/sorting</h4>
  </div>
  <div class="card-block">
    <p>
      The following example features
      <code>DataGridComponent</code>
      and:
    </p>
    <ul>
      <li>defining the list of columns to be displayed</li>
      <li>passing static set of data</li>
      <li>filtering and sorting data on client side</li>
      <li>
        event handlers for: items selection, individual actions, bulk actions, config changes,
        filtering, adding/removing custom columns
      </li>
    </ul>

    <c8y-data-grid
      [title]="title"
      [columns]="columns"
      [rows]="data"
      [pagination]="pagination"
      [selectable]="selectable"
      (itemsSelect)="onItemsSelect($event)"
      [actionControls]="actionControls"
      [bulkActionControls]="bulkActionControls"
      (onConfigChange)="onConfigChange($event)"
      (onFilter)="onFilter($event)"
      (onAddCustomColumn)="onAddCustomColumn($event)"
      (onRemoveCustomColumn)="onRemoveCustomColumn($event)"
    ></c8y-data-grid>
  </div>
</div>