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

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"