I am glad to announce that ITables, a library that renders Python DataFrames as interactive DataTables, now has a Streamlit component.
You can now display your DataFrames using itables.streamlit.interactive_table in a Streamlit application, in the same way that you use itables.show in a Jupyter Notebook or in VS Code.
The result is an interactive table that you can sort, search, paginate or even expose for download.
At the moment (v2.1.0), ITables is display only, but I hope to get the set of selected rows/cells soon, and to make the connection to the DataTables Editor at some point.
Generally speaking, ITables is an effort to give access to datatables.net from Python, so whatever you can do with datatables, you can either do it with ITables, or open an issue for that.
Currently ITables support these two extensions: searchPanes and searchBuilder extensions which you can use to filter the table content interactively.
What datatables support and is not yet available in ITables are:
Feel free to open a GitHub issue if you’d like to use them.
@desenvolvimento2nova would you have a bit more context about the example above (e.g. which library is that, and in which format do you pass the data?)
It’s DataTables itself, which I build using Jinja and pass to Streamlit using streamlit.components.v1.html.
It’s not a very practical way, so I asked if it was already available on ITables. Row Details is quite important in my context, as are colors, ordering and the footer.
def example():
details = 'AA;5;AB;5;'
rows = f'''
<tr data-child-value='{details};'>
<td class="details-control"></td>
<td>A</td>
<td style='background: linear-gradient(
to right, lightblue 135.57%, white 135.57%, white 80%, white 10%
);'>10</td>
</tr>
'''
html = '''
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<style>
td.details-control {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px"><path d="M0 0h24v24H0z" fill="none"/><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg>') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12" height="12px"><path d="M0 0h24v24H0z" fill="none"/><path d="M11 11h8v2h-8z"/></svg>') no-repeat center center;}
</style>
</style>
</head>
''' + f'''
<body>
<table id="example" class=" display compact nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th style='border: none;'></th>
<th style='border: none;'>Name</th>
<th style='border: none;'>Value</th>
</tr>
</thead>
<tbody>{rows}</tbody>
<tfoot>
<tr>
<th style='border: none;'></th>
<th style='border: none;'>Total</th>
<th style='border: none;'>10</th>
</tr>
</tfoot>
</table>
''' + '''
<script>
function format(value) {
const values = value.split(';');
let tableHTML = '<table>';
for (let i = 0; i < values.length; i += 3) {
tableHTML += '<tr>';
for (let j = 0; j < 3; j++) {
if (typeof(values[i + j]) != 'undefined') {
tableHTML += '<td>' + values[i + j] + '</td>';
}
}
tableHTML += '</tr>';
}
// Close the table
tableHTML += '</table>';
return tableHTML;
'</table>';
}
$(document).ready(function () {
var table = $('#example').DataTable({
paging: false,
scrollCollapse: true,
scrollY: '200px',
info: false,
bFilter: false,
scrollX: true,
order: [[2, 'desc']]
});
// Add event listener for opening and closing details
$('#example').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(tr.data('child-value'))).show();
tr.addClass('shown');
}
});
});
</script>
'''
with st.container(border=True):
streamlit.components.v1.html(html, height=260)
I have an HTML template that I format with Jinja. This code that I tried to give as an example does not show it in detail, but the idea is to compose a string. Using Pandas I make the groupings, total calculations, etc. and then I write the strings for the lines.
To create internal tables I use semicolons as a separator and a Javascript format function.
Sorry if I wasn’t able to clarify much.
I’ll open an issue and I’d also love to contribute a pull request, but I’m
beginner and I don’t really know how to do this well.
Do the individual column filters/searches work within Streamlit? Also, very much looking forward to the possibility of returning the selected row data. If that’s able to be developed, that would be very beneficial. Thanks again.
Still, in general, interactive_table is the recommended way to use ITables in a Streamlit application, even if it might not support everything that to_html_datatable does. For instance, when the selected rows become implemented, they will be available for interactive_table which is a real Streamlit component, but probably not for to_html_datatable.
