Fixed header data tables

[raissa-amaral]

Hey everyone, just thought I would share something it took me a while to realise and it may be useful for other people:

Problem: Dataframes being displayed on the dashboard were getting very long, and users were losing track of the headers - as well as the dashboard wasn't looking so nice

Desired outcome: Scrollable dataframe visualisations with fixed headers

Options attempted:

• Set jupyter-flex card heights: didn't work because pandas data frame doesn't have scrollable compoents
• Use plotly tables: it would work but it doesn't allow for much customisation, and you can't copy cell values

Final solution:
Change dataframe's classes through the custom css file:

.table {
	table-layout:fixed;
	margin:auto;
}
.table th, td {
	padding:5px 10px;
	border:1px solid #000;
}
.table thead, tfoot {
	background:#f9f9f9;
	display:table;
	width:100%;
	width:calc(100% - 18px);
}
.table tbody {
	height:300px;
	overflow:auto;
	overflow-x:hidden;
	display:block;
	width:100%;
}
.table tbody tr {
	display:table;
	width:100%;
	table-layout:fixed;
}

Just add the above classes to your css file and see the magic happening!

Note: I'm not hosting the result anywhere, so I need all features to work with plain HTML, CSS and JS

Hope that helps :)