glideapps / glideapps/glide-data-grid

New DataEditorProp to disable header of a table.

Open
#1,012 0 comments 3 reactions 0 assignees View on GitHub
package:core type:enhancement
Dominant language
TypeScript
Stars
5.3k
Forks
428
PR merge metrics
No merged PRs in 30d

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 `` component under the hood. I want to be able to render the table below using the `` component.
(notice the lack of a header row)

![image](https://github.com/user-attachments/assets/160b64df-3c8f-4898-a659-826cef6cfbbf)

# Details
I opened an issue on streamlit to disable the header for their st.dataframe objects.
https://github.com/streamlit/streamlit/issues/8235

When I built their code I realized they are using a `` 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](https://github.com/user-attachments/assets/7f4b82ee-147e-45ef-9f5b-2ca9e1d63fb6)

into this:
![image](https://github.com/user-attachments/assets/d729e686-2bea-44fe-9f31-3bf060e3c3d6)

There is two problems with the table above.
1. A sliver of the header is still visible.
3. 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](https://github.com/user-attachments/assets/2c9e617d-5553-4e5a-83a9-e6534ce03a15)

# 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](https://github.com/user-attachments/assets/0a9591ba-862a-4d9d-a99c-1f65436bc544)

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!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.