Photonix UI - React Components, Templates & Figma Design System

TableWidget

A widget container for tabular data using the DataTable component.

Preview

Recent Candidates

Last 5 applications received

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

Showing 5 of 42 results

Usage

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

const columns = [
  { key: 'name', title: 'Name' },
  { key: 'role', title: 'Role' },
  // ...
];

<TableWidget
  title="Team Members"
  columns={columns}
  data={members}
/>

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 [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

Standard Table

<TableWidget
  title="Candidate List"
  columns={COLUMNS}
  data={DATA}
/>

Loading State

Displays skeleton rows while data is being fetched.

Loading State

<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

<TableWidget
  title="Long Data List"
  columns={COLUMNS}
  data={[...DATA, ...DATA, ...DATA]}
  maxHeight={300}
/>

TableWidget

Preview

Recent Candidates

Component API

TableWidget

Variants

Standard Table

Candidate List

Loading State

Processing Data...

Scrollable Table

Long Data List

On this page