React Grid 조건부 스타일링

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

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

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

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

    행 클래스 사용

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

    <IgrGrid id="grid" height="600px" width="100%" rowClasses={rowClasses}>
</IgrGrid>
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 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    행 스타일 사용

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

    The callback signature for both rowStyles and rowClasses is:

    (row: IgrRowType) => boolean
tsx

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

    const rowStyles = {
    'background': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
    'border': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
    'border-color': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
};
tsx
    <IgrGrid id="grid" height="600px" width="100%" rowStyles={rowStyles}>
<IgrGrid>
tsx

    데모

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

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

    Ignite UI for React | CTA 배너

    개요

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

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

    셀 클래스 사용

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

    <IgrColumn field="BeatsPerMinute" dataType="Number" cellClasses={beatsPerMinuteClasses}></IgrColumn>
tsx

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

    function upFontCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] > 95;
}

function downFontCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] <= 95;
}

const beatsPerMinuteClasses = {
    downFont: downFontCondition,
    upFont: upFontCondition
};
tsx
    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}
css

    데모

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

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

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

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

    셀 스타일 사용

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

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

    const webGridCellStyles = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Position") {
            switch (cellValue) {
                case "up": return "#28a745";
                case "down": return "#dc3545";
                case "current": return "#17a2b8"
            }
        }
    }
}
tsx
    <IgrColumn cellStyles={webGridCellStyles}></IgrColumn>
tsx

    데모

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    알려진 문제 및 제한 사항

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

function editDone(grid, evt) {
    backgroundClasses = {...backgroundClasses};
}

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

    API 참조

    추가 리소스

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