✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Hiding column headers in a DataTable

I’ve got a DataTable and a second DataTable right below it displaying summary statistics of the first DataTable (see below). It would be great to hide the headers of the second DataTable but I have not been able to find a solution in the documentation.

I have not tried it but maybe something like

style_header = {'display': 'none'}

would work.

2 Likes

Thank you very much for your help!

I found @dimark’s solution hid the contents of the table header cells, but a 30px high (empty) table row was still rendered in the space where the header would have been.

Instead, if you want the upper and lower tables to sit flush against each other, try the following approach using the DataTable css parameter. This approach uses @dimark’s css rule but applies it to the first table row:

css=[
  {
     'selector': 'tr:first-child',
     'rule': 'display: none',
  },
],