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();
});

To solve the immediate problem, just load dataTable from `dataframe` class, instead of `mytable` id: `$('.dataframe').DataTable();`. — msampaio, Jun 02 '15 at 11:26
I followed Marcos approach which worked great. If you need ids see [http://stackoverflow.com/questions/15079118/js-datatables-from-pandas/41536906](http://stackoverflow.com/questions/15079118/js-datatables-from-pandas/41536906) — citynorman, Jan 08 '17 at 19:32

Durgesh Kumar · Answer 1 · 2018-10-06T08:48:01.213

9

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

edited Oct 06 '18 at 08:48

answered Oct 04 '18 at 12:42

Durgesh Kumar

935
10
17

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/21039269) – Alex Kulinkovich Oct 04 '18 at 13:00
`pandas.DataFrame([[1, 2], [3, 4]]).to_html(table_id='hello')` this will set table id in html – Durgesh Kumar Oct 06 '18 at 08:46
1

@Alex.K. not quiet sure why you revved like you did: https://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.to_html.html#pandas-dataframe-to-html - scroll to `table_id` - its a valid answer. – Patrick Artner Oct 06 '18 at 14:19
1

@DurgeshKumar You could enhance your answer by providing a link to the documentation of the function you are suggesting: `[doku for table_id](https://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.to_html.html#pandas-dataframe-to-html)` - also you should probably add since _when_ this feature exists - in pandas 0.16 it was not in yet so you are answering a _**old**_ question with newer features. – Patrick Artner Oct 06 '18 at 14:20
1

This is new feature in version 0.23.0. – smm Nov 21 '19 at 23:44

firelynx · Accepted Answer · 2016-04-04T15:30:47.580

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">
...

score 0 · Answer 3 · answered Feb 15 '23 at 15:38

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?

How to define html id for Pandas Dataframe

3 Answers3

Proper but slow solution

Addendum:

Hacky but performative solution