Fluxo UIFluxo UIv0.1.1

Table

A feature-rich data table with sorting, pagination, custom rendering, style variants, and responsive design.

Basic Usage

Basic Table

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper
import { Table } from 'fluxo-ui';

const columns = [
  { title: 'ID', field: 'id', sortable: true },
  { title: 'Name', field: 'name', sortable: true },
  { title: 'Email', field: 'email', sortable: true },
  { title: 'Role', field: 'role', sortable: true },
];

<Table columns={columns} rows={data} totalRows={data.length} pagination={false} />

Style Variants

Bordered

All cell borders visible

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper

Striped

Alternating row background colors

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper
6Frank Wilsonfrank@example.comAnalyst
7Grace Leegrace@example.comDeveloper
8Henry Taylorhenry@example.comDesigner

Compact

Reduced padding for dense data display

IDNameEmailRoleDepartmentJoin Date
1Alice Johnsonalice@example.comAdminEngineering2023-01-15
2Bob Smithbob@example.comDeveloperEngineering2023-03-22
3Carol Whitecarol@example.comDesignerDesign2023-02-10
4David Browndavid@example.comManagerOperations2022-11-05
5Emma Davisemma@example.comDeveloperEngineering2023-04-18
6Frank Wilsonfrank@example.comAnalystAnalytics2023-05-30
7Grace Leegrace@example.comDeveloperEngineering2023-06-12
8Henry Taylorhenry@example.comDesignerDesign2022-09-25

Comfortable

Increased padding for readability

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper

Borderless

No borders or shadow for a clean look

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper

Hoverable

Primary-color row hover highlight

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper

Card Style

Each row rendered as an individual card

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper

Minimal Header

Subtle uppercase header with no background

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper

Sticky Header

Header stays fixed when scrolling (resize container to see)

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper
6Frank Wilsonfrank@example.comAnalyst
7Grace Leegrace@example.comDeveloper
8Henry Taylorhenry@example.comDesigner

Combined: Striped + Compact + Bordered

Multiple variants can be combined

IDNameEmailRoleDepartmentJoin Date
1Alice Johnsonalice@example.comAdminEngineering2023-01-15
2Bob Smithbob@example.comDeveloperEngineering2023-03-22
3Carol Whitecarol@example.comDesignerDesign2023-02-10
4David Browndavid@example.comManagerOperations2022-11-05
5Emma Davisemma@example.comDeveloperEngineering2023-04-18
6Frank Wilsonfrank@example.comAnalystAnalytics2023-05-30
7Grace Leegrace@example.comDeveloperEngineering2023-06-12
8Henry Taylorhenry@example.comDesignerDesign2022-09-25
<Table bordered columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table striped columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table compact columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table comfortable columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table borderless columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table hoverable columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table cardStyle columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table minimalHeader columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table stickyHeader columns={columns} rows={data} totalRows={data.length} pagination={false} />
<Table striped compact bordered columns={columns} rows={data} totalRows={data.length} pagination={false} />

Sortable Columns

Table with Sorting

Click column headers to sort

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper
6Frank Wilsonfrank@example.comAnalyst
7Grace Leegrace@example.comDeveloper
8Henry Taylorhenry@example.comDesigner
<Table
  columns={columns}
  rows={data}
  totalRows={data.length}
  onSort={(column, asc) => console.log('Sort by:', column.field, asc)}
  pagination={false}
/>

Custom Cell Rendering

Table with Custom Templates

Custom cell rendering with badges

IDNameEmailStatusJoin Date
1Alice Johnsonalice@example.comactive2023-01-15
2Bob Smithbob@example.comactive2023-03-22
3Carol Whitecarol@example.comactive2023-02-10
4David Browndavid@example.cominactive2022-11-05
5Emma Davisemma@example.comactive2023-04-18
6Frank Wilsonfrank@example.comactive2023-05-30
7Grace Leegrace@example.comactive2023-06-12
8Henry Taylorhenry@example.cominactive2022-09-25
{
  title: 'Status',
  field: 'status',
  template: (row) => (
    <span className={row.status === 'active' ? 'badge-green' : 'badge-red'}>
      {row.status}
    </span>
  ),
}

With Pagination

Table with Pagination

IDNameEmailStatusJoin Date
1Alice Johnsonalice@example.comactive2023-01-15
2Bob Smithbob@example.comactive2023-03-22
3Carol Whitecarol@example.comactive2023-02-10
4David Browndavid@example.cominactive2022-11-05
5Emma Davisemma@example.comactive2023-04-18
Rows per page
1 of 2
<Table
  columns={columns}
  rows={data}
  totalRows={data.length}
  rowsPerPage={5}
  rowCounts={[5, 10, 15]}
  onChange={(params) => console.log(params)}
/>

Row Selection

Table with Row Click

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper
<Table
  columns={columns}
  rows={data}
  totalRows={data.length}
  onRowClick={({ row }) => setSelectedRow(row)}
  pagination={false}
/>

Responsive Columns

