Data Table

Multi-select without sorting

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
7 Grace grace@example.com Editor Yes
8 Heidi heidi@example.com User No
9 Ivan ivan@example.com Viewer Yes
10 Judy judy@example.com Admin Yes
11 Karl karl@example.com User Yes
12 Linda linda@example.com Editor No
0 of 0 
<rui-data-table
  [data]="users"
  [columns]="columns"
  [config]="{ selectable: true, sortable: false }"
  [(selectedItems)]="selectedItems"
/>

Multi-select with sorting

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
7 Grace grace@example.com Editor Yes
8 Heidi heidi@example.com User No
9 Ivan ivan@example.com Viewer Yes
10 Judy judy@example.com Admin Yes
11 Karl karl@example.com User Yes
12 Linda linda@example.com Editor No
0 of 0 
<rui-data-table
  [data]="users"
  [columns]="columns"
  [config]="{ selectable: true, sortable: true }"
  (sortChange)="onSortChange($event)"
  [(selectedItems)]="selectedItems"
/>

Filter

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
7 Grace grace@example.com Editor Yes
8 Heidi heidi@example.com User No
9 Ivan ivan@example.com Viewer Yes
10 Judy judy@example.com Admin Yes
11 Karl karl@example.com User Yes
12 Linda linda@example.com Editor No
0 of 0 
<rui-data-table
  [data]="users"
  [columns]="columns"
  [config]="{ filterable: true }"
/>

Selection output

No sorting table:

[]

With sorting table:

[]

Row Actions Menu

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
7 Grace grace@example.com Editor Yes
8 Heidi heidi@example.com User No
9 Ivan ivan@example.com Viewer Yes
10 Judy judy@example.com Admin Yes
11 Karl karl@example.com User Yes
12 Linda linda@example.com Editor No
0 of 0 
<rui-data-table
  [data]="users"
  [columns]="columns"
  [actions]="rowActions"
  [config]="{ sortable: true }"
/>

Expandable Rows

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
0 of 0 
<ng-template #expandedRow let-user>
  <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
    <div>Department: {{ user.department }}</div>
    ...
  </div>
</ng-template>

<rui-data-table
  [data]="usersWithDetails"
  [columns]="columns"
  [expandedRowTemplate]="expandedRow"
  [config]="{ sortable: true }"
/>

Usage

Usage 
<rui-data-table
  [data]="users"
  [columns]="columns"
  [actions]="rowActions"
  [expandedRowTemplate]="expandedRow"
  [config]="{ sortable: true, selectable: true, filterable: true }"
  (sortChange)="onSortChange($event)"
  (selectionChange)="onSelectionChange($event)"
  [(selectedItems)]="selectedItems"
/>

Template-driven Form

Using ngModel with the data table. The model value is the array of selected items. Note: data-table does not implement ControlValueAccessor, so ngModel binding is one-way.

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
7 Grace grace@example.com Editor Yes
8 Heidi heidi@example.com User No
9 Ivan ivan@example.com Viewer Yes
10 Judy judy@example.com Admin Yes
11 Karl karl@example.com User Yes
12 Linda linda@example.com Editor No
0 of 0

0 item(s) selected

<rui-data-table
  [data]="users"
  [columns]="columns"
  [config]="{ selectable: true }"
  [(selectedItems)]="selectedItems"
/>

Reactive Form

Using formControl with the data table. Note: the data table uses its own model for selection; formControl shows one-way value sync.

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
7 Grace grace@example.com Editor Yes
8 Heidi heidi@example.com User No
9 Ivan ivan@example.com Viewer Yes
10 Judy judy@example.com Admin Yes
11 Karl karl@example.com User Yes
12 Linda linda@example.com Editor No
0 of 0

0 item(s) selected

<rui-data-table
  [data]="users"
  [columns]="columns"
  [config]="{ selectable: true }"
  [(selectedItems)]="selectedItems"
/>

Signal Form

Using model() signal directly — no FormsModule or ReactiveFormsModule needed. This is the native API for the data table selection.

ID
Name
Email
Role
Active
1 Alice alice@example.com Admin Yes
2 Bob bob@example.com User Yes
3 Charlie charlie@example.com Editor No
4 Diana diana@example.com User Yes
5 Eve eve@example.com Viewer No
6 Frank frank@example.com Admin Yes
7 Grace grace@example.com Editor Yes
8 Heidi heidi@example.com User No
9 Ivan ivan@example.com Viewer Yes
10 Judy judy@example.com Admin Yes
11 Karl karl@example.com User Yes
12 Linda linda@example.com Editor No
0 of 0

0 item(s) selected

<rui-data-table
  [data]="users"
  [columns]="columns"
  [config]="{ selectable: true }"
  [(selectedItems)]="selectedItems"
/>