Fixação de colunas de grade de Web Components

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

    Web Components Grid Column Pinning Example

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

    Column Pinning API

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

    <igc-grid id="grid1" width="700px" auto-generate="false">
    <igc-column field="Name" pinned="true"></igc-column>
    <igc-column field="AthleteNumber"></igc-column>
    <igc-column field="TrackProgress"></igc-column>
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
}

    Você também pode usar os métodos pinColumn ou unpinColumn do IgcGridComponent para fixar ou desafixar colunas pelo nome IgcGridComponent campo:

    this.grid.pinColumn('AthleteNumber');
this.grid.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-grid id="dataGrid" auto-generate="true"></igc-grid>

    constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcGridComponent;
    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-grid id="dataGrid" auto-generate="true"></igc-grid>

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

    Demo

    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-grid id="grid1" width="100%" height="500px" auto-generate="false">
    <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-grid>

    constructor() {
    var grid1 = document.getElementById('grid1') as IgcGridComponent;
    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;

    grid.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 corpo e o conteúdo do cabeçalho IgcGridComponent fiquem desalinhados quando há 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 IgcGridComponent.

    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-grid id="grid"></igc-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.