React 계층형 그리드 조건부 스타일링

    React Hierarchical Grid의 Ignite UI for React Conditional Styling 기능을 사용하면 행 또는 셀 수준에서 사용자 지정 스타일을 지정할 수 있습니다. 이 IgrHierarchicalGrid 조건부 스타일 기능은 특정 조건을 충족하는 데이터를 시각적으로 강조하거나 강조 표시하는 데 사용되어 사용자가 그리드 내에서 중요한 정보나 추세를 쉽게 식별할 수 있도록 합니다.

    계층적 그리드 조건부 행 스타일 지정

    이 IgrHierarchicalGrid Ignite UI for React의 구성 요소는 다음 두 가지 방법을 제공합니다. 행의 조건부 스타일 지정 사용자 지정 규칙을 기반으로 합니다.

    이 주제에서는 두 가지 모두에 대해 더 자세히 다룰 것입니다.

    행 클래스 사용

    입력을 설정하고 사용자 지정 규칙을 정의하여 조건부로 행의 IgrHierarchicalGrid​ ​rowClasses 스타일을 지정할 수 있습니다.

    <IgrHierarchicalGrid id="grid" height="600px" width="100%" rowClasses={rowClasses}>
</IgrHierarchicalGrid>
tsx

    ​rowClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.

    const rowClasses = {
    activeRow: (row: IgrRowType) => row.index === 0
}
tsx
    .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}
css

    데모

    EXAMPLE
    TSX
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    행 스타일 사용

    이 컨트롤은 IgrHierarchicalGrid 데이터 행의 rowStyles 조건부 스타일을 허용하는 속성을 노출합니다. 이와 유사하게 rowClasses, 키는 스타일 속성이고 값은 평가를 위한 표현식인 객체 리터럴을 허용합니다. 또한 조건 없이 일반 스타일을 적용할 수 있습니다.

    The callback signature for both rowStyles and rowClasses is:

    (row: IgrRowType) => boolean
tsx

    스타일을 정의해 보겠습니다.

    const rowStyles = {
    background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
    'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
};

const childRowStyles = {
    'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
typescript
    <IgrHierarchicalGrid autoGenerate={true} rowStyles={rowStyles}
        height="580px" width="100%">
        <IgrRowIsland childDataKey="Albums" autoGenerate={true} rowStyles={childRowStyles}>
        </IgrRowIsland>
</IgrHierarchicalGrid>
tsx

    데모

    EXAMPLE
    TSX
    CSS
    Edit in:

    계층적 그리드 조건부 셀 스타일 지정

    Ignite UI for React | CTA 배너

    개요

    이 IgrHierarchicalGrid Ignite UI for React의 구성 요소는 다음 두 가지 방법을 제공합니다. 셀의 조건부 스타일 지정 사용자 지정 규칙을 기반으로 합니다.

    • ​IgrColumn 입력 cellClasses 키-값 쌍을 포함하는 객체 리터럴로 설정합니다. 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다. 그 결과 셀의 편리한 소재 스타일링이 이루어졌습니다.

    셀 클래스 사용

    를 설정하여 조건부로 셀의 IgrHierarchicalGrid 스타일을 지정할 수 있습니다. IgrColumn ​ ​cellClasses 사용자 지정 규칙을 입력하고 정의합니다.

    <IgrColumn field="BeatsPerMinute" dataType="number" cellClasses={grammyNominationsCellClassesHandler}></IgrColumn>
tsx

    ​cellClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.

    const grammyNominationsCellClassesHandler = {
    downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5,
    upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
};
tsx
    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}
css

    데모

    EXAMPLE
    TSX
    CSS
    Edit in:

    • 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용하는 IgrColumn 입력 cellStyles 사용합니다.

    이제 cellStyles 및 cellClasses에 대한 콜백 서명이 다음으로 변경되었습니다.

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
ts

    셀 스타일 사용

    열은 열 셀의 조건부 스타일 지정을 허용하는 cellStyles 속성을 노출합니다. cellClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 아무런 조건 없이 일반 스타일링을 쉽게 적용할 수 있습니다.

    스타일을 정의해 보겠습니다.

    const cellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Debut") {
            return cellValue > 2000 ? "#28a745" : "#dc3545";
        }
        return undefined;
    }
}
tsx
    <IgrColumn cellStyles={cellStylesHandler}></IgrColumn>
tsx

    데모

    EXAMPLE
    TSX
    CSS
    Edit in:

    알려진 문제 및 제한 사항

    • 동일한 조건(다른 열의)에 바인딩된 셀이 있고 하나의 셀이 업데이트되는 경우 조건이 충족되면 다른 셀은 새 값을 기반으로 업데이트되지 않습니다.
    const backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

const editDone = (event: IgrGridEditEventArgs) => {
    backgroundClasses = {...backgroundClasses};
}

<IgrHierarchicalGrid id="grid1" height="500px" width="100%" onCellEdit={editDone}>
  <IgrColumn id="Col1" field="Col1" dataType="number" cellClasses={backgroundClasses}></IgrColumn>
  <IgrColumn id="Col2" field="Col2" dataType="number" editable={true} cellClasses={backgroundClasses}></IgrColumn>
  <IgrColumn id="Col3" field="Col3" header="Col3" dataType="string" cellClasses={backgroundClasses}></IgrColumn>
</IgrHierarchicalGrid>
tsx

    API 참조

    추가 리소스

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