How to define html id for Pandas Dataframe

Question

I would like to define a css id to a Pandas Dataframe to render with javascript dataTables. Is it possible?

With this:

pandas.DataFrame([[1, 2], [3, 4]]).to_html()

I get this:

'<table border="1" class="dataframe">n  <thead>n    <tr style="text-align: right;">n      <th></th>n      <th>0</th>n      <th>1</th>n    </tr>n  </thead>n  <tbody>n    <tr>n      <th>0</th>n      <td>1</td>n      <td>2</td>n    </tr>n    <tr>n      <th>1</th>n      <td>3</td>n      <td>4</td>n    </tr>n  </tbody>n</table>'

But I’d like to get a css id, like this:

'<table border="1" id='mytable' class="dataframe">n  <thead>n    <tr style="text-align: right;">n      <th></th>n      <th>0</th>n      <th>1</th>n    </tr>n  </thead>n  <tbody>n    <tr>n      <th>0</th>n      <td>1</td>n      <td>2</td>n    </tr>n    <tr>n      <th>1</th>n      <td>3</td>n      <td>4</td>n    </tr>n  </tbody>n</table>'

To use dataTables in my html page:

$(document).ready(function() {
    $('#mytable').DataTable();
});

Asked By: msampaio

||

Source

Answer 1

There is a lot of things you can do with the DataFrame.to_html() method in pandas 0.16, but there is currently no documented way to add an id to the rendered dataframe.

You can set a class on the DataFrame, like this:

df = pd.DataFrame({'foo':[1,2,3,4]})
df.to_html(classes='mytable')

Results in:

<table border="1" class="dataframe mytable">
...

But that is as good as it gets with pandas native functions.

If you really need to use the css id option, you could solve it in two ways.

Proper but slow solution

The proper way would be to parse the html using a library for xml parsing and adding the id yourself.

Something like this:

from xml.etree import ElementTree as et

t = et.fromstring(df.to_html())
t.set('id', 'mytable')
et.tostring(t)

Results in:

<table border="1" class="dataframe" id="mytable">
...

Addendum:

There are other libraries than the xml library, you could for instance use BeautifulSoup to change the html. The BeautifulSoup library has more shiny features that lets you do more complicated stuff than just setting and id on the table.

Hacky but performative solution

The ugly way would be to regexp replace the string, like this:

import re

re.sub(' mytable', '" id="mytable', df.to_html(classes='mytable'))

Results in:

<table border="1" class="dataframe" id="mytable">
...

Answered By: firelynx

Answer 2

just use pandas.DataFrame([[1, 2], [3, 4]]).to_html(table_id='hello')
you will set table id namely hello

Answered By: Durgesh Kumar

Answer 3

From the documentation of Styler.set_uuid:

Set the uuid applied to id attributes of HTML elements

For me set_table_attributes created duplicated id attribute in the HTML.

Also as a bonus you get id for all elements inside the table.

IN

import pandas as pd
import numpy as np

df = pd.DataFrame(np.zeros((2,2)))
df.to_html()
print(df.style.set_uuid('table_id').to_html())

OUT

<style type="text/css">
</style>
<table id="T_table_id">
  <thead>
    <tr>
      <th class="blank level0" >&nbsp;</th>
      <th id="T_table_id_level0_col0" class="col_heading level0 col0" >0</th>
      <th id="T_table_id_level0_col1" class="col_heading level0 col1" >1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="T_table_id_level0_row0" class="row_heading level0 row0" >0</th>
      <td id="T_table_id_row0_col0" class="data row0 col0" >0.000000</td>
      <td id="T_table_id_row0_col1" class="data row0 col1" >0.000000</td>
    </tr>
    <tr>
      <th id="T_table_id_level0_row1" class="row_heading level0 row1" >1</th>
      <td id="T_table_id_row1_col0" class="data row1 col0" >0.000000</td>
      <td id="T_table_id_row1_col1" class="data row1 col1" >0.000000</td>
    </tr>
  </tbody>
</table>

This question duplicates this one:
How to inject a table id into pandas.DataFrame.to_html() output?

Answered By: Hagai Drory

How to define html id for Pandas Dataframe

Question:

Answers:

Proper but slow solution

Addendum:

Hacky but performative solution