Tables

Turn DataFrame/Series in D3.js-based tables

Examples

Create Interactive Tables from DataFrame

React

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;

Browser

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

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;

Browser