在 generi-ui 网格的 Guipaging 块中显示复选框 angular

Question

I am using below grid in angular https://generic-ui.com/examples

Below is screenshot of how it looks in my system.

In the end you can see one Checkbox with Show All.

I want to display that checkbox under Search option in left side of pagination.

You can see details in screenshot and below is my code. In code you can see html and ts file from where I am displaying paging. But I don't know how can I get displayed this checkbox in left side of pagination.

html file

 <gui-grid [source]="source"
      [columns]="columns"
      [maxHeight]="500"
      [loading]="loading"
      [paging]="paging"
      [sorting]="sorting"
      [searching]="searching"
      [titlePanel]="titlePanel"> 
    </gui-grid>

 <mat-checkbox (change)="showAllUsers()">
      Show All
    </mat-checkbox>

ts file:

Getting data in this way:

columns: Array<GuiColumn> = [
    {
      header: 'Name',
      field: 'name',
      width: 140
    },
    {
      header: 'Type',
      field: 'type',
      width: 140
    }];

I am getting data from API and setting source to that.

paging I am displaying using this code:

paging: GuiPaging = {
    enabled: true,
    page: 1,
    pageSize: 10,
    pageSizes: [10, 25, 50],
    pagerTop: true,
    pagerBottom: true,
    display: GuiPagingDisplay.ADVANCED
  };

Answer 1

You can try with some CSS just giving some idea below..

You can apply to checkbox.. You need to make it responsive so it works in all devices for you.

style="position: absolute; margin-top: -166px; margin-left: 24px;"