Add a themes module for external stylesheet usage

Author: KoolADE85

.gitignore

@@ -4,6 +4,8 @@
 # Build artifacts
 dash_ag_grid/*
 !dash_ag_grid/__init__.py
+!dash_ag_grid/_version.py
+!dash_ag_grid/themes.py
 R/
 deps/
 man/

dash_ag_grid/__init__.py

@@ -9,21 +9,18 @@
 # noinspection PyUnresolvedReferences
 from ._imports_ import *
 from ._imports_ import __all__
+from dash_ag_grid import themes
 
 if not hasattr(_dash, '__plotly_dash') and not hasattr(_dash, 'development'):
     print('Dash was not successfully imported. '
           'Make sure you don\'t have a file '
           'named \n"dash.py" in your current directory.', file=_sys.stderr)
     _sys.exit(1)
 
-_basepath = _os.path.dirname(__file__)
-_filepath = _os.path.abspath(_os.path.join(_basepath, 'package-info.json'))
-with open(_filepath) as f:
-    package = json.load(f)
+from ._version import __version__, grid_version, get_package_info
 
+package = get_package_info()
 package_name = package['name'].replace(' ', '_').replace('-', '_')
-__version__ = package['version']
-grid_version = package['dependencies']['ag-grid-community']
 
 _current_path = _os.path.dirname(_os.path.abspath(__file__))
 

dash_ag_grid/_version.py

@@ -0,0 +1,12 @@
+import json
+import os
+
+def get_package_info():
+    basepath = os.path.dirname(__file__)
+    filepath = os.path.abspath(os.path.join(basepath, 'package-info.json'))
+    with open(filepath) as f:
+        return json.load(f)
+
+package = get_package_info()
+__version__ = package['version']
+grid_version = package['dependencies']['ag-grid-community']

dash_ag_grid/themes.py

@@ -0,0 +1,9 @@
+from ._version import grid_version
+
+_base_url = f"https://cdn.jsdelivr.net/npm/ag-grid-community@{grid_version}/styles"
+
+BASE = f"{_base_url}/ag-grid.min.css"
+ALPINE = f"{_base_url}/ag-theme-alpine.min.css"
+BALHAM = f"{_base_url}/ag-theme-balham.min.css"
+MATERIAL = f"{_base_url}/ag-theme-material.min.css"
+QUARTZ = f"{_base_url}/ag-theme-quartz.min.css"

src/lib/components/AgGrid.react.js

@@ -57,7 +57,7 @@ function DashAgGrid(props) {
 DashAgGrid.dashRenderType = true;
 
 DashAgGrid.defaultProps = {
-    className: 'ag-theme-alpine',
+    className: '',
     resetColumnState: false,
     exportDataAsCsv: false,
     selectAll: false,

tests/examples/themes_legacy.py

@@ -7,7 +7,7 @@
 legacy theme in action.
 """
 
-app = Dash(__name__, assets_folder="assets_legacy_themes/")
+app = Dash(__name__, external_stylesheets=[dag.themes.BASE, dag.themes.MATERIAL])
 
 rowData = [
     {"weight": 0.074657, "date": "01/01/2024"},
@@ -17,8 +17,8 @@
 ]
 
 columnDefs = [
-    {"field": "weight", "cellDataType": "percentage"},
-    {"field": "date", "cellDataType": "dateString"},
+    {"field": "weight"},
+    {"field": "date"},
 ]
 
 app.layout = html.Div(

tests/test_user_style.py

@@ -41,6 +41,7 @@ def test_us001_user_style(dash_duo):
                 defaultColDef=defaultColDef,
                 rowData=rowData,
                 style={"height": "500px", "width": "500px"},
+                className="ag-theme-alpine",
             ),
         ]
     )