Tables

Getting Started API Reference Contributing Guide Github

Search…

Tables

Turn DataFrame/Series in D3.js-based tables

Examples
Create Interactive Tables from DataFrame
1
<!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
     <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
8
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
9
     <title>Document</title>
10
</head>
11
​
12
<body>
13
​
14
    <div id="plot_div"></div>
15
    <script>
16
​
17
        
18
​
19
        dfd.read_csv("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
20
            .then(df => {
21
            
22
                df.plot("plot_div").table()
23
              
24
              
25
            }).catch(err => {
26
                console.log(err);
27
            })
28
​
29
    </script>
30
</body>
31
​
32
</html>
Copied!
Configure the header and cell of a table
To configure the header and cell of a table, you can pass header/cell styles to the header_style and cell_style parameter. The Plotly table doc shows numerous configuration options you can pass.
1
<!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
8
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
9
    <title>Document</title>
10
</head>
11
​
12
<body>
13
​
14
    <div id="plot_div"></div>
15
    <script>
16
​
17
        dfd.read_csv("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
18
            .then(df => {
19
​
20
                header_style = {
21
                    align: "center",
22
                    fill: { color: ['gray'] },
23
                    font: { family: "Arial", size: 15, color: "white" }
24
                }
25
                cell_style = {
26
                    align: ["center"],
27
                    line: { color: "black", width: 1 }
28
                }
29
​
30
                df.plot("plot_div").table({ header_style: header_style, cell_style: cell_style })
31
​
32
            }).catch(err => {
33
                console.log(err);
34
            })
35
​
36
    </script>
37
</body>
38
​
39
</html>
40
​
Copied!

Box Plots

Pie Charts

Last modified 17d ago

Copy link

Contents

Examples

Create Interactive Tables from DataFrame

Configure the header and cell of a table