Table

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 },
    ],
  },
};

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

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 },
    ],
  },
};

const config: GraphConfig = {
  type: 'column', // Main visualization
  // ... chart configuration
};

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