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

formatting-localization.mddocs/

Formatting and Localization

Overview

Dash Table provides a comprehensive formatting system through Python classes and configuration objects. The system supports number formatting, date formatting, localization, and provides pre-built templates for common formatting needs.

Format System Architecture

Python Format Classes

/**
 * Python Format class for number and data formatting configuration
 */
from dash_table.Format import Format, Group, Scheme, Sign, Symbol, Align, Padding, Prefix, Trim

class Format:
    """
    Main formatting class for configuring number display and parsing
    """
    def __init__(self, **kwargs):
        """Initialize format with configuration options"""
        pass
    
    # Alignment and layout
    def align(self, value: Align) -> Format:
        """Set text alignment (left, right, center, etc.)"""
        pass
    
    def fill(self, value: str) -> Format:
        """Set fill character for padding (single character)"""
        pass
    
    def padding_width(self, value: int | None) -> Format:
        """Set padding width in characters"""
        pass
    
    # Number formatting
    def precision(self, value: int | None) -> Format:
        """Set decimal precision"""
        pass
    
    def scheme(self, value: Scheme) -> Format:
        """Set number format scheme (decimal, percentage, etc.)"""
        pass
    
    def sign(self, value: Sign) -> Format:
        """Set sign display behavior"""
        pass
    
    def symbol(self, value: Symbol) -> Format:
        """Set symbol display (currency, binary, hex, etc.)"""
        pass
    
    def group(self, value: bool | Group) -> Format:
        """Enable/disable digit grouping (thousands separators)"""
        pass
    
    def padding(self, value: bool | Padding) -> Format:
        """Enable/disable zero padding"""
        pass
    
    def trim(self, value: bool | Trim) -> Format:
        """Enable/disable trimming insignificant zeros"""
        pass
    
    # Localization
    def symbol_prefix(self, value: str) -> Format:
        """Set symbol prefix (e.g., currency symbol)"""
        pass
    
    def symbol_suffix(self, value: str) -> Format:
        """Set symbol suffix"""
        pass
    
    def decimal_delimiter(self, value: str) -> Format:
        """Set decimal separator character"""
        pass
    
    def group_delimiter(self, value: str) -> Format:
        """Set thousands separator character"""
        pass
    
    def groups(self, groups: int | list[int]) -> Format:
        """Set grouping pattern (e.g., [3] for thousands)"""
        pass
    
    # Special values
    def nully(self, value: any) -> Format:
        """Set replacement value for null/undefined"""
        pass
    
    def si_prefix(self, value: Prefix) -> Format:
        """Set SI unit prefix (kilo, mega, etc.)"""
        pass
    
    def to_plotly_json(self) -> dict:
        """Convert format configuration to JSON"""
        pass

Format Enumerations

# Available enumeration values for format configuration

# Text alignment options
Align = {
    'default': '',
    'left': '<',
    'right': '>',
    'center': '^',
    'right_sign': '='
}

# Number formatting schemes
Scheme = {
    'default': '',
    'decimal': 'r',
    'decimal_integer': 'd',
    'decimal_or_exponent': 'g',
    'decimal_si_prefix': 's',
    'exponent': 'e',
    'fixed': 'f',
    'percentage': '%',
    'percentage_rounded': 'p',
    'binary': 'b',
    'octal': 'o',
    'lower_case_hex': 'x',
    'upper_case_hex': 'X',
    'unicode': 'c'
}

# Sign display options
Sign = {
    'default': '',
    'negative': '-',
    'positive': '+',
    'parantheses': '(',
    'space': ' '
}

# Symbol display options
Symbol = {
    'no': '',
    'yes': '$',
    'binary': '#b',
    'octal': '#o',
    'hex': '#x'
}

# SI prefixes for unit scaling
Prefix = {
    'yocto': 10**-24,
    'zepto': 10**-21,
    'atto': 10**-18,
    'femto': 10**-15,
    'pico': 10**-12,
    'nano': 10**-9,
    'micro': 10**-6,
    'milli': 10**-3,
    'none': None,
    'kilo': 10**3,
    'mega': 10**6,
    'giga': 10**9,
    'tera': 10**12,
    'peta': 10**15,
    'exa': 10**18,
    'zetta': 10**21,
    'yotta': 10**24
}

