mwouts / itables Goto Github PK

I find that downsampling rows makes a lot of sense, while downsampling columns almost always makes me rerun the line and downsample myself.
Is there a way to support this natively? I would argue that the default should be to downsample only rows and not columns, but even if it's not - it would be great if it's configurable somehow, so that I can make that be the behavior.

Thanks!

I found some really bizarre truncation behavior and I'm struggling with how to overcome it. Here's the simplest reproducible example I could find:

import pandas as pd
import itables
import itables.options
itables.options.classes = [
    'display', 
    'compact',
    'nowrap'
]


df = pd.DataFrame({
    'origin': [
        'coreB_corsairApuCyclic',
    ],
    'signal_name': [
        'cyc_fuelCtrl_fuelIntegral'
    ],
    'signal_value': [
        277.836
    ]
})

itables.show(df,
    scrollX="500px",
    scrollY="500px", 
    scrollCollapse=True,
    paging=False,  
)

The signal_name is being truncated:

If I change the last lower-case l to an upper-case L, it doesn't truncate the string! Other than manually changing the width of the columns, is there any more way to tune how things get truncated?

Another really nice to have would be to be able to hover over a truncated value and see the whole thing.

I installed itables(0.2.1),it successedly inbstalled and I insert import itables.interactive ;
However,it didn't work,the dataframe didn't display.
The dataframe had data,when I use print or display(from ipython),the dataframe displayed;
I didn't know what's the matter.

... for example, if I want the table to initially appear reverse sorted on the 2nd column?

Hi
This is the first time I tried to use itables on Jypyter.
Got this error
FileNotFoundError: [Errno 2] No such file or directory: 'C:\\Users\\username\\Anaconda3\\lib\\site-packages\\itables\\require_config.js'
version 0.4.3

In version 0.4.x we load datatables.net using a mix of require.js (Jupyter Notebook, NBconvert) and ESM (Jupyter Lab and others).

When datatables.net becomes ready for this, we should be using ESM in all cases.

I'd like to study the option to display datatables in a notebook using simple iframes as suggested in this comment:

from IPython.display import display, IFrame

IFrame(src="iframe.html", width="100%", height="")

where the content of iframe.html is:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>$(document).ready(function () {
    $('#example').DataTable();
});</script>
<table id="example">
    <thead>
    <tr>
        <th>A</th>
        <th>B</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    </tfoot></table>

What I like in this approach is

• It works in Jupyter Notebook, Jupyter Lab, and also nbconvert
• It does not depend on requirejs which is not available in Jupyter Lab
• The initialization cell is not required any more, since the jquery and datatables libraries are loaded in the iframe

What I don't like about the approach is

• I'd much prefer to embed the iframe content in the notebook than in another file (seems feasible)
• The JS libraries are duplicated in every iframe (not a big issue as modern browsers will load them just once? What happens when we want to allow offline notebooks?)
• The "height" of the iframe must be set properly to match the height of the content and I have no clue on how to do this.

Recommendations and other thoughts are welcome (cc @fcollonval), as well as help on what is the proper value for the height of the frame!

Hello there,

I like that there is a demand for this feature and that I am not the only one who sees that :). However, the functionality is really being duplicated here, which is perhaps shame and unnecessary reinventing of the wheel. Also, it is a great display of my failure in marketing the package properly :)

Feel free to check out the existing Jupyter DataTables

I'd very much appreciate if you fed back to me about the features that you miss in the aforementioned package and/or contributed yourself! :)

Also, Jupyter DataTables only supports Jupyter Notebooks at the moment, so it might be worthwhile to focus the attention to JupyterLab (or any other media you wish to be supported).

Cheers!
Marek

I suggest to add a couple of screenshots to the readme of the github page.
A pic is often worth a million words.

it might be nice to have a button to enable interactive mode.

A simple example of code for that:

import { DocumentRegistry } from "@jupyterlab/docregistry";
import { INotebookModel, NotebookPanel } from "@jupyterlab/notebook";
import { DisposableDelegate, IDisposable } from "@lumino/disposable";
import { ToolbarButton } from "@jupyterlab/apputils";

