BreakdownTable

Code

import { BreakdownTable } from "@fadymondy/nasaq/web";export function Channels() {  return (    <BreakdownTable      title="Channels"      dimensionLabel="Channel"      valueLabel="Sessions"      rows={[        { id: "organic", label: "Organic Search", value: 28100, previous: 24800 },        { id: "direct", label: "Direct", value: 13400, previous: 14100 },      ]}    />  );}

Analytics · beta

Live examples and controls: BreakdownTable in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/breakdown-table.json

BreakdownTable answers "what makes up this number?": traffic channels, source / medium, top pages, devices, traffic sources. Rows are sorted by value, each has a bar sized against the largest, a share of the total and, when previous is given, the change. Long lists collapse to limit rows with a "Show all" button.

When to useCopy Anchor Link

• Top-N lists in an analytics report.
• Any single-measure ranking that benefits from a bar.
• Adding extra columns with columns.

When not to useCopy Anchor Link

• Several measures per row that users sort: use DataTable.
• Countries with flags: use GeoList.
• Search queries with CTR and position: use SearchPerformanceTable.

ImportCopy Anchor Link

import { BreakdownTable } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { BreakdownTable } from "@fadymondy/nasaq/web";

export function Channels() {
  return (
    <BreakdownTable
      title="Channels"
      dimensionLabel="Channel"
      valueLabel="Sessions"
      rows={[
        { id: "organic", label: "Organic Search", value: 28100, previous: 24800 },
        { id: "direct", label: "Direct", value: 13400, previous: 14100 },
      ]}
    />
  );
}

AnatomyCopy Anchor Link

BreakdownTable         data-slot="breakdown-table"  (a Card)
  Table                label, value, share, change and extra columns
    row bar            data-slot="breakdown-bar"
  Show all button      when there are more than `limit` rows

APICopy Anchor Link

BreakdownTableCopy Anchor Link

ExamplesCopy Anchor Link

URLs stay left-to-right:

import { BreakdownTable } from "@fadymondy/nasaq/web";

export const Pages = () => <BreakdownTable title="Top pages" dimensionLabel="Page" valueLabel="Sessions" ltrLabels rows={[{ id: "a", label: "/docs/getting-started", value: 4210, href: "/docs/getting-started" }]} />;

An extra column:

import { BreakdownTable } from "@fadymondy/nasaq/web";

export const Videos = () => (
  <BreakdownTable
    title="Top videos"
    dimensionLabel="Video"
    valueLabel="Views"
    showShare={false}
    rows={[{ id: "v1", label: "RTL dashboard in 20 minutes", value: 18400 }]}
    columns={[{ id: "watch", header: "Watch time (h)", align: "end", cell: () => "612" }]}
  />
);

Arabic:

import { BreakdownTable } from "@fadymondy/nasaq/web";

export const Ar = () => <BreakdownTable title="القنوات" dimensionLabel="القناة" valueLabel="الجلسات" rows={[{ id: "o", label: "البحث المجاني", value: 28100, previous: 24800 }]} />;

AccessibilityCopy Anchor Link

A real table with column headers and a name from label or title. Bars are decorative (aria-hidden); the values and shares are text. The change is a signed percentage, toned green or red, never colour alone. Links are ordinary anchors.

RTL & i18nCopy Anchor Link

• Columns and bars run from the inline start; the value columns align to the end.
• Set ltrLabels for URLs and source / medium so they are not reordered.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Bar track uses --nq-surface-soft; up and down use --nq-success-text and --nq-danger-text.

Do / Don'tCopy Anchor Link

• Do give previous so users see movement.
• Do use ltrLabels for paths and URLs.
• Don't use it for more than one measure.
• Don't set limit above about 15; link to a full report instead.

RelatedCopy Anchor Link

• geo-list
• table
• data-table
• metric-tiles

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-analytics-breakdown-table--docs