CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dash--table

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

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

export-data-ops.mddocs/

Export and Data Operations

Overview

Dash Table provides comprehensive data export capabilities, copy/paste operations, and data persistence features. These operations enable users to extract data from tables and maintain state across sessions.

Export System

Export Configuration

/**
 * Export configuration for data download capabilities
 */
interface ExportConfig {
  /** Export file format */
  export_format: 'csv' | 'xlsx' | 'none';
  
  /** Which columns to include in export */
  export_columns: 'all' | 'visible';
  
  /** Header format in exported file */
  export_headers: 'none' | 'ids' | 'names' | 'display';
}

# Basic export configuration
DataTable(
  export_format="xlsx",        # Enable Excel export
  export_columns="visible",    # Only export currently visible columns
  export_headers="display",    # Use display names as headers
  
  # Export button will appear in table UI
  columns=[
    {"name": "Product Name", "id": "product"},
    {"name": "Price ($)", "id": "price", "type": "numeric"},
    {"name": "Stock", "id": "stock", "type": "numeric"}
  ]
)

Export Format Options

# CSV export with column IDs as headers
DataTable(
  export_format="csv",
  export_columns="all",      # Include all columns (visible + hidden)
  export_headers="ids",      # Use column IDs as headers
  
  # Hidden columns will be included in export
  hidden_columns=["internal_id"]
)

# Excel export with custom display headers
DataTable(
  export_format="xlsx",
  export_columns="visible",
  export_headers="display",   # Use formatted display names
  
  # For multi-header columns, display format preserves structure
  columns=[
    {"name": ["Sales", "Q1"], "id": "q1_sales"},
    {"name": ["Sales", "Q2"], "id": "q2_sales"}
  ]
)

# No export capability
DataTable(
  export_format="none"  # Disable export functionality
)

Copy and Paste Operations

Copy/Paste Configuration

/**
 * Copy/paste behavior configuration
 */
interface CopyPasteConfig {
  /** Include headers when copying to clipboard */
  include_headers_on_copy_paste: boolean;
}

# Enhanced copy/paste with headers
DataTable(
  include_headers_on_copy_paste=True,  # Include headers in clipboard operations
  
  # Users can:
  # 1. Select cells and copy (Ctrl+C)
  # 2. Paste data from clipboard (Ctrl+V)
  # 3. Copy entire rows/columns
  # 4. Headers are included when copying to external applications
  
  cell_selectable=True,    # Enable cell selection for copying
  row_selectable="multi"   # Enable row selection for copying
)

Copy/Paste Behavior Examples

# Different copy behaviors based on selection
DataTable(
  include_headers_on_copy_paste=True,
  
  # When copying single cells: just the cell value
  # When copying multiple cells: tab-separated values with headers
  # When copying rows: complete row data with column headers
  # When copying to same table: headers ignored (data only)
  # When copying between different tables: headers included
  
  cell_selectable=True,
  row_selectable="multi",
  column_selectable="multi"
)

Data Persistence

Persistence Configuration

/**
 * Data persistence configuration for maintaining state
 */
interface PersistenceConfig {
  /** Enable persistence */
  persistence: boolean | string | number;
  
  /** Properties to persist across sessions */
  persisted_props: Array<
    'columns.name' | 'data' | 'filter_query' | 'hidden_columns' | 
    'page_current' | 'selected_columns' | 'selected_rows' | 'sort_by'
  >;
  
  /** Storage mechanism */
  persistence_type: 'local' | 'session' | 'memory';
}

# Basic persistence setup
DataTable(
  persistence=True,           # Enable persistence
  persistence_type="local",   # Use localStorage (survives browser restart)
  
  persisted_props=[
    'filter_query',           # Remember user's filter
    'sort_by',               # Remember sort configuration
    'page_current',          # Remember current page
    'selected_rows',         # Remember selected rows
    'hidden_columns'         # Remember which columns are hidden
  ]
)

Advanced Persistence Examples

# Session-based persistence (cleared when browser closes)
DataTable(
  persistence="user_session_123",  # Custom persistence key
  persistence_type="session",      # sessionStorage
  
  persisted_props=[
    'columns.name',    # Persist column name changes
    'filter_query',    # Persist filter state
    'sort_by'          # Persist sort state
  ]
)

# Memory-only persistence (cleared on page refresh)
DataTable(
  persistence=True,
  persistence_type="memory",   # In-memory only
  
  persisted_props=[
    'selected_columns',
    'selected_rows'
  ]
)

