Static DataFrame output in notebooks is not uncollapsible

[Jolanrensen]

After #480 and #511 we now have static DataFrame outputs in Notebooks. However, as can be seen in this example,

, nested DataFrames are not rendered and cannot be interacted with. This is because nested JS and iFrames are prohibited in GitHub's rendering of notebooks.
We need to explore whether there's a way to have collapsible DataFrames without using JS. Maybe something like <details> could work?

For example:

url	name	repos	members
https://api.github.com/orgs/JetBrains	JetBrains	[100 x 37] url name repos members https://api.github.com/orgs/JetBrains JetBrains [100 x 37] [187 x 7]	[187 x 7]

[Jolanrensen]

Getting there :)

[Jolanrensen]

The ColGroups are more difficult. However, I think we could also reuse part of our normal HTML generator, uncollapse all grouped columns and provide it statically like that.

[Jolanrensen]

test without CSS for github

name				age	city	weight	isHappy	lastName2	frameCol	frameCol2
firstName			lastName
firstName	secondName	thirdName
Alice	null	null	Cooper	15	London	54	true	Cooper	DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows	DataFrame [7 x 7] name age city weight isHappy lastName2 frameCol firstName lastName firstName secondName thirdName Alice null null Cooper 15 London 54 true Cooper DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Dylan 45 Dubai 87 true Dylan DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Daniels 20 Moscow null false Daniels DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Chaplin 40 Milan null true Chaplin DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Marley 30 Tokyo 68 true Marley DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows ... showing only top 5 of 7 rows
Bob	null	null	Dylan	45	Dubai	87	true	Dylan	DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows	DataFrame [7 x 7] name age city weight isHappy lastName2 frameCol firstName lastName firstName secondName thirdName Alice null null Cooper 15 London 54 true Cooper DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Dylan 45 Dubai 87 true Dylan DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Daniels 20 Moscow null false Daniels DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Chaplin 40 Milan null true Chaplin DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Marley 30 Tokyo 68 true Marley DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows ... showing only top 5 of 7 rows
Charlie	null	null	Daniels	20	Moscow	null	false	Daniels	DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows	DataFrame [7 x 7] name age city weight isHappy lastName2 frameCol firstName lastName firstName secondName thirdName Alice null null Cooper 15 London 54 true Cooper DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Dylan 45 Dubai 87 true Dylan DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Daniels 20 Moscow null false Daniels DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Chaplin 40 Milan null true Chaplin DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Marley 30 Tokyo 68 true Marley DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows ... showing only top 5 of 7 rows
Charlie	null	null	Chaplin	40	Milan	null	true	Chaplin	DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows	DataFrame [7 x 7] name age city weight isHappy lastName2 frameCol firstName lastName firstName secondName thirdName Alice null null Cooper 15 London 54 true Cooper DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Dylan 45 Dubai 87 true Dylan DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Daniels 20 Moscow null false Daniels DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Chaplin 40 Milan null true Chaplin DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Marley 30 Tokyo 68 true Marley DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows ... showing only top 5 of 7 rows
Bob	null	null	Marley	30	Tokyo	68	true	Marley	DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows	DataFrame [7 x 7] name age city weight isHappy lastName2 frameCol firstName lastName firstName secondName thirdName Alice null null Cooper 15 London 54 true Cooper DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Dylan 45 Dubai 87 true Dylan DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Daniels 20 Moscow null false Daniels DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Chaplin 40 Milan null true Chaplin DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Marley 30 Tokyo 68 true Marley DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows ... showing only top 5 of 7 rows
Alice	null	null	Wolf	20	null	55	false	Wolf	DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows	DataFrame [7 x 7] name age city weight isHappy lastName2 frameCol firstName lastName firstName secondName thirdName Alice null null Cooper 15 London 54 true Cooper DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Dylan 45 Dubai 87 true Dylan DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Daniels 20 Moscow null false Daniels DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Chaplin 40 Milan null true Chaplin DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Marley 30 Tokyo 68 true Marley DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows ... showing only top 5 of 7 rows
Charlie	null	null	Byrd	30	Moscow	90	true	Byrd	DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows	DataFrame [7 x 7] name age city weight isHappy lastName2 frameCol firstName lastName firstName secondName thirdName Alice null null Cooper 15 London 54 true Cooper DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Dylan 45 Dubai 87 true Dylan DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Daniels 20 Moscow null false Daniels DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Charlie null null Chaplin 40 Milan null true Chaplin DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows Bob null null Marley 30 Tokyo 68 true Marley DataFrame [7 x 5] name age city weight isHappy firstName lastName Alice Cooper 15 London 54 true Bob Dylan 45 Dubai 87 true Charlie Daniels 20 Moscow null false Charlie Chaplin 40 Milan null true Bob Marley 30 Tokyo 68 true ... showing only top 5 of 7 rows ... showing only top 5 of 7 rows

[Jolanrensen]

apparently in notebooks, Github's rendering engine seems to strip out <details> and <summary> tags :/

[Jolanrensen]

Github really cannot render anything...