Skip to main content
Tables display data in a traditional tabular format with rows and columns, ideal for precise value lookup and detailed data exploration.

​
When to use

  • Precise values - When exact numbers are important
  • Detailed data exploration - Allow users to scan specific values
  • Supporting charts - Provide detailed breakdown alongside visual charts
  • Many columns - Display data with numerous variables
  • Reference material - Create data that can be easily copied or referenced

​
Basic example

const config: GraphConfig = {
  type: 'table',
  data: {
    columns: [
      { key: 'product', label: 'Product' },
      { key: 'units_sold', label: 'Units sold' },
      { key: 'revenue', label: 'Revenue' },
      { key: 'profit_margin', label: 'Profit margin' }
    ],
    rows: [
      { product: 'Laptop Pro', units_sold: 1245, revenue: 1867500, profit_margin: 0.32 },
      { product: 'Phone X', units_sold: 3521, revenue: 2816800, profit_margin: 0.41 },
      { product: 'Tablet Mini', units_sold: 892, revenue: 267600, profit_margin: 0.28 },
      { product: 'Watch Smart', units_sold: 2104, revenue: 841600, profit_margin: 0.45 }
    ]
  }
};

​
Formatting

Tables automatically format values based on data type:
  • Numbers - Formatted with thousands separators
  • Currency - Detected from symbols (£, $, €)
  • Percentages - Displayed with % symbol
  • Dates - Formatted according to locale

​
Number formatting

Control how numbers are displayed: 
const config: GraphConfig = {
  type: 'table',
  appearance: {
    numberFormat: {
      decimalPlaces: 2,
      abbreviation: 'k'
    }
  },
  data: { /* ... */ }
};

​
Column visibility

Hide specific columns by setting _metadata.isHidden: 
const config: GraphConfig = {
  type: 'table',
  data: {
    columns: [
      { key: 'id', label: 'ID', _metadata: { isHidden: true } },
      { key: 'product', label: 'Product' },
      { key: 'sales', label: 'Sales' }
    ],
    rows: [
      { id: 1, product: 'Product A', sales: 1000 },
      { id: 2, product: 'Product B', sales: 1500 }
    ]
  }
};

​
Combining with charts

Tables work well alongside visual charts: 
const config: GraphConfig = {
  type: 'column',  // Main visualization
  // ... chart configuration
};

// Render both chart and table
<>
  <Graph config={config} />
  <Graph config={{ ...config, type: 'table' }} />
</>