pandas dataframe table rendering: how to remove row number?

[aborruso]

Hi,
I have something similar to the below image.

It's the simply output of

df= pd.read_csv("input.csv")
df

Is it a quarto way to style the table and in example hide/remove the row index, that it's not real data.

Thank you

[cscheid]

This is a pandas index rendering issue. https://stackoverflow.com/questions/24644656/how-to-print-pandas-dataframe-without-index

[aborruso]

This is a pandas index rendering issue. https://stackoverflow.com/questions/24644656/how-to-print-pandas-dataframe-without-index

Thank you @cscheid I had already tried it.

But in the second way, I have to find a way to get the quarto pandas dataframe standard style, and not to have a sort of plain text.

[AlFontal]

As @cscheid mentioned, this is something related to pandas and not quarto.

To solve this (and much more) in pandas, check the style guide, which enables you to customize almost everything in a rendered dataframe.

For your case, what you should do is simply:

df.style.hide(axis='index')

That should remove the index for the output and give you the default rendering.

[AlFontal]

Hey @aborruso!

The way Quarto handles the CSS output of pandas styler is a bit annoying yes, my discussion (#3964 ) got no traction whatsoever sadly.

The thing is that the pandas styler appends a <style> tag with CSS specifying the attributes for the elements within the table, but Quarto, when rendering from .ipynb to .html completely omits that tag.

There are two ways of fixing them, one is a bit cumbersome, and the other is even more cumbersome:

• If you want a table class where the td are centered and the th are left-aligned, you can just define custom CSS classes and include the file in your _quarto.yml:

# _quarto.yml
format:
  html:
    css: styles.css

/* styles.css */

td td-left {
  text-align: left;
}
th .th-center {
  text-align: center;
}

And then, include these defined classes in your call:

(df
 .style
 .hide_index()
 .set_table_attributes("class='dataframe table-hover td-left th-center'")
)

This seems to work on my examples. But you will not be able to select custom formatting for each different column, you can only differentiate between headers and normal cells.

If you want to make use of the extensive CSS editing that pandas provides and customize individual cells:

Here I am doing a really cumbersome and ugly solution, but it's working for my usecase. Basically, you have to save the custom styles generated by pandas into a CSS file and include them in the .yml metadata of your document.

In my case, I use BeautifulSoup to extract the style tag from the generated html since it's already a dependency of my project, but you should be able to do the same manually. The example I generated in my discussion 'solved', showing you an example where each :

from bs4 import BeautifulSoup
from plotnine.data import mtcars

df = (mtcars
[['name', 'mpg', 'cyl']]
 .head()
 .style
 .hide(axis='index')
 .set_table_attributes("class='dataframe'")
 .highlight_max(color='red')
 .set_properties(subset=['name'], **{'text-align': 'left'})
 .set_properties(subset=['mpg'], **{'text-align': 'right'})
 .set_properties(subset=['cyl'], **{'text-align': 'center'})
 .format({'mpg': '{:.2f}'})
)

style = BeautifulSoup(df.to_html()).find('style')
with open('custom.css', 'w') as fh:
    fh.write(style.text)
df

This renders in Quarto:

Basically what I do is keep a file per document and append to the custom.css stylesheet everytime I use any extra CSS.

It's really cumbersome so if it was fixed by default when quarto renders it it would be great, but at least this seems to work. If you can upvote or comment on my discussion (#3964) maybe we can get some attention from the devs.

[aborruso]

The sad thing is that the table formatting you apply in R, it is easy and immediate to have it in the quarto html output. Not with python :(

@cscheid I'm tagging you, because you are in this thread, and I think that #3964 is useful and important.

Thank you very much @AlFontal

[aborruso]

@AlFontal I have tried to apply your great tip

(df.style.hide_index().set_table_attributes("class='dataframe table-hover'"))

to apply table-hover to a table. But it does not work, I do not have table-hover style.
What am I doing wrong?

I'm using quarto 1.3.228. This is the rendered HTML page, this is the code and this the _metadata for that folder.

As usual, thank you

[aborruso]

@AlFontal it was my stupid error I had #| output: false. Sorry

[AlFontal]

Glad you got it solved @aborruso. That's a nice website!
Buon inizio di settimana ;)