Table

The Table component provides you with data tables with sorting, pagination, and selection.

Live Examples

Live Example

☀️

Copy

View Code

import { Table, type TableColumn } from '@jarllyng/nostromo' export default function TableDefault() { const data = [ { id: '1', name: 'John Doe', email: 'john@example.com' }, { id: '2', name: 'Jane Smith', email: 'jane@example.com' }, { id: '3', name: 'Bob Johnson', email: 'bob@example.com' } ] const columns: TableColumn<(typeof data)[number]>[] = [...

Live Example

☀️

Copy

View Code

import { Table, type TableColumn } from '@jarllyng/nostromo' export default function TableStriped() { const data = [ { id: '1', name: 'John Doe', email: 'john@example.com' }, { id: '2', name: 'Jane Smith', email: 'jane@example.com' }, { id: '3', name: 'Bob Johnson', email: 'bob@example.com' } ] const columns: TableColumn<(typeof data)[number]>[] = [...

Live Example

☀️

Copy

View Code

import { Table, type TableColumn } from '@jarllyng/nostromo' export default function TableBordered() { const data = [ { id: '1', name: 'John Doe', email: 'john@example.com' }, { id: '2', name: 'Jane Smith', email: 'jane@example.com' }, { id: '3', name: 'Bob Johnson', email: 'bob@example.com' } ] const columns: TableColumn<(typeof data)[number]>[] = [...

Import


import { Table } from "@jarllyng/nostromo";
// or
import { Table } from "@jarllyng/nostromo/table";

Usage


import { Table } from "@jarllyng/nostromo";
 
interface User {
  id: string;
  name: string;
  email: string;
}
 
export default function Example() {
  const data: User[] = [
    { id: "1", name: "John Doe", email: "john@example.com" },
    { id: "2", name: "Jane Smith", email: "jane@example.com" },
  ];
 
  const columns: TableColumn<(typeof data)[number]>[] = [
    { key: "name", title: "Name", dataIndex: "name" },
    { key: "email", title: "Email", dataIndex: "email" },
  ];
 
  return <Table data={data} columns={columns} />;
}

Advanced Examples

With Sorting

Live Example

☀️

Copy

View Code

import { Table, type TableColumn } from '@jarllyng/nostromo' type User = { id: string name: string email: string } export default function SortableTable() { const [sortColumn, setSortColumn] = React.useState<string>()...

With Pagination

Live Example

☀️

Copy

View Code

import { Table, type TableColumn } from '@jarllyng/nostromo' export default function PaginatedTable() { const [currentPage, setCurrentPage] = React.useState(1) const [pageSize, setPageSize] = React.useState(10) const data = Array.from({ length: 100 }, (_, i) => ({ id: i + 1, name: `User ${i + 1}`, email: `user${i + 1}@example.com`...

Props

Table

Prop	Type	Default	Required	Description
`data`	`T[]`	-	Yes	Array of data objects
`columns`	`TableColumn<T>[]`	-	Yes	Column definitions
`variant`	`"default" \| "striped" \| "bordered" \| "hover" \| "elevated" \| "interactive"`	`"default"`	No	Visual variant of the table
`size`	`"sm" \| "md" \| "lg"`	`"md"`	No	Size of table cells
`loading`	`boolean`	`false`	No	Whether the table is loading
`emptyText`	`string`	`"No data"`	No	Text to show when no data
`caption`	`string`	`undefined`	No	Table caption (for accessibility)
`className`	`string`	`undefined`	No	Additional CSS classes
`rowKey`	`keyof T \| ((record: T) => string \| number)`	`"id"`	No	Unique key for each row
`onRowClick`	`(record: T, index: number) => void`	`undefined`	No	Callback when row is clicked
`onSort`	`(column: TableColumn<T>, direction: 'asc' \| 'desc') => void`	`undefined`	No	Callback when column is sorted
`sortColumn`	`string`	`undefined`	No	Currently sorted column (controlled)
`sortDirection`	`'asc' \| 'desc'`	`undefined`	No	Sort direction (controlled)
`pagination`	`PaginationProps`	`undefined`	No	Pagination configuration
`selection`	`SelectionProps`	`undefined`	No	Row selection configuration

TableColumn

Prop	Type	Default	Required	Description
`key`	`string`	-	Yes	Unique column key
`title`	`string`	-	Yes	Column header text
`dataIndex`	`keyof T`	`undefined`	No	Property name in data object
`render`	`(value: unknown, record: T, index: number) => React.ReactNode`	`undefined`	No	Custom render function
`sortable`	`boolean`	`false`	No	Whether column is sortable
`width`	`string \| number`	`undefined`	No	Column width
`align`	`'left' \| 'center' \| 'right'`	`'left'`	No	Text alignment
`className`	`string`	`undefined`	No	Additional CSS classes

PaginationProps

Prop	Type	Default	Required	Description
`current`	`number`	-	Yes	Current page number
`pageSize`	`number`	-	Yes	Number of items per page
`total`	`number`	-	Yes	Total number of items
`onChange`	`(page: number, pageSize: number) => void`	-	Yes	Callback when page changes
`showSizeChanger`	`boolean`	`false`	No	Whether to show page size changer
`showQuickJumper`	`boolean`	`false`	No	Whether to show quick jumper

SelectionProps

Prop	Type	Default	Required	Description
`selectedRowKeys`	`(string \| number)[]`	-	Yes	Array of selected row keys
`onChange`	`(selectedRowKeys: (string \| number)[], selectedRows: T[]) => void`	-	Yes	Callback when selection changes
`getCheckboxProps`	`(record: T) => { disabled?: boolean }`	`undefined`	No	Function to get checkbox props for each row