Blueprint: [Table] hide / disable column header

[rayshan]

Hi, thanks for everyone's work on this great library.

Is it possible to have the ability to hide / disable column headers?

My use case is to have 1 header of dates on the top, then render 1-row input between content underneath. Since everything line up and I make date header sticky, there's no need to repeat date headers.

I found enableRowHeader. It'll be great to have enableColumnHeader.

Thanks!

[giladgray]

this does not seem possible through the API.

@themadcreator @cmslewis can you confirm?

[cmslewis]

Correct; this is not possible as I recall. All of our use cases thus far have required a column header, as that's the one place we're able to put menus and interaction elements that most of our tables have needed. It's a reasonable request though.

@rayshan do you have a workaround for now?

[rayshan]

I implemented a workaround via CSS:

.pt-table-quadrant.pt-table-quadrant-top,
.pt-table-top-container {
    display: none;
}

Playing with columnHeaderCellRenderer didn't help as it expects an ReactElement to be returned.

[giladgray]

Sure, that workaround is the expected approach if you really want to remove column headers.

[cravussin]

Hi,

Can someone give guidance as to how to apply the CSS fix selectively, i.e. for one component and not all components that use blueprint's <Table> component?

for blueprint3 I'm using these class definitions:

.bp3-table-container { min-height: 20px; } .bp3-table-quadrant-top { display: none; } .bp3-table-top-container { display: none; }

Thank you for the great framework!

[giladgray]

@cravussin use a className prop to supply your own class then style that. you can style nested elements this way. .my-class .bp3-table-quadrant-top {}

[cravussin]

Thanks a lot for the help, it works great.