# Table header column names

**URL:** <https://community.plotly.com/t/table-header-column-names/14549>\
**Category:** Dash Python\
**Created:** [October 15, 2018, 2:09pm UTC](https://community.plotly.com/t/table-header-column-names/14549 "2018-10-15T14:09:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![blksheephw](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/blksheephw/32/4308_2.png) [@blksheephw](https://community.plotly.com/u/blksheephw)\
**Post date:** [October 15, 2018, 2:09pm UTC](https://community.plotly.com/t/table-header-column-names/14549/1 "2018-10-15T14:09:53Z")

</div>

hi!  
i’ve built a table using [dash-table-experiments/usage-callback.py at master · plotly/dash-table-experiments · GitHub](https://github.com/plotly/dash-table-experiments/blob/master/usage-callback.py)

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

---

<div class="post-metadata">

**Author:** ![caiyij](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/caiyij/32/4462_2.png) [@caiyij](https://community.plotly.com/u/caiyij)\
**Post date:** [October 18, 2018, 6:41pm UTC](https://community.plotly.com/t/table-header-column-names/14549/2 "2018-10-18T18:41:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nirvikalpa](https://avatars.discourse-cdn.com/v4/letter/n/977dab/32.png) [@nirvikalpa](https://community.plotly.com/u/nirvikalpa)\
**Post date:** [May 17, 2020, 1:51pm UTC](https://community.plotly.com/t/table-header-column-names/14549/3 "2020-05-17T13:51:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [May 17, 2020, 4:52pm UTC](https://community.plotly.com/t/table-header-column-names/14549/4 "2020-05-17T16:52:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [September 23, 2020, 3:07pm UTC](https://community.plotly.com/t/table-header-column-names/14549/6 "2020-09-23T15:07:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [September 23, 2020, 5:09pm UTC](https://community.plotly.com/t/table-header-column-names/14549/8 "2020-09-23T17:09:36Z")

</div>

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.

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/d9b046b8d6989c3e108d58e16e926ed051857011.png)