More additional functions and security measures:

src/lib/components/AgGrid.react.js

@@ -158,7 +158,7 @@ DashAgGrid.propTypes = {
      * If true, the internal method addRows() will be called
      */
     enableAddRows: PropTypes.oneOfType([
-                PropTypes.bool, PropTypes.Object
+                PropTypes.bool, PropTypes.arrayOf(PropTypes.any)
         ]),
 
     /**
@@ -250,7 +250,7 @@ DashAgGrid.propTypes = {
     /**
      * Size the columns automatically or to fit their contents
      */
-    columnSize: PropTypes.oneOf(['sizeToFit', 'autoSizeAll']),
+    columnSize: PropTypes.oneOf(['sizeToFit', 'autoSizeAll', null]),
 
     /**
      * Use this with Dash Enterprise only.  Sets the ag-grid theme.  Use ddk for dark themes.
@@ -270,6 +270,19 @@ DashAgGrid.propTypes = {
         defaultStyle: PropTypes.object,
     }),
 
+    /**
+     * Object used to perform the row styling. See AG-Grid Row Style.
+     */
+    getRowStyle: PropTypes.shape({
+        styleConditions: PropTypes.arrayOf(
+            PropTypes.shape({
+                condition: PropTypes.string.isRequired,
+                style: PropTypes.object.isRequired,
+            })
+        ),
+        defaultStyle: PropTypes.object,
+    }),
+
     /**
      * Infinite Scroll, Datasource interface
      * See https://www.ag-grid.com/react-grid/infinite-scrolling/#datasource-interface

src/lib/fragments/AgGrid.react.js

@@ -6,6 +6,7 @@ import {propTypes, defaultProps} from '../components/AgGrid.react';
 
 import MarkdownRenderer from '../renderers/markdownRenderer';
 import RowMenuRenderer from '../renderers/rowMenuRenderer';
+import * as customFunctions from '../renderers/customFunctions';
 
 import 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
@@ -57,10 +58,12 @@ export default class DashAgGrid extends Component {
         this.onGridSizeChanged = this.onGridSizeChanged.bind(this);
         this.updateColumnWidths = this.updateColumnWidths.bind(this);
         this.handleDynamicCellStyle = this.handleDynamicCellStyle.bind(this);
+        this.handleDynamicRowStyle = this.handleDynamicRowStyle.bind(this);
         this.generateRenderer = this.generateRenderer.bind(this);
         this.resetColumnState = this.resetColumnState.bind(this);
         this.exportDataAsCsv = this.exportDataAsCsv.bind(this);
         this.setSelection = this.setSelection.bind(this);
+        this.parseParamFunction = this.parseParamFunction.bind(this);
 
         //Additional Exposure
         this.setUpCols = this.setUpCols.bind(this);
@@ -72,6 +75,7 @@ export default class DashAgGrid extends Component {
         this.deleteSelectedRows = this.deleteSelectedRows.bind(this);
         this.addRows = this.addRows.bind(this);
         this.getRowData = this.getRowData.bind(this);
+        this.fixCols = this.fixCols.bind(this);
 
         this.selectionEventFired = false;
 
@@ -93,20 +97,45 @@ export default class DashAgGrid extends Component {
         }
     }
 
+    fixCols(columnDef, templateMessage) {
+        const test = (base, target) => {
+            if (target in columnDef) {
+                if (!(columnDef['dangerously_allow_html']
+                        && this.state.dangerously_allow_html)) {
+                    if (typeof columnDef[target] !== 'function') {
+                        console.error({field: columnDef['field'], message: templateMessage})
+                        columnDef[target] = ''
+                    }
+                }
+            }
+            if (base in columnDef) {
+                const newFunc = (params) => this.parseParamFunction({params}, columnDef[base])
+                columnDef[target] = newFunc
+            }
+        }
+        if ("headerComponentParams" in columnDef) {
+            if ('template' in columnDef['headerComponentParams'] && !(columnDef['dangerously_allow_html']
+                        && this.state.dangerously_allow_html)) {
+                columnDef['headerComponentParams']['template'] = '<div></div>'
+                console.error({field: columnDef['field'], message: templateMessage})
+            }
+        }
+
+        test('valueGetterFunction','valueGetter')
+        test('valueFormatterFunction','valueFormatter')
+
+        return columnDef
+    }
+
     setUpCols(cellStyle) {
         const templateMessage = 'you are trying to use a dangerous element that could lead to XSS'
         if (this.props.columnDefs) {
             this.props.setProps(
                 {columnDefs: this.props.columnDefs.map((columnDef) => {
                     if ('children' in columnDef) {
                         columnDef['children'] = columnDef['children'].map((child) => {
-                                if ("headerComponentParams" in child) {
-                                    if ('template' in child['headerComponentParams'] && !(child['dangerously_allow_html']
-                                    && this.state.dangerously_allow_html)) {
-                                        child['headerComponentParams']['template'] = '<div></div>'
-                                        console.error({field: child['field'], message: templateMessage})
-                                    }
-                                }
+                                child = this.fixCols(child, templateMessage)
+
                                 if ('cellStyle' in child) {
                                     return child
                                 }
@@ -117,13 +146,9 @@ export default class DashAgGrid extends Component {
                                     }
                             })
                         }
-                    if ("headerComponentParams" in columnDef) {
-                        if ('template' in columnDef['headerComponentParams'] && !(columnDef['dangerously_allow_html']
-                                    && this.state.dangerously_allow_html)) {
-                            columnDef['headerComponentParams']['template'] = '<div></div>'
-                            console.error({field: columnDef['field'], message: templateMessage})
-                        }
-                    }
+
+                    columnDef = this.fixCols(columnDef, templateMessage)
+
                     if ('cellStyle' in columnDef) {
                         return columnDef
                     }
@@ -361,7 +386,7 @@ export default class DashAgGrid extends Component {
     }
 
     /**
-     * @params AG-Grid Cell Style rules attribute.
+     * @params AG-Grid Styles rules attribute.
      * See: https://www.ag-grid.com/react-grid/cell-styles/#cell-style-cell-class--cell-class-rules-params
      */
     handleDynamicCellStyle({params, cellStyle = {}}) {
@@ -382,6 +407,41 @@ export default class DashAgGrid extends Component {
         return defaultStyle ? defaultStyle : null;
     }
 
+    /**
+     * @params AG-Grid Styles rules attribute.
+     * See: https://www.ag-grid.com/react-grid/row-styles/#row-style-row-class--row-class-rules-params
+     */
+    handleDynamicRowStyle({params, getRowStyle = {}}) {
+        const {styleConditions, defaultStyle} = getRowStyle;
+
+        if (styleConditions && styleConditions.length > 0) {
+            for (const styleCondition of styleConditions) {
+                const {condition, style} = styleCondition;
+                const parsedCondition = esprima.parse(condition).body[0]
+                    .expression;
+
+                if (evaluate(parsedCondition, {...params})) {
+                    return style;
+                }
+            }
+        }
+
+        return defaultStyle ? defaultStyle : null;
+    }
+
+    parseParamFunction({params}, tempFunction) {
+        try {
+            const parsedCondition = esprima.parse(tempFunction).body[0]
+                    .expression;
+            const value = evaluate(parsedCondition, {...params, ...customFunctions, ...window.dashAgGridFunctions})
+            return value
+        } catch (err) {
+            console.log(err)
+        }
+        //const value = evaluate(parsedCondition, {...params})
+        return ''
+    }
+
     generateRenderer(Renderer) {
         const {setProps} = this.props;
 
@@ -478,6 +538,7 @@ export default class DashAgGrid extends Component {
         const {
             id,
             cellStyle,
+            getRowStyle,
             style,
             theme,
             className,
@@ -505,6 +566,11 @@ export default class DashAgGrid extends Component {
         }
 
         this.setUpCols(cellStyle)
+
+        let newRowStyle;
+        if (getRowStyle) {
+            newRowStyle = (params) => this.handleDynamicRowStyle({params, getRowStyle})
+        }
 
         const cols = [];
 
@@ -585,6 +651,7 @@ export default class DashAgGrid extends Component {
             >
                 <AgGridReact
                     getRowId={getRowId}
+                    getRowStyle={newRowStyle}
                     onGridReady={this.onGridReady}
                     onSelectionChanged={this.onSelectionChanged}
                     onCellClicked={this.onCellClicked}

src/lib/renderers/customFunctions.js

@@ -0,0 +1,3 @@
+export function Round(v, a=2) {
+    return Math.round(v * (10*a)) / (10*a)
+}