Fluxo UIFluxo UIv0.4.93

Table

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

Basic Usage

Basic Table

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

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

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

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

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

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

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

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

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 (use the maxHeight prop to make the table itself scrollable)

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

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 maxHeight={200} 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

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

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

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

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

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

Actions
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

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

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"

Keep the header pinned to the top while the table body scrolls. Pair with maxHeight so the table-container has a scrollable height.

maxHeight
number | string

Cap the height of the inner scroll container. Required for stickyHeader to engage — the container itself becomes the scroll context.

caption
ReactNode

Visible caption rendered above the table; also used as the accessible name.

ariaLabel
string

Accessible name for the table when no visible caption is shown.

ariaDescribedBy
string

ID of an element that describes the table for screen readers.

keyField
string

Field name on each row used as a stable React key (avoids reconciliation issues when rows reorder).

mobileCardStack
boolean"false"

On narrow viewports, pivot rows into label/value cards instead of horizontal table rows.

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.