Tables

Turn DataFrame/Series in D3.js-based tables
Examples
Create Interactive Tables from DataFrame
React
Browser
App.jsx
import { useEffect } from 'react';
import './App.css';
import { Series, readCSV } from "danfojs-nightly";
​
function App() {
​
  useEffect(() => {
    readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
      .then(df => {
​
        df.plot("plot_div").table()
      }).catch(err => {
        console.log(err);
      })
  }, [])
​
  return (
    <div className="App">
      <header className="App-header">
        <div id="plot_div"></div>
      </header>
    </div>
  );
}
​
export default App;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
    <title>Document</title>
  </head>
​
  <body>
    <div id="plot_div"></div>
​
    <div id="plot_div"></div>
    <script>
      dfd
        .readCSV(
          "https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
        )
        .then((df) => {
          df.plot("plot_div").table()
        })
        .catch((err) => {
          console.log(err);
        });
    </script>
  </body>
</html>
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
import { useEffect } from 'react';
import './App.css';
import { Series, readCSV } from "danfojs-nightly";
​
function App() {
​
  useEffect(() => {
    readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
      .then(df => {
​
        const headerStyle = {
          align: "center",
          fill: { color: ['gray'] },
          font: { family: "Arial", size: 15, color: "white" },
          
        }
        const cellStyle = {
          align: ["center"],
          line: { color: "black", width: 10 }
        }
​
        df.plot("plot_div").table({
          config: {
            tableHeaderStyle: headerStyle,
            tableCellStyle: cellStyle
          },
          layout: {
            title: "Table displaying the Titanic dataset",
          }
        })
​
​
      }).catch(err => {
        console.log(err);
      })
  }, [])
​
  return (
    <div className="App">
      <header className="App-header">
        <div id="plot_div"></div>
      </header>
    </div>
  );
}
​
export default App;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
​
    <title>Document</title>
  </head>
​
  <body>
    <div id="plot_div"></div>
​
    <div id="plot_div"></div>
    <script>
      dfd
        .readCSV(
          "https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
        )
        .then((df) => {
          const headerStyle = {
            align: "center",
            fill: { color: ["gray"] },
            font: { family: "Arial", size: 15, color: "white" },
            columnwidth: 200,
          };
          const cellStyle = {
            align: ["center"],
            line: { color: "black", width: 10 },
          };
​
          df.plot("plot_div").table({
            config: {
              tableHeaderStyle: headerStyle,
              tableCellStyle: cellStyle,
            },
            layout: {
              title: "Table displaying the Titanic dataset",
            },
          });
​
        })
        .catch((err) => {
          console.log(err);
        });
    </script>
  </body>
</html>
Box Plots
Pie Charts
Last modified 1yr ago