Skip to content

New DataEditorProp to disable header of a table. #1012

@davidsanchez222

Description

@davidsanchez222

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    package:coreRequests related to the core packagetype:enhancementRequests for enhancements or new features

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions