Major overhaul of dash-ag-grid:

- bringing ag-grid from version v27.x to v29.x+
- added secondary `agGridEnterprise.react.js` as additional importing `ag-grid-enterprise` due to all-modules no longer supported
- updating props for breaking changes due to version update
- adding props for easier user / dash manipulation (enable... props ) for creating buttons
- removing `agGridColumns` due to deprecation and removal due to v29
- added `className` support for css customization native to ag-grid (removed hardcoded styling as well)
- added overarching `dangerously_allow_html` to grid props only provided at render, to keep `columnDefs` from receiving possible updates to show unsafe html
- added `data_previous` and `data_previous_timestamp` to allow for use with user change logs
- added `dashGridOptions` to allow for arbitrary use of props not explicitly listed
- added `setRowId` for allowing `rowData` change detection to work
- added prop `columnState` to allow for pulling the current state of the columns after user interaction, necessary for saving layouts outside of snapshots
- fixed issue where conditional formatting was not applied to nested columns
- fixed issue where columns would not take edits or adjustments due to becoming static
- updated `markdownRenderer.js` to use github markdown, and also have the ability to be passed a target for links, to avoid `dangerously_allow_html`
- updated `requirements.txt` to pull the latest packages

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dash_ag_grid",
-    "version": "1.3.1",
+    "version": "2.0.0",
     "description": "Dash wrapper around ag-grid",
     "repository": {
         "type": "git",
@@ -24,19 +24,19 @@
     "author": "Plotly <chris@plot.ly>",
     "license": "Commercial",
     "dependencies": {
-        "@ag-grid-community/all-modules": "^27.2.1",
-        "@ag-grid-community/core": "^27.2.1",
-        "@ag-grid-community/react": "~27.2.1",
-        "@ag-grid-enterprise/all-modules": "^27.2.1",
-        "@ag-grid-enterprise/core": "^27.2.1",
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
+        "ag-grid-community": ">=29.0.0",
+        "ag-grid-enterprise": ">=29.0.0",
+        "ag-grid-react": ">=29.0.0",
+        "dash": "^3.23.0",
         "esprima": "^4.0.1",
         "is-subset": "^0.1.1",
         "lodash.isequal": "^4.5.0",
         "ramda": "^0.26.1",
-        "react-markdown": "^6.0.2",
+        "react-markdown": "^8.0.4",
         "rehype-raw": "^5.1.0",
+        "remark-gfm": "^3.0.1",
         "static-eval": "^2.1.0"
     },
     "devDependencies": {
@@ -61,7 +61,7 @@
         "react-dom": "^16.8.6",
         "style-loader": "^0.23.1",
         "styled-jsx": "^3.2.1",
-        "webpack": "4.36.1",
+        "webpack": "^4.36.1",
         "webpack-cli": "3.3.6",
         "webpack-serve": "3.1.0"
     },

requirements.txt

@@ -1,8 +1,6 @@
-packages/dash_design_kit-1.6.6.tar.gz
-dash==2.0.0
-gunicorn==19.9.0
-dash-table==5.0.0
-pandas==1.2.3
-pyyaml==6.0
-dash-bootstrap-components==1.0.0
-dash-daq==0.5.0
+dash>=2.0.0
+gunicorn>=19.9.0
+pandas>=1.2.3
+pyyaml>=6.0
+dash-bootstrap-components>=1.0.0
+dash-daq>=0.5.0

src/DashAgGrid.jl

@@ -3,10 +3,9 @@ module DashAgGrid
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "1.3.1"
+const version = "2.0.0"
 
-include("jl/aggrid.jl")
-include("jl/aggridcolumn.jl")
+include("jl/''_aggrid.jl")
 
 function __init__()
     DashBase.register_package(

src/lib/LazyLoader.js

@@ -1,4 +1,6 @@
 export default {
     agGrid: () =>
         import(/* webpackChunkName: "dashaggrid" */ './fragments/AgGrid.react'),
+    agGridEnterprise: () =>
+        import(/* webpackChunkName: "dashaggrid" */ './fragments/AgGridEnterprise.react'),
 };

src/lib/components/AgGrid.react.js

@@ -4,24 +4,46 @@ import LazyLoader from '../LazyLoader';
 import React, {Component, lazy, Suspense} from 'react';
 
 const RealAgGrid = lazy(LazyLoader.agGrid);
+const RealAgGridEnterprise = lazy(LazyLoader.agGridEnterprise);
+
+function getGrid(enable) {
+    if (enable) {
+        return RealAgGridEnterprise
+    } else {
+        return RealAgGrid
+    }
+}
 
 export default class DashAgGrid extends Component {
+
     render() {
+        const {enableEnterpriseModules} = this.props
+
+        const RealComponent = getGrid(enableEnterpriseModules)
         return (
             <Suspense fallback={null}>
-                <RealAgGrid {...this.props} />
+                <RealComponent {...this.props} />
             </Suspense>
         );
     }
 }
 
 DashAgGrid.defaultProps = {
     style: {height: '400px', width: '100%'},
-    theme: 'alpine',
+    className: 'ag-theme-alpine',
     enableResetColumnState: false,
     enableExportDataAsCsv: false,
+    enableSelectAll: false,
+    enableSelectAllFiltered: false,
+    enableDeselectAll: false,
+    enableAutoSizeAllColumns: false,
+    enableAutoSizeAllColumnsSkipHeaders: false,
+    enableEnterpriseModules: false,
+    enableUpdateColumnDefs: false,
     persisted_props: ['selectionChanged'],
     persistence_type: 'local',
+    suppressDragLeaveHidesColumns: true,
+    dangerously_allow_html: false,
 };
 DashAgGrid.propTypes = {
     /********************************
@@ -39,14 +61,14 @@ DashAgGrid.propTypes = {
     setProps: PropTypes.func,
 
     /**
-     * The children of this component
+     * The CSS style for the component
      */
-    children: PropTypes.node,
+    style: PropTypes.object,
 
     /**
-     * The CSS style for the component
+     * The class for the ag-grid.  Can specify the ag-grid theme here.
      */
-    style: PropTypes.object,
+    className: PropTypes.string,
 
     /**
      * Used to allow user interactions in this component to be persisted when
@@ -77,6 +99,12 @@ DashAgGrid.propTypes = {
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
 
+
+    /**
+    * Enables the use of html for the whole table, this is required if wanting to turn on for columns
+    */
+    dangerously_allow_html: PropTypes.bool,
+
     /********************************
      * CUSTOM PROPS
      *******************************/
@@ -91,6 +119,59 @@ DashAgGrid.propTypes = {
      */
     enableExportDataAsCsv: PropTypes.bool,
 
+    /**
+     * If true, the internal method selectAll() will be called
+     */
+    enableSelectAll: PropTypes.bool,
+
+    /**
+     * If true, the internal method selectAllFiltered() will be called
+     */
+    enableSelectAllFiltered: PropTypes.bool,
+
+    /**
+     * If true, the internal method deselectAll() will be called
+     */
+    enableDeselectAll: PropTypes.bool,
+
+    /**
+     * If true, the internal method autoSizeAllColumns(false) will be called
+     */
+    enableAutoSizeAllColumns: PropTypes.bool,
+
+    /**
+     * If true, the internal method autoSizeAllColumns(true) will be called
+     */
+    enableAutoSizeAllColumnsSkipHeaders: PropTypes.bool,
+
+    /**
+     * If true, the internal method updateColumnDefs() will be called
+     */
+    enableUpdateColumnDefs: PropTypes.bool,
+
+    /**
+     * If true, the internal method deleteSelectedRows() will be called
+     */
+    enableDeleteSelectedRows: PropTypes.bool,
+
+    /**
+     * If true, the internal method addRows() will be called
+     */
+    enableAddRows: PropTypes.oneOfType([
+                PropTypes.bool, PropTypes.Object
+        ]),
+
+    /**
+    * This is required for change detection in rowData
+    */
+    setRowId: PropTypes.string,
+
+
+    /**
+     * Current state of the columns
+     */
+    columnState: PropTypes.array,
+
     /**
      * Object with properties to pass to the exportDataAsCsv() method
      */
@@ -172,7 +253,7 @@ DashAgGrid.propTypes = {
     columnSize: PropTypes.oneOf(['sizeToFit', 'autoSizeAll']),
 
     /**
-     * The ag-grid provided theme to use. More info here: https://www.ag-grid.com/javascript-grid/themes-provided/
+     * Use this with Dash Enterprise only.  Sets the ag-grid theme.  Use ddk for dark themes.
      */
     theme: PropTypes.oneOf(['alpine', 'balham', 'material', 'bootstrap']),
 
@@ -305,6 +386,7 @@ DashAgGrid.propTypes = {
      */
     columnDefs: PropTypes.any,
 
+
     /**
      * A default column definition.
      */
@@ -851,6 +933,16 @@ DashAgGrid.propTypes = {
      */
     rowData: PropTypes.any,
 
+    /**
+     * Snapshot of rowData before edits
+     */
+    data_previous: PropTypes.any,
+
+    /**
+     * Snapshot of rowData before edits -- timestamp
+     */
+    data_previous_timestamp: PropTypes.any,
+
     /**
      * (Client-Side Row Model only) Enables Immutable Data mode, for compatibility with
      * immutable stores.
@@ -1859,7 +1951,12 @@ DashAgGrid.propTypes = {
         PropTypes.oneOf(['columns', 'filters']),
         PropTypes.object,
     ]),
+
+    /**
+     * Other ag-grid options
+     */
+    dashGridOptions: PropTypes.object,
 };
 
 export const propTypes = DashAgGrid.propTypes;
-export const defaultProps = DashAgGrid.defaultProps;
+export const defaultProps = DashAgGrid.defaultProps;