Column Cell Template

By default, the grid uses the field of the column to render the value as a string inside the cell. This is fine for basic scenarios, but if you want to customize the rendered output or the final output is a combination of different data fields, you can customize the cell template.

Para lograrlo, se establece lacellTemplate propiedad de la columna.

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column[field="price"]');

// Set the cellTemplate property
column.cellTemplate = (params: IgcCellContext<T, K>) => { return html`<!-- template content -->`};

Use as a Formatter Function

Para el escenario sencillo en el que se requiere cierto formato, simplemente se puede devolver el valor formateado. Aquí tienes un ejemplo para mostrar un valor numérico en un formato de moneda local:

const { format: asCurrency } = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column');

// Return the custom currency formatted value
column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79"

You can combine values of different fields from the data source as well.

const { format: asCurrency } = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column');

// Return the custom currency formatted value
column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count);

Custom DOM Templates

Además de usar lacellTemplate propiedad como formateador de valores, también puedes crear tu propia plantilla DOM, que se renderizará dentro del contenedor de celdas.

Hemos decidido reutilizar la funcionalidad proporcionada por Lit y su sintaxis de plantilla etiquetada para construir fragmentos declarativos del DOM.

Puedes plantillar cualquier elemento DOM estándar, así como componentes web de otras librerías.

// Import the `html` tag function from the Lit package.
import { html } from "lit";

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column[field="rating"]');

// Use another web component to represent the `rating` value in the grid
column.cellTemplate = ({ value }) => html`<igc-rating readonly value=${value}></igc-rating>`;

Note

Ten en cuenta que cuanto más compleja y elaborada sea la plantilla, mayor será el coste de rendimiento. Evita estructuras complejas de DOM si el rendimiento es importante.

Cell Context Object

El renderizador de celdas personalizadas recibe unGridLiteCellContext objeto como parámetro con los siguientes props:

/**
 * Context object for the row cell template callback.
 */
export interface GridLiteCellContext<
  T extends object,
  K extends Keys<T> = Keys<T>
> {
  /**
   * The cell element parent of the template.
   */
  parent: GridLiteCell<T>;
  /**
   * The row element containing the cell.
   */
  row: GridLiteRow<T>;
  /**
   * The current configuration for the column.
   */
  column: ColumnConfiguration<T, K>;
  /**
   * The value from the data source for this cell.
   */
  value: PropertyType<T, K>;
}

Additional Resources

• Column Configuration
• Clasificación
• Filtración
• Tematización y estilismo

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

• Grid Lite GitHub