Components

TableColumn

TableColumn defines a single column inside Table, including its header title and row value renderer.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Table } from '@swiftuijs/ui';
import { TableColumn } from '@swiftuijs/ui';
type Person = {
    id: string;
    name: string;
    role: string;
};
const rows: Person[] = [
    { id: '1', name: 'Mia', role: 'Designer' },
    { id: '2', name: 'Noah', role: 'Engineer' },
];
export default function Example() {
    return ((<Table data={rows} rowKey={(row) => row.id}>
      <TableColumn<Person> title="Name" value={(row) => row.name}/>
      <TableColumn<Person> title="Role" value={(row) => row.role}/>
    </Table>));
}

API reference

PropTypeRequiredDescription
titleReactNodeYesThe visible header title for this column.
value(row: Row) => ReactNodeYesRenderer for each row value in this column.
Edit this page on GitHubReport an issue

Table

Table renders structured tabular data with explicit `TableColumn` definitions, aligned with SwiftUI's table mental model.

TabView

Switch between named content panels.