Design system
Documentation experienceDS-07

Home / Components / Table

Approved

Table

Provide the governed NexWell Table contract for data & tables interfaces.

Purpose

Provide the governed NexWell Table contract for data & tables interfaces.

Source evidence informs purpose and anatomy; NexWell tokens, accessibility, and API are authoritative.

When to use

Use Table only for its documented data & tables purpose.

When not to use

Do not restyle it into an unrelated interaction.

Anatomy

  1. container
  2. content

Specifications, variants, sizes, and states

Specifications

  • Exact dimensions, padding, gaps, icon sizes, radius, and typography: source-verification-required.
  • Implementation behavior is inspectable below; it is not evidence of founder approval.

Variants and sizes

default

source-verification-required: no governed component-specific size matrix is available

States

default · horizontal overflow · focus-visible

Measurements and typography

Every field is represented. A status is not a value: unresolved evidence cannot be converted into an implementation number.

Height / widthsource-verification-requiredNo approved exact value may be inferred.
Paddingsource-verification-requiredNo approved exact value may be inferred.
Gapsource-verification-requiredNo approved exact value may be inferred.
Radius / bordersource-verification-requiredNo approved exact value may be inferred.
Icon sizesource-verification-requiredNo approved exact value may be inferred.
Font / size / weight / line height / trackingsource-verification-requiredNo approved exact value may be inferred.

State matrix

Actual implementation states are listed below. Requested universal states not supported by the component API remain explicitly unclaimed.

DefaultImplemented / inspect preview
Hovernot-applicable-or-source-verification-required
FocusImplemented / inspect preview
Active / pressednot-applicable-or-source-verification-required
Disablednot-applicable-or-source-verification-required
Loadingnot-applicable-or-source-verification-required
Errornot-applicable-or-source-verification-required
Successnot-applicable-or-source-verification-required
Readonlynot-applicable-or-source-verification-required
Emptynot-applicable-or-source-verification-required

React and TypeScript API

Public properties

approved-current Generated from the package registry; controls expose only the supported subset listed here.

captioncolumnsrows
import { Table } from "@nexwellaifactory/components";
// caption
// columns
// rows

export function Example() {
  return <Table />;
}

Open stable isolated canvas

Usage and content

Do

Use the component for its documented purpose.

Don’t

Do not restyle it into an unrelated interaction.

Content rules

  • Use concise, task-specific labels.
  • Do not communicate state through color alone.
  • Allow localized text to wrap without hiding critical actions.

Accessibility, keyboard, responsive, and RTL

Accessibility

  • Native semantics first
  • Accessible name required
  • State exposed programmatically

Keyboard

  • Native element behavior
  • Visible focus indicator
  • No positive tabindex

Responsive and RTL

Wraps or scrolls without hiding critical content; supports 200% text expansion.

Uses logical layout; mirrors only spatial meaning.

Actual package output

Interactive example

Appointments
DateType
25 JulFollow-up
08 AugConsultation

Preview width changes the bounded canvas; use the RTL control below to inspect logical layout.

Token mapping and source evidence

Traceable implementation

Uber-derived structural evidence, adapted through approved NexWell decisions.

semantic colorfoundation spacingfoundation shapefoundation motion

docs/source-audit/component-evidence-matrix.csv :: table

Missing fields in the source remain documented source absence, not requirements invented by the implementation.

Evidence completeness

7 associated local source records. Statuses below come directly from the DS-13 Checkpoint 1 component evidence matrix.

overviewsource-verification-required
anatomysource-verification-required
variantssource-verification-required
sizessource-verification-required
dimensionssource-verification-required
paddingsource-verification-required
gapssource-verification-required
icon_sizessource-verification-required
typographysource-verification-required
width_behaviorsource-verification-required
content_behaviorsource-verification-required
truncation_wrappingsource-verification-required
statessource-verification-required
accessibilitysource-verification-required
keyboardsource-verification-required
responsivesource-verification-required
rtlsource-verification-required
motionsource-verification-required
react_apisource-verification-required
token_mappingsource-verification-required
implementation_mappingsource-verification-required
visual_redlinessource-verification-required
testssource-verification-required

Cross-platform implementation

React / TypeScript: current package API is shown above.

Flutter: source-verification-required — no canonical Flutter API or implementation mapping exists, and this web portal does not infer one.

AI agents: consume approved records only; preserve proposed and unresolved statuses and import the public component instead of recreating it.