Photonix

TableWidget

A widget container for tabular data using the DataTable component.

Preview

Team

Current collaborators
Name
Role
Status
Jane Cooper
Designer
active
Wade Warren
Engineer
pending
Esther Howard
PM
active
Usage
"use client";

import { Badge, TableWidget } from '@photonix/ultimate';

const rows = [
    { id: 1, name: 'Jane Cooper', role: 'Designer', status: 'active' },
    { id: 2, name: 'Wade Warren', role: 'Engineer', status: 'pending' },
    { id: 3, name: 'Esther Howard', role: 'PM', status: 'active' },
];

const columns = [
    { key: 'name', title: 'Name' },
    { key: 'role', title: 'Role' },
    {
        key: 'status',
        title: 'Status',
        render: (value: unknown) => {
            const status = String(value);
            return <Badge label={status} color={status === 'active' ? 'green' : 'orange'} />;
        },
    },
];

export default function TableWidgetBasicExample() {
    return <TableWidget title="Team" subtitle="Current collaborators" columns={columns} data={rows} rowKey="id" />;
}

Component API

TableWidget

Prop
Type
Default
Description
title
string
-
subtitle
string
-
actions
React.ReactNode
-
columns
any[]
-
data
any[]
[]
loading
boolean
false
rowKey
string
'id'
footer
React.ReactNode
-
maxHeight
string | number
-
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
style
React.CSSProperties
-
Custom style
className
string
-
Custom class name

Variants

Standard Table

Standard data table with headers and row actions.

Candidate List

User
Role
Status
Score
A

Alice Johnson

alice@example.com

Designer
Active
95
B

Bob Smith

bob@example.com

Developer
Active
88
C

Charlie Brown

charlie@example.com

Manager
Away
72
D

Diana Prince

diana@example.com

Designer
Active
91
E

Edward Norton

edward@example.com

Developer
Active
84
Standard Table
"use client";

import { Avatar, Badge, Box, Stack, TableWidget, Text } from '@photonix/ultimate';

const columns = [
    {
        key: 'user',
        title: 'User',
        render: (user: any) => (
            <Stack direction="row" gap="sm" align="center">
                <Avatar name={user.name} src={user.avatar} size="32" />
                <Box>
                    <Text variant="label-md" weight="bold">{user.name}</Text>
                    <Text variant="label-sm" color="secondary">{user.email}</Text>
                </Box>
            </Stack>
        ),
    },
    { key: 'role', title: 'Role' },
    {
        key: 'status',
        title: 'Status',
        render: (status: string) => (
            <Badge variant="secondary" color={status === 'Active' ? 'green' : 'orange'}>
                {status}
            </Badge>
        ),
    },
    { key: 'score', title: 'Score', align: 'right' as const },
];

const data = [
    { id: '1', user: { name: 'Alice Johnson', email: 'alice@example.com', avatar: '' }, role: 'Designer', status: 'Active', score: 95 },
    { id: '2', user: { name: 'Bob Smith', email: 'bob@example.com', avatar: '' }, role: 'Developer', status: 'Active', score: 88 },
    { id: '3', user: { name: 'Charlie Brown', email: 'charlie@example.com', avatar: '' }, role: 'Manager', status: 'Away', score: 72 },
    { id: '4', user: { name: 'Diana Prince', email: 'diana@example.com', avatar: '' }, role: 'Designer', status: 'Active', score: 91 },
    { id: '5', user: { name: 'Edward Norton', email: 'edward@example.com', avatar: '' }, role: 'Developer', status: 'Active', score: 84 },
];

export default function TableWidgetStandardExample() {
    return <TableWidget title="Candidate List" columns={columns} data={data} />;
}

Loading State

Displays skeleton rows while data is being fetched.

Processing Data...

Loading State
"use client";

import { TableWidget } from '@photonix/ultimate';

export default function TableWidgetLoadingExample() {
    return <TableWidget title="Processing Data..." loading columns={[]} data={[]} />;
}

Scrollable Table

Fix the header and make the body scrollable using the maxHeight prop.

Long Data List

User
Role
Status
Score
A

Alice Johnson

alice@example.com

Designer
Active
95
B

Bob Smith

bob@example.com

Developer
Active
88
C

Charlie Brown

charlie@example.com

Manager
Away
72
D

Diana Prince

diana@example.com

Designer
Active
91
E

Edward Norton

edward@example.com

Developer
Active
84
A

Alice Johnson

alice@example.com

Designer
Active
95
B

Bob Smith

bob@example.com

Developer
Active
88
C

Charlie Brown

charlie@example.com

Manager
Away
72
D

Diana Prince

diana@example.com

Designer
Active
91
E

Edward Norton

edward@example.com

Developer
Active
84
A

Alice Johnson

alice@example.com

Designer
Active
95
B

Bob Smith

bob@example.com

Developer
Active
88
C

Charlie Brown

charlie@example.com

Manager
Away
72
D

Diana Prince

diana@example.com

Designer
Active
91
E

Edward Norton

edward@example.com

Developer
Active
84
Scrollable Table
"use client";

import { Avatar, Badge, Box, Stack, TableWidget, Text } from '@photonix/ultimate';

const columns = [
    {
        key: 'user',
        title: 'User',
        render: (user: any) => (
            <Stack direction="row" gap="sm" align="center">
                <Avatar name={user.name} src={user.avatar} size="32" />
                <Box>
                    <Text variant="label-md" weight="bold">{user.name}</Text>
                    <Text variant="label-sm" color="secondary">{user.email}</Text>
                </Box>
            </Stack>
        ),
    },
    { key: 'role', title: 'Role' },
    {
        key: 'status',
        title: 'Status',
        render: (status: string) => (
            <Badge variant="secondary" color={status === 'Active' ? 'green' : 'orange'}>
                {status}
            </Badge>
        ),
    },
    { key: 'score', title: 'Score', align: 'right' as const },
];

const data = [
    { id: '1', user: { name: 'Alice Johnson', email: 'alice@example.com', avatar: '' }, role: 'Designer', status: 'Active', score: 95 },
    { id: '2', user: { name: 'Bob Smith', email: 'bob@example.com', avatar: '' }, role: 'Developer', status: 'Active', score: 88 },
    { id: '3', user: { name: 'Charlie Brown', email: 'charlie@example.com', avatar: '' }, role: 'Manager', status: 'Away', score: 72 },
    { id: '4', user: { name: 'Diana Prince', email: 'diana@example.com', avatar: '' }, role: 'Designer', status: 'Active', score: 91 },
    { id: '5', user: { name: 'Edward Norton', email: 'edward@example.com', avatar: '' }, role: 'Developer', status: 'Active', score: 84 },
];

export default function TableWidgetMaxHeightExample() {
    return <TableWidget title="Long Data List" columns={columns} data={[...data, ...data, ...data]} maxHeight={300} />;
}

On this page

Preview
Component API
Variants
Standard Table
Loading State
Scrollable Table
Photonix UI - React Components, Templates & Figma Design System