{{ t.pages.datatable.title }} {{ t.pages.datatable.subtitle }}

{{ t.pages.datatable.overviewIntro }}

{{ t.common.sectionDescription }}

{{ t.pages.datatable.descriptionBody }}

{{ t.common.sectionFeatures }}
  • {{ t.pages.datatable.featureOne }}
  • {{ t.pages.datatable.featureTwo }}
  • {{ t.pages.datatable.featureThree }}
  • {{ t.pages.datatable.featureFour }}
  • {{ t.pages.datatable.featureFive }}
{{ t.common.sectionLimitations }}
  • {{ t.pages.datatable.limitOne }}
  • {{ t.pages.datatable.limitTwo }}
  • {{ t.pages.datatable.limitThree }}

{{ t.pages.datatable.demoIntro }}

{{ datatableEventLog.isEmpty ? initialEventLog : datatableEventLog }}
{{ processLookupDemoTitle }}

{{ processLookupDemoIntro }}

{{ processLookupHeaderEventLog }}
{{ processLookupActionColumnDemoTitle }}

{{ processLookupActionColumnDemoIntro }}

{{ processLookupActionColumnEventLog }}
Agrupamento com seleção

Esta demonstração reproduz o cenário com enableGrouping e showCheckboxToSelectRow ativos. O checkbox deve aparecer apenas nas linhas de dados, nunca na linha divisora do grupo.

{{ groupedSelectionLog }}
{{ t.pages.datatable.onDemandTitle }}

{{ t.pages.datatable.onDemandIntro }}

{{ t.pages.datatable.lazyModalTitle }}

{{ t.pages.datatable.lazyModalIntro }}

{{ t.pages.datatable.modalBody }}
{{ t.common.sectionHowToUse }}

{{ t.pages.datatable.howToUseBody }}

{{ t.common.sectionMainOptions }}
  • {{ t.pages.datatable.optionOne }}
  • {{ t.pages.datatable.optionTwo }}
  • {{ t.pages.datatable.optionThree }}
  • {{ t.pages.datatable.optionFour }}
{{ t.common.sectionBestPractices }}
  • {{ t.pages.datatable.practiceOne }}
  • {{ t.pages.datatable.practiceTwo }}
  • {{ t.pages.datatable.practiceThree }}
{{ t.pages.datatable.columnStylesTitle }}
  • {{ t.pages.datatable.columnStyleOne }}
  • {{ t.pages.datatable.columnStyleTwo }}
  • {{ t.pages.datatable.columnStyleThree }}
  • {{ t.pages.datatable.columnStyleFour }}
  • {{ t.pages.datatable.columnStyleFive }}
RowStyleResolver e grid
  • rowStyleResolver permite destacar uma linha inteira sem alterar o template.
  • gridTemplateColumns define a malha do grid.
  • gridGap controla o espaçamento entre cartões.
  • customCardBuilder recebe itemMap, itemInstance e row para montar um Element completo.
Mini tutoriais (Dart + HTML)

Os blocos abaixo mostram fluxos completos com setup em Dart e template em HTML para acelerar integração.

1. Fluxo server-side

Recarrega dados no backend para paginação, busca e ordenação.

2. Colapso no desktop por container

Ativa detalhe responsivo conforme a largura do bloco da tabela, não só do viewport.

3. Célula customizada com TemplateRef

Renderiza botões de ação por coluna sem substituir o restante do datatable.

4. Ações declarativas e imperativas

Usa DatatableActionColumn e atualiza ações em runtime com controller.

Fluxo mínimo full stack com Product

Abaixo está um fluxo mínimo, baseado no padrão real de backend e frontend deste repositório. Os snippets ficam estáticos no próprio template para evitar sobrecarga dinâmica.

1. Model Product

Estrutura mínima seguindo o padrão de models do core com SerializeBase.

2. Backend com Eloquent + DataFrame

O repositório consulta a tabela, aplica filtros, paginação e ordenação, e retorna um DataFrame pronto para serialização.

3. Service no frontend

O service consome a rota e transforma o JSON em DataFrame<Product> usando o builder.

4. Page AngularDart

A page mantém Filters, DatatableSettings e chama o service sempre que o datatable emite dataRequest.

5. Template com li-datatable

No template, o datatable recebe o filtro, os dados e as definições de coluna, reproduzindo o padrão das páginas reais do frontend.