export class ItablesButton
  implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel>
{
  public createNew(panel: NotebookPanel): IDisposable {
    const callback = () => {
      this.itables(panel);
    };
    const button = new ToolbarButton({
      className: "itablesButton",
      label: "Itables",
      onClick: callback,
      tooltip: "Activate the itables interactive mode",
    });

    panel.toolbar.insertItem(0, "itables", button);
    return new DisposableDelegate(() => {
      button.dispose();
    });
  }

  // launch itables
  protected itables = (panel: NotebookPanel) => {
    const kernelConnection = panel.context.sessionContext.session.kernel;
    kernelConnection.requestExecute({
      code: "from itables import init_notebook_mode; init_notebook_mode(all_interactive=True)",
    });
  };
}

Regards

Loading matrix data into a dataframe it automatically gets sorted when using itables.
Of course, I'd use numpy when really working with matrices but I have already come across some (unsorted?) tables that were sorted by exotic orders for good reasons. (After all, every table is sorted even if the order is not obvious.)

It must be possible to turn the feature off.

Code:

from itables import init_notebook_mode
init_notebook_mode(all_interactive=True)

import pandas as pd

A = """\
0.9 2.3 3.4 0.8
5.1 1.2 2.3 4.3
2.1 4.3 0.8 1.0
0.2 0.1 0.9 2.1"""

df = pd.DataFrame([x.split(' ') for x in A.split('\n')])
df

Result:

Expected:

I would like to propose that the URL to the documentation be added to the about section on GitHub (see example below). This is done for Numpy, Pandas, etc. and how I think a lot of people navigate their way to the documentation.

Hi,

I was wondering if you had considered supporting use of your package within shiny apps - https://shiny.rstudio.com/py/. It would be a great contribution to the ecosystem :)

The R DT package is widely used in R/Shiny apps in part due to the excellent documentation - https://rstudio.github.io/DT/shiny.html

Thanks

Iain

The require library is not available in JupyterLab, thus I'd like to remove this dependency (see also #3 and #39).

@fwouts suggested that we could load jQuery and DataTables.net using the new import keyword in Javascript and contributed the example below:

from IPython.display import HTML

HTML("""
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script type="module">
    import $ from "https://esm.sh/[email protected]";
    import initDataTables from "https://esm.sh/[email protected][email protected]";

    initDataTables();

    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>
<table id="example">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>3</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        </tfoot>
</table>""")

This seems to work pretty well:

I'll see how to apply this methodology to replace require in the itables package.

Hi,
Is it possible to export itables rendering to an html file?
If so, how?

The main application for me would be to integrate it in Reveal.js presentations.

It would be more user friendly to render a fraction of large tables rather than issuing an error message. Can we find a way to display, like pandas, the total count of rows and columns ?

Hi,

Problem

I'm testing a minimal example on Jupyter Lab (I integrated issue #3 patch). The table is non-empty and printing it with pandas is ok, but using itable makes it be rendered as empty.

MWE

import pandas as pd

from IPython.display import HTML, display
from time import sleep

display(HTML("""
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
"""))

sleep(0.1)

from itables import init_notebook_mode
init_notebook_mode(all_interactive=True)

data = {'Name': ["John", "Anna", "Peter", "Linda"],
'Location' : ["New York", "Paris", "Berlin", "London"],
'Age' : [24, 13, 53, 33]
}

data_pandas = pd.DataFrame(data)
data_pandas

The result:

My poetry pyproject.toml

I'm running on python 3.8.10 with dependencies:

[tool.poetry.dependencies]
python = "^3.8.1"
jupyterlab = "^3.1.7"
voila = "^0.2.10"
ipywidgets = "^7.6.3"
voila-vuetify = "^0.5.2"
ipyvuetify = "^1.8.1"
pandas = "^1.3.2"
itables = "^0.3.0"

Thanks for helping me :)

Shows only the header line for a dataframe.

Using itables 0.3.0 in a jupyter notebook

IPython          : 7.28.0
ipykernel        : 6.4.1
ipywidgets       : not installed
jupyter_client   : 7.0.6
jupyter_core     : 4.8.1
jupyter_server   : not installed
jupyterlab       : not installed
nbclient         : not installed
nbconvert        : not installed
nbformat         : not installed
notebook         : not installed
qtconsole        : not installed
traitlets        : 5.1.0

How do I center align the header and the rows within the table ? I have tried many things but nothing seems to be working.

Hi,

