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.

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: '[email protected]', avatar: '' }, role: 'Designer', status: 'Active', score: 95 },
    { id: '2', user: { name: 'Bob Smith', email: '[email protected]', avatar: '' }, role: 'Developer', status: 'Active', score: 88 },
    { id: '3', user: { name: 'Charlie Brown', email: '[email protected]', avatar: '' }, role: 'Manager', status: 'Away', score: 72 },
    { id: '4', user: { name: 'Diana Prince', email: '[email protected]', avatar: '' }, role: 'Designer', status: 'Active', score: 91 },
    { id: '5', user: { name: 'Edward Norton', email: '[email protected]', 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

[email protected]

Designer
Active
95
B

Bob Smith

[email protected]

Developer
Active
88
C

Charlie Brown

[email protected]

Manager
Away
72
D

Diana Prince

[email protected]

Designer
Active
91
E

Edward Norton

[email protected]

Developer
Active
84
A

Alice Johnson

[email protected]

Designer
Active
95
B

Bob Smith

[email protected]

Developer
Active
88
C

Charlie Brown

[email protected]

Manager
Away
72
D

Diana Prince

[email protected]

Designer
Active
91
E

Edward Norton

[email protected]

Developer
Active
84
A

Alice Johnson

[email protected]

Designer
Active
95
B

Bob Smith

[email protected]

Developer
Active
88
C

Charlie Brown

[email protected]

Manager
Away
72
D

Diana Prince

[email protected]

Designer
Active
91
E

Edward Norton

[email protected]

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: '[email protected]', avatar: '' }, role: 'Designer', status: 'Active', score: 95 },
    { id: '2', user: { name: 'Bob Smith', email: '[email protected]', avatar: '' }, role: 'Developer', status: 'Active', score: 88 },
    { id: '3', user: { name: 'Charlie Brown', email: '[email protected]', avatar: '' }, role: 'Manager', status: 'Away', score: 72 },
    { id: '4', user: { name: 'Diana Prince', email: '[email protected]', avatar: '' }, role: 'Designer', status: 'Active', score: 91 },
    { id: '5', user: { name: 'Edward Norton', email: '[email protected]', 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