Skip to content

MESQUAL HTML Table

HTMLTable

A class to create interactive Tabulator tables from pandas DataFrames.

Tabulator (http://tabulator.info/) is a feature-rich interactive table library that provides sorting, filtering, formatting, and editing capabilities.

This class automatically detects column types and applies appropriate formatters, sorters, and filters. It supports customization through column configuration and provides methods to display tables in Jupyter notebooks or save as HTML files.

Attributes:

Name Type Description
df DataFrame

The pandas DataFrame to display.

title Optional[str]

Optional title for the table.

height str

Height of the table container.

layout str

Tabulator layout mode.

theme str

Visual theme for the table.

pagination Union[str, bool]

Pagination settings.

page_size int

Number of rows per page when pagination is enabled.

movable_columns bool

Whether columns can be moved.

resizable_columns bool

Whether columns can be resized.

column_config Optional[Dict[str, Dict[str, Any]]]

Custom column configurations.

responsive bool

Whether table should be responsive.

selectable bool

Whether rows can be selected.

table_id Optional[str]

Unique identifier for the table.

container_style Optional[Dict[str, str]]

Custom CSS styles for container.

default_float_precision int | None

Default decimal places for float columns.

Source code in submodules/mesqual/mesqual/visualizations/html_table.py
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
class HTMLTable:
    """A class to create interactive Tabulator tables from pandas DataFrames.

    Tabulator (http://tabulator.info/) is a feature-rich interactive table library
    that provides sorting, filtering, formatting, and editing capabilities.

    This class automatically detects column types and applies appropriate formatters,
    sorters, and filters. It supports customization through column configuration
    and provides methods to display tables in Jupyter notebooks or save as HTML files.

    Attributes:
        df (pd.DataFrame): The pandas DataFrame to display.
        title (Optional[str]): Optional title for the table.
        height (str): Height of the table container.
        layout (str): Tabulator layout mode.
        theme (str): Visual theme for the table.
        pagination (Union[str, bool]): Pagination settings.
        page_size (int): Number of rows per page when pagination is enabled.
        movable_columns (bool): Whether columns can be moved.
        resizable_columns (bool): Whether columns can be resized.
        column_config (Optional[Dict[str, Dict[str, Any]]]): Custom column configurations.
        responsive (bool): Whether table should be responsive.
        selectable (bool): Whether rows can be selected.
        table_id (Optional[str]): Unique identifier for the table.
        container_style (Optional[Dict[str, str]]): Custom CSS styles for container.
        default_float_precision (int | None): Default decimal places for float columns.
    """

    def __init__(
            self,
            df: pd.DataFrame,
            title: Optional[str] = None,
            height: str = "400px",
            layout: str = "fitColumns",  # fitColumns, fitData, fitDataFill
            theme: str = "simple",  # simple, bootstrap, midnight, modern, etc.
            pagination: Union[str, bool] = "local",  # local, remote, or False
            page_size: int = 10,
            movable_columns: bool = True,
            resizable_columns: bool = True,
            column_config: Optional[Dict[str, Dict[str, Any]]] = None,
            responsive: bool = True,
            selectable: bool = False,
            table_id: Optional[str] = None,
            container_style: Optional[Dict[str, str]] = None,
            default_float_precision: int | None = 2,
    ):
        """Initialize the HTMLTable with configuration options.

        Args:
            df: The pandas DataFrame to display in the table.
            title: Optional title to display above the table.
            height: CSS height value for the table container (default: "400px").
            layout: Tabulator layout mode - "fitColumns", "fitData", or "fitDataFill".
            theme: Visual theme - "simple", "bootstrap", "midnight", "modern", etc.
            pagination: Pagination mode - "local", "remote", or False to disable.
            page_size: Number of rows to display per page when pagination is enabled.
            movable_columns: Whether users can drag columns to reorder them.
            resizable_columns: Whether users can resize column widths.
            column_config: Dictionary mapping column names to Tabulator column definitions
                for custom formatting, validation, or behavior.
            responsive: Whether the table should adapt to different screen sizes.
            selectable: Whether users can select table rows.
            table_id: Custom HTML ID for the table element. If None, generates unique ID.
            container_style: CSS styles to apply to the table container as key-value pairs.
            default_float_precision: Number of decimal places for float columns.
                Set to None to disable automatic formatting.

        Example:

            >>> import pandas as pd
            >>> df = pd.DataFrame({'Name': ['Alice', 'Bob'], 'Score': [95.5, 87.2]})
            >>> table = HTMLTable(df, title="Student Scores", height="300px")
        """
        self.df = df
        self.title = title
        self.height = height
        self.layout = layout
        self.theme = theme
        self.pagination = pagination
        self.page_size = page_size
        self.movable_columns = movable_columns
        self.resizable_columns = resizable_columns
        self.column_config = column_config or {}
        self.responsive = responsive
        self.selectable = selectable
        self.table_id = table_id or f"tabulator_{str(uuid.uuid4()).replace('-', '')[:8]}"
        self.container_style = container_style or {}
        self.default_float_precision = default_float_precision

    def _get_column_definitions(self) -> List[Dict[str, Any]]:
        """Generate column definitions for Tabulator based on DataFrame columns and types.

        Automatically detects column data types and applies appropriate Tabulator
        configurations including sorters, formatters, and filters. Custom configurations
        from column_config override automatic detection.

        Returns:
            List of column definition dictionaries compatible with Tabulator.
        """
        column_defs = []

        for col in self.df.columns:
            # Start with default configuration
            col_def = {
                "title": str(col),
                "field": str(col),
                "headerFilter": "input",
            }

            if col in self.column_config:
                col_def.update(self.column_config[col])
            else:
                sample_data = self.df[col].dropna().iloc[0] if not self.df[col].dropna().empty else None

                if pd.api.types.is_numeric_dtype(self.df[col]):
                    col_def["sorter"] = "number"
                    col_def["headerFilter"] = "number"
                    col_def["hozAlign"] = "right"

                    if pd.api.types.is_float_dtype(self.df[col]) and (self.default_float_precision is not None):
                        if col not in self.column_config or "formatter" not in self.column_config[col]:
                            col_def["formatter"] = "money"
                            col_def["formatterParams"] = {
                                "symbol": "",
                                "precision": str(self.default_float_precision),
                                "thousand": ",",
                                "decimal": "."
                            }
                elif pd.api.types.is_datetime64_dtype(self.df[col]):
                    col_def["sorter"] = "date"
                    col_def["headerFilter"] = "input"
                    col_def["formatter"] = "datetime"
                    col_def["formatterParams"] = {"outputFormat": "YYYY-MM-DD HH:mm:ss"}
                elif isinstance(sample_data, bool) or pd.api.types.is_bool_dtype(self.df[col]):
                    col_def["sorter"] = "boolean"
                    col_def["formatter"] = "tickCross"
                    col_def["headerFilter"] = "tickCross"
                    col_def["hozAlign"] = "center"
                else:
                    col_def["sorter"] = "string"

            column_defs.append(col_def)

        return column_defs

    def _process_dataframe(self) -> List[Dict[str, Any]]:
        """Process DataFrame to handle NaN values and convert to JSON records.

        Converts pandas DataFrame to a format suitable for Tabulator by handling
        NaN values, ensuring numeric columns are properly typed, and converting
        to JSON-serializable records.

        Returns:
            List of dictionaries representing table rows.
        """
        processed_df = self.df.copy()

        for col in processed_df.columns:
            if pd.api.types.is_numeric_dtype(processed_df[col]):
                processed_df[col] = processed_df[col].astype(float)
            processed_df[col] = processed_df[col].where(~pd.isna(processed_df[col]), None)

        records = processed_df.to_dict(orient='records')
        return records

    def _get_container_style_string(self) -> str:
        """Convert container style dictionary to CSS string.

        Transforms Python-style CSS property names (snake_case) to CSS format
        (camelCase) and combines with base styling.

        Returns:
            CSS style string for the table container.
        """
        base_style = "padding: 10px; margin: 15px 0;"

        for key, value in self.container_style.items():
            css_key = ''.join(word.capitalize() if i > 0 else word
                              for i, word in enumerate(key.split('_')))
            base_style += f" {css_key}: {value};"

        return base_style

    def get_html(self, include_dependencies: bool = True) -> str:
        """Generate HTML representation of the interactive table.

        Creates the complete HTML markup including JavaScript initialization
        for the Tabulator table with all configured options.

        Args:
            include_dependencies: Whether to include Tabulator CSS/JS dependencies
                in the output. Set to False when embedding in documents that already
                include these dependencies.

        Returns:
            Complete HTML string ready for display or embedding.

        Example:

            >>> table = HTMLTable(df, title="My Data")
            >>> html_output = table.get_html()
            >>> # Save to file or display in web application
        """
        processed_data = self._process_dataframe()
        column_defs = self._get_column_definitions()
        container_style = self._get_container_style_string()

        html_parts = []

        if include_dependencies:
            html_parts.append(
                """
                <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
                <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
                """
            )

        html_parts.append(f'<div style="{container_style}">')

        if self.title:
            html_parts.append(f'<h3 style="margin-bottom: 10px;">{self.title}</h3>')

        html_parts.append(f'<div id="{self.table_id}" style="height: {self.height};"></div>')

        html_parts.append(
            f"""
            <script type="text/javascript">
                document.addEventListener('DOMContentLoaded', function() {{
                    var tabledata = {json.dumps(processed_data)};

                    var table = new Tabulator("#{self.table_id}", {{
                        data: tabledata,
                        columns: {json.dumps(column_defs)},
                        layout: "{self.layout}",
                        responsiveLayout: {json.dumps(self.responsive)},
                        movableColumns: {json.dumps(self.movable_columns)},
                        resizableColumns: {json.dumps(self.resizable_columns)},
                        selectable: {json.dumps(self.selectable)},
                    """
        )

        if self.pagination:
            html_parts.append(f"""
            pagination: "{self.pagination}",
            paginationSize: {self.page_size},
            paginationSizeSelector: [10, 25, 50, 100, true],
            """)

        if self.theme:
            html_parts.append(f'    theme: "{self.theme}",')

        html_parts.append(
            """
                    });
                });
            </script>
            """
        )
        html_parts.append("</div>")

        return "\n".join(html_parts)

    def save_html(self, filepath: str, title: str = "Tabulator Table") -> str:
        """Save the table as a standalone HTML file.

        Creates a complete HTML document with embedded Tabulator dependencies
        and saves it to the specified path. The resulting file can be opened
        directly in any web browser.

        Args:
            filepath: Path where to save the HTML file. Parent directories
                will be created if they don't exist.
            title: Title for the HTML document head section.

        Returns:
            The filepath of the saved file (same as input parameter).

        Example:

            >>> table = HTMLTable(df, title="Sales Report")
            >>> saved_path = table.save_html("reports/sales_table.html")
            >>> print(f"Table saved to: {saved_path}")
        """
        os.makedirs(os.path.dirname(os.path.abspath(filepath)), exist_ok=True)

        html = f"""<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>{title}</title>
            <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
            <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
            <style>
                body {{
                    font-family: Arial, sans-serif;
                    margin: 20px;
                    background-color: #f5f5f5;
                }}
                .container {{
                    background-color: white;
                    padding: 20px;
                    border-radius: 5px;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
                }}
            </style>
        </head>
        <body>
            <div class="container">
                {self.get_html(include_dependencies=False)}
            </div>
        </body>
        </html>
        """

        with open(filepath, 'w', encoding='utf-8') as f:
            f.write(html)

        return filepath

    def show(self, width: str = "100%", height: str = "600"):
        """Display the interactive Tabulator table inline in a Jupyter notebook.

        Creates a temporary HTML file and displays it using an IPython IFrame.
        This method is designed for use within Jupyter notebook environments.

        Args:
            width: Width of the display frame (CSS units or percentage).
            height: Height of the display frame in pixels (as string).

        Note:
            This method requires IPython to be available and will only work
            in Jupyter notebook environments.

        Example:

            >>> # In a Jupyter notebook cell:
            >>> table = HTMLTable(df, title="Interactive Data")
            >>> table.show(width="800px", height="400")
        """
        import tempfile
        from pathlib import Path
        from IPython.display import IFrame, display

        tmp_dir = Path(tempfile.mkdtemp())
        html_path = tmp_dir / f"{self.table_id}.html"
        self.save_html(str(html_path))
        display(IFrame(src=str(html_path.resolve()), width=width, height=height))

__init__

__init__(df: DataFrame, title: Optional[str] = None, height: str = '400px', layout: str = 'fitColumns', theme: str = 'simple', pagination: Union[str, bool] = 'local', page_size: int = 10, movable_columns: bool = True, resizable_columns: bool = True, column_config: Optional[Dict[str, Dict[str, Any]]] = None, responsive: bool = True, selectable: bool = False, table_id: Optional[str] = None, container_style: Optional[Dict[str, str]] = None, default_float_precision: int | None = 2)

Initialize the HTMLTable with configuration options.

Parameters:

Name Type Description Default
df DataFrame

The pandas DataFrame to display in the table.

required
title Optional[str]

Optional title to display above the table.

None
height str

CSS height value for the table container (default: "400px").

'400px'
layout str

Tabulator layout mode - "fitColumns", "fitData", or "fitDataFill".

'fitColumns'
theme str

Visual theme - "simple", "bootstrap", "midnight", "modern", etc.

'simple'
pagination Union[str, bool]

Pagination mode - "local", "remote", or False to disable.

'local'
page_size int

Number of rows to display per page when pagination is enabled.

10
movable_columns bool

Whether users can drag columns to reorder them.

True
resizable_columns bool

Whether users can resize column widths.

True
column_config Optional[Dict[str, Dict[str, Any]]]

Dictionary mapping column names to Tabulator column definitions for custom formatting, validation, or behavior.

None
responsive bool

Whether the table should adapt to different screen sizes.

True
selectable bool

Whether users can select table rows.

False
table_id Optional[str]

Custom HTML ID for the table element. If None, generates unique ID.

None
container_style Optional[Dict[str, str]]

CSS styles to apply to the table container as key-value pairs.

None
default_float_precision int | None

Number of decimal places for float columns. Set to None to disable automatic formatting.

2

Example:

>>> import pandas as pd
>>> df = pd.DataFrame({'Name': ['Alice', 'Bob'], 'Score': [95.5, 87.2]})
>>> table = HTMLTable(df, title="Student Scores", height="300px")
Source code in submodules/mesqual/mesqual/visualizations/html_table.py
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
def __init__(
        self,
        df: pd.DataFrame,
        title: Optional[str] = None,
        height: str = "400px",
        layout: str = "fitColumns",  # fitColumns, fitData, fitDataFill
        theme: str = "simple",  # simple, bootstrap, midnight, modern, etc.
        pagination: Union[str, bool] = "local",  # local, remote, or False
        page_size: int = 10,
        movable_columns: bool = True,
        resizable_columns: bool = True,
        column_config: Optional[Dict[str, Dict[str, Any]]] = None,
        responsive: bool = True,
        selectable: bool = False,
        table_id: Optional[str] = None,
        container_style: Optional[Dict[str, str]] = None,
        default_float_precision: int | None = 2,
):
    """Initialize the HTMLTable with configuration options.

    Args:
        df: The pandas DataFrame to display in the table.
        title: Optional title to display above the table.
        height: CSS height value for the table container (default: "400px").
        layout: Tabulator layout mode - "fitColumns", "fitData", or "fitDataFill".
        theme: Visual theme - "simple", "bootstrap", "midnight", "modern", etc.
        pagination: Pagination mode - "local", "remote", or False to disable.
        page_size: Number of rows to display per page when pagination is enabled.
        movable_columns: Whether users can drag columns to reorder them.
        resizable_columns: Whether users can resize column widths.
        column_config: Dictionary mapping column names to Tabulator column definitions
            for custom formatting, validation, or behavior.
        responsive: Whether the table should adapt to different screen sizes.
        selectable: Whether users can select table rows.
        table_id: Custom HTML ID for the table element. If None, generates unique ID.
        container_style: CSS styles to apply to the table container as key-value pairs.
        default_float_precision: Number of decimal places for float columns.
            Set to None to disable automatic formatting.

    Example:

        >>> import pandas as pd
        >>> df = pd.DataFrame({'Name': ['Alice', 'Bob'], 'Score': [95.5, 87.2]})
        >>> table = HTMLTable(df, title="Student Scores", height="300px")
    """
    self.df = df
    self.title = title
    self.height = height
    self.layout = layout
    self.theme = theme
    self.pagination = pagination
    self.page_size = page_size
    self.movable_columns = movable_columns
    self.resizable_columns = resizable_columns
    self.column_config = column_config or {}
    self.responsive = responsive
    self.selectable = selectable
    self.table_id = table_id or f"tabulator_{str(uuid.uuid4()).replace('-', '')[:8]}"
    self.container_style = container_style or {}
    self.default_float_precision = default_float_precision

get_html

get_html(include_dependencies: bool = True) -> str

Generate HTML representation of the interactive table.

Creates the complete HTML markup including JavaScript initialization for the Tabulator table with all configured options.

Parameters:

Name Type Description Default
include_dependencies bool

Whether to include Tabulator CSS/JS dependencies in the output. Set to False when embedding in documents that already include these dependencies.

True

Returns:

Type Description
str

Complete HTML string ready for display or embedding.

Example:

>>> table = HTMLTable(df, title="My Data")
>>> html_output = table.get_html()
>>> # Save to file or display in web application
Source code in submodules/mesqual/mesqual/visualizations/html_table.py
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
def get_html(self, include_dependencies: bool = True) -> str:
    """Generate HTML representation of the interactive table.

    Creates the complete HTML markup including JavaScript initialization
    for the Tabulator table with all configured options.

    Args:
        include_dependencies: Whether to include Tabulator CSS/JS dependencies
            in the output. Set to False when embedding in documents that already
            include these dependencies.

    Returns:
        Complete HTML string ready for display or embedding.

    Example:

        >>> table = HTMLTable(df, title="My Data")
        >>> html_output = table.get_html()
        >>> # Save to file or display in web application
    """
    processed_data = self._process_dataframe()
    column_defs = self._get_column_definitions()
    container_style = self._get_container_style_string()

    html_parts = []

    if include_dependencies:
        html_parts.append(
            """
            <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
            <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
            """
        )

    html_parts.append(f'<div style="{container_style}">')

    if self.title:
        html_parts.append(f'<h3 style="margin-bottom: 10px;">{self.title}</h3>')

    html_parts.append(f'<div id="{self.table_id}" style="height: {self.height};"></div>')

    html_parts.append(
        f"""
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {{
                var tabledata = {json.dumps(processed_data)};

                var table = new Tabulator("#{self.table_id}", {{
                    data: tabledata,
                    columns: {json.dumps(column_defs)},
                    layout: "{self.layout}",
                    responsiveLayout: {json.dumps(self.responsive)},
                    movableColumns: {json.dumps(self.movable_columns)},
                    resizableColumns: {json.dumps(self.resizable_columns)},
                    selectable: {json.dumps(self.selectable)},
                """
    )

    if self.pagination:
        html_parts.append(f"""
        pagination: "{self.pagination}",
        paginationSize: {self.page_size},
        paginationSizeSelector: [10, 25, 50, 100, true],
        """)

    if self.theme:
        html_parts.append(f'    theme: "{self.theme}",')

    html_parts.append(
        """
                });
            });
        </script>
        """
    )
    html_parts.append("</div>")

    return "\n".join(html_parts)

save_html

save_html(filepath: str, title: str = 'Tabulator Table') -> str

Save the table as a standalone HTML file.

Creates a complete HTML document with embedded Tabulator dependencies and saves it to the specified path. The resulting file can be opened directly in any web browser.

Parameters:

Name Type Description Default
filepath str

Path where to save the HTML file. Parent directories will be created if they don't exist.

required
title str

Title for the HTML document head section.

'Tabulator Table'

Returns:

Type Description
str

The filepath of the saved file (same as input parameter).

Example:

>>> table = HTMLTable(df, title="Sales Report")
>>> saved_path = table.save_html("reports/sales_table.html")
>>> print(f"Table saved to: {saved_path}")
Source code in submodules/mesqual/mesqual/visualizations/html_table.py
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
def save_html(self, filepath: str, title: str = "Tabulator Table") -> str:
    """Save the table as a standalone HTML file.

    Creates a complete HTML document with embedded Tabulator dependencies
    and saves it to the specified path. The resulting file can be opened
    directly in any web browser.

    Args:
        filepath: Path where to save the HTML file. Parent directories
            will be created if they don't exist.
        title: Title for the HTML document head section.

    Returns:
        The filepath of the saved file (same as input parameter).

    Example:

        >>> table = HTMLTable(df, title="Sales Report")
        >>> saved_path = table.save_html("reports/sales_table.html")
        >>> print(f"Table saved to: {saved_path}")
    """
    os.makedirs(os.path.dirname(os.path.abspath(filepath)), exist_ok=True)

    html = f"""<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{title}</title>
        <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
        <style>
            body {{
                font-family: Arial, sans-serif;
                margin: 20px;
                background-color: #f5f5f5;
            }}
            .container {{
                background-color: white;
                padding: 20px;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            }}
        </style>
    </head>
    <body>
        <div class="container">
            {self.get_html(include_dependencies=False)}
        </div>
    </body>
    </html>
    """

    with open(filepath, 'w', encoding='utf-8') as f:
        f.write(html)

    return filepath

show

show(width: str = '100%', height: str = '600')

Display the interactive Tabulator table inline in a Jupyter notebook.

Creates a temporary HTML file and displays it using an IPython IFrame. This method is designed for use within Jupyter notebook environments.

Parameters:

Name Type Description Default
width str

Width of the display frame (CSS units or percentage).

'100%'
height str

Height of the display frame in pixels (as string).

'600'
Note

This method requires IPython to be available and will only work in Jupyter notebook environments.

Example:

>>> # In a Jupyter notebook cell:
>>> table = HTMLTable(df, title="Interactive Data")
>>> table.show(width="800px", height="400")
Source code in submodules/mesqual/mesqual/visualizations/html_table.py
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
def show(self, width: str = "100%", height: str = "600"):
    """Display the interactive Tabulator table inline in a Jupyter notebook.

    Creates a temporary HTML file and displays it using an IPython IFrame.
    This method is designed for use within Jupyter notebook environments.

    Args:
        width: Width of the display frame (CSS units or percentage).
        height: Height of the display frame in pixels (as string).

    Note:
        This method requires IPython to be available and will only work
        in Jupyter notebook environments.

    Example:

        >>> # In a Jupyter notebook cell:
        >>> table = HTMLTable(df, title="Interactive Data")
        >>> table.show(width="800px", height="400")
    """
    import tempfile
    from pathlib import Path
    from IPython.display import IFrame, display

    tmp_dir = Path(tempfile.mkdtemp())
    html_path = tmp_dir / f"{self.table_id}.html"
    self.save_html(str(html_path))
    display(IFrame(src=str(html_path.resolve()), width=width, height=height))