React Grid 조건부 스타일링

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

    Grid Conditional Row Styling

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

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

    Using Row Classes

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

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

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

    const rowClasses = {
    activeRow: (row: IgrRowType) => row.index === 0
}

    .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}

    Demo

    Using Row Styles

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

    The callback signature for both rowStyles and rowClasses is:

    (row: IgrRowType) => boolean

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

    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'
};

    <IgrGrid id="grid" height="600px" width="100%" rowStyles={rowStyles}>
<IgrGrid>

    Demo

    Grid Conditional Cell Styling

    개요

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

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

    Using Cell Classes

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

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

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

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

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

const beatsPerMinuteClasses = {
    downFont: downFontCondition,
    upFont: upFontCondition
};

    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

    Demo

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

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

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

    Using Cell Styles

    열은 열 셀의 조건부 스타일 지정을 허용하는 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"
            }
        }
    }
}

    <IgrColumn cellStyles={webGridCellStyles}></IgrColumn>

    Demo

    Known issues and limitations

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

const editDone = (event: IgrGridEditEventArgs) => {
    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>

    API References

    Additional Resources

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