# ✍️ 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.content"
  source="components/dist/registries/dskit.json#table"
  schema={1}
  updated="2026-05-14"
/>

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

## Content guidelines

The table component displays structured information in rows and columns. It is the primary way users view, compare, and act on datasets, connections, catalog entries, and other list-based content in the platform.

### When to use

- To display multiple items with shared attributes that benefit from comparison.
- When users need to sort, filter, or act on rows individually or in bulk.
- Do not use a table for fewer than three columns or when a simple list or prose suffices.

### Column headers

- Use short, descriptive noun phrases. Two to three words maximum.
- Use sentence case.
- Do not use abbreviations unless they are universally understood (for example, "ID," "URL").
- Do not end column headers with punctuation.
- Align header labels with the data they describe — left-align text columns, right-align numeric columns.

#### Column header examples

<DoDont pairs={[{ do: "Last modified", dont: "Last Modification Date" }, { do: "Owner", dont: "Assigned to / Owned by" }, { do: "Status", dont: "Current status" }, { do: "Row count", dont: "No. of rows" }]} />

### Cell content

- Keep cell values concise. Truncate long values with an ellipsis and show the full value on hover via tooltip.
- Use consistent formatting within each column — do not mix date formats or number formats across rows.
- Dates: use ISO 8601 (YYYY-MM-DD) unless the product context requires a locale-specific format.
- Use "None" or "–" (em dash) for empty values — not blank, "N/A," or "null."
- Status values use standard vocabulary: Active, Inactive, Draft, Published, Deprecated, Error.

### Bulk actions

- Label bulk action buttons with a verb that applies to all selected items. For example, **Delete selected** or **Export**.
- Show the count of selected items near the action. For example, `3 items selected`.

### Pagination

- Label page controls plainly. Use **Previous** and **Next**.
- Show total result count when relevant. For example, `Showing 1–25 of 340 results`.