React Tree Grid Conditional Styling

    The Ignite UI for React Conditional Styling feature in React Tree Grid allows custom styling on a row or cell level. The IgrTreeGrid Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.

    Tree Grid Conditional Row Styling

    The IgrTreeGrid component in Ignite UI for React provides two ways to conditional styling of rows based on custom rules.

    Further in this topic we will cover both of them in more details.

    Using Row Classes

    You can conditionally style the IgrTreeGrid rows by setting the rowClasses input and define custom rules.

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

    The rowClasses input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.

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

    Demo

    EXAMPLE
    DATA
    TSX
    CSS

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    Using Row Styles

    The IgrTreeGrid control exposes the rowStyles property which allows conditional styling of the data rows. Similar to rowClasses it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).

    The callback signature for both rowStyles and rowClasses is:

    (row: IgrRowType) => boolean
    tsx

    Let's define our styles:

    const rowStyles = {
        'background': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#6c757d' :
            row.data['Title'].includes('President') ?'#adb5bd' :
            row.data['Title'].includes('Director') ? '#ced4da' :
            row.data['Title'].includes('Manager') ? '#dee2e6' :
            row.data['Title'].includes('Lead') ? '#e9ecef' :
            row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
        'border-left': (row: IgrRowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
        'border-color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
        'color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#fff' : null
    };
    tsx
    <IgrTreeGrid autoGenerate="true" primaryKey="ID" foreignKey="ParentID" data={data} rowStyles={rowStyles}>
    </IgrTreeGrid>
    tsx

    Demo

    EXAMPLE
    DATA
    TSX
    CSS

    Tree Grid Conditional Cell Styling

    Ignite UI for React | CTA Banner

    Overview

    The IgrTreeGrid component in Ignite UI for React provides two ways to conditional styling of cells based on custom rules.

    • By setting the IgrColumn input cellClasses to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.

    Using Cell Classes

    You can conditionally style the IgrTreeGrid cells by setting the IgrColumn cellClasses input and define custom rules.

    <IgrColumn field="UnitPrice" header="Unit Price" dataType="currency" cellClasses={unitPriceCellClasses}>
    </IgrColumn>
    tsx

    The cellClasses input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.

    function upPriceCondition(rowData: any, columnKey: any): boolean {
        return rowData[columnKey] > 5;
    }
    
    function downPriceCondition(rowData: any, columnKey: any): boolean {
        return rowData[columnKey] <= 5;
    }
    
    const unitPriceCellClasses = {
        downPrice: downPriceCondition,
        upPrice: upPriceCondition
    };
    tsx
    .upPrice {
        color: red !important;
    }
    
    .downPrice {
        color: green !important;
    }
    css

    Demo

    EXAMPLE
    DATA
    TSX
    CSS

    • By using the IgrColumn input cellStyles which accepts an object literal where the keys are style properties and the values are expressions for evaluation.

    The callback signature for both cellStyles and cellClasses is now changed to:

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

    Using Cell Styles

    Columns expose the cellStyles property which allows conditional styling of the column cells. Similar to cellClasses it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).

    Let's define our styles:

    const webTreeGridCellStyles = {
        background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
        color: (rowData, columnKey, cellValue, rowIndex) => {
            if (columnKey === "UnitPrice") {
                if (cellValue > 10) return "#dc3545";
                if (cellValue < 5) return "#28a745";
                if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
            }
        }
    }
    tsx
    <IgrColumn cellStyles={webTreeGridCellStyles}></IgrColumn>
    tsx

    Demo

    EXAMPLE
    DATA
    TSX
    CSS

    Known issues and limitations

    • If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met.
    let backgroundClasses = {
        myBackground: (rowData: any, columnKey: string) => {
            return rowData.Col2 < 10;
        }
    };
    
    function editDone(grid, evt) {
        backgroundClasses = {...backgroundClasses};
    }
    
    <IgrTreeGrid 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>
    </IgrTreeGrid>
    tsx

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.