Table header column names

Dash Python
1

hi!
i’ve built a table using dash-table-experiments/usage-callback.py at master · plotly/dash-table-experiments · GitHub

and am wondering if anyone knows how i can customize the names of each column? currently the label in each column header is the name of the column in the dataframe (which is ugly) so is there an attribute of the DataTable i can use to customize this??
thank you

1 Like
2

why don’t you just rename the column name with pandas?
df.columns = ['namea', 'nameb', ...]

3

because if you change the column names in df you can break something else…

4

exactly, thats why we distinguish between “name” and “if” in the columns property that you pass into DataTable.

5

If? I did not get. I’m trying to do the same thing as OP.

6

Hi @gustavoandalou - and welcome to the Dash community!

I think the “if” may have been a typo and should have been “id”

The column “id” is not visible in the table - it is used to match cells in data with particular columns (eg - id= the column name of the df).

The “name” of the column is what appears in the column header. You can change this - it does not have to match the df column names. And it’s even possible to allow the user to change the heading using the renamable property.

7

Do you have an exemple?

My code:


tabelaMostra = go.Figure(data=[go.Table(header=dict(values=list(tabela.columns)), cells=dict(values=[tabela.Data, tabela.Casos, tabela.Mortes]))])
tabelaMostra.show()
8

I see… you are using a Plotly Graph Object go.Table rather than a Dash DataTable. I think you can change the header by providing a list of column headings like this: header=dict(values=[‘heading 1’, ‘heading 2’ ‘heading 3’’] (or whatever you want to show in your headings).

If you would like to use a Dash DataTable, here are two examples. The first example will make the column headings in the table the same as the df column headings using: columns=[{"name": i, "id": i} for i in df.columns],

The second example shows a more detailed column definition. This is one way to do things like show only certain columns, or change headings, or add formatting or making them editable etc. You can do a lot with a DataTable - this shows only a few things.

import dash
import dash_table
import dash_html_components as html
import dash_table.FormatTemplate as FormatTemplate
import pandas as pd


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

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H3("Example 1"),
        dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
            style_table={"height": "200px", "overflowY": "auto"},
        ),

        html.H3("Example 2"),
        dash_table.DataTable(
            id="table2",
            columns=[
                {"name": "Country", "id": "country"},
                {
                    "name": "Population",
                    "id": "pop",
                    "renamable": True,
                    "type": "numeric",
                    "format": {"specifier": ",.0f"},
                },
                {
                    "name": "Life Expectancy (Yrs)",
                    "id": "lifeExp",
                    "renamable": True,
                    "type": "numeric",
                    "format": {"specifier": ".1f"},
                },
                {
                    "name": "GDP Per Capita",
                    "id": "gdpPercap",
                    "renamable": True,
                    "type": "numeric",
                    "format": FormatTemplate.money(0),
                },
            ],
            data=df.to_dict("records"),
            style_table={"height": "200px", "overflowY": "auto"},
        ),
    ]
)

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

column_format
column_format1032×530 44.3 KB