# Numeric persistence key for multi-user scenarios
DataTable(
  persistence=42,              # Numeric persistence identifier
  persistence_type="local",
  
  persisted_props=[
    'data',           # Persist data modifications
    'page_current',   # Persist pagination state
    'sort_by'         # Persist sort configuration
  ]
)

Data State Management

Hidden Columns Management

# Dynamic column visibility
DataTable(
  columns=[
    {"name": "Name", "id": "name", "hideable": True},
    {"name": "Email", "id": "email", "hideable": True},
    {"name": "Internal ID", "id": "internal_id", "hideable": True}
  ],
  
  hidden_columns=["internal_id"],  # Initially hide internal ID
  
  # Users can show/hide columns via column header actions
  # Hidden state persists if configured
  persistence=True,
  persisted_props=["hidden_columns"]
)

Data Timestamps

# Track data modification times
DataTable(
  # data_timestamp automatically updated when data changes
  # Useful for comparing with other timestamp properties in callbacks
  
  data=[{"name": "John", "value": 100}],
  
  # Access data_timestamp in callbacks to determine what changed
)

Complete Export and Operations Example

# Comprehensive data operations setup
DataTable(
  id='data-operations-demo',
  
  data=[
    {"id": 1, "name": "Product A", "price": 29.99, "category": "electronics", "active": True},
    {"id": 2, "name": "Product B", "price": 19.99, "category": "books", "active": False},
    {"id": 3, "name": "Product C", "price": 39.99, "category": "clothing", "active": True}
  ],
  
  columns=[
    {"name": "ID", "id": "id", "type": "numeric", "hideable": True},
    {"name": "Product Name", "id": "name", "type": "text", "editable": True},
    {"name": "Price ($)", "id": "price", "type": "numeric", "editable": True},
    {"name": "Category", "id": "category", "type": "text", "hideable": True},
    {"name": "Active", "id": "active", "type": "text", "presentation": "dropdown"}
  ],
  
  # Export configuration
  export_format="xlsx",              # Excel format for rich formatting
  export_columns="visible",          # Only export visible columns
  export_headers="display",          # Use formatted display names
  
  # Copy/paste enhancement
  include_headers_on_copy_paste=True,  # Include headers in clipboard
  
  # Persistence configuration
  persistence="product_table_v1",     # Custom persistence key
  persistence_type="local",           # Use localStorage
  
  persisted_props=[
    'filter_query',      # Remember user filters
    'sort_by',          # Remember sort preferences
    'page_current',     # Remember current page
    'selected_rows',    # Remember selected rows
    'hidden_columns',   # Remember column visibility
    'data'              # Persist data edits
  ],
  
  # Enable interactive features for operations
  editable=True,
  cell_selectable=True,
  row_selectable="multi",
  column_selectable="multi",
  
  # Filtering and sorting for data operations
  filter_action="native",
  sort_action="native",
  sort_mode="multi",
  
  # Pagination
  page_action="native",
  page_size=10,
  
  # Initially hide ID column
  hidden_columns=["id"],
  
  # Dropdown for active status
  dropdown={
    'active': {
      'options': [
        {'label': 'Active', 'value': True},
        {'label': 'Inactive', 'value': False}
      ]
    }
  }
)

Integration with Dash Callbacks

Accessing Export Data in Callbacks

# Python callback example for handling data operations
from dash import callback, Input, Output

@callback(
    Output('export-status', 'children'),
    Input('data-table', 'export_format')
)
def handle_export_format_change(export_format):
    if export_format == 'xlsx':
        return "Excel export enabled"
    elif export_format == 'csv':
        return "CSV export enabled"
    else:
        return "Export disabled"

# Callback for data persistence tracking
@callback(
    Output('persistence-status', 'children'),
    Input('data-table', 'data_timestamp')
)
def track_data_changes(timestamp):
    if timestamp:
        return f"Data last modified: {timestamp}"
    return "No modifications yet"

Handling Copy/Paste Events

# Monitor selection changes for copy operations
@callback(
    Output('selection-info', 'children'),
    [Input('data-table', 'selected_cells'),
     Input('data-table', 'selected_rows')]
)
def update_selection_info(selected_cells, selected_rows):
    info = []
    if selected_cells:
        info.append(f"Selected cells: {len(selected_cells)}")
    if selected_rows:
        info.append(f"Selected rows: {len(selected_rows)}")
    
    return " | ".join(info) if info else "No selection"

Install with Tessl CLI

npx tessl i tessl/npm-dash--table

docs

data-management.md

dropdowns-interactive.md

export-data-ops.md

formatting-localization.md

index.md

interactive-features.md

styling-layout.md

tile.json