---
title: ITables in Quarto
subtitle: Interactive Tables in HTML reports
standalone: true
format:
  html:
    code-line-numbers: false
jupyter:
  jupytext:
    text_representation:
      extension: .qmd
      format_name: quarto
      format_version: '1.0'
      jupytext_version: 1.16.1
  kernelspec:
    display_name: python3
    language: python
    name: python3
---

## How to use ITables in Quarto

::: {.callout-note}
## Activate ITables (same as in Jupyter, VS Code, PyCharm, Google Colab...)

```{python}
#| echo: false

from IPython.display import display, HTML
import itables

# show 5 rows per 'page'
itables.options.lengthMenu = [5]

# don't show the length control
itables.options.layout["topStart"] = None

# use a smaller font (default is medium)
# see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
display(HTML("<style>.dt-container { font-size: small; }</style>"))
```

```{python}
#| echo: true

import itables

itables.init_notebook_mode(all_interactive=True)
```
:::

```{python}
#| echo: true
#| code-fold: true
#| code-summary: "... and all DataFrames become interactive!"
itables.sample_dfs.get_countries()
```

## How to make my table fit in the report?

::: {.callout-tip}
## How to make your table smaller

- display only a few rows with `lengthMenu`,
- adjust the [style or font](https://itables.org/css.html) with a custom `css`
:::

::: {.callout-note}
## This document uses

```python
from IPython.display import display, HTML

# show 5 rows per 'page'
itables.options.lengthMenu = [5]

# don't show the length control
itables.options.layout["topStart"] = None

# use a smaller font (default is medium)
# see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
display(HTML("<style>.dt-container { font-size: small; }</style>"))
```
:::

## Advanced Parameters

::: {.callout-tip}
## Parameters

ITables' [advanced parameters](https://itables.org/advanced_parameters.html):

- Can be set globally on `itables.options`, or
- Passed as arguments to the `show` function.
- Table-specific arguments like [caption](https://itables.org/advanced_parameters.html#caption) are only available in `show`.
:::

::: {.callout-warning}
## Global Options and Quarto's cache

Quarto uses a cache that may prevent your changes on `itables.options` to become effective
when you run `quarto render`.

In that case, use `--cache-refresh` or even `--execute-daemon-restart`.
:::

## About ITables

::: {.callout-note}
## GitHub <a class="github-button" href="https://github.com/mwouts/itables" data-icon="octicon-star" data-show-count="true" aria-label="Star mwouts/itables on GitHub">Star</a>

ITables is developed by [Marc Wouts](https://github.com/mwouts) on [GitHub](https://github.com/mwouts/itables),
under a MIT license. ITables is a wrapper for [datatables.net](https://datatables.net/) which is developed by Allan Jardine
[(sponsor him!)](https://github.com/sponsors/AllanJard), also under a MIT license.

<script async defer src="https://buttons.github.io/buttons.js"></script>
:::

::: {.callout-tip}
## Under the hood

ITables renders Pandas or Polars DataFrames as
interactive HTML tables using the JavaScript
[DataTables](https://datatables.net/) library.
:::

::: {.callout-tip}
## Documentation

Learn More about ITables in the [documentation](https://itables.org).
:::