Tables
Turn DataFrame/Series in D3.js-based tables
Examples
Create Interactive Tables from DataFrame
React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { Series, readCSV } from "danfojs-nightly";
4
5
function App() {
6
7
useEffect(() => {
8
readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
9
.then(df => {
10
11
df.plot("plot_div").table()
12
}).catch(err => {
13
console.log(err);
14
})
15
}, [])
16
17
return (
18
<div className="App">
19
<header className="App-header">
20
<div id="plot_div"></div>
21
</header>
22
</div>
23
);
24
}
25
26
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
7
<title>Document</title>
8
</head>
9
10
<body>
11
<div id="plot_div"></div>
12
13
<div id="plot_div"></div>
14
<script>
15
dfd
16
.readCSV(
17
"https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
18
)
19
.then((df) => {
20
df.plot("plot_div").table()
21
})
22
.catch((err) => {
23
console.log(err);
24
});
25
</script>
26
</body>
27
</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.
React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { Series, readCSV } from "danfojs-nightly";
4
5
function App() {
6
7
useEffect(() => {
8
readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
9
.then(df => {
10
11
const headerStyle = {
12
align: "center",
13
fill: { color: ['gray'] },
14
font: { family: "Arial", size: 15, color: "white" },
15
16
}
17
const cellStyle = {
18
align: ["center"],
19
line: { color: "black", width: 10 }
20
}
21
22
df.plot("plot_div").table({
23
config: {
24
tableHeaderStyle: headerStyle,
25
tableCellStyle: cellStyle
26
},
27
layout: {
28
title: "Table displaying the Titanic dataset",
29
}
30
})
31
32
33
}).catch(err => {
34
console.log(err);
35
})
36
}, [])
37
38
return (
39
<div className="App">
40
<header className="App-header">
41
<div id="plot_div"></div>
42
</header>
43
</div>
44
);
45
}
46
47
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
7
8
<title>Document</title>
9
</head>
10
11
<body>
12
<div id="plot_div"></div>
13
14
<div id="plot_div"></div>
15
<script>
16
dfd
17
.readCSV(
18
"https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
19
)
20
.then((df) => {
21
const headerStyle = {
22
align: "center",
23
fill: { color: ["gray"] },
24
font: { family: "Arial", size: 15, color: "white" },
25
columnwidth: 200,
26
};
27
const cellStyle = {
28
align: ["center"],
29
line: { color: "black", width: 10 },
30
};
31
32
df.plot("plot_div").table({
33
config: {
34
tableHeaderStyle: headerStyle,
35
tableCellStyle: cellStyle,
36
},
37
layout: {
38
title: "Table displaying the Titanic dataset",
39
},
40
});
41
42
})
43
.catch((err) => {
44
console.log(err);
45
});
46
</script>
47
</body>
48
</html>
Copied!
Last modified 4mo ago