React Fixação de coluna de grade

    O recurso Ignite UI for React Pinear Colunas no React Grid permite que desenvolvedores bloqueem colunas específicas na ordem desejada, garantindo visibilidade o tempo todo mesmo quando os usuários rolam horizontalmente peloIgrGrid espaço. Há uma interface integrada para Column Pinning, acessível pela barra de ferramentas React Grid. Além disso, os desenvolvedores têm a flexibilidade de criar uma interface personalizada que altera o estado dos pinos das colunas.

    React Grid Column Pinning Example

    Este exemplo demonstra como você pode fixar uma ou várias colunas ao lado esquerdo ou direito doIgrGrid.

    Column Pinning API

    O alfinete da coluna é controlado pelapinned propriedade doIgrColumn. As colunas fixadas são renderizadas no lado esquerdo doIgrGrid por padrão e permanecem fixas por meio do rolamento horizontal das colunas sem fixação noIgrGrid corpo.

    <IgrGrid data={nwindData} autoGenerate={false}>
    <IgrColumn field="Name" pinned={true}></IgrColumn>
    <IgrColumn field="AthleteNumber"></IgrColumn>
    <IgrColumn field="TrackProgress"></IgrColumn>
</IgrGrid>

    Você também pode usar osIgrGrid​pinColumn métodosunpinColumn​IgrGrid para fixar ou desfixar colunas pelo nome do campo:

    gridRef.current.pinColumn('AthleteNumber');
gridRef.current.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 está fixada à direita da coluna fixada mais à direita. Mudar a ordem das colunas fixadas pode ser feito assinando oColumnPin evento e alterando aInsertAtIndex propriedade dos argumentos do evento para o índice de posição desejado.

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

    Pinning Position

    Você pode mudar a posição de fixação da coluna pelapinning opção de configuração. Ele permite definir a posição da coluna para Start ou End. Quando definidas para End, as colunas são renderizadas no final da grade, após as colunas sem fixar. Colunas sem fixação podem ser roladas horizontalmente, enquanto as colunas fixadas permanecem fixas à direita.

    const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };

    <IgrGrid data={nwindData} autoGenerate={true} pinning={pinningConfig}></IgrGrid>

    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.

    <IgrGrid autoGenerate={false} data={CustomersData} ref={grid}>
    <IgrColumn field="ID" hidden={true}></IgrColumn>

    <IgrColumn field="CompanyName" header="Company" width="300px"
    headerTemplate={toggleColumnPin}></IgrColumn>

    <IgrColumn field="ContactName" header="Name" width="200px" pinned={true}
    headerTemplate={toggleColumnPin}> </IgrColumn>

    <IgrColumn field="ContactTitle" header="Title" width="200px" pinned={true}
    headerTemplate={toggleColumnPin}></IgrColumn>
</IgrGrid>

    const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
  const togglePin = () => {
    const col = ctx.column;
    col.pinned = !col.pinned;
  }

  const col = ctx.column;

  return(
    <div>
      <span style={{ float: 'left' }}>{col.header}</span>
      <span style={{ float: 'right' }} onClick={() => togglePin()}>📌</span>
    </div>
  );
}

    Demo

    Pinning Limitations

    • Definir larguras de coluna em porcentagem (%) explicitamente faz com que oIgrGrid corpo e o conteúdo do cabeçalho fiquem desalinhados quando há colunas fixadas. Para que o alfinete de colunas funcione corretamente, as larguras das colunas devem estar em pixels (px) ou ser atribuídas automaticamente por oIgrGrid.

    Styling

    Além dos temas predefinidos, a grade podia ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso queira mudar algumas cores, precisa definir umID para a grade primeiro:

    <IgrGrid id="grid"></IgrGrid>

    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.