angular-smart-item-picker-dialog-table

An Angular Material dialog for picking records from a paginated table by Thai Informatics System. Use it instead of a dropdown whenever the user needs to see several attributes of each option before choosing — code, description, category, rate, and so on.

Features

• Config-driven dynamic columns with custom cell templates
• Per-column header filters (text or select)
• Server-side sorting and pagination
• Single-select (radio) or multi-select (checkbox)
• Exclude already-picked rows by id
• Overridable labels for i18n

Installation

npm install @servicemind.tis/angular-smart-item-picker-dialog-table

Peer dependencies

npm install @angular/material @angular/cdk @angular/forms

The picker calls your API with HttpClient, so the host application must provide it (provideHttpClient() or HttpClientModule).

Usage

import {
  AngularSmartItemPickerDialogTableModule,
  AngularSmartItemPickerDialogTableService,
  AngularSmartItemPickerColumn,
} from '@servicemind.tis/angular-smart-item-picker-dialog-table';

@NgModule({ imports: [AngularSmartItemPickerDialogTableModule] })
export class MyFeatureModule {}

constructor(private picker: AngularSmartItemPickerDialogTableService) {}

openPicker() {
  const columns: AngularSmartItemPickerColumn[] = [
    { name: 'code', label: 'Code', valueKey: 'chargeCode', sortKey: 'chargeCode', filterType: 'text' },
    { name: 'description', label: 'Description', valueKey: 'description', filterType: 'text' },
  ];

  this.picker
    .open<Charge>({ title: 'Select charges', columns, loadDataApiUrl: '/api/charges/list' })
    .subscribe(rows => {
      if (rows) { /* user confirmed */ }
      // rows === null when the user cancels
    });
}

Expected API contract

The picker issues POST {loadDataApiUrl}?current_page=n&per_page=m with body { filter, sortFilter } and expects:

{ "data": [], "total": 0 }

records / totalCount are also accepted as aliases.

Configuration

See AngularSmartItemPickerConfig for the full contract. Key options:

| Option | Description | |---|---| | title | Dialog title | | columns | Column definitions (see below) | | loadDataApiUrl | Paginated POST endpoint | | staticFilter | Always merged into the request filter | | multiSelect | Checkboxes (default) vs radio single-select | | idKey | Row identity property, default id | | excludeIds | Rows to hide | | pageSize / pageSizeOptions | Pagination | | defaultSortBy / defaultSortOrder | Initial sort | | labels | Translated label overrides |

Column options: name, label, valueKey, template, sortKey, filterType, filterKey, options, width, align.

Styling

The component is self-contained — all table chrome, buttons, and layout utilities ship with the library and are scoped by Angular's emulated encapsulation, so nothing leaks into your application and you don't need Tailwind or any CSS framework.

Three CSS custom properties are exposed for theming. Override them on any ancestor element:

| Property | Default | Used for | |---|---|---| | --angular-picker-primary | #3f51b5 | Confirm button fill, filter focus ring | | --angular-picker-danger | #f44336 | Cancel button text and hover ripple | | --angular-picker-light | #f8f9fa | Table header and paginator background |

:root {
  --angular-picker-primary: #0f766e;
  --angular-picker-danger: #b91c1c;
}

The table also honours Angular Material's own table theme tokens (--mat-table-row-item-outline-color, --mat-table-row-item-container-height, and so on), so it follows your Material theme by default.

One external requirement: the sort arrows and action icons use the Material Icons ligature font. Angular Material applications normally already load it; if yours doesn't, add it to your index.html.

Notifications

Errors surface through AngularSmartItemPickerNotifierService, a thin MatSnackBar wrapper. Override it to route messages through your own notification stack:

{ provide: AngularSmartItemPickerNotifierService, useClass: MyNotifier }

License

MIT © Thai Informatics System Co., Ltd.