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.
Thanks @karelin for the suggestions! Sure I will look into the fonts, that’s a good idea (and ITables does support using custom css).
I will have to identify how to get the current theme/fonts used by Streamlit and then I’ll set the same by default on ITables’ Streamlit component.
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.
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
