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.

이를 위해 열의 속성을 설정cellTemplate 하세요.

// 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

간단한 서식이 필요한 경우에는 서식화된 값을 반환하면 됩니다. 다음은 지역 통화 형식으로 숫자 값을 표시하는 예시입니다:

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

이 속성을 값 포맷터로 사용하는cellTemplate 것 외에도, 셀 컨테이너 내에서 렌더링되는 자신만의 DOM 템플릿을 만들 수도 있습니다.

우리는 Lit과 그 태그가 있는 템플릿 구문을 선언적 DOM 프래그먼트 구축에 재사용하기로 결정했습니다.

표준 DOM 요소나 다른 라이브러리의 웹 컴포넌트도 템플릿으로 만들 수 있습니다.

// 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] Keep in mind the more complex and involved the template is, the greater the performance cost. Avoid complex DOM structures if performance is important.

Cell Context Object

커스텀 셀 렌더러는 다음과 같은 소품을 가진 매개변수로 객체를 전달GridLiteCellContext 합니다:

/**
 * 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

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Grid Lite GitHub