FormatTemplate Utilities

Pre-built Format Templates

/**
 * FormatTemplate module providing common format configurations
 */
from dash_table.FormatTemplate import money, percentage

def money(decimals: int, sign: Sign = Sign.default) -> Format:
    """
    Create a money/currency format
    
    Args:
        decimals: Number of decimal places
        sign: Sign display behavior
    
    Returns:
        Format configured for currency display
    """
    pass

def percentage(decimals: int, rounded: bool = False) -> Format:
    """
    Create a percentage format
    
    Args:
        decimals: Number of decimal places
        rounded: Use rounded percentage scheme
    
    Returns:
        Format configured for percentage display
    """
    pass

# Usage examples
currency_format = money(2)                    # $1,234.56
percentage_format = percentage(1)             # 12.3%
rounded_percentage = percentage(0, True)      # 12%

Basic Formatting Examples

Number Formatting

from dash_table.Format import Format, Scheme, Group, Sign

# Currency formatting
currency_format = Format(
    group=Group.yes,      # Add thousands separators
    precision=2,          # 2 decimal places
    scheme=Scheme.fixed,  # Fixed decimal format
    symbol=Symbol.yes     # Show currency symbol
)

# Percentage formatting
percent_format = Format(
    precision=1,              # 1 decimal place
    scheme=Scheme.percentage  # Percentage format
)

# Large number formatting with SI prefixes
si_format = Format(
    scheme=Scheme.decimal_si_prefix,
    precision=1,
    si_prefix=Prefix.kilo    # Display in thousands
)

# Apply to columns
DataTable(
    columns=[
        {
            "name": "Price", 
            "id": "price", 
            "type": "numeric",
            "format": currency_format
        },
        {
            "name": "Growth Rate", 
            "id": "growth", 
            "type": "numeric",
            "format": percent_format
        },
        {
            "name": "Revenue", 
            "id": "revenue", 
            "type": "numeric",
            "format": si_format
        }
    ]
)

Advanced Number Formatting

# Scientific notation
scientific_format = Format(
    scheme=Scheme.exponent,
    precision=2
)

# Binary representation
binary_format = Format(
    scheme=Scheme.binary,
    symbol=Symbol.binary
)

# Hexadecimal representation
hex_format = Format(
    scheme=Scheme.upper_case_hex,
    symbol=Symbol.hex
)

# Custom alignment and padding
aligned_format = Format(
    align=Align.right,
    padding_width=10,
    fill='0',
    padding=Padding.yes
)

Localization Support

Global Localization Configuration

/**
 * Table-wide localization configuration
 */
interface LocaleFormat {
  /** Currency symbol prefix and suffix */
  symbol?: [string, string];
  
  /** Decimal separator character */
  decimal?: string;
  
  /** Thousands separator character */
  group?: string;
  
  /** Grouping pattern */
  grouping?: number[];
  
  /** Number symbol replacements (0-9) */
  numerals?: string[];
  
  /** Percentage symbol */
  percent?: string;
  
  /** Separate 4-digit numbers */
  separate_4digits?: boolean;
}

# European localization
DataTable(
  locale_format={
    'decimal': ',',           # Comma as decimal separator
    'group': '.',             # Period as thousands separator
    'symbol': ['€', ''],      # Euro symbol prefix
    'percent': ' %',          # Space before percent symbol
    'separate_4digits': False # Don't separate 4-digit numbers
  },
  
  columns=[
    {
      "name": "Prix", 
      "id": "price", 
      "type": "numeric",
      "format": {"specifier": "$,.2f"}  # Will use € instead of $
    }
  ]
)

Custom Localization Examples

# Indian number system (lakhs and crores)
indian_format = Format(
    group=Group.yes,
    groups=[3, 2],          # First group of 3, then groups of 2
    group_delimiter=',',
    decimal_delimiter='.',
    symbol_prefix='₹',      # Rupee symbol
    precision=2
)

# Japanese formatting
japanese_format = Format(
    group=Group.yes,
    groups=[4],             # Groups of 4 (万 system)
    symbol_prefix='¥',      # Yen symbol
    decimal_delimiter='.',
    precision=0
)

