CODEWITHSUNDEEP
htmlpandaspyscriptholovizholoviz-panel
Andrea Nicolai
Andrea Nicolai

Reputation: 440

How to export a Tabulator widget to a csv file in pyscript

Using pyscript, I am creating an html file that displays a panel Tabulator. Next to this table, there must be two other widgets: a text input, where a user can enter the filename of the file it wants to save, and a button. Such a button, when clicked, should export the table to csv by using pandas to_csv method.

A minimum reproducible example is the following:

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/@holoviz/[email protected]/dist/bundled/bootstraptemplate/bootstrap.css">
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@holoviz/[email protected]/dist/panel.min.js"></script>

  <link rel="stylesheet" href="https://pyscript.net/releases/2022.09.1/pyscript.css" />
  <script defer src="https://pyscript.net/releases/2022.09.1/pyscript.js"></script>
</head>

<body>
  <py-config>
    packages = [
      "panel",
      "pandas",
     ]
 </py-config>
  <py-script>
import panel as pn
import pandas as pd
from panel import widgets

pn.extension('tabulator')

pd.options.display.max_columns = 30

table = pn.widgets.Tabulator(pagination='remote', page_size=30)
table.value = pd.DataFrame([[0,0], [1,0]])

inputTableSaveName = pn.widgets.TextInput(name="Filename", margin=10)
button_save_df = pn.widgets.Button(name='Export to csv', button_type='success', width=125, margin=(25, 10, 10, 25))

def save_table_to_file(event):
    if (inputTableSaveName.value == ""): return
    # internally, table.value is a pandas dataframe according to panel docs
    table.value.to_csv(inputTableSaveName.value + ".csv") 

button_save_df.on_click(save_table_to_file)

pn.Row(table, 
      pn.Column(
        pn.Row(inputTableSaveName, button_save_df)
      ))

</body>

</html>

Note as, when I run this code in a Jupyter Notebook it actually works and a file whose name is the one in the input field is generated. However, when opening the html file in my browser and clicking the button, nothing happens and nothing is saved.

EDIT: It seems that the correct approach would be to exploit this trigger. On the other hand, I would like to understand why files cannot be using a more straighforward way, as I would do with vanilla Python.

Upvotes: 1

Views: 554

Answers (0)

Related Questions