열 구성

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.

<igc-grid-lite .data=${data}>
  <igc-grid-lite-column
    field="account"
    header="Account Number"
    ...
  ></igc-grid-lite-column>
  <!-- Additional columns follow -->
</igc-grid-lite>

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 },
  ...
];

<igc-grid-lite auto-generate .data=${data}></igc-grid-lite>

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

<igc-grid-lite .data=${data}>
  <igc-grid-lite-column field="entryId" data-type="string"></igc-grid-lite-column>
  <igc-grid-lite-column field="source" data-type="string"></igc-grid-lite-column>
  <igc-grid-lite-column field="ts" data-type="number"></igc-grid-lite-column>
</igc-grid-lite>

추가 커스터마이징 없이 데이터를 빠르게 렌더링할 수 있어 유용합니다.

Additional Column Configuration

The column exposes several more properties for customization:

Column Width

기본적으로 열의 너비는 minmax(136px, 1fr)이며, 이는 최소 너비가 136px이고 Grid Lite 내 사용 가능한 공간의 최대 1부분을 의미합니다. 이렇게 하면 열이 유연하고 반응성이 높아 격자 폭 변화에 잘 맞춰집니다.

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

<igc-grid-lite-column field="price" width="250px"></igc-grid-lite-column>

이 속성은 유효한 CSS 길이 단위를 수용합니다.

Hiding columns

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

<igc-grid-lite-column field="price" hidden></igc-grid-lite-column>

Column resize

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

<igc-grid-lite-column field="price" resizable></igc-grid-lite-column>

열이 크기 조절 가능하도록 설정되어 있다면, 열 헤더의 적절한 크기를 드래그하여 열 너비를 늘리거나 줄일 수 있습니다. 크기 조정 영역을 더블클릭하면 열의 자동 크기 조정이 작동하며, 셀/헤더의 가장 큰 내용에 따라 너비를 설정하려고 합니다.

Note

"유체" 폭(fr, % 등)을 가진 열은 격자 크기 조정 시 새로운 치수를 맞추려 하면서 불규칙하게 동작할 수 있습니다. 적용 상황에 따라서는 사용자가 레이아웃 변화를 겪지 않도록 '하드' 유닛을 사용하는 것이 더 나을 수 있습니다.

아래 샘플에서 다양한 컬럼 속성과 그것들이 렌더링된 그리드에 어떻게 반영되는지 시도해 볼 수 있습니다.

Additional Resources

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

Grid Lite GitHub