Web Components Fixação de coluna de grade de árvore

O recurso Ignite UI for Web Components Column Pinning no Web Components Tree Grid permite que os desenvolvedores bloqueiem colunas específicas na ordem desejada, garantindo visibilidade o tempo todo, mesmo quando os usuários rolam horizontalmente pelo IgcTreeGridComponent. Há uma interface do usuário integrada para fixação de colunas, acessível por meio da barra de ferramentas Web Components Tree Grid. Além disso, os desenvolvedores têm a flexibilidade de criar uma interface de usuário personalizada que altera o estado do pino das colunas.

Web Components Tree Grid Column Pinning Example

Este exemplo demonstra como você pode fixar uma coluna ou várias colunas no lado esquerdo ou direito do IgcTreeGridComponent.

Column Pinning API

A fixação de coluna é controlada por meio da pinned propriedade do IgcColumnComponent. As colunas fixadas são renderizadas no lado esquerdo do IgcTreeGridComponent por padrão e permanecem fixas por meio da rolagem horizontal das colunas não fixadas no IgcTreeGridComponent corpo.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="false">
    <igc-column field="Name" pinned="true"></igc-column>
    <igc-column field="Title"></igc-column>
    <igc-column field="ID"></igc-column>
</igc-tree-grid>

Você também pode usar os IgcTreeGridComponent PinColumn métodos ou UnpinColumn métodos do para fixar ou desafixar colunas pelo nome do IgcTreeGridComponent campo:

this.treeGrid.pinColumn('Title');
this.treeGrid.unpinColumn('Name');

Ambos os métodos retornam um valor booleano indicando se sua respectiva operação foi bem-sucedida ou não. Normalmente, o motivo pelo qual eles falham é que a coluna já está no estado desejado.

Uma coluna é fixada à direita da coluna fixada mais à direita. Alterar a ordem das colunas fixadas pode ser feito assinando o evento ColumnPin e alterando a propriedade InsertAtIndex dos argumentos do evento para o índice de posição desejado.

<igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>

constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcTreeGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnPin", this.columnPinning);
}

public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}

Pinning Position

Você pode alterar a posição de fixação da coluna por meio da Pinning opção de configuração. Ele permite que você defina a posição das colunas como Início ou Fim. Quando definido como Final, as colunas são renderizadas no final da grade, após as colunas desafixadas. As colunas não afixadas podem ser roladas horizontalmente, enquanto as colunas fixadas permanecem fixas à direita.

<igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>

var grid = document.getElementById('dataGrid') as IgcTreeGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };

Demo

Column Pinning on Both Sides

Além disso, você pode especificar cada localização de fixação de coluna separadamente, permitindo fixar colunas em ambos os lados da grade para maior conveniência e otimização mais fácil dos conjuntos de dados. Por favor, consulte a demonstração abaixo para mais referência. Para fixar uma coluna, selecione uma coluna clicando em um cabeçalho e use os botões de fixação adicionados à barra de ferramentas, ou simplesmente arraste uma coluna para outra fixada.

Custom Column Pinning UI

Você pode definir sua interface do usuário personalizada e alterar o estado do pino das colunas por meio da API relacionada.

Digamos que, em vez de uma barra de ferramentas, você queira definir ícones de alfinetes nos cabeçalhos das colunas, nos quais o usuário final pode clicar para alterar o estado de alfinete de uma coluna específica.

Isso pode ser feito criando um modelo de cabeçalho para as colunas com um ícone personalizado.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="false" width="100%" height="620px">
    <igc-column id="Name" field="Name" data-type="String" width="250px"></igc-column>
    <igc-column id="Title" field="Title" data-type="String" width="300px"></igc-column>
    <igc-column id="ID" field="ID" data-type="Number" width="200px"></igc-column>
    <igc-column id="HireDate" field="HireDate" header="Hire Date" data-type="Date" width="200px"></igc-column>
    <igc-column id="Age" field="Age" data-type="Number" width="200px"></igc-column>
    <igc-column id="Address" field="Address" data-type="String" width="200px"></igc-column>
    <igc-column id="City" field="City" data-type="String" width="200px"></igc-column>
    <igc-column id="Country" field="Country" data-type="String" width="200px"></igc-column>
    <igc-column id="Fax" field="Fax" data-type="string" width="200px"></igc-column>
    <igc-column id="PostalCode" field="PostalCode" header="Postal Code" data-type="String" width="200px"></igc-column>
    <igc-column id="Phone" field="Phone" data-type="String" width="200px"></igc-column>
</igc-tree-grid>

constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    var Name = document.getElementById('Name') as IgcColumnComponent;
    var Title = document.getElementById('Title') as IgcColumnComponent;
    var ID = document.getElementById('ID') as IgcColumnComponent;
    var HireDate = document.getElementById('HireDate') as IgcColumnComponent;
    var Age = document.getElementById('Age') as IgcColumnComponent;
    var Address = document.getElementById('Address') as IgcColumnComponent;
    var City = document.getElementById('City') as IgcColumnComponent;
    var Country = document.getElementById('Country') as IgcColumnComponent;
    var Fax = document.getElementById('Fax') as IgcColumnComponent;
    var PostalCode = document.getElementById('PostalCode') as IgcColumnComponent;
    var Phone = document.getElementById('Phone') as IgcColumnComponent;

    treeGrid.data = this.data;
    Name.headerTemplate = this.pinHeaderTemplate;
    Title.headerTemplate = this.pinHeaderTemplate;
    ID.headerTemplate = this.pinHeaderTemplate;
    HireDate.headerTemplate = this.pinHeaderTemplate;
    Age.headerTemplate = this.pinHeaderTemplate;
    Address.headerTemplate = this.pinHeaderTemplate;
    City.headerTemplate = this.pinHeaderTemplate;
    Country.headerTemplate = this.pinHeaderTemplate;
    Fax.headerTemplate = this.pinHeaderTemplate;
    PostalCode.headerTemplate = this.pinHeaderTemplate;
    Phone.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}

Ao clicar no ícone personalizado, o estado do pino da coluna relacionada pode ser alterado usando os métodos de API da coluna.

public toggleColumn(col: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}

Demo

Pinning Limitations

Definir larguras de coluna em porcentagem (%) explicitamente faz com que o conteúdo do corpo e do IgcTreeGridComponent cabeçalho fique desalinhado quando houver colunas fixadas. Para que a fixação de colunas funcione corretamente, as larguras das colunas devem estar em pixels (px) ou atribuídas automaticamente pelo IgcTreeGridComponent.

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir um ID para a grade primeiro:

<igc-tree-grid id="grid"></igc-tree-grid>

Em seguida, defina as propriedades CSS relacionadas a esta classe:

#grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.