# SearchPerformanceTable
> Queries or pages with clicks, impressions, CTR and average position, sortable, filterable and paginated, with change against the previous period.
Source: https://docs.nasaqui.com/components/search-performance-table
## Install
```bash
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 use
- Search queries and landing pages with SEO metrics.
- Any table of clicks, impressions, CTR and position.
## When not to use
- One measure ranked: use [`BreakdownTable`](https://docs.nasaqui.com/components/breakdown-table).
- Arbitrary columns: use [`DataTable`](https://docs.nasaqui.com/components/data-table).
## Import
```tsx
import { SearchPerformanceTable } from "@fadymondy/nasaq/web";
```
## Quick start
```tsx
import { SearchPerformanceTable } from "@fadymondy/nasaq/web";
export function Queries() {
return (
);
}
```
## Anatomy
```
SearchPerformanceTable data-slot="search-performance-table" (a Card)
DataTableToolbar filter box
DataTable label, clicks, impressions, CTR, position
DataTablePagination
```
## API
### SearchPerformanceTable
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` | `readonly SearchPerformanceRow[]` | required | `{ id, label, clicks, impressions, ctr?, position, previousClicks?, previousPosition? }`. |
| `kind` | `"query" \| "page"` | `query` | Picks the first column's heading, the filter placeholder and left-to-right labels for pages. |
| `title / description` | `ReactNode` | none | Card header; defaults to "Search queries" or "Search pages". |
| `pageSize` | `number` | `10` | Rows per page. |
| `onRowClick` | `(row) => void` | none | Makes rows clickable. |
| `loading` | `boolean` | `false` | Skeleton. |
| `error / onRetry` | `ReactNode / () => void` | none | Error state with a retry button. |
| `className` | `string` | none | Extra classes on the root. |
| `labels` | `Partial` | none | Replace any built-in English or Arabic string. |
## Examples
Pages:
```tsx
import { SearchPerformanceTable } from "@fadymondy/nasaq/web";
export const Pages = () => ;
```
Row click opens details:
```tsx
import { SearchPerformanceTable } from "@fadymondy/nasaq/web";
export const Clickable = () => console.log(row.id)} rows={[{ id: "q", label: "hijri date picker", clicks: 90, impressions: 4200, position: 7.8 }]} />;
```
## Accessibility
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 & i18n
- 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 & tokens
- 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't
- Do treat position as lower-is-better.
- Don't show CTR you calculated from rounded numbers; pass the API's `ctr`.
## Related
- [`data-table`](https://docs.nasaqui.com/components/data-table)
- [`breakdown-table`](https://docs.nasaqui.com/components/breakdown-table)
- [`search-console-page`](https://docs.nasaqui.com/components/search-console-page)
## Lab
https://docs.nasaqui.com/?path=/docs/components-seo-search-performance-table--docs
## Code
### React
```tsx
import { SearchPerformanceTable } from "@fadymondy/nasaq/web";
export function Queries() {
return (
);
}
```
### shadcn
```tsx
import { SearchPerformanceTable } from "@/components/ui/search-performance-table";
export function Queries() {
return (
);
}
```
### Vue
```vue
```
### Blade
```blade
```
### HTML + Alpine
```html