Columnas y diseño

DyonaGrid permite que las personas usuarias redimensionen, reordenen y oculten columnas. Las definiciones de columnas aportan los valores declarativos iniciales; usá columnState cuando la aplicación necesite restaurar un diseño personalizado.

Probar en vivo en el Lab

Ancho y redimensionamiento

width es el ancho inicial. minWidth y maxWidth lo limitan, incluso durante el redimensionamiento. El resize está habilitado de forma predeterminada; usá resizable: false para una columna fija.

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

Al confirmar un resize, la grilla emite ambos callbacks:

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

onColumnResize recibe {field, width}. onColumnStateChange recibe el estado siguiente completo. Ninguno se emite mientras el puntero solo está previsualizando el tamaño.

Reordenamiento

allowColumnReorder es true de forma predeterminada. Usalo con false para deshabilitar el reordenamiento de toda la grilla. Con reorderable: false, una columna individual permanece en su lugar.

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

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

Al confirmar un reordenamiento real, onColumnOrderChange recibe {field, fromIndex, toIndex} y onColumnStateChange(state) recibe el diseño resultante. No se emiten por un preview del arrastre ni por una cancelación.

Visibilidad

allowColumnHiding es true de forma predeterminada. Usalo con false para quitar los controles de ocultamiento. hideable: false impide que las personas usuarias cambien la visibilidad de una columna; su valor declarativo de visible se sigue respetando. Usá visible: false para ocultarla inicialmente.

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

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

Al ocultar o mostrar una columna, onColumnVisibilityChange recibe {field, visible}, seguido de onColumnStateChange(state) con el estado siguiente completo. DyonaGrid no permite ocultar la última columna de datos visible.

Estado controlado y persistencia

columnState es un array ordenado de ítems {field, width?, visible?}. El orden del array representa el orden lógico de las columnas; width y visible se guardan 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 puede estar presente en el estado y conservar su posición. La columna de selección no participa en columnState.

DyonaGrid no usa localStorage internamente. La persistencia corresponde a la aplicación consumidora (por ejemplo, en su propio almacenamiento o backend), que debe pasar el valor restaurado nuevamente a la grilla.

Restablecer columnas

La acción integrada Restablecer columnas aparece solo cuando la personalización actual difiere del diseño declarativo original. Restaura el diseño de columns: orden, valores de visible y anchos. También emite onColumnStateChange con ese estado restaurado para que la aplicación consumidora reemplace su diseño guardado.

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