DataFrames and ReactiveHTML

In this guide we will show you how to implement ReactiveHTML components with a DataFrame parameter.

Creating a Custom DataFrame Pane

In this example we will show you how to create a custom DataFrame Pane. The example will be based on the GridJS table.

import random
import pandas as pd
import param
import panel as pn


class GridJS(pn.reactive.ReactiveHTML):
    value = param.DataFrame()

    _template = '<div id="wrapper" styles="height:100%;width:100%;"></div>'

    _extension_name = 'gridjs'

    _scripts = {
      "render": """
console.log(data.value)
state.config= ()=>{
  const columns = Object.keys(data.value).filter(key => key !== "index");
  var rows= []
  for (let index=0;index<data.value["index"].shape[0];index++){
    const row=columns.map((key)=>{
      return data.value[key][index]
    })
    rows.push(row)
  }
  return {columns: columns, data: rows, resizable: true, sort: true }
}
config = state.config()
console.log(config)
state.grid = new gridjs.Grid(config).render(wrapper);
""", "value": """
config = state.config()
state.grid.updateConfig(config).forceRender()
"""
    }

    __css__ = [
      "https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
    ]

    __javascript__ = [
      "https://unpkg.com/gridjs/dist/gridjs.umd.js"
    ]

def data(event):
  return pd.DataFrame([
    ["John", "john@example.com", "(353) 01 222 3333", random.uniform(0, 1)],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444", random.uniform(0, 1)],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033", random.uniform(0, 1)],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233", random.uniform(0, 1)],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356", random.uniform(0, 1)]
  ],
    columns= ["Name", "Email", "Phone Number", "Random"]
  )
update_button = pn.widgets.Button(name="UPDATE", button_type="primary")
grid = GridJS(value=pn.bind(data, update_button), sizing_mode="stretch_width")
pn.Column(update_button, grid).servable()

The main challenge of creating this component is understanding the structure of data.value and how it can be converted to a format (config) that gridjs.Grid accepts.

To help you understand what the data.value and config values looks like, I’ve logged them to the browser console using console.log.