Component

Table

Full-featured data table with sorting, filtering, pagination, and selection.

tsx

import { Table, SimpleTable } from 'wss3-forge'

Usage

•

Use for displaying tabular data

•

Enable searchable for data filtering

•

Add pagination for large datasets

•

Use render prop for custom cell content

•

SimpleTable for basic static tables

Team Members

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	Editor
Alice Brown	alice@example.com	User

Examples

Basic Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	Editor

tsx

1<Table
2  data={[
3    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
4    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
5    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', role: 'Editor' }
6  ]}
7  columns={[
8    { key: 'name', header: 'Name' },
9    { key: 'email', header: 'Email' },
10    { key: 'role', header: 'Role' }
11  ]}
12  pagination={false}
13  searchable={false}
14/>

With Title & Subtitle

Team Members

Manage your team access and roles

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	Editor

tsx

1<Table
2  title="Team Members"
3  subtitle="Manage your team access and roles"
4  data={users}
5  columns={[
6    { key: 'name', header: 'Name' },
7    { key: 'email', header: 'Email' },
8    { key: 'role', header: 'Role' }
9  ]}
10  searchable
11  pagination={false}
12/>

With Global Actions

Users

Name	Email
John Doe	john@example.com
Jane Smith	jane@example.com
Bob Wilson	bob@example.com

tsx

1<Table
2  title="Users"
3  data={users}
4  columns={[
5    { key: 'name', header: 'Name' },
6    { key: 'email', header: 'Email' }
7  ]}
8  globalActions={
9    <>
10      <Button variant="ghost" size="sm" icon={<Filter20Regular />}>Filter</Button>
11      <Button variant="primary" size="sm" icon={<Add20Regular />}>Add User</Button>
12    </>
13  }
14  searchable
15  pagination={false}
16/>

With Custom Cell Render

Name	Status
John Doe	Active
Jane Smith	Inactive
Bob Wilson	Active

tsx

1<Table
2  data={users}
3  columns={[
4    { key: 'name', header: 'Name' },
5    { key: 'status', header: 'Status', render: (row) => (
6      <Badge variant={row.status === 'Active' ? 'success' : 'default'}>
7        {row.status}
8      </Badge>
9    )}
10  ]}
11/>

Striped & Compact

Name	Email
Alice	alice@example.com
Bob	bob@example.com
Charlie	charlie@example.com
Diana	diana@example.com

tsx

1<Table
2  data={users}
3  columns={columns}
4  striped
5  compact
6/>

With Search

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	Editor
Alice Brown	alice@example.com	User
Charlie Davis	charlie@example.com	Viewer

tsx

1<Table
2  data={users}
3  columns={[
4    { key: 'name', header: 'Name' },
5    { key: 'email', header: 'Email' },
6    { key: 'role', header: 'Role' }
7  ]}
8  searchable
9  pagination={false}
10/>

With Pagination

Name	Email
John Doe	john@example.com
Jane Smith	jane@example.com
Bob Wilson	bob@example.com

1-3 sur 7

tsx

1<Table
2  data={users}
3  columns={columns}
4  pagination
5  pageSize={3}
6  searchable={false}
7/>

Full Featured

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	Editor
Alice Brown	alice@example.com	User
Charlie Davis	charlie@example.com	Viewer

1-5 sur 8

tsx

1<Table
2  data={users}
3  columns={columns}
4  searchable
5  pagination
6  pageSize={5}
7  sortable
8/>

With Actions

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	Editor

tsx

1<Table
2  data={users}
3  columns={[
4    { key: 'name', header: 'Name' },
5    { key: 'email', header: 'Email' },
6    { key: 'role', header: 'Role', render: (row) => (
7      <Badge variant={row.role === 'Admin' ? 'primary' : 'default'}>{row.role}</Badge>
8    )},
9    { key: 'actions', header: 'Actions', render: () => (
10      <HStack gap="xs">
11        <IconButton icon={<Edit20Regular />} size="sm" variant="ghost" />
12        <IconButton icon={<Delete20Regular />} size="sm" variant="danger" />
13      </HStack>
14    )}
15  ]}
16/>

No Padding

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	Editor

tsx

1<Table
2  data={users}
3  columns={[
4    { key: 'name', header: 'Name' },
5    { key: 'email', header: 'Email' },
6    { key: 'role', header: 'Role' }
7  ]}
8  noPadding
9  pagination={false}
10  searchable={false}
11/>

Descriptions

Timeline

Last updated: December 2025

Table

Usage

Team Members

Examples

Basic Table

With Title & Subtitle

Team Members

With Global Actions

Users

With Custom Cell Render

Striped & Compact

With Search

With Pagination

Full Featured

With Actions

No Padding

Cookies