Web Components Grid Lite Data Binding

    O Grid Lite aceita um array de objetos simples como fonte de dados. Cada linha de grade é a representação renderizada de um registro de dados no array, com as células de linha sendo controladas pela configuração das colunas.

    Ao aplicar transformações de dados, como ordenação e filtragem, a grade não modifica a referência original dos dados. Ou seja, transformações de dados não serão refletidas na fonte original. A grade não acompanha as alterações nos objetos dentro do array de dados, então a modificação direta dos objetos de dados não será refletida.

    Change the Data Source at Runtime

    O componente suporta a alteração de sua fonte de dados em tempo de execução. Se a nova fonte tiver um "formato" diferente da anterior, certifique-se de atualizar também a configuração da sua coluna.

    grid.data = [...{
  /** records follow */
}];

    <igc-grid-lite>
    <!-- Update column configuration, add or remove columns as needed to represent the new data. -->
    <igc-grid-lite-column field="id"></igc-grid-lite-column>
</igc-grid-lite>

    If the grid has autoGenerate enabled, it will "infer" the new column configuration automatically when the data changes.

    grid.autoGenerate = true;

/** After the new binding the grid will infer the column collection from the bound data. */
grid.data = [];

    [!NOTE] The sort/filter states of the Grid Lite are kept when changing the data source in this manner. Usually you will want to reset them by calling either clearSort() and/or clearFilter().

    No exemplo abaixo, a grade tem a geração automática de colunas ativada. Quando você clica no botão de alternar dados, a coleta de colunas é reiniciada e uma nova fonte de dados é vinculada à grade.

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.