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

New DataEditorProp to disable header of a table. #1012

Open
davidsanchez222 opened this issue Dec 28, 2024 · 0 comments
Open

New DataEditorProp to disable header of a table. #1012

davidsanchez222 opened this issue Dec 28, 2024 · 0 comments

Comments

@davidsanchez222
Copy link

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)

image

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

  1. The streamlit issue I made got 18 likes, so more people want this feature
  2. 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}

which turned this:
image

into this:
image

There is two problems with the table above.

  1. A sliver of the header is still visible.
  2. 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.
    image

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.

canvastable

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!

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