-
Notifications
You must be signed in to change notification settings - Fork 348
Description
Why?
In short, I have key-value pair data that I want display as a table in a streamlit web app. It is redundant to have a header row. Streamlit dataframes use the <GlideDataEditor>
component under the hood. I want to be able to render the table below using the <GlideDataEditor>
component.
(notice the lack of a header row)
Details
I opened an issue on streamlit to disable the header for their st.dataframe objects.
streamlit/streamlit#8235
When I built their code I realized they are using a <GlideDataEditor>
component to display the dataframe so that is what lead me here.
I am making an effort to change it here because
- The streamlit issue I made got 18 likes, so more people want this feature
- It is important for a personal project of mine so I am eager to help add this feature.
At first I tried making the headerHeight={0}
There is two problems with the table above.
- A sliver of the header is still visible.
- It leaves an empty row on the bottom so I have to do some hacky data slicing which is hard to do based on how streamlit feeds data into the component.
How?
After perusing the src/data-editor/data-editor.tsx file and inspecting element on the table, I realized that it renders on the page as a canvas element and not a native html table? My background isn't in front end development so this is where I get a little lost.
There is a related issue brought up in the discussion forum in which it is suggested to use CSS. https://community.glideapps.com/t/hide-column-names-of-tables-data-grids-without-data/75678
However, I would rather the component come with the hidden header functionality and not have to do any front end hacks to achieve my desired result
This probably won't be a big priority for the team. However, I am willing to take some time to help implement this. With that being said, can I be pointed in the right direction on how I should code this up? Thanks!