Skip to main content

Overview

The Table component provides enterprise-grade functionality for displaying tabular data with extensive customization options including filtering, sorting, column management, and advanced formatting.

Core Features

  • Interactive Controls: Filtering, sorting, resizing, and reordering columns
  • Responsive Design: Adapts to different screen sizes with theme support
  • Data Management: Pagination, column hiding, and pinning
  • Real-time Updates: Dynamic data refresh capabilities

Configuration Options

Show Info Text
boolean
Display informational text about your chart with hover tooltips in table headers.
Enable Filtering
boolean
Allow users to filter data within columns. Filter controls appear in column headers for searching, selecting values, or applying range filters.
Enable Sorting
boolean
Enable table sorting functionality. Users can click column headers to sort data ascending or descending. Hold Shift for multiple column sorting.
Enable Resizing
boolean
Allow users to resize columns by dragging column borders to adjust widths based on content and preferences.
Persist Column Width on Save
boolean
Save custom column widths that persist across sessions. User adjustments are remembered and restored when the table reloads.
Pagination
boolean
Enable pagination for large datasets with configurable rows per page and navigation controls.

Column Management

Hide Columns
Hide specific columns from view to focus on important data or remove sensitive information while maintaining the underlying data structure.
Pin Columns to the Left
Pin columns to keep them visible while scrolling through wide tables. Essential for keeping key identifiers (names, IDs) visible.

Column Formatting

Number Formatting

  • Format Locale: Set locale for number formatting (e.g., ‘en-US’, ‘de-DE’)
  • Format Options: JSON configuration for Intl.NumberFormat() options
  • Format Prefix/Suffix: Add text before/after numbers (e.g., ’$’, ’%‘)

Conditional Formatting

  • Condition: JavaScript expression to evaluate against values
  • Style: Text styling (bold, italic, etc.)
  • Color: Text and background colors for matching values
  • Base URL: The base URL for the hyperlink
  • Parameter Name: Query parameter name for the cell value (defaults to ‘q’)
  • Value Source: Select the value from the current column or reference another column
  • Open in New Tab: Whether to open links in a new tab (defaults to true)
  • Display Text: Override text to display instead of the cell value

Advanced Features

Column Customization

  • Custom Column Names: Override default column names with user-friendly labels
  • Column Info Tooltips: Add informational tooltips to specific column headers
  • State Management: Persist sorting, width, and order preferences

Data Export

  • CSV Download: Enable CSV export functionality
  • Download Title Prefix: Customize the filename prefix for downloaded files

Styling Options

  • Theme Integration: Customize background colors, font families, and CSS classes
  • Visual Customization: Row striping, header styling, and cell styling
I