[REF-2738] Data table does not overflow

[murdak]

Describe the bug When using a long column (>30), data table does not overflow and fits table to page.

To Reproduce Steps to reproduce the behavior: Create a data table with the column attribute set with a list of more than 30 elements.

rx.data_table( columns=["ID", "Name", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31" ], data=[ ['0001', 'name1', '5:00 am'], ['0002', 'name2', "6:00 am, 4:00 pm", "6:00 am", "6:00 am, 4:00 pm", "6:00 am, 4:00 pm",],], ),

Expected behavior Data table overflows and shows data properly.

Screenshots If applicable, add screenshots to help explain your problem.

Specifics (please complete the following information):

• Python Version: 3.11.4
• Reflex Version: 0.3.7
• OS: linux
• Browser (Optional): firefox

Additional context Add any other context about the problem here. none

_{From SyncLinear.com | REF-2738}

[murdak]

https://gist.github.com/murdak/e80cceb1306a9b46694b1a259e2162be

[tankztz]

I can reproduce this issue. But still don't know the root cause.

Somehow the "min-width" and "width" are missing from the table head column. Our compiled JS code is correct and is same as the sample where I tested and works properly. https://gridjs.io/docs/integrations/react

I can provide a workaround: I found adding a pagination can fix it - sometimes

[justicho]

Hello! My team(for class) would like to look into this issue and hopefully find the root cause. If you guys have any tips, that would be greatly appreciated!

[picklelo]

@justicho sounds great! The component is based on the GridJS React component under the hood, so a good place to start may be to see how to achieve this in GridJS. Then it should be easy to make the necessary changes in Reflex.

[justicho]

Unfortunately, we also weren't able to implement any changes due to our lack of time. But from what we’ve gathered, it seems that Reflex does indeed lack explicit min-width/width handling, which is crucial for correct display. Further recommended steps would be inspecting applied CSS in the browser when compiling the OG code and potentially extending datatable.py in the GridJS component of Reflex for explicit column width control, considering how Reflex translates Python properties to Grid.js configurations. And a big thank you to “picklelo” and “tankztz” for the help/advice!

[Shuxley-jones]

Experiencing the same issue, attempting to display a pandas pivot table (3 columns represented per hour, so up to 36 total columns in a typical day for my project). GridJS has an "autoWidth: true" for wide tables, which doesn't seem to apply to the Reflex component as we don't get the horizontal scroll bar.

Edit: I checked the page .js file in .web/pages and the DataTableGrid has autoWidth={true}

[picklelo]

I found this issue is solved by setting the style prop for the table:

 <DataTableGrid style= {{ 
    table: { 
      'white-space': 'nowrap'
    }}
  } columns={["ID", "Name", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"]} data={[["0001", "name1", "5:00 am"], ["0002", "name2", "6:00 am, 4:00 pm", "6:00 am", "6:00 am, 4:00 pm", "6:00 am, 4:00 pm"]]}/>

We don't currently expose this prop on our component - once we do it should be possible to set. And we should probably even set this as the default.