> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TapTable

> Renders rows under column headers, scrolling sideways inside the mount rather than widening it.

```ts theme={null}
function TapTable<T>(__namedParameters): ReactElement;
```

Renders rows under column headers, scrolling sideways inside the mount rather
than widening it.

## Type Parameters

### T

`T`

## Parameters

### \_\_namedParameters

[`TapTableProps`](/extensions/reference/frontend-api/Interface.TapTableProps)\<`T`>

## Returns

`ReactElement`

## Remarks

A cell with no `render` shows the row's own value under `key` when that value is
a string, number, boolean or bigint, and nothing otherwise, so an object or an
array needs a `render`. With `empty` and no rows, the table is replaced whole by
that node. With `onRowClick` each row becomes focusable and answers Enter and
Space as well as a click, and hovers on `--bg-subtle`; the headers and rules
follow `--fg-muted` and `--divider`.

## Example

```tsx theme={null}
import { TapEmptyState, TapTable, useTapQuery } from '@tappify/extension-sdk';

function Keywords() {
  const keywords = useTapQuery({ kind: 'keywords' });
  return (
    <TapTable
      columns={[
        { key: 'term', label: 'Term' },
        { key: 'position', label: 'Rank', align: 'end' },
      ]}
      rows={keywords.data?.keywords ?? []}
      rowKey={keyword => keyword.id}
      empty={<TapEmptyState title="No keywords tracked yet" />}
    />
  );
}
```