Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Styling Missing and Module Registration Errors in AG Grid v1.1.0 #304

Open
tTerranovae opened this issue Feb 14, 2025 · 0 comments
Open

Comments

@tTerranovae
Copy link

Describe the bug
The styling is missing from the AG Grid table after upgrading to version 1.1.0. The following error appears in the console:

[Error] AG Grid: error #200 (2)
  "Unable to use sideBar as SideBarModule is not registered. Check if you have registered the module:  
  import { ModuleRegistry } from 'ag-grid-community';   
  import { SideBarModule } from 'ag-grid-enterprise';  
ModuleRegistry.registerModules([ SideBarModule ]);
For more info see: [https://www.ag-grid.com/react-data-grid/modules/"](https://www.ag-grid.com/react-data-grid/modules/%22)
  "  
  See [https://www.ag-grid.com/react-data-grid/errors/200?_version_=33.0.3&gridId=1&gridScoped=false&rowModelType=clientSide&moduleName=SideBar&reasonOrId=sideBar"](https://www.ag-grid.com/react-data-grid/errors/200?_version_=33.0.3&gridId=1&gridScoped=false&rowModelType=clientSide&moduleName=SideBar&reasonOrId=sideBar%22)  
  Ke (main.10356bea.js:2:296814)  
  Xe (main.10356bea.js:2:297260)  
  at (main.10356bea.js:2:298436)  
  gt (main.10356bea.js:2:299658)  
  assertModuleRegistered (main.10356bea.js:2:890967)  
  (anonymous function) (main.10356bea.js:2:1030051)  
  forEach  
  (anonymous function) (main.10356bea.js:2:1030014)  
  forEach  
  processOptions (main.10356bea.js:2:1029248)  
  processGridOptions (main.10356bea.js:2:1023947)  
  postConstruct (main.10356bea.js:2:1023821)  
  forEach  
  initBeans (main.10356bea.js:2:350074)  
  init (main.10356bea.js:2:349655)  
  init (main.10356bea.js:2:350744)  
  yo (main.10356bea.js:2:349173)  
  bo  
  create (main.10356bea.js:2:947701)  
  (anonymous function) (main.10356bea.js:2:1313986)  
  ol (main.10356bea.js:2:228502)  
  Cl (main.10356bea.js:2:236584)  
  bl (main.10356bea.js:2:235526)  
  yl (main.10356bea.js:2:235062)  
  (anonymous function) (main.10356bea.js:2:246899)  
  xd (main.10356bea.js:2:247412)  
  od (main.10356bea.js:2:239872)  
  w (main.10356bea.js:2:266003)  
  E (main.10356bea.js:2:266537)  
  [Warning] AG Grid: As of version 32.2.1, using `rowSelection` with the values "single" or "multiple" has been deprecated. Use the object value instead. (main.10356bea.js, line 2)  
  [Warning] AG Grid: As of v32.2, rowMultiSelectWithClick is deprecated. Use `rowSelection.enableSelectionWithoutKeys` instead. (main.10356bea.js, line 2)  
  [Warning] AG Grid: As of v32.2, suppressRowDeselection is deprecated. Use `rowSelection.enableClickSelection` instead. (main.10356bea.js, line 2)  
  [Warning] AG Grid: As of v32.2, suppressRowClickSelection is deprecated. Use `rowSelection.enableClickSelection` instead. (main.10356bea.js, line 2)  
  [Warning] AG Grid: As of v32.2, groupSelectsChildren is deprecated. Use `rowSelection.groupSelects = "descendants"` instead. (main.10356bea.js, line 2)  
  [Warning] AG Grid: As of v32.2, groupSelectsFiltered is deprecated. Use `rowSelection.groupSelects = "filteredDescendants"` instead. (main.10356bea.js, line 2)  
  [Warning] AG Grid: invalid colDef property 'groupable' did you mean any of these: headerGroupComponent, headerGroupComponentParams, rowGroupIndex, initialRowGroupIndex, headerCheckboxSelectionCurrentPageOnly, columnGroupShow, groupId, floatingFilterComponentParams. (main.10356bea.js, line 2)  
  If you are trying to annotate colDef with application data, use the 'colDef.context' property instead.  
  [Warning] AG Grid: to see all the valid colDef properties please check: https://www.ag-grid.com/react-data-grid/column-properties/ (main.10356bea.js, line 2)  
  [Warning] AG Grid: error #36 – "colDef.type 'textColumn' does not correspond to defined gridOptions.columnTypes" – "↵See [https://www.ag-grid.com/react-data-grid/errors/36?_version_=33.0.3&t=textColumn"](https://www.ag-grid.com/react-data-grid/errors/36?_version_=33.0.3&t=textColumn%22) (main.10356bea.js, line 2)  
  "  
  See [https://www.ag-grid.com/react-data-grid/errors/36?_version_=33.0.3&t=textColumn"](https://www.ag-grid.com/react-data-grid/errors/36?_version_=33.0.3&t=textColumn%22)  
  [Log] Attached grid return event cellValueChanged (main.10356bea.js, line 2)  
  [Log] Attached grid return event selectionChanged (main.10356bea.js, line 2)  
  [Log] Attached grid return event filterChanged (main.10356bea.js, line 2)  
  [Log] Attached grid return event sortChanged (main.10356bea.js, line 2)  
  [Error] AG Grid: error #200 (2)  
  "Unable to use api.forEachDetailGridInfo as MasterDetailModule is not registered. Check if you have registered the module:  
  import { ModuleRegistry } from 'ag-grid-community';   
  import { MasterDetailModule } from 'ag-grid-enterprise';

Additionally, there are warnings related to deprecated properties such as rowSelection, groupSelectsChildren, and groupSelectsFiltered.

To Reproduce
Steps to reproduce the behavior:

  1. Upgrade to version 1.1.0 of the AG Grid package.
  2. Implement a basic AG Grid table with some rows and columns.
  3. Observe that the table styling is missing.
  4. Check the browser console and note the errors and warnings.

Expected behavior
The table should render correctly with the appropriate styling, and no errors or warnings should appear in the console.

live code

def create_table(df):
    """
    Create a table to display integrations
    :param df: List of integrations
    :param session_id: Session ID
    :param data: Data

    """

    gb = GridOptionsBuilder.from_dataframe(df)
    gb.configure_selection(selection_mode="single", use_checkbox=False)
    gb.configure_pagination(
        paginationAutoPageSize=False, paginationPageSize=5
    )
    gb.configure_default_column(editable=False, groupable=True)
    gb.configure_pagination(paginationPageSize=20)
    gb.configure_column("context_key", hide=True)
    gridOptions = gb.build()

    custom_css = {
        ".ag-row:nth-child(even)": {
            "background-color": "#f2f2f2"  # Light gray for even rows
        },
        ".ag-row:nth-child(odd)": {"background-color": "#ffffff"},  # White for odd rows
    }

    # Calculate the height of the grid
    num_rows = len(df)
    grid_height = 120 + min(5, num_rows) * 60
    return gridOptions, custom_css, grid_height


grid_options, custom_css, grid_height = create_table(df)
selection = AgGrid(
                        _data,
                        gridOptions=grid_options,
                        enable_enterprise_modules=False,
                        theme="material",
                        height=grid_height,
                        update_mode=GridUpdateMode.MODEL_CHANGED,
                        fit_columns_on_grid_load=True,
                    )

Additional context
The error indicates that required AG Grid modules (like SideBarModule and MasterDetailModule) are not registered, leading to a failure in the rendering of the table's features. The deprecation warnings may also point to other issues in the configuration that need to be addressed.
Currently i rolled back to version 1.0.5 and there is no issue. I am using streamlit version: ^1.42.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant