Components

Table

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

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
dataRow[]YesThe row data rendered by the table.
rowKey(row: Row, index: number) => stringYesStable key generator for each row.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

SymbolEffect

SymbolEffect adapts SwiftUI's symbol animation modifiers into an explicit wrapper component for the web.

TableColumn

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