I try to integrate your awesome package into Pretty Jupyter. I noticed that itables loads the jQuery without a possibility to overload this settings. This is a bit problematic for me because in the exported HTML file I use another jQuery, which is overwritten by this import. I hotfixed it with jQuery.noConflict() for now, however a better solution is needed.

Some possible solutions that occur to me:

• Allow to load not load jQuery. Here might be a problem with different IDEs (vscode,...) having or not having jQuery already imported.
• Load the jQuery only if there is none yet loaded.
• Avoid global variable $ and use your own named version. It might also be necessary to force this onto DataTables.

I would like also to ask if there is a reliable way to detect whether the jQuery was imported. I hacked some selector ($(".output_subarea.output_javascript"), but i don't know if this will hold in future releases. Some IDd element would be nice, but I didn't find any.

Just prints out an empty table. Is this a known issue?
I'm using Google Colaboratory with a local runtime, i.e. running my own Jupyter backend, not hosted by Google.

When I test following codes on a new created jupyternote book, it works. however, once the note book is saved and reopen again, it no longer works. (the df table not shown, only the column headers are displayed).

Tried clear browser cache, restart kernal, restart pc, cant solve the problem. Any one has any idea on this?

Test code:
import itables.interactive
import world_bank_data as wb

df = wb.get_countries()
df

Could itable fixed first column or fixed specify multiple columns?

Hello
it seems that itable doesn't support displaying dataframes with multiindex, whereas datatables could support it .
This seems to come from the fact that _make_header function only works for non-multiindex columns.
However it seems that Pandas's dataframe to_html() function is able to correctly render multiindex columns, using much more complex logic. It also seems that using the raw datatables lib over the html pandas dataframe will indeed correctly convert the dataframe.

So, my question is the following:
would it be possible to add a functionality so that the "base table HTML" for the dataframe is not generated with itables code but with pandas's to_html code ? This would also allow that styling defined in pandas is preserved

thanks!

Thanks so much for the Colab support! Works great.

One issue I have is that in Colab dark theme (Tools -> Settings -> Theme: dark) the itable does not fully adapt. Its background remains gray but the text color inherits the (very similar) gray text color from the Colab theme, so the numbers are hard to see.
Additionally, the page buttons on the bottom only show up for real when you hover over them (they somehow keep the black text color against the dark theme background). I'm guessing for the same reason.
Here's a screenshot:

Is there a way to change the theme of itables to dark? Or maybe manually changing the displayed text color to black, so even if the tables are light theme the data is visible?

Thanks!

Currently it's hardcoded to only pass in "data" but would be create if that could be customized in some way

datatables has support for individual column searching:
https://datatables.net/examples/api/multi_filter.html

I'm not sure if it's possible with itables currently to add the appropriate html and javascript to make this happen. It would be nice if it was an option (enable_column_search).

Columns names should either show "aaa..." with option to hover or either be in the minimum width of the column name.

Thanks for this package :)

We should split the README into multiple chapters of a Jupyter Book

TODO

• Fix the table width and font
• Fix the issue with the sample dataframe notebook
• Automatize the publication on GitHub pages

Hello,
thank you for providing this nice package.
I have the following issue:
I would like to display a table of a dataframe loaded from an excel table. The first 4 columns have strings which are rather short, while the 5th columns contains lengthier text. How can I adjust the columns' width individually or automatically in itables?

Best regards,
Jonas

Hello,
thanks for this library, it's been really useful.

