# Trying to use Dash DataTable

**URL:** <https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519>\
**Category:** General Usage\
**Tags:** dashboard, tables\
**Created:** [December 9, 2020, 12:16pm UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519 "2020-12-09T12:16:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![PaulBog69](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/paulbog69/32/20093_2.png) [@PaulBog69](https://discourse.julialang.org/u/PaulBog69)\
**Post date:** [December 9, 2020, 12:16pm UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519/1 "2020-12-09T12:16:57Z")

</div>

Hi there,

I’m simply trying to display a table on my dashboard, thank to DashTable.  
But yet it doesn’t seem really adapted to Julia.  
Could someone enlight me on this point?

```julia
df = DataFrame(A =["Sunny", "Snowy"],
    B= [13, 43])

app = dash_datatable()

app.layout = html_div() do
    html_div(
        dash_datatable(
        id="ccc",
        name = ???)

end

```

Many thanks  
[https://juliahub.com/docs/DashTable/OyY8N/4.10.1/autodocs/](https://juliahub.com/docs/DashTable/OyY8N/4.10.1/autodocs/)

---

<div class="post-metadata">

**Author:** ![Iulian.Cioarca](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/iulian.cioarca/32/30166_2.png) [@Iulian.Cioarca](https://discourse.julialang.org/u/Iulian.Cioarca)\
**Post date:** [December 12, 2020, 10:50am UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519/2 "2020-12-12T10:50:03Z")

</div>

Hello and welcome!  
The Docstrings can be a bit tricky to understand, but most of the functionality mimics the Python version:

> **[Dash DataTable | Dash for Python Documentation | Plotly](https://dash.plotly.com/datatable)**
>
> \`dash\_table.DataTable\` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.

```julia
	html_div(id="table1", style=(width=default_width,backgroundColor="#dbe4f0 ", border="4px solid LightSteelBlue",hidden=false),
	DashTable.dash_datatable(id="table", editable=true,
	columns = [(name="fruits", id="fruits"),(name="vegetables", id="vegetables")],
		data = [
		    Dict("fruits" => "apple", "vegetables" => "tomato"),
		    Dict("fruits" => "orange", "vegetables" => "onion")
			],
            style_cell = (textAlign="center",fontSize=16)
	)),

```

Notice how the data Dicts entries must have the same name as the header columns names.

---

<div class="post-metadata">

**Author:** ![PaulBog69](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/paulbog69/32/20093_2.png) [@PaulBog69](https://discourse.julialang.org/u/PaulBog69)\
**Post date:** [December 22, 2020, 4:15pm UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519/3 "2020-12-22T16:15:36Z")

</div>

Many thanks your answer, it works correctly!  
I’m now stuck trying to give a title tot this datatable. Digging in the doc but nothing about this point ☹

---

<div class="post-metadata">

**Author:** ![Iulian.Cioarca](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/iulian.cioarca/32/30166_2.png) [@Iulian.Cioarca](https://discourse.julialang.org/u/Iulian.Cioarca)\
**Post date:** [December 22, 2020, 4:22pm UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519/4 "2020-12-22T16:22:50Z")

</div>

You could simply make a header on top. Something like:

```julia
html_h1("Table title", style=(textAlign = "left", fontSize=20))

```

I think you can also trick it by using multiple headers:

> **[Styling | Dash for Python Documentation | Plotly](https://dash.plotly.com/datatable/style)**
>
> \`dash\_table.DataTable\` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.

---

<div class="post-metadata">

**Author:** ![PaulBog69](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/paulbog69/32/20093_2.png) [@PaulBog69](https://discourse.julialang.org/u/PaulBog69)\
**Post date:** [December 22, 2020, 4:25pm UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519/5 "2020-12-22T16:25:22Z")

</div>

Just what I was going to write! 😉

---

<div class="post-metadata">

**Author:** ![PaulBog69](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/paulbog69/32/20093_2.png) [@PaulBog69](https://discourse.julialang.org/u/PaulBog69)\
**Post date:** [December 22, 2020, 4:32pm UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519/6 "2020-12-22T16:32:13Z")

</div>

As you seem to be connected, any idea of why _ **style\_cell** _ is not taking account of my arguments?  
But it’s work correctly when there is only one argument

```julia
    html_div(id="table2", style=(backgroundColor="#dbe4f0 ", border="4px solid LightSteelBlue",hidden=false,width = "20%",display = "inline-block",autosize = true, margin = "1em"),
                dash_datatable(
                    id="mkt",
                    columns = [Dict("name" => "A", "id"=> "first"),Dict("name"=>"B", "id"=>"second")],
                    data = dh,
                    style_cell = ("textAlign" => "center","fontSize" => 16)
                    ))

```

---

<div class="post-metadata">

**Author:** ![Iulian.Cioarca](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/iulian.cioarca/32/30166_2.png) [@Iulian.Cioarca](https://discourse.julialang.org/u/Iulian.Cioarca)\
**Post date:** [December 22, 2020, 4:51pm UTC](https://discourse.julialang.org/t/trying-to-use-dash-datatable/51519/7 "2020-12-22T16:51:25Z")

</div>

I updated my example. You need to either use dictionaries or named tuples(my example uses named tuples for style). In your case you supplied a “pair”: this is a component of a Dict, but not the Dict itself.