# ✍️ Table

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.table.overview"
  source="components/dist/registries/dskit.json#table"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"table"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

## Overview

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Built type","values":["By columns","By rows"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=15295-14902)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/table)