I'm looking to use regular expressions as input for the search box. There is an example here, where you mark the regex box and the search box works as expected. Is it possible to add that function to my code? I really don't know how to go about it and any help/example is appreciated (I dont'care for the option boxes, if the default search box understand regular expressions would be more than enough).

Also, in the documentation about the API search(), says:

function search( input [, regex[ , smart[ , caseInsen ]]] )
Description:
Set the global search to use on the table. Note this doesn't actually perform the search, but rather queues it up - use draw() to perform the search and display the result.

Where one of the parameters is:

regex | boolean | Yes - default:false
Treat as a regular expression (true) or not (default, false).

Steps to reproduce:

Open https://mybinder.org/v2/gh/mwouts/itables/master?filepath=README.md
Run the first cell
Refresh the page
Re-run the first cell

When running jupyter nbconvert --to html test.ipynb

to convert the example script from the website (see below), the resulting html page only shows the header of table but no contents.
When inspecting the HTML code, the header is in plain HTML while the data are in a JavaScript. However, they don't show in any of the browsers I've tried. Am I missing anything?

import world_bank_data as wb

itables.init_notebook_mode(all_interactive=True)

df = wb.get_countries()
df```

For instance, if I run

jupytext --to ipynb advanced_parameters.md --execute

on this document, and then open the resulting .ipynb file, no interactive table is displayed.

If I open and re-execute the notebook in another editor (here VS Code), the interactive tables works.
The diff between the version generated by jupytext --execute and VS Code is limited to the outputs of the init_notebook_mode cell:

The version that fails has a list of string in "application/javascript"

"outputs": [
    {
     "data": {
      "application/javascript": [
       "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */\n",
       "!function(e,t) (...)

while the version that works has a single string in "application/javascript":

"outputs": [
    {
     "data": {
      "application/javascript": "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */\n!function(e,t)

The guidance to solve this very weak and the "see our [require.config]" is broken. What am I suppose to do to resolve this??

thank-you!

When a notebook is reloaded in PyCharm, the interactive tables display "Loading ... (need help?)" but the tables never show up.
This affects itables==1.0.0 (which introduces the offline mode).

Known workaround: call init_notebook_mode with connected=True to restore the connected mode which is not affected by this issue.

Please comment on this thread if you know how to

• Show browser logs in PyCharm
• Detect that the notebook is being opened in PyCharm (then we could change the default value for connected in that case)

Hi,

Thank you for this project!
I encountered 2 problems while using itables.

1. How can I remove the red warning messages?

2020-12-14 13:24:47,950 [41773] WARNING  itables.downsample:22: [JupyterRequire] showing 24x5 of 24x26 as maxColumns=5. See https://mwouts.github.io/itables/#downsampling

2. The table did not show when I download jupyter notebook as html, how should I solve that problem?

If you have more than 41 character text in a cell,
the cells well not be adjusted to the longest text in the column or the text will not be displayed in two lines in the cell.
The cell will display the follwoing:
a123456789b123456789b123456789c123456789d...

Sample Values
a123456789b123456789b123456789c123456789d12,ZH,Africa Eastern and Southern,Aggregates,,Aggregates,Aggregates,,,

Ag-Grid is a renowned JS table library.

It has a mixed community/enterprise licensing - see here for a description of the features available in either version.

Is there any user interested in seeing support for ag-grid in this project?
(An experimental version is available in this branch)

If so, I'll need help to setup the default table size and style (cc @btribonde)

Is there any intention to make the table editable? Not only displaying and filtering data but editing cells and add or modify content of cells.

When pandas option display.max_columns is set to None, trying to use show() results in:

TypeError: '>' not supported between instances of 'int' and 'NoneType'

It seems to be because of this line and then later using that None in this line.

I'd submit a PR, but it doesn't look like this package is actively maintained. Otherwise it's a simple change of setting the default unless it's None.

Workaround:

Pass maxColumns explicitly to show()

In Jupyter lab, importing itables yields an error: Javascript Error: require is not defined.

At the moment itables does not have an offline mode. While the table data is embedded in the notebook, the jquery and datatables.net are loaded from a CDN, see require.config and table template, so an internet connection is required to display the tables.

Is there a way to add offline usage?

Can we add support for some extensions like buttons? See #18 for a first attempt.

Version:
itables==0.3.0

Code:

import itables
import itables.options as opt
opt.classes = ["display", "cell-border"]
opt.maxBytes = 2**20
itables.show(
    bg_all_df, scrollY="800px", scrollCollapse=True, paging=False
)

Issue:
If the text lenght larger than threshold if found that the tail will cutdown.
how to show the full centent in the cell without wrap?

See https://datatables.net/blog/2014-11-07 and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

Issues in version 0.1.0:

• Column width is not automatically adjusted for the header / column content
• Explicit column width does not always work
• ScrollX is not automatically activated on tables with many columns

Thank you for working on this package.

I could successfully render the breast_cancer data frame on jupyter notebook and I could successfully convert data tables to static html.

However, after convert to static html, the column width were not right and the column names were overlapping to each other.

Here are my print screens.

Save Notebook Widget State

Download as HTML(.html)

It's gone

Opening the README.ipynb in nteract yields a JS error: TypeError: require.config is not a function.