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