<p-table #dtss [value]="customersSessionStorage" selectionMode="single" [(selection)]="selectedSessionStorage" dataKey="id" styleClass="p-datatable-customers" responsiveLayout="scroll" [rows]="10" [paginator]="true" stateStorage="session" stateKey="statedemo-session">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="name">Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th pSortableColumn="country.name">Country
        <p-sortIcon field="country.name"></p-sortIcon>
      </th>
      <th pSortableColumn="representative.name">Representative
        <p-sortIcon field="representative.name"></p-sortIcon>
      </th>
      <th pSortableColumn="status">Status
        <p-sortIcon field="status"></p-sortIcon>
      </th>
    </tr>
    <tr>
      <th>
        <input pInputText type="text" (input)="dtss.filter($event.target.value, 'name', 'contains')" [value]="dtss.filters['name']?.value" placeholder="Search by Name" class="p-column-filter" />
      </th>
      <th>
        <input pInputText type="text" (input)="dtss.filter($event.target.value, 'country.name', 'contains')" [value]="dtss.filters['country.name']?.value" placeholder="Search by Country" class="p-column-filter" />
      </th>
      <th>
        <input pInputText type="text" (input)="dtss.filter($event.target.value, 'representative.name', 'contains')" [value]="dtss.filters['representative.name']?.value" placeholder="Search by Representative" class="p-column-filter" />
      </th>
      <th>
        <input pInputText type="text" (input)="dtss.filter($event.target.value, 'status', 'contains')" [value]="dtss.filters['status']?.value" placeholder="Search by Status" class="p-column-filter" />
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr [pSelectableRow]="customer">
      <td>
        <span class="p-column-title">Name</span> { { customer.name } }
      </td>
      <td>
        <span class="p-column-title">Country</span>
        <span class="image-text">{ { customer.country.name } }</span>
      </td>
      <td>
        <span class="p-column-title">Representative</span>
        <span class="image-text">{ { customer.representative.name } }</span>
      </td>
      <td>
        <span class="p-column-title">Status</span>
        <span [class]="'customer-badge status-' + customer.status">{ { customer.status } }</span>
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr>
      <td colspan="4">No customers found.</td>
    </tr>
  </ng-template>
</p-table>

<p-table #dtls [value]="customersLocalStorage" selectionMode="single" [(selection)]="selectedLocalStorage" dataKey="id" styleClass="p-datatable-customers" responsiveLayout="scroll" [rows]="10" [paginator]="true" stateStorage="local" stateKey="statedemo-local">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="name">Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th pSortableColumn="country.name">Country
        <p-sortIcon field="country.name"></p-sortIcon>
      </th>
      <th pSortableColumn="representative.name">Representative
        <p-sortIcon field="representative.name"></p-sortIcon>
      </th>
      <th pSortableColumn="status">Status
        <p-sortIcon field="status"></p-sortIcon>
      </th>
    </tr>
    <tr>
      <th>
        <input pInputText type="text" (input)="dtls.filter($event.target.value, 'name', 'contains')" [value]="dtls.filters['name']?.value" placeholder="Search by Name" class="p-column-filter" />
      </th>
      <th>
        <input pInputText type="text" (input)="dtls.filter($event.target.value, 'country.name', 'contains')" [value]="dtls.filters['country.name']?.value" placeholder="Search by Country" class="p-column-filter" />
      </th>
      <th>
        <input pInputText type="text" (input)="dtls.filter($event.target.value, 'representative.name', 'contains')" [value]="dtls.filters['representative.name']?.value" placeholder="Search by Representative" class="p-column-filter" />
      </th>
      <th>
        <input pInputText type="text" (input)="dtls.filter($event.target.value, 'status', 'contains')" [value]="dtls.filters['status']?.value" placeholder="Search by Status" class="p-column-filter" />
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr [pSelectableRow]="customer">
      <td>
        <span class="p-column-title">Name</span> { { customer.name } }
      </td>
      <td>
        <span class="p-column-title">Country</span>
        <span class="image-text">{ { customer.country.name } }</span>
      </td>
      <td>
        <span class="p-column-title">Representative</span>
        <span class="image-text">{ { customer.representative.name } }</span>
      </td>
      <td>
        <span class="p-column-title">Status</span>
        <span [class]="'customer-badge status-' + customer.status">{ { customer.status } }</span>
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr>
      <td colspan="4">No customers found.</td>
    </tr>
  </ng-template>
</p-table>