SearchPerformanceTable

Code

import { SearchPerformanceTable } from "@fadymondy/nasaq/web";export function Queries() {  return (    <SearchPerformanceTable      rows={[{ id: "q1", label: "rtl react components", clicks: 420, impressions: 9800, position: 4.2, previousClicks: 380, previousPosition: 5.1 }]}    />  );}

SEO · beta

Live examples and controls: SearchPerformanceTable in the lab.

InstallCopy Anchor Link

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

SearchPerformanceTable is the Queries and Pages report of Search Console, built on DataTable. Each row has clicks, impressions, CTR and average position. CTR is computed from clicks and impressions when you do not give it. Position is lower-is-better, so a fall in position is shown as an improvement.

When to useCopy Anchor Link

• Search queries and landing pages with SEO metrics.
• Any table of clicks, impressions, CTR and position.

When not to useCopy Anchor Link

• One measure ranked: use BreakdownTable.
• Arbitrary columns: use DataTable.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

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

export function Queries() {
  return (
    <SearchPerformanceTable
      rows={[{ id: "q1", label: "rtl react components", clicks: 420, impressions: 9800, position: 4.2, previousClicks: 380, previousPosition: 5.1 }]}
    />
  );
}

AnatomyCopy Anchor Link

SearchPerformanceTable  data-slot="search-performance-table"  (a Card)
  DataTableToolbar      filter box
  DataTable             label, clicks, impressions, CTR, position
  DataTablePagination

APICopy Anchor Link

SearchPerformanceTableCopy Anchor Link

ExamplesCopy Anchor Link

Pages:

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

export const Pages = () => <SearchPerformanceTable kind="page" rows={[{ id: "p1", label: "https://nasaq.dev/docs", clicks: 900, impressions: 21000, position: 3.4 }]} />;

Row click opens details:

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

export const Clickable = () => <SearchPerformanceTable onRowClick={(row) => console.log(row.id)} rows={[{ id: "q", label: "hijri date picker", clicks: 90, impressions: 4200, position: 7.8 }]} />;

AccessibilityCopy Anchor Link

Built on DataTable: a real table, sortable headers with aria-sort, a labelled filter input and paginated rows. Clickable rows are focusable and respond to Enter. Position change is a signed number with an arrow, not colour alone.

RTL & i18nCopy Anchor Link

• Query text follows its own direction (dir="auto"); URLs stay left-to-right.
• Numbers, CTR and position are bidi-isolated.
• The filter box and pagination mirror.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Improvements use --nq-success-text, declines --nq-danger-text.

Do / Don'tCopy Anchor Link

• Do treat position as lower-is-better.
• Don't show CTR you calculated from rounded numbers; pass the API's ctr.

RelatedCopy Anchor Link

• data-table
• breakdown-table
• search-console-page

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-seo-search-performance-table--docs