Colunas e layout

DyonaGrid permite redimensionar, reordenar e ocultar colunas. As definições das colunas fornecem os valores declarativos iniciais; use columnState quando a aplicação precisar restaurar um layout personalizado.

Testar ao vivo no Lab

Largura e redimensionamento

width é a largura inicial. minWidth e maxWidth a limitam, inclusive enquanto a pessoa redimensiona a coluna. O redimensionamento é habilitado por padrão; use resizable: false para uma coluna fixa.

const columns: DyonaGridColumn[] = [
  {field: 'invoice', headerName: 'Fatura', width: 160, minWidth: 120, maxWidth: 260},
  {field: 'status', headerName: 'Status', width: 120, resizable: false},
];

Ao confirmar um redimensionamento, a grade emite ambos os callbacks:

<DyonaGrid
  columns={columns}
  onColumnResize={({field, width}) => saveWidth(field, width)}
  onColumnStateChange={(state) => saveLayout(state)}
/>

onColumnResize recebe {field, width}. onColumnStateChange recebe o próximo estado completo. Nenhum deles é emitido enquanto o ponteiro apenas pré-visualiza o tamanho.

Reordenação

allowColumnReorder é true por padrão. Use-o com false para desabilitar a reordenação de toda a grade. Com reorderable: false, uma coluna individual permanece em sua posição.

const columns: DyonaGridColumn[] = [
  {field: 'invoice', headerName: 'Fatura'},
  {field: 'customer', headerName: 'Cliente', reorderable: false},
];

<DyonaGrid
  columns={columns}
  allowColumnReorder
  onColumnOrderChange={({field, fromIndex, toIndex}) => trackMove(field, fromIndex, toIndex)}
  onColumnStateChange={setColumnState}
/>

Ao confirmar uma reordenação real, onColumnOrderChange recebe {field, fromIndex, toIndex} e onColumnStateChange(state) recebe o layout resultante. Eles não são emitidos para uma prévia de arraste ou um arraste cancelado.

Visibilidade

allowColumnHiding é true por padrão. Use-o com false para remover os controles de ocultação. hideable: false impede que as pessoas usuárias alterem a visibilidade de uma coluna; seu valor declarativo de visible continua sendo respeitado. Use visible: false para ocultá-la inicialmente.

const columns: DyonaGridColumn[] = [
  {field: 'invoice', headerName: 'Fatura', hideable: false},
  {field: 'internalNotes', headerName: 'Notas internas', visible: false},
];

<DyonaGrid
  columns={columns}
  allowColumnHiding
  onColumnVisibilityChange={({field, visible}) => saveVisibility(field, visible)}
  onColumnStateChange={setColumnState}
/>

Ao ocultar ou mostrar uma coluna, onColumnVisibilityChange recebe {field, visible}, seguido de onColumnStateChange(state) com o próximo estado completo. DyonaGrid não permite ocultar a última coluna de dados visível.

Estado controlado e persistência

columnState é um array ordenado de itens {field, width?, visible?}. A ordem do array representa a ordem lógica das colunas; width e visible são armazenados por field.

const [columnState, setColumnState] = useState<DyonaGridColumnState>([
  {field: 'customer', width: 240, visible: true},
  {field: 'invoice', width: 160, visible: true},
  {field: 'internalNotes', visible: false},
]);

<DyonaGrid columns={columns} columnState={columnState} onColumnStateChange={setColumnState} />

__actions pode estar presente no estado e manter sua posição. A coluna de seleção não participa de columnState.

DyonaGrid não usa localStorage internamente. A persistência é responsabilidade da aplicação consumidora (por exemplo, no próprio armazenamento ou backend), que deve passar o valor restaurado de volta para a grade.

Redefinir colunas

A ação integrada Redefinir colunas aparece somente quando a personalização atual difere do layout declarativo original. Ela restaura o layout de columns: ordem, valores de visible e larguras. Também emite onColumnStateChange com esse estado restaurado, para que a aplicação consumidora substitua o layout salvo.

<DyonaGrid
  columns={columns}
  columnState={savedColumnState}
  onColumnStateChange={(state) => setSavedColumnState(state)}
/>