table/examples/angular/row-selection/src/app/app.html at f4d29ceea7f4209a819c1d91ad28ac885050d425 · TanStack/table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<div class="p-2">
  <button class="border rounded px-2" (click)="toggleEnableRowSelection()">
    {{ enableRowSelection() ? 'Disable' : 'Enable' }} Row selection
  </button>

  <div class="h-2"></div>

  <table [tanStackTable]="table">
    <thead>
      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
        <tr>
          @for (header of headerGroup.headers; track header.id) {
            <th [attr.colSpan]="header.colSpan">
              @if (!header.isPlaceholder) {
                <ng-container *flexRenderHeader="header; let headerCell">
                  {{ headerCell }}
                </ng-container>

                @if (header.column.getCanFilter()) {
                  <div>
                    <app-table-filter [column]="header.column" />
                  </div>
                }
              }
            </th>
          }
        </tr>
      }
    </thead>
    <tbody>
      @for (row of table.getRowModel().rows; track row.id) {
        <tr>
          @for (cell of row.getAllCells(); track cell.id) {
            <td>
              <ng-container *flexRenderCell="cell; let renderCell">
                {{ renderCell }}
              </ng-container>
            </td>
          }
        </tr>
      }
    </tbody>
    <tfoot>
      <tr>
        <td class="p-1">
          <input
            type="checkbox"
            [checked]="table.getIsAllPageRowsSelected()"
            [indeterminate]="table.getIsSomePageRowsSelected()"
            (change)="table.toggleAllPageRowsSelected()"
          />
        </td>
        <td [attr.colspan]="20">Page Rows ({{ table.getRowModel().rows.length }})</td>
      </tr>
    </tfoot>
  </table>

  <div class="h-2"></div>
  <div class="flex items-center gap-2">
    <button
      class="border rounded p-1"
      (click)="table.setPageIndex(0)"
      [disabled]="!table.getCanPreviousPage()"
    >
      <<
    </button>
    <button
      class="border rounded p-1"
      (click)="table.previousPage()"
      [disabled]="!table.getCanPreviousPage()"
    >
      <
    </button>
    <button
      class="border rounded p-1"
      (click)="table.nextPage()"
      [disabled]="!table.getCanNextPage()"
    >
      >
    </button>
    <button
      class="border rounded p-1"
      (click)="table.setPageIndex(table.getPageCount() - 1)"
      [disabled]="!table.getCanNextPage()"
    >
      >>
    </button>
    <span class="flex items-center gap-1">
      <div>Page</div>
      <strong>
        {{ paginationState().pageIndex + 1 }} of
        {{ table.getPageCount() }}
      </strong>
    </span>
    <span class="flex items-center gap-1">
      | Go to page:
      <input
        type="number"
        [value]="paginationState().pageIndex + 1"
        (input)="onPageInputChange($event)"
        class="border p-1 rounded w-16"
      />
    </span>

    <select [value]="paginationState().pageSize" (change)="onPageSizeChange($event)">
      @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) {
        <option [value]="pageSize">Show {{ pageSize }}</option>
      }
    </select>
  </div>
  <br />
  <div>
    {{ rowSelectionLength() }} of {{ table.getPreFilteredRowModel().rows.length }} Total Rows
  </div>
  <hr />
  <br />
  <div>
    <button class="border rounded p-2 mb-2" (click)="refreshData()">Refresh Data</button>
  </div>
  <div>
    <button class="border rounded p-2 mb-2" (click)="logSelectedFlatRows()">
      Log table.getSelectedRowModel().flatRows
    </button>
  </div>
  <div>
    <label>Row Selection State:</label>
    <pre>{{ stringifiedRowSelection() }}</pre>
  </div>
</div>