Tamaño de la cuadrícula React

The Ignite UI for React Size feature in React Grid allows users to control the spacing and layout of data within the IgrGrid. By changing --ig-size, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three size options:

• --ig-size-large
• --ig-size-medium
• --ig-size-small

React Ejemplo de tamaño de cuadrícula

Uso

Como puedes ver en la demo anterior, ofreceIgrGrid tres opciones de tamaño: pequeño, mediano y grande. El fragmento de código a continuación muestra cómo establecer--ig-size una clase en línea o parte de una clase CSS:

.gridSize {
    --ig-size: var(--ig-size-medium);
}

<IgrGrid className="gridSize"></IgrGrid>

Y ahora veamos en detalle cómo cada opción refleja elIgrGrid componente. Cuando cambias entre diferentes opciones de tamaño, la altura de cadaIgrGrid elemento y los rellenos correspondientes se modifican. Además, si quieres aplicar columnaswidth personalizadas, por favor considera que debe ser mayor que la suma del relleno izquierdo y derecho:

• grande: este es el tamaño por defectoIgrGrid con la intensidad más baja y la altura de fila iguales a.50px Los acolchones izquierdo y derecho son24px; La columnawidth mínima es80px;
• Media: es el tamaño medio intenso con40px altura de fila. Los acolchones izquierdo y derecho son16px; La columnawidth mínima es64px;
• Pequeña: es la talla con mayor intensidad y32px altura de fila. Los acolchones izquierdo y derecho son12px; La columnawidth mínima es56px;

[! Tenga en cuenta que actualmente no puede anular ninguno de los tamaños.

Ahora continuemos con nuestra muestra y veamos en acción cómo se aplica.--ig-size Primero añadimos un botón que nos ayudará a cambiar entre cada tamaño:

<IgrPropertyEditorPanel
    ref={propertyEditorRef}
    componentRenderer={renderer}
    target={grid}
    descriptionType="WebGrid"
    isHorizontal={true}
    isWrappingEnabled={true}>
    <IgrPropertyEditorPropertyDescription
        name="SizeEditor"
        label="Grid Size:"
        valueType="EnumValue"
        dropDownNames={["Small", "Medium", "Large"]}
        dropDownValues={["Small", "Medium", "Large"]}
        changed={webGridSetGridSize}>
    </IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>

Ahora podemos agregar el marcado.

<IgrGrid autoGenerate={false} ref={gridRef} data={invoicesData} allowFiltering={true}>
    <IgrColumn field="CustomerName" header="Customer Name" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="Country" header="Country" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="City" header="City" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="Address" header="Address" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="PostalCode" header="Postal Code" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="Salesperson" header="Sales Person" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="ShipperName" header="Shipper Name" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" dataType="date" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="ProductID" header="ID" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="ProductName" header="Name" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="UnitPrice" header="Unit Price" dataType="number" sortable={true} hasSummary={true} filterable={false}></IgrColumn>
    <IgrColumn field="Quantity" header="Quantity" dataType="number" sortable={true} hasSummary={true} filterable={false}></IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" dataType="boolean" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="ShipName" header="Name" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="ShipCountry" header="Country" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="ShipCity" header="City" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
    <IgrColumn field="ShipPostalCode" header="Postal Code" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
</IgrGrid>

Finalmente, proporcionemos la lógica necesaria para aplicar realmente el tamaño:

private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
        this.propertyEditor = r;
        this.setState({});
}
private sizeEditor: IgrPropertyEditorPropertyDescription
private grid: IgrGrid
private gridRef(r: IgrGrid) {
    this.grid = r;
    this.setState({});
}

constructor(props: any) {
    super(props);

    this.propertyEditorRef = this.propertyEditorRef.bind(this);
    this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
    this.gridRef = this.gridRef.bind(this);
}

private _componentRenderer: ComponentRenderer = null;
  public get renderer(): ComponentRenderer {
    if (this._componentRenderer == null) {
      this._componentRenderer = new ComponentRenderer();
      var context = this._componentRenderer.context;
      PropertyEditorPanelDescriptionModule.register(context);
      WebHierarchicalGridDescriptionModule.register(context);
    }
    return this._componentRenderer;
}

public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
    var newVal = (args.newValue as string).toLowerCase();
    var grid = document.getElementById("grid");
    grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}

Otra opción queIgrGrid te permite cambiar la altura de las filasIgrGrid es la propiedadrowHeight. Así que veamos en acción cómo esta propiedad afecta alIgrGrid diseño junto con el--ig-size.

Por favor tenga en cuenta lo siguiente:

• --ig-sizeLa variable CSS no tendrá impacto en la altura de la fila si serowHeight especifica.
• --ig-size will affect all of the rest elements in the Grid, as it has been described above.

Ahora podemos ampliar nuestra muestra y añadirrowHeight propiedades a:IgrGrid​

<IgrGrid className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering={true}></IgrGrid>

Referencias de API

• IgrGrid
• IgrColumn

Recursos adicionales

• Virtualización y rendimiento
• Edición
• Paginación
• Filtración
• Clasificación
• resúmenes
• Fijación de columnas
• Cambio de tamaño de columna
• Selección
• buscando

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

• Ignite UI for React Forums
• Ignite UI for React GitHub