> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Table

export const GraphPreview = ({config, aspectRatio = '10 / 6'}) => {
  const getThemeId = () => {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  };
  const [themeId, setThemeId] = useState(getThemeId);
  const [isLoaded, setIsLoaded] = useState(false);
  config.appearance = {
    ...config.appearance,
    border: {
      style: 'none',
      color: 'transparent',
      width: 0
    },
    hasRoundedBorders: false
  };
  const baseUrl = window.location.hostname === 'localhost' ? 'https://app.graphy.top:8080' : 'https://visualize.graphy.app';
  const url = new URL('view/graph', baseUrl);
  url.searchParams.set('config', JSON.stringify(config));
  url.searchParams.set('themeId', themeId);
  useEffect(() => {
    const observer = new MutationObserver(function (mutations) {
      setThemeId(getThemeId());
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeOldValue: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  return <div className="graph-preview" style={{
    aspectRatio,
    opacity: isLoaded ? 1 : 0
  }}>
      <iframe src={url.toString()} loading="lazy" onLoad={() => setIsLoaded(true)} allowfullscreen="true" />
    </div>;
};

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

<GraphPreview
  config={{
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 },
  ],
},
}}
/>

```tsx theme={null}
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:

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

## Column visibility

Hide specific columns by setting `_metadata.isHidden`:

```tsx theme={null}
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:

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

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

## Related

* [Data structure](/sdk/core/data-structure) - Learn about columns and rows
* [Appearance](/sdk/config/appearance) - Number formatting options