Danfo.js
  • Danfo.js Documentation
  • Getting Started
  • API reference
    • General Functions
      • danfo.tensorflow
      • danfo. convertFunctionTotransformer
      • danfo.streamCsvTransformer
      • danfo.streamJSON
      • danfo.streamCSV
      • danfo.Utils
      • danfo.Str
      • danfo.Dt
      • danfo.dateRange
      • danfo.OneHotEncoder
      • danfo.StandardScaler
      • danfo.MinMaxScaler
      • danfo.LabelEncoder
      • danfo.toDateTime
      • danfo.getDummies
      • danfo.concat
      • danfo.merge
    • Input/Output
      • danfo.readExcel
      • danfo.toExcel
      • danfo.readJSON
      • danfo.toJSON
      • danfo.readCSV
      • danfo.toCSV
    • Series
      • Creating a Series
      • Series.append
      • Series.cumSum
      • Series.cumMax
      • Series.cumProd
      • Series.cumMin
      • Series.str.split
      • Series.str.len
      • Series.str.join
      • Series.str.trim
      • Series.str.substring
      • Series.str.substr
      • Series.str.slice
      • Series.str.search
      • Series.str.repeat
      • Series.str.replace
      • Series.str.lastIndexOf
      • Series.str.indexOf
      • Series.str.includes
      • Series.str.endsWith
      • Series.str.startsWith
      • Series.str.concat
      • Series.str.charAt
      • Series.str.toUpperCase
      • Series.str.toLowerCase
      • Series.str.capitalize
      • Series.dt.seconds
      • Series.dt.minutes
      • Series.dt.dayOfMonth
      • Series.dt.monthName
      • Series.dt.hours
      • Series.dt.dayOfWeek
      • Series.dt.dayOfWeek
      • Series.dt.month
      • Series.dt.year
      • Series.argMax
      • Series.argMin
      • Series.argSort
      • Series.replace
      • Series.isNa
      • Series.fillNa
      • Series.dropNa
      • Series.dropDuplicates
      • Series.valueCounts
      • Series.nUnique
      • Series.unique
      • Series.abs
      • Series.ne
      • Series.eq
      • Series.ge
      • Series.le
      • Series.gt
      • Series.lt
      • Series.iloc
      • Series.loc
      • Series.at
      • Series.iat
      • Series.ndim
      • Series.shape
      • Series.dtype
      • Series.values
      • Series.tensor
      • Series.index
      • Series.apply
      • Series.map
      • Series.setIndex
      • Series.resetIndex
      • Series.describe
      • Series.copy
      • Series.sortValues
      • Series.var
      • Series.std
      • Series.round
      • Series.minimum
      • Series.maximum
      • Series.count
      • Series.sum
      • Series.max
      • Series.min
      • Series.mode
      • Series.median
      • Series.mean
      • Series.mod
      • Series.pow
      • Series.div
      • Series.mul
      • Series.sub
      • Series.add
      • Series.sample
      • Series.tail
      • Series.head
      • Series.and
      • Series.or
    • Dataframe
      • Creating a DataFrame
      • DataFrame.sortIndex
      • DataFrame.append
      • DataFrame.nUnique
      • DataFrame.tensor
      • DataFrame.print
      • DataFrame.toCSV
      • DataFrame.toJSON
      • DataFrame.toExcel
      • DataFrame.sortValues
      • DataFrame.setIndex
      • DataFrame.resetIndex
      • DataFrame.rename
      • DataFrame.drop
      • DataFrame.asType
      • DataFrame.shape
      • DataFrame.axis
      • DataFrame.ndim
      • DataFrame.values
      • DataFrame.selectDtypes
      • DataFrame.ctypes
      • DataFrame.index
      • DataFrame.loc
      • DataFrame.iloc
      • DataFrame.at
      • DataFrame.iat
      • DataFrame.head
      • DataFrame.tail
      • DataFrame.sample
      • DataFrame.add
      • DataFrame.sub
      • DataFrame.mul
      • DataFrame.div
      • DataFrame.pow
      • DataFrame.mod
      • DataFrame.mean
      • DataFrame.median
      • DataFrame.min
      • DataFrame.max
      • DataFrame.std
      • DataFrame.var
      • DataFrame.count
      • DataFrame.round
      • DataFrame.cumSum
      • DataFrame.cumMin
      • DataFrame.cumMax
      • DataFrame.cumProd
      • DataFrame.copy
      • DataFrame.describe
      • DataFrame.sum
      • DataFrame.abs
      • DataFrame.query
      • DataFrame.addColumn
      • DataFrame.groupby
      • DataFrame.column
      • DataFrame.fillNa
      • DataFrame.isNa
      • DataFrame.dropNa
      • DataFrame.apply
      • DataFrame.applyMap
      • DataFrame.It
      • DataFrame.gt
      • DataFrame.le
      • DataFrame.ge
      • DataFrame.ne
      • DataFrame.eq
      • DataFrame.replace
    • Configuration Options
    • Plotting
      • Timeseries Plots
      • Violin Plots
      • Box Plots
      • Tables
      • Pie Charts
      • Histograms
      • Scatter Plots
      • Bar Charts
      • Line Charts
      • Customizing your plots
    • Groupby
      • Groupby.getGroups
      • Groupby.col
      • Groupby.max
      • Groupby.min
      • Groupby.sum
      • Groupby.mean
      • Groupby.std
      • Groupby.var
      • Groupby.count
      • Groupby.cumSum
      • Groupby.cumMax
      • Groupby.cumMin
      • Groupby.cumProd
      • Groupby.agg
  • User Guides
    • Migrating to the stable version of Danfo.js
    • Using Danfojs in React
    • Titanic Survival Prediction using Danfo.js and Tensorflow.js
  • Building Data Driven Applications with Danfo.js - Book
  • Contributing Guide
  • Release Notes
Powered by GitBook
On this page
  • Examples
  • Create Interactive Tables from DataFrame
  • Configure the header and cell of a table

Was this helpful?

  1. API reference
  2. Plotting

Tables

Turn DataFrame/Series in D3.js-based tables

Examples

Create Interactive Tables from DataFrame

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/danfojs-nightly@1.0.2/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

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/danfojs-nightly@1.0.2/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>
PreviousBox PlotsNextPie Charts

Last updated 3 years ago

Was this helpful?

To configure the header and cell of a table, you can pass header/cell styles to the header_style and cell_style parameter. The doc shows numerous configuration options you can pass.

Plotly table