Dash_table : missing feature to completely hide the header - solution: set display:None on 'tr:first-child'

[David22]

Hi there;
I’m sharing a solution enabling to totally hide the dash_table header. By default, referring to the examples in the doc, it is clear that the header (content) can be hidden by setting:

style_header={'display': 'none''},

However, even if we then add
'line-height': '0px', 'min-height':'0px', 'height': '0px

The result is a table with a first empty row, without header displayed in it, as in the pict below, showing a blank space between the table’s title and the row “Metric One”

I did not find any solution that could work as easily as setting a “style_as_list_view”=…

Nevertheless, by setting the below css:

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

Then we get the desired output :

Wouldn’t it be nicer if we could have an option such as “style_as_list_view_without_header”=True ?

The solution proposed here probably answers to:

Dash datatable hide header

Hi, Is there a way for datatable headers to be zero or set to height of 0? Thanks dtcb

and…by searching a bit more for related issues on the forum, I also found this post:

Hiding column headers in a DataTable

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. [image] 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', }, ],

in which the above solution was also mentioned by @rustys. I wish I had found it earlier

[AnnMarieW]

If you are using Dash AG Grid, you can set headerHeight to zero:

Here’s an example:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = Dash(__name__)

grid = dag.AgGrid(
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
    columnSize="responsiveSizeToFit",
    dashGridOptions={"headerHeight":0}
)

app.layout = html.Div([grid])


if __name__ == "__main__":
    app.run_server(debug=True)

For more info on column headers see:

Dash AG Grid - Column Headers

[David22]

Hi @AnnMarieW
Thanks for your quick answer. I do not use Dash Grid, but Dash DataTable. There are currently 3 ways to design tables; either by using the basic features of plotly table (Tables in Python), or the more advanced features of data.DataTable and Dash AG Grid.
Which one of dash.DataTable or Dash AG Grid would you suggest to use in what typical use-case? Referring to the comparison here:
Announcing Dash AG Grid. Written by: Plotly Community Manager… | by Plotly | Plotly | Medium

At first sight, it looked like the main benefit of Dash AG Grid vs DataTable were the column resize, spanning, pin, and reorder, as long as we do not use the AG Grid Enterprise. However, given your above answer, it seems that Dash AG Grid is also easier the customize. Is it correct, or am I extrapolating too much from one specific example?

[AnnMarieW]

@David22

I recommend that anyone starting a new project uses AG Grid instead of DataTable. I also think it’s worth the effort to convert current projects too! The grid has so many great features right out of the box - and it’s so easy to customize. All of the examples below are using the free AG Grid community component. Even more features are available in AG Grid Enterprise.

Here are just a few examples. See the docs for more information and even more examples

Dash AG Grid

Selectable Rows

Here’s a simple JavaScript function that determines whether a row is selectable. (Only rows having a year earlier than 2007 are selectable.)

dag.AgGrid(   
    dashGridOptions = {'isRowSelectable': {"function": "params.data ? params.data.year < 2007 : false" }},
    # other props
)

See the full example in the Selection Checkbox section of Dash AG Grid docs.

Column Spanning

By using a function to set the column width of certain rows, you can make reports that look like this:

See complete example in the docs in the Column Spanning section. This works with Row Spanning too!

Aggregation with Custom Functions (AG Grid Enterprise)

See complete example in the Enterprise Examples

Cell Class Rules and Row Class Rules

You can now use class names with condition formatting. In this example, we use Bootstrap class names – so the background colors of the highlighted cells will match your selected Bootstrap theme.

See this example in the Cell Styling section. You can learn how to use class names with conditional formatting to set Row Styles too.

Date and Number Formatting

Dash AG Grid includes the d3-format and d3-time-format libraries - making it easy to format numbers and dates.

---

See more examples in the Value Formatters with d3-format section of the docs.

Date Filters

We have Included examples in the docs of how to make the date filters to work “out-of-the-box” using d3.time-format to convert string dates into date objects.

See more examples in the Filtering section of the docs.

Cell Renderer Components Examples

See these examples --and more! – in the Cell Renderer Componets docs.

Dash Mantine Components Button with icons from DashIconify

---

Dash Bootstrap Component Buttons with Font Awesome and Bootstrap Icons

---

Render figures in a dcc.Graph component

---

Image Component with a callback to display the full sized image in a dbc.Modal

---

Stock Portfolio Demo App with Dash Mantine Component Buttons, DashIconify Icons, dcc.Graph component in the grid

---

Dash Bootstrap Components dbc.Progress component gallery

---

Custom Loading and No Rows Overlay

---

Custom Tooltip

Custom Tooltiop

---

Custom datepicker component
Editing/cell editing Docs

---

Conditional dropdowns
See this example in the Editing/cell editing Docs
Note the different city dropdown options based on the country

---

1) New options for column size

If you are on alpha release 4 or 5, the only breaking change in rc1 is a name change for one prop option. Instead of columnSize=autoSizeAll, use columnSize=autoSize. This is to accommodate some cool new options for setting the columnSize:

See more info in the Column Size docs

2) New in AG Grid 29.3.2 Sticky header labels

We upgraded to the latest AG Grid release 29.3.2 which has several new features, including sticky column group labels.

See this example in the Column Groups docs.

3) Aligned Grids

You can now align two or more grids. If a user changes things like column order or width, the grids stay in sync.

See two examples in the Aligned Grids docs The second examples shows a more typical use-case where one grid has summary data.

4) Pinned rows

Just in case you missed this example, you can also pin one or more rows either on the top or bottom of the grid. This is another way to get a summary row in the grid.

See examples in the Row Pinning docs.

5) Custom Pagination

You can use the grid’s default pagination, or provide your own component to control the grid’s pagination.

See an example of how to use the dash-bootstrap-components dbc.Pagination buttons to navigate to pages in the grid in the Pagination docs.

6) Custom Number Input Component

This is a new custom component example we added to this release. The NumberInput component is a great way to ensure that only numeric data is entered into an editable grid cell. Note also that we use valueFormatter to format the number as currency with two decimal places and thousands separator.

See this example in the Cell Editor Components docs

7) Filter Model

The AG Grid Filter Model is now available. Use this to set a filter for the grid. You can also access to the filters that users set in a Dash callback.

See this example in the Filter Callbacks docs

See the code for these examples in the docs: