@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</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)"
    ></c8y-data-grid>
  </div>
</div>