React 계층형 그리드 다중 열 헤더 개요

    React Hierarchical Grid의 Ignite UI for React 하면 공통된 다중 헤더 아래에 열을 배치하여 열을 그룹화할 수 있습니다. IgrHierarchicalGrid의 각 다중 열 헤더 그룹은 다른 그룹이나 열 간의 조합을 나타낼 수 있습니다. 이 기능은 가로로 스크롤하는 것이 번거로울 수 있는 대규모 데이터 세트를 처리할 때 특히 유용합니다.

    React 계층형 그리드 다중 열 헤더 예제

    EXAMPLE
    TSX
    CSS
    Edit in:

    다중 열 헤더의 선언은 제목 정보가 전달된 header 구성 요소로 columnGroup 열 집합을 래핑하여 수행됩니다.

    <IgrHierarchicalGrid autoGenerate={false} data={hierarchicalCustomers} ref={hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID" moving={true} allowFiltering={true}>
    <IgrColumn sortable={true} resizable={true} field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumnGroup header="Address Information">
        <IgrColumnGroup header="Location">
            <IgrColumn sortable={true} resizable={true} field="Address" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="City" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="PostalCode" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="Country" dataType="string"></IgrColumn>
        </IgrColumnGroup>
        <IgrColumnGroup header="Contact Information">
            <IgrColumn sortable={true} resizable={true} field="Phone" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="Fax" dataType="string"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrHierarchicalGrid>
tsx

    중첩된 헤더 수준을 달성 n-th 하려면 위의 선언을 따라야 합니다. 따라서 중첩 columnGroup을 통해 원하는 결과를 얻을 수 있습니다.

    <IgrHierarchicalGrid autoGenerate={false} data={hierarchicalCustomers} ref={hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID" moving={true} allowFiltering={true}>
    <IgrColumn sortable={true} resizable={true} field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumnGroup header="General Information">
        <IgrColumn sortable={true} resizable={true} field="CompanyName" dataType="string"></IgrColumn>
        <IgrColumnGroup header="Person Details">
            <IgrColumn sortable={true} resizable={true} field="ContactName" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="ContactTitle" dataType="string"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrHierarchicalGrid>
tsx

    모든 것은 columnGroup 이동, 고정 및 숨기기​를 지원합니다.

    일련의 열 및 열 그룹이 있는 경우 고정은 최상위 열 상위 항목에 대해서만 작동합니다. 보다 구체적으로 중첩된 열 그룹 또는 열별로 고정하는 것은 허용되지 않습니다. 열과 열 그룹 간 이동은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 열/열 그룹이 현재 그룹으로 래핑되지 않은 경우(즉, 최상위 열임을 의미) 표시되는 전체 열 간에 이동이 허용됩니다.

    <IgrHierarchicalGrid autoGenerate={false} data={hierarchicalCustomers} ref={hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID" moving={true} allowFiltering={true}>
    <IgrColumn sortable={true} resizable={true} movable={true} pinned={true} field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumnGroup movable={true} pinned={true} header="General Information">
        <IgrColumn sortable={true} resizable={true} field="CompanyName" dataType="string"></IgrColumn>
        <IgrColumnGroup header="Person Details">
            <IgrColumn sortable={true} resizable={true} field="ContactName" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="ContactTitle" dataType="string"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrHierarchicalGrid>
tsx

    다중 열 헤더 템플릿

    <IgrColumnGroup header="Contact Information" headerTemplate={groupHeaderTemplate}></IgrColumnGroup>
tsx
    const groupHeaderTemplate = (e: IgrColumnTemplateContext) => {
  const column = e.column as IgrColumnGroup;
  return (
    <div>
      <span style={{ float: "left" }}>{column.header.toUpperCase()}</span>
    </div>
  );
}
tsx

    헤더가 다시 템플릿화되고 해당 열 그룹이 이동 가능한 경우 템플릿 요소에서 draggable 속성을 false로 설정해야 적용되는 모든 이벤트를 처리할 수 있습니다!

    const columnHeaderTemplate = (e: IgrColumnTemplateContext ) => {
  const column = e.column as IgrColumnGroup;
  return (
    <span onClick={onClick}>
      <IgrIcon data-draggable="false"></IgrIcon>
    </span>
  );
}
tsx

    다음 샘플은 헤더 템플릿을 사용하여 축소 가능한 열 그룹을 구현하는 방법을 보여줍니다.

    EXAMPLE
    TSX
    CSS
    Edit in:

    스타일링

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>
tsx

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

    .grid {
    --ig-grid-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
css

    데모

    EXAMPLE
    TSX
    CSS
    Edit in:

    API 참조

    추가 리소스

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