jupyter / jupyter/notebook

New table style and pandas MultiIndex issues

Open
#2,408 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
Jupyter Notebook
Stars
13.3k
Forks
5.8k
Avg merge
6d 11h
Merged PRs (30d)
7

Description

Follow-up issue on https://github.com/jupyter/notebook/issues/2209, but I thought better to open a new issue.
There are still some aspects where the new table style does not play very nice with pandas generated tables, more specifically with MultiIndexes

See also the comments in the pandas issue https://github.com/pandas-dev/pandas/issues/15379#issuecomment-283066428, but the main point is that the default alignment of the headers in the new table style makes the interpretation of a table with MultiIndexes (or in general multiple header rows) somewhat confusing:

- **multi-row column headers**: due to the right-alignment instead of left alignment, multi-indexed columns get a bit strange:

![screenshot from 2017-02-28 16-07-58](https://cloud.githubusercontent.com/assets/1020496/23410756/7d64c952-fdd0-11e6-82a1-7b32b1732924.png)

I don't directly know a way to solve this in a html/css way while keeping the right alignment. In the above case, I think we would ideally want 'A' to be above 'a' ? (which is not the same as left aligning it)
Anybody an idea about this?

- **multiple row headers**: also multi-indexer rows are not ideal because the distinction between the levels is not always clear (the borders are gone, but the shading does not always differ depending on the number of rows in the level).

In this case, that is OK:

![screenshot from 2017-02-28 16-08-18](https://cloud.githubusercontent.com/assets/1020496/23410793/a22cd428-fdd0-11e6-9cd4-2632c541bcfe.png)

But in the following the shading is the same (and certainly when having more rows in one level label, or different number of rows for different labels, it becomes difficult to see the border between the level labels):

![screenshot from 2017-02-28 16-09-01](https://cloud.githubusercontent.com/assets/1020496/23410876/f017b4c8-fdd0-11e6-982f-05c26e6a72c9.png)

This could be rather easily solved with 'vertical-align: top', which looks better in this case:

![screenshot from 2017-02-28 17-00-34](https://cloud.githubusercontent.com/assets/1020496/23412934/8215fb86-fdd7-11e6-92f7-e6d014103248.png)

But the question of course is whether this will look better in general cases as well. And **whether this is something that could be changed in the default jupyter styles?** Other option is that pandas includes this in the html output, which would also not be that difficult.

Contributor guide

Open the contributing guide

Research direction

No source files, tests, or entry points are named. Start by reviewing the linked Jupyter and pandas issues and comparing the screenshots with the current default table styles and pandas-generated MultiIndex HTML. Done requires an agreed treatment for multi-row column alignment and row-header level separation.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, jupyter-notebook, pandas
Domain
frontend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.