ITables comes to Streamlit!

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.

The Streamlit component for ITables is documented at mwouts.github.io/itables/streamlit.html, and a sample app is available at itables.streamlit.app.

A big shout out to the Streamlit developers for making the process of developing a component accessible and super well documented!

9 Likes

Looking forward to getting your feedback on the new component!

Also one thing that I noticed is that the iframe that contains the table has a fixed height, which does not work well if the users tries to display more rows, or complex filtering extensions like SearchBuilder. Please let me know if you know how to make the iframe size dynamic (Tables in a Streamlit app have a fixed height that does not work well with lengthMenu or search extensions · Issue #275 · mwouts/itables · GitHub).

Great work @mwouts

Really like the page navigation at the bottom of the table.

The Style option is also neat, as developer could customize the table.

2 Likes

:ok_hand:

Great!

Are you planning to add drill down functionality?

Thank you!

Captura de tela de 2024-05-31 18-00-39

1 Like

Thank you for the feedback!

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.

Interesting. Can you share an example of how you do this?

ITables lets you use Javascript callbacks but only in notebooks (not in the streamlit component at the moment).

There’s also the question of how you pass the expanded data (in Streamlit we have to make sure it can be transmitted as plain JSON).

Feel free to open an issue at Issues · mwouts/itables · GitHub, we can continue the conversation over there!

1 Like

Looks great, thank you!

An idea for future improvements: please consider having the same style (fonts, etc.) as in the main Streamlit app.

And a presentation advice: IMO it is better to not use wide layout in this demo. I was a bit upset before spotted bagniation far in the right :wink:

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.

Captura de tela de 2024-06-10 12-03-22

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.

1 Like