TapTable

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<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

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" />}
    />
  );
}

Start

Build

Test

Publish

Reference

Type Parameters

T

Parameters

__namedParameters

Returns

Remarks

Example

​Type Parameters

​T

​Parameters

​__namedParameters

​Returns

​Remarks

​Example

Type Parameters

T

Parameters

__namedParameters

Returns

Remarks

Example