Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next 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',
  },
],