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

# Data Table Demo

> The Data Table Demo page (/platform/table/demo) is a developer and platform reference that showcases all available features of the @/platform/table-v2…

The Data Table Demo page (`/platform/table/demo`) is a developer and platform reference that showcases all available features of the `@/platform/table-v2` `DataTable` component using synthetic data.

## Overview

No permission gate is applied on this route. The page renders six tabbed demo scenarios: **Basic** (row selection, pagination, empty state), **10K Rows** (virtual scrolling with `enableVirtualization`), **Editing** (inline cell editing with validation), **Grouping** (multi-level row grouping with aggregates), **Columns** (column visibility toggle and resize), and **Export** (CSV/Excel export and sticky columns). All demo data is generated in-memory by `generateDemoData()` using synthetic names and values — no real organisational data is used. A Feature Summary card at the bottom of the page lists the capabilities covered.

## Who it's for

Access follows your organization's role and module configuration. ## Before you start

* This page uses only synthetic in-memory data. No database queries are made for the demo data itself.
* The page is intended for UI development reference and component testing.

## Steps

<Steps>
  <Step title="Open the demo">
    Navigate to `/platform/table/demo`.
  </Step>

  <Step title="Explore basic features">
    The **Basic** tab is active by default. Click rows to select them. Use pagination controls to page through 25 rows.
  </Step>

  <Step title="Test virtual scrolling">
    Switch to the **10K Rows** tab. Scroll through 10,000 rows rendered with `enableVirtualization`.
  </Step>

  <Step title="Try inline editing">
    Switch to the **Editing** tab. Double-click any editable cell (Name, Department, Salary, Active) to edit its value. Salary values below \$30,000 trigger a validation error.
  </Step>

  <Step title="Explore grouping and aggregates">
    Switch to the **Grouping** tab. Change the **Group by** selector to group rows by department, role, location, or multi-level combinations.
  </Step>

  <Step title="Manage columns">
    Switch to the **Columns** tab. Click the columns icon to show or hide columns. Drag column borders to resize.
  </Step>

  <Step title="Export data">
    Switch to the **Export** tab. Click the download icon to export the table as CSV or Excel.
  </Step>
</Steps>

## Key concepts

<AccordionGroup>
  <Accordion title="Virtual scrolling">
    `enableVirtualization` renders only the rows visible in the viewport plus a configurable `virtualOverscan` buffer, enabling smooth performance with large datasets.
  </Accordion>

  <Accordion title="Inline editing">
    `enableInlineEdit` with `onCellEdit` and optional `validateCell` enables double-click cell editing. Edit types include `text`, `number`, `select`, and `boolean`.
  </Accordion>

  <Accordion title="Row grouping and aggregates">
    `groupBy` accepts an array of column keys for multi-level grouping. `aggregates` defines `sum`, `average`, or `count` calculations displayed in group header rows.
  </Accordion>
</AccordionGroup>

## Related

<Columns cols={2}>
  <Card title="Platform Foundation" icon="layer-group" href="/pf/overview">
    Platform Foundation overview.
  </Card>

  <Card title="Governance & parity" icon="scale-balanced" href="/governance/index">
    Documentation coverage and governance.
  </Card>
</Columns>

<Note>
  This page documents shipped product behavior. It is not medical, legal, or
  billing advice. Verify against your organization's policies and applicable
  regulations before using it for clinical, compliance, or billing decisions.
  Protected health information (PHI) shown in the product is governed by your
  tenant's access controls and is never exposed in this documentation.
</Note>

<Accordion title="Documentation sources">
  * src/routes/platform.tsx
  * src/platform/table-v2/pages/DataTableDemoPage.tsx
  * src/platform/table-v2/index.ts
</Accordion>