React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS DataTable demo. The sample illustrates how to add custom CSS styles to DataTable cells under specific conditions.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS DataTable demo. The sample illustrates how to add custom CSS styles to DataTable cells under specific conditions.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>

    <style>
        .max {
            color: black\9;
            background-color: #63be7b\9;
        }

        .avg {
            color: black\9;
            background-color: #f8e984\9;
        }

        .minavg {
            color: black\9;
            background-color: #f9806f\9;
        }

        .min {
            color: black\9;
            background-color: #f8696b\9;
        }

        .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #63be7b;
        }

        .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #f8e984;
        }

        .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #f9806f;
        }

        .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #f8696b;
        }
    </style>

</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS DataTable demo. The sample illustrates how to add custom CSS styles to DataTable cells under specific conditions.
    </div>
    <div id="app"></div>
    <script src="../build/datatable_conditionalformatting.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxDataTable from '../../../jqwidgets-react/react_jqxdatatable.js';class App extends React.Component {
    render() {
        let source =
            {
                dataType: 'xml',
                dataFields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: 'Products',
                record: 'Product',
                id: 'ProductID',
                url: '../sampledata/products.xml'
            };

        let dataAdapter = new $.jqx.dataAdapter(source);

        let cellClass = (row, dataField, cellText, rowData) => {
            let cellValue = rowData[dataField];
            switch (dataField) {
                case 'QuantityPerUnit':
                    if (cellValue < 11) {
                        return 'min';
                    }
                    if (cellValue < 14) {
                        return 'minavg';
                    }
                    if (cellValue < 50) {
                        return 'avg';
                    }
                    return 'max';
                case 'UnitPrice':
                    if (cellValue < 20) {
                        return 'min';
                    }
                    if (cellValue < 30) {
                        return 'minavg';
                    }
                    if (cellValue < 50) {
                        return 'avg';
                    }
                    return 'max';
                case 'UnitsInStock':
                    if (cellValue < 20) {
                        return 'min';
                    }
                    if (cellValue < 30) {
                        return 'minavg';
                    }
                    if (cellValue < 50) {
                        return 'avg';
                    }
                    return 'max';
            }
        }

        let columns =
            [
                { text: 'Product Name', dataField: 'ProductName', width: 200 },
                { text: 'Quantity per Unit', dataField: 'QuantityPerUnit', cellClassName: cellClass, cellsAlign: 'right', align: 'right', width: 200 },
                { text: 'Unit Price', dataField: 'UnitPrice', align: 'right', cellClassName: cellClass, cellsAlign: 'right', cellsformat: 'c2', width: 200 },
                { text: 'Units In Stock', dataField: 'UnitsInStock', cellsAlign: 'right', width: 250, align: 'right', cellClassName: cellClass }
            ];

        return (
            <JqxDataTable
                width={850} source={dataAdapter} altRows={true}
                pageable={true} sortable={true} enableHover={false}
                columns={columns} selectionMode={'none'}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));