Configuración de columnas

Columns are defined declaratively using column child components within the grid. The field property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows.

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn
      field="account"
      header="Account Number"
      ...
    ></IgrGridLiteColumn>
    {/* Additional columns follow */}
  </IgrGridLite>
);

Configuration Based on the Data Source

The grid supports inferring the column configuration based on the provided data source when autoGenerate is set to true. It tries to infer the appropriate field and dataType based on records in the data.

const data: Record[] = [
  { entryId: "1234", source: "https://example.com", ts: 1373521917579 },
  ...
];

return (
  <IgrGridLite data={data} autoGenerate={true}></IgrGridLite>
);

The previous snippet will result in the grid automatically creating columns equivalent to:

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn field="entryId" dataType="string"></IgrGridLiteColumn>
    <IgrGridLiteColumn field="source" dataType="string"></IgrGridLiteColumn>
    <IgrGridLiteColumn field="ts" dataType="number"></IgrGridLiteColumn>
  </IgrGridLite>
);

Útil para renderizar rápidamente algunos datos sin personalizaciones adicionales.

Additional Column Configuration

The column exposes several more properties for customization:

Column Width

Por defecto, las columnas tienen un ancho minmax (136px, 1fr) que se traduce en un ancho mínimo de 136px y un máximo de 1 parte del espacio disponible en la Grid Lite. De este modo, las columnas son fluidas y responden, adaptándose a los cambios en el ancho de la cuadrícula.

To change the width of column, use the width property of the column.

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" width="250px"></IgrGridLiteColumn>
  </IgrGridLite>
);

La propiedad acepta unidades válidas de longitud CSS.

Hiding columns

Columns can be hidden/shown by setting the hidden property of the column.

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" hidden></IgrGridLiteColumn>
  </IgrGridLite>
);

Column resize

Each column of the Grid Lite can be configured to be resizable by setting the resizable property of the column element.

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" resizable></IgrGridLiteColumn>
  </IgrGridLite>
);

Si una columna está configurada para que sea redimensionable, puedes arrastrar el tamaño correcto de la cabecera de columna para aumentar o disminuir el ancho de la columna. Hacer doble clic en el área de redimensionamiento activará el autodimensionamiento de la columna, donde intentará establecer su ancho según el contenido más grande de sus celdas/encabezado.

[!NOTE] Columns with "fluid" widths (fr, %, etc.) can behave erratically when resizing in the grid is performed as they try to accommodate for the new dimensions. Depending on the application scenario, it may be better to use "hard" units so users don't experience layout shifts.

En el ejemplo siguiente puedes probar las diferentes propiedades de columna y cómo se reflejan en la cuadrícula renderizada.

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Grid Lite GitHub