NNexusDocumentation
Live demo
GuideComponents

Tables, Lists & Charts

Present operational data with responsive overflow, meaningful states, and accessible summaries.

9 min readComponentsUpdated for Nexus 0.1
On this page 4

What you will learn

  • Choose table, list, or chart appropriately.
  • Handle dense mobile data.
  • Keep visual data understandable.

Choose the format

Use tables for comparison across repeated columns, lists for scan-friendly entities or activity, and charts for trends or proportions. A chart should support a decision, not duplicate a number already clear in text.

  • Clear title
  • Units
  • Time range
  • Source or freshness
  • Empty and error state

Responsive tables

Keep column alignment and allow a dedicated wrapper to scroll horizontally when the data cannot collapse safely. Do not make the entire page wider than the viewport.

css
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.table-scroll table {
  min-width: 720px;
}

Chart accessibility

Provide a text summary or data table for important charts. Do not rely on color alone; add labels, shapes, or direct values. Announce data refreshes without moving keyboard focus unexpectedly.

Continue learning