search

zauberzeug / nicegui

Create web-based user interfaces with Python. The nice way.
https://nicegui.io
MIT License
9.79k stars 580 forks source link

AG Grid: Text field in a row is not visible if a previous row has a certain content (here ISO 8601 date) #1860

Closed rhkarls closed 1 year ago

rhkarls commented 1 year ago

Description

This might be a symptom of something else, and not limited to the title and the case here. There is some strange behavior with ui.aggrid when a row contains a string with a yyyy-mm-dd format.

The issue does not appear with for example: 2020-01, 20-01-01, words-with-hyphens, but it does appear with 2020-01-01-01.

Using version 1.3.17

from nicegui import ui
import pandas as pd

df1 = pd.DataFrame({'ColumnId': {0: 1, 1: 2, 2:3},
       'ColumnName': {0: 'SomeName', 1: 'AnotherName', 2: 'YetAnotherName'},
       'Comment': {0: 'Comment with a date 2020-01-01', 1: 'Another comment', 2: 'On more normal comment'}})

df2 = pd.DataFrame({'ColumnId': {0: 1, 1: 2, 2:3},
       'ColumnName': {0: 'SomeName', 1: 'AnotherName', 2: 'YetAnotherName'},
       'Comment': {0: 'Comment with different format 20-01-01', 1: 'Another comment', 2: 'On more normal comment'}})

grid1 = ui.aggrid.from_pandas(df1)
grid2 = ui.aggrid.from_pandas(df2)

ui.run()

image

falkoschindler commented 1 year ago

Crazy! Thanks for spotting this, @rhkarls!

We don't even need pandas to reproduce this issue:

ui.aggrid({
    'columnDefs': [{'field': 'id'}, {'field': 'comment'}],
    'rowData': [
        {'id': 1, 'comment': 'Comment with a date 2020-01-01'},
        {'id': 2, 'comment': 'Another comment'},
        {'id': 3, 'comment': 'On more normal comment'},
    ],
})

But with plain HTML the grid renders correctly:

<html>
  <head>
    <title>Ag Grid App</title>
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css" />
  </head>
  <body>
    <div id="myGrid" class="ag-theme-alpine"></div>
    <script type="text/javascript">
      new agGrid.Grid(document.getElementById("myGrid"), {
        columnDefs: [{ field: "id" }, { field: "comment" }],
        rowData: [
          { id: 1, comment: "Comment with a date 2020-01-01" },
          { id: 2, comment: "Another comment" },
          { id: 3, comment: "On more normal comment" },
        ],
      });
    </script>
  </body>
</html>
natankeddem commented 1 year ago

@falkoschindler If you normalize to the version of aggrid that ships currently, the problem is visible:

<html>
  <head>
    <title>Ag Grid App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/30.0.3/ag-grid-community.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"
    />
  </head>
  <body>
    <div id="myGrid" class="ag-theme-alpine"></div>
    <script type="text/javascript">
      new agGrid.Grid(document.getElementById("myGrid"), {
        columnDefs: [{ field: "id" }, { field: "comment" }],
        rowData: [
          { id: 1, comment: "Comment with a date 2020-01-01" },
          { id: 2, comment: "Another comment" },
          { id: 3, comment: "On more normal comment" },
        ],
      });
    </script>
  </body>
</html>

Updating to the latest, seems to fix it as you saw.

rodja commented 1 year ago

Oh great! We'll update dependencies for the upcoming 1.4 release.