Responsive Columns

Resize the browser to see columns hide at breakpoints

IDNameEmailRoleDepartmentJoin Date
1Alice Johnsonalice@example.comAdminEngineering2023-01-15
2Bob Smithbob@example.comDeveloperEngineering2023-03-22
3Carol Whitecarol@example.comDesignerDesign2023-02-10
4David Browndavid@example.comManagerOperations2022-11-05
5Emma Davisemma@example.comDeveloperEngineering2023-04-18
Rows per page
1 of 2
const columns = [
  { title: 'ID', field: 'id' },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email', hideBelow: 'md' },
  { title: 'Role', field: 'role', hideBelow: 'sm' },
  { title: 'Department', field: 'department', hideBelow: 'lg' },
  { title: 'Join Date', field: 'joinDate', hideBelow: 'xl' },
];

With Action Buttons

Table with Row Actions

NameEmailRoleActions
Alice Johnsonalice@example.comAdmin
Bob Smithbob@example.comDeveloper
Carol Whitecarol@example.comDesigner
David Browndavid@example.comManager
Emma Davisemma@example.comDeveloper
{
  title: 'Actions',
  field: 'id',
  template: (row) => (
    <div className="flex gap-2">
      <Button size="xs" variant="primary" onClick={() => handleEdit(row)}>Edit</Button>
      <Button size="xs" variant="danger" layout="outlined" onClick={() => handleDelete(row)}>Delete</Button>
    </div>
  ),
}

Loading & Empty States

Loading State

Shimmer skeleton while data loads

IDNameEmailRole
1Alice Johnsonalice@example.comAdmin
2Bob Smithbob@example.comDeveloper
3Carol Whitecarol@example.comDesigner
4David Browndavid@example.comManager
5Emma Davisemma@example.comDeveloper
6Frank Wilsonfrank@example.comAnalyst
7Grace Leegrace@example.comDeveloper
8Henry Taylorhenry@example.comDesigner

Empty State

Custom message when no data

IDNameEmailRole
No users found. Try adjusting your filters.
<Table
  columns={columns}
  rows={data}
  totalRows={data.length}
  isLoading={isLoading}
  expectedRows={5}
/>
<Table
  columns={columns}
  rows={[]}
  totalRows={0}
  noRowsMessage="No users found. Try adjusting your filters."
  pagination={false}
/>

Import

import { Table } from 'fluxo-ui';
import type { Column, OnChangeParams } from 'fluxo-ui';

Table Props

columnsreq
Column[]

Array of column definitions

rowsreq
any[]

Array of data objects to display

totalRowsreq
number

Total number of rows (for pagination)

id
string

HTML id for the table container

isLoading
boolean"false"

Show shimmer loading state

expectedRows
number

Number of shimmer rows when loading

onSort
(column: Column, asc: boolean) => void

Callback when a sortable column is clicked

onChange
(params: OnChangeParams) => void

Callback for sort, pagination, or row count changes

noRowsMessage
string"'No records found.'"

Message when no rows exist

rowCounts
number[]"[10, 20, 25, 50, 75, 100]"

Options for rows per page dropdown

rowsPerPage
number"rowCounts[0]"

Initial rows per page

sortColumn
Column

Initially sorted column

sortAsc
boolean"true"

Initial sort direction

page
number"1"

Initial page number

pagination
boolean"true"

Show pagination footer

containerClassName
string

CSS class for the table container

onRowClick
(arg: { row, index, event }) => void

Callback when a row is clicked

bordered
boolean"false"

Show all cell borders

striped
boolean"false"

Alternate row background colors

compact
boolean"false"

Reduced padding for dense display

comfortable
boolean"false"

Increased padding for readability

borderless
boolean"false"

Remove all borders and shadow

hoverable
boolean"false"

Primary-color row hover highlight

cardStyle
boolean"false"

Render each row as a card

minimalHeader
boolean"false"

Subtle uppercase header

stickyHeader
boolean"false"

Fixed header on scroll

Column Configuration

titlereq
string

Column header text

fieldreq
string

Property name in the data object

helpText
string

Tooltip text on the column header

headerClassName
string

CSS class for the column header

cellClassName
string

CSS class for cells in this column

sortable
boolean"false"

Enable sorting for this column

hideBelow
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

Hide column below breakpoint

template
(row: any) => React.ReactNode

Custom render function for cell content

Features

Style Variants

Nine composable styles: bordered, striped, compact, comfortable, borderless, hoverable, card, minimal header, sticky header.

Column Sorting

Click headers to sort — supports client-side and server-side sorting.

Pagination

Built-in footer with configurable rows-per-page and page navigation.

Custom Cell Rendering

Template functions per column for badges, buttons, or any React element.

Responsive Columns

Hide columns on smaller screens using hideBelow breakpoints.

Loading State

Animated shimmer skeleton while data is being fetched.

Row Click Handler

Attach onRowClick callbacks for selection or navigation.

Theming

Dark/light mode and all brand themes via CSS custom properties.