# Arabic numerals replacement
arabic_locale = {
    'numerals': ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'],
    'decimal': '٫',
    'group': '٬'
}

Column-Level Format Configuration

Format Configuration in Columns

# Direct format specification in column definition
DataTable(
    columns=[
        {
            "name": "Product ID", 
            "id": "id", 
            "type": "numeric",
            "format": {
                "specifier": "06d"  # 6-digit zero-padded integer
            }
        },
        {
            "name": "Price", 
            "id": "price", 
            "type": "numeric",
            "format": {
                "locale": {
                    "symbol": ["$", ""],
                    "decimal": ".",
                    "group": ","
                },
                "specifier": "$,.2f",
                "nully": "N/A"  # Display for null values
            }
        },
        {
            "name": "Efficiency", 
            "id": "efficiency", 
            "type": "numeric",
            "format": {
                "specifier": ".1%"  # Percentage with 1 decimal
            }
        }
    ]
)

Complex Formatting Scenarios

# Mixed format requirements
DataTable(
    columns=[
        # Financial data with custom currency
        {
            "name": "Revenue (USD)", 
            "id": "revenue_usd",
            "type": "numeric",
            "format": Format(
                scheme=Scheme.fixed,
                precision=2,
                group=Group.yes,
                symbol_prefix="$",
                si_prefix=Prefix.kilo    # Show in thousands
            )
        },
        
        # Scientific measurements
        {
            "name": "Wavelength (nm)", 
            "id": "wavelength",
            "type": "numeric", 
            "format": Format(
                scheme=Scheme.decimal_si_prefix,
                precision=1,
                si_prefix=Prefix.nano,
                symbol_suffix=" nm"
            )
        },
        
        # Conditional formatting based on value ranges
        {
            "name": "Score", 
            "id": "score",
            "type": "numeric",
            "format": Format(
                precision=1,
                nully="Not Scored"
            )
        }
    ]
)

Complete Formatting Example

# Comprehensive formatting demonstration
from dash_table import DataTable, FormatTemplate
from dash_table.Format import Format, Group, Scheme, Sign, Symbol, Prefix

DataTable(
    id='formatting-demo',
    
    data=[
        {
            "product": "Widget A",
            "price": 1299.99,
            "profit_margin": 0.156,
            "units_sold": 1250000,
            "efficiency": 0.891,
            "wavelength": 650e-9,
            "binary_code": 255
        }
    ],
    
    columns=[
        # Basic text column
        {"name": "Product", "id": "product", "type": "text"},
        
        # Currency with template
        {
            "name": "Price", 
            "id": "price", 
            "type": "numeric",
            "format": FormatTemplate.money(2, Sign.default)
        },
        
        # Percentage with template
        {
            "name": "Profit Margin", 
            "id": "profit_margin", 
            "type": "numeric",
            "format": FormatTemplate.percentage(1)
        },
        
        # Large numbers with SI prefix
        {
            "name": "Units Sold", 
            "id": "units_sold", 
            "type": "numeric",
            "format": Format(
                scheme=Scheme.decimal_si_prefix,
                precision=1,
                si_prefix=Prefix.mega
            )
        },
        
        # Custom percentage format
        {
            "name": "Efficiency", 
            "id": "efficiency", 
            "type": "numeric",
            "format": Format(
                scheme=Scheme.percentage,
                precision=1,
                nully="Unknown"
            )
        },
        
        # Scientific notation for small values
        {
            "name": "Wavelength (m)", 
            "id": "wavelength", 
            "type": "numeric",
            "format": Format(
                scheme=Scheme.exponent,
                precision=2
            )
        },
        
        # Binary representation
        {
            "name": "Binary Code", 
            "id": "binary_code", 
            "type": "numeric",
            "format": Format(
                scheme=Scheme.binary,
                symbol=Symbol.binary
            )
        }
    ],
    
    # Global localization (European style)
    locale_format={
        'decimal': ',',
        'group': ' ',           # Space as thousands separator
        'symbol': ['€', ''],    # Euro symbol
        'percent': ' %'
    }
)

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