or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-management.mddropdowns-interactive.mdexport-data-ops.mdformatting-localization.mdindex.mdinteractive-features.mdstyling-layout.md
tile.json

tessl/npm-dash--table

An interactive table component designed for viewing, editing, and exploring large datasets in Dash applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/dash-table@6.0.x

To install, run

npx @tessl/cli install tessl/npm-dash--table@6.0.0

index.mddocs/

Dash Table

Overview

Dash Table is an interactive table component specifically designed for the Dash ecosystem, providing comprehensive functionality for viewing, editing, and exploring large datasets. Built from scratch in React.js and TypeScript, it renders with standard semantic HTML table markup making it accessible, responsive, and easy to style.

The component offers a rich feature set including data filtering, sorting, editing, cell selection, row operations, conditional formatting, and pagination, all through a highly customizable API. It supports various data types, custom cell renderers, dropdown menus, and advanced styling options.

Package Information

  • Package Name: dash-table
  • Version: 6.0.4
  • Type: React Component Library (for Dash Python framework)
  • Language: JavaScript/TypeScript
  • Designed For: Dash web applications (Python)

Installation

In Python Dash applications, dash-table is included with the main dash package:

pip install dash

For JavaScript/React development:

npm install dash-table

Core Imports

# Primary usage in Python Dash applications
from dash import dash_table
# or
import dash_table
from dash_table import DataTable

For JavaScript/React development:

import { DataTable } from 'dash-table';

Basic Usage

Simple Data Table

# Python usage in Dash application
import dash_table

dash_table.DataTable(
    id='table',
    columns=[
        {"name": "Name", "id": "name"},
        {"name": "Age", "id": "age", "type": "numeric"},
        {"name": "City", "id": "city"}
    ],
    data=[
        {"name": "Alice", "age": 30, "city": "New York"},
        {"name": "Bob", "age": 25, "city": "London"},
        {"name": "Charlie", "age": 35, "city": "Paris"}
    ]
)

Interactive Table with Editing and Sorting

dash_table.DataTable(
    id='interactive-table',
    columns=[
        {"name": "Product", "id": "product", "editable": True},
        {"name": "Price", "id": "price", "type": "numeric", "format": {"specifier": "$,.0f"}},
        {"name": "Stock", "id": "stock", "type": "numeric"}
    ],
    data=[
        {"product": "Widget A", "price": 19.99, "stock": 100},
        {"product": "Widget B", "price": 29.99, "stock": 50}
    ],
    editable=True,
    sort_action="native",
    sort_mode="multi"
)

Architecture

Dash Table follows a declarative configuration approach where all functionality is controlled through properties passed to the DataTable component. The component handles data management, user interactions, and rendering internally while exposing a comprehensive API for customization.

Key Components:

  • DataTable: Main component with lazy loading support
  • Format: Python class for number and data formatting
  • FormatTemplate: Helper functions for common formats

Core Capabilities

Data Management

Configure data structure, column definitions, and data types. Handle data validation, coercion, and transformation.

dash_table.DataTable(
    data=[{"id": 1, "name": "John", "active": True}],
    columns=[
        {"name": "ID", "id": "id", "type": "numeric"},
        {"name": "Name", "id": "name", "type": "text", "editable": True},
        {"name": "Active", "id": "active", "type": "text", "presentation": "dropdown"}
    ]
)

Interactive Features

Enable user interactions including cell/row/column selection, editing, filtering, sorting, and pagination.

dash_table.DataTable(
    cell_selectable=True,
    row_selectable="multi",
    column_selectable="single",
    editable=True,
    filter_action="native",
    sort_action="native",
    page_action="native",
    page_size=50
)

Styling and Layout

Control visual appearance through CSS styles, conditional formatting, fixed columns/rows, and responsive design.

dash_table.DataTable(
    style_table={'overflowX': 'auto'},
    style_cell={'textAlign': 'left', 'padding': '10px'},
    style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        }
    ],
    fixed_columns={'headers': True, 'data': 1}
)

