React Fixação de linha de grade

The Ignite UI for React Row Pinning feature in React Grid allows you to pin one or multiple rows to the top or bottom of grid. Row Pinning allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the IgrGrid vertically. The React Grid has a built-in row pinning UI, which is enabled by initializing an IgrActionStrip component in the context of Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.

React Grid Row Pinning Example

Row Pinning UI

A interface de fixação de linha embutida é ativada adicionando umIgrActionStrip componente ao componenteIgrGridPinningActions. A fita de ação é mostrada automaticamente ao passar o mouse por uma linha e exibe um ícone de botão de fixar ou desfixar com base no estado da linha para a qual ela é mostrada. Uma ação adicional permitindo rolar a cópia da linha fixada para a visualização é mostrada para cada linha fixada também.

<IgrGrid>
    <IgrColumn field="Country" header="Country"> </IgrColumn>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

Row Pinning API

O fixação de fileiras é controlado pelapinned entrada doRow. As linhas fixadas são renderizadas no topo doIgrGrid corpo e permanecem fixas por meio do rolamento vertical das fileiras não fixadas noIgrGrid corpo.

gridRef.current.getRowByIndex(0).pinned = true;

Você também pode usar osIgrGridpinRow métodosunpinRow para fixar ou desfixar registros pelo ID deles:

gridRef.current.pinRow('ALFKI');
gridRef.current.unpinRow('ALFKI');

Note que o ID da linha é o valor primário-chave, definido peloprimaryKey da grade ou pela própria instância do registro. Ambos os métodos retornam um valor booleano indicando se sua respectiva operação é bem-sucedida ou não. Normalmente, o motivo de falharem é que a linha já está no estado desejado.

Uma fileira é fixada abaixo da última fileira fixada. Alterar a ordem das linhas fixadas pode ser feito assinando oRowPinning evento e alterando aInsertAtIndex propriedade dos argumentos do evento para o índice de posição desejado.

const rowPinning = (event: IgrPinRowEventArgs) => {
    event.detail.insertAtIndex = 0;
}

<IgrGrid autoGenerate={true} onRowPinning={rowPinning}>
</IgrGrid>

Pinning Position

Você pode mudar a posição de fixação da linha pelapinning opção de configuração. Ele permite definir a posição da área do pino para Cima ou Baixo. Quando definidas como Bottom, as linhas fixadas são renderizadas na parte inferior da grade, após as linhas sem fixar. As linhas não fixadas podem ser roladas verticalmente, enquanto as fileiras fixadas permanecem fixas na parte inferior.

const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom }; 

<IgrGrid ref={gridRef} autoGenerate={true} pinning={pinning}>
</IgrGrid>

Custom Row Pinning UI

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

Via extra column with icon

Digamos que, em vez de uma faixa de ação, você gostaria de mostrar um ícone de alfinete em cada linha, permitindo que o usuário final clique e altere o estado do alfinete de uma linha específica. Isso pode ser feito adicionando uma coluna extra com um modelo de célula contendo o ícone personalizado.

const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => {
    const index = ctx.cell.row.index;
    return (
        <>
            <span onPointerDown={(e: any) => toggleRowPin(index)}>📌</span>
        </>
    );
}

<IgrGrid primaryKey="ID" autoGenerate={false}>
    <IgrColumn width="70px" bodyTemplate={cellPinCellTemplate}>
    </IgrColumn>
</IgrGrid>

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

const toggleRowPin = (index: number) => {
  const grid = grid1Ref.current;
  grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}

Demo

Row Pinning Limitations

Somente os registros existentes na fonte de dados podem ser fixados.
O estado de fixação de linha não é exportado para o Excel. A grade é exportada como se nenhuma fixação de linha fosse aplicada.
As cópias de linhas fixadas na área rolável da grade são parte integrante de como outros recursos de grade alcançam sua funcionalidade na presença de linhas fixadas e, portanto, sua criação não pode ser desabilitada nem removida.
Como a Seleção de linha funciona inteiramente com IDs de linha, a seleção de linhas fixadas também seleciona suas cópias (e vice-versa). Além disso, a seleção de intervalo (por exemplo, usando SHIFT + clique) na área fixada funciona da mesma maneira que a seleção de um intervalo de linhas dentro da área rolável. A seleção resultante inclui todas as linhas intermediárias, mesmo que elas não estejam fixadas no momento. Obter as linhas selecionadas por meio da API retorna apenas uma única instância de cada registro selecionado.

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 uma classe para a grade primeiro:

<IgrGrid className="grid"></IgrGrid>

Em seguida, defina as propriedades CSS relacionadas para essa classe:

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

Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.