Table·hook·@astryxdesign/core

useTableRowIndex

Hook that returns a TablePlugin which prepends a right-aligned, monospaced row-number column. Numbering follows the rendered data order (reflecting the current sort / filter / pagination view) and starts at 1 by default. Astryx renderCell receives only the row item, so the plugin takes the rendered data array to derive each ordinal.

Open in Playground @astryxdesign/core/Table

Signature

Call shape

useTableRowIndex()

Showcases and examples

1 documented example

useTableRowIndex — Numbered Rows

A table with a prepended row-number column via useTableRowIndex. Numbering is monospaced, right-aligned, and follows the rendered data order.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · table-row-index-table

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {
  Table,
  useTableRowIndex,
  proportional,
  pixel,
} from '@astryxdesign/core/Table';
import type {TableColumn} from '@astryxdesign/core/Table';

interface Track extends Record<string, unknown> {
  id: string;
  title: string;
  artist: string;
  plays: number;
}

const tracks: Track[] = [
  {id: 't1', title: 'Nightfall', artist: 'Ava Chen', plays: 1820},
  {id: 't2', title: 'Ember', artist: 'Liam Park', plays: 942},
  {id: 't3', title: 'Tidal', artist: 'Zoe Vega', plays: 3310},
  {id: 't4', title: 'Cinder', artist: 'Max Ross', plays: 604},
  {id: 't5', title: 'Halcyon', artist: 'Mia Cole', plays: 2075},
];

const columns: TableColumn<Track>[] = [
  {key: 'title', header: 'Title', width: proportional(2)},
  {key: 'artist', header: 'Artist', width: proportional(2)},
  {key: 'plays', header: 'Plays', width: pixel(90), align: 'end'},
];

export default function TableRowIndexTable() {
  // Pass the rendered data array — numbering follows its order.
  const rowIndex = useTableRowIndex<Track>({data: tracks});

  return (
    <Table
      data={tracks}
      columns={columns}
      idKey="id"
      hasHover
      plugins={{rowIndex}}
    />
  );
}

Usage

Typed props

Prop	Type and behavior
`data`	`T[]` · required The data array currently rendered by the table (post sort/filter/page). Numbering follows this order.
`getRowKey`	`(item: T) => string` Optional key extractor returning a unique string per row. When provided, index lookup is keyed by the returned string; otherwise items are matched by reference identity. Memoize with useCallback for a stable plugin identity.
`label`	`ReactNode` · default '#' Header label for the index column.
`startFrom`	`number` · default 1 First index value.