Dropdowns and Interactive Elements

Create dropdown menus within cells, configure tooltips, and handle user input validation.

dash_table.DataTable(
    dropdown={
        'status': {
            'options': [
                {'label': 'Active', 'value': 'active'},
                {'label': 'Inactive', 'value': 'inactive'}
            ]
        }
    },
    tooltip_data=[
        {
            'status': {'value': 'Current status of the item', 'type': 'markdown'}
        }
    ]
)

Export and Data Operations

Export table data to CSV/Excel formats, handle copy/paste operations, and manage data persistence.

dash_table.DataTable(
    export_format="xlsx",
    export_columns="visible",
    export_headers="display",  
    include_headers_on_copy_paste=True,
    persistence=True,
    persisted_props=['sort_by', 'filter_query', 'page_current']
)

Formatting and Localization

Format numbers, dates, and text using the built-in Format system and localization support.

# Python formatting utilities
from dash_table import FormatTemplate
from dash_table.Format import Format, Group, Scheme, Sign

dash_table.DataTable(
    columns=[
        {
            "name": "Price", 
            "id": "price", 
            "type": "numeric",
            "format": FormatTemplate.money(2)
        },
        {
            "name": "Change", 
            "id": "change", 
            "type": "numeric",
            "format": FormatTemplate.percentage(1)
        }
    ]
)

Dash Integration

Component Integration Properties

# Dash framework integration properties
dash_table.DataTable(
    id='my-table',  # Required for Dash callbacks
    
    # loading_state managed automatically by Dash
    # setProps managed automatically by Dash
    
    data=[{"name": "John", "age": 30}],
    columns=[
        {"name": "Name", "id": "name"},
        {"name": "Age", "id": "age", "type": "numeric"}
    ]
)

Core Integration Properties:

# Component identifier for Dash callbacks
id: str

# Loading state object from dash-renderer
loading_state: dict = {
    'is_loading': bool,      # Whether component is currently loading
    'prop_name': str,        # Which property is loading
    'component_name': str    # Name of loading component
}

# Dash callback function (internal - managed automatically)
setProps: callable

Default Values Summary

Key default values for DataTable configuration:

  • page_action: 'native'
  • page_current: 0
  • page_size: 250
  • cell_selectable: True
  • row_selectable: False
  • column_selectable: False
  • editable: False
  • fill_width: True
  • virtualization: False
  • filter_action: 'none'
  • sort_action: 'none'
  • sort_mode: 'single'
  • export_format: 'none'
  • export_columns: 'visible'
  • include_headers_on_copy_paste: False
  • tooltip_delay: 350 (milliseconds)
  • tooltip_duration: 2000 (milliseconds)
  • persistence_type: 'local'
  • markdown_options.link_target: '_blank'
  • markdown_options.html: False
  • style_as_list_view: False
  • merge_duplicate_headers: False (when not specified)

Missing API Components

The following properties are available but not covered in detail in other sections:

Data State Properties

# Previous state of data (read-only)
data_previous: list[dict]

# Unix timestamp when data was last edited (read-only)
data_timestamp: int

# Whether the active cell is in focused state (read-only)
is_focused: bool

Row Operations

# Allow users to delete rows via 'x' button
row_deletable: bool = False

Custom CSS Integration

# Embed CSS selectors and rules directly
css: list[dict] = [
    {"selector": ".dash-spreadsheet", "rule": 'font-family: "monospace"'}
]

Global Localization

# Table-wide localization formatting
locale_format: dict = {
    'symbol': ['$', ''],       # Currency prefix/suffix
    'decimal': '.',            # Decimal separator
    'group': ',',              # Thousands separator  
    'grouping': [3],           # Grouping pattern
    'numerals': [...],         # Number replacements 0-9
    'percent': '%',            # Percentage symbol
    'separate_4digits': True   # Separate 4-digit numbers
}

Header Management

# Merge duplicate column headers automatically  
merge_duplicate_headers: bool = False

# Style table as list view without column borders
style_as_list_view: bool = False