Datatable Select

Um select que abre um modal com um datatable completo, permitindo busca, paginação e ordenação. Ao clicar em uma linha, o item é selecionado e o modal fecha.

Descrição

O componente combina um trigger no formato form-select com um modal que exibe um li-datatable completo. Implementa ControlValueAccessor para compatibilidade com ngModel.

Recursos

Busca, paginação e ordenação via li-datatable.
Seleção por clique de linha.
Suporte a ngModel e currentValueChange.
Tamanho do modal configurável.
Estados desabilitado e programático.

Limitações

Requer dataRequest para fornecer dados ao datatable.
O label exibido depende de labelKey — sem projeção customizada.
Não suporta seleção múltipla.

<li-datatable-select
  [settings]="dtSettings"
  [dataTableFilter]="filtro"
  [data]="items"
  [searchInFields]="sInFields"
  [labelKey]="'name'"
  [valueKey]="'id'"
  [title]="'Selecionar pessoa'"
  [placeholder]="'Clique para selecionar...'"
  (dataRequest)="onDataRequest($event)"
  (currentValueChange)="onValueChanged($event)">
</li-datatable-select>

Uso básico com currentValueChange e controle programático.

Selecionar pessoa

Valor: {{ selectedPersonId ?? 'nenhum' }}

Label: {{ selectedPersonLabel.isEmpty ? '—' : selectedPersonLabel }}

Estado desabilitado — o trigger fica inativo e não abre o modal.

Pessoa (desabilitado)

Binding com ngModel — o valor é sincronizado via ControlValueAccessor.

Selecionar pessoa (ngModel)

ngModel value: {{ ngModelValue ?? 'null' }}

Evento: {{ ngModelEventLog }}

Como utilizar

O componente é controlado por três peças: Filters para paginação e busca, DataFrame para os dados e DatatableSettings para as colunas. Ao clicar no trigger, um modal abre com o datatable; ao clicar numa linha, a seleção é feita.

Opções principais

[settings]: definições de colunas do datatable.
[data]: DataFrame com dados paginados.
[dataTableFilter]: filtros de busca e paginação.
[searchInFields]: campos de busca.
[labelKey]: chave para o texto exibido no trigger.
[valueKey]: chave para o valor; null = instância inteira.
[placeholder]: texto quando nenhum item está selecionado.
[title]: título do modal.
[modalSize]: tamanho do modal ('large', 'xtra-large').
[disabled]: desabilita o componente.
[fullScreenOnMobile]: modal fullscreen no mobile.

<li-datatable-select
  [settings]="dtSettings"
  [dataTableFilter]="filtro"
  [data]="items"
  [searchInFields]="sInFields"
  [labelKey]="'name'"
  [valueKey]="'id'"
  [(ngModel)]="selectedValue"
  (dataRequest)="onDataRequest($event)">
</li-datatable-select>

Outputs

(dataRequest): emitido quando o datatable solicita dados.
(currentValueChange): emitido quando o valor selecionado muda.
(limitChange): emitido quando o limite por página muda.
(searchRequest): emitido quando uma busca é submetida.

Métodos públicos

clear(): limpa a seleção.
setSelectedItem({label, value}): define a seleção programaticamente.
selectedLabel: getter que retorna o label atual.

Observações

Compatível com ngModel via ControlValueAccessor.
Mantenha o DataFrame estável; atualize apenas via (dataRequest).
O botão de limpar no trigger aparece quando há valor selecionado.

Componentes Datatable Select