Table

The Table component displays tabular data with optional sorting, filtering, and pagination. You pass rows and columns as required props; each column can be marked sortable or not. Numeric columns (e.g. ID, marks) are sorted numerically; others are sorted as strings. Filtering is real-time and highlights matching text. This compnent is named as AdvancedTable.

Preview

Filter rows...

Rows per page:51020

Showing 1-5 of 12 matching rows (total: 12)Page 1 of 3

ID↑	Name↑	Email↑	Role↑	Status
1	Alice Johnson	alice@example.com	Admin	Active
2	Bob Smith	bob@example.com	Editor	Invited
3	Charlie Brown	charlie@example.com	Viewer	Active
4	Diana Prince	diana@example.com	Admin	Suspended
5	Ethan Hunt	ethan@example.com	Editor	Active

Code

<AdvancedTable
  rows={sampleRows}
  columns={sampleColumns}
  enableSorting={true}
  enableFiltering={true}
  enablePagination={true}
/>

Installation

CLI

ignix add component advanced-table

Usage

Import the component and pass rows and columns:

import { AdvancedTable, type AdvancedTableRow } from '@site/src/components/UI/advanced-table';

const columns = [
  { key: 'id', label: 'ID', sortable: true },
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
  { key: 'status', label: 'Status', sortable: false },
];

const rows: AdvancedTableRow[] = [
  { id: 1, name: 'Alice', email: 'alice@example.com', status: 'Active' },
  { id: 2, name: 'Bob', email: 'bob@example.com', status: 'Pending' },
];

function MyTable() {
  return (
    <AdvancedTable
      rows={rows}
      columns={columns}
      enableSorting
      enableFiltering
      enablePagination
    />
  );
}

Base table (no sort, filter, pagination)

Showing 1-12 of 12 matching rows (total: 12)

ID	Name	Email	Role	Status
1	Alice Johnson	alice@example.com	Admin	Active
2	Bob Smith	bob@example.com	Editor	Invited
3	Charlie Brown	charlie@example.com	Viewer	Active
4	Diana Prince	diana@example.com	Admin	Suspended
5	Ethan Hunt	ethan@example.com	Editor	Active
6	Fiona Gallagher	fiona@example.com	Viewer	Pending
7	George Miller	george@example.com	Viewer	Active
8	Hannah Lee	hannah@example.com	Admin	Active
9	Ian Wright	ian@example.com	Editor	Invited
10	Julia Roberts	julia@example.com	Viewer	Active
11	Kevin Durant	kevin@example.com	Viewer	Pending
12	Laura Palmer	laura@example.com	Admin	Suspended

Sortable table

Showing 1-12 of 12 matching rows (total: 12)

ID↑	Name↑	Email↑	Role↑	Status
1	Alice Johnson	alice@example.com	Admin	Active
2	Bob Smith	bob@example.com	Editor	Invited
3	Charlie Brown	charlie@example.com	Viewer	Active
4	Diana Prince	diana@example.com	Admin	Suspended
5	Ethan Hunt	ethan@example.com	Editor	Active
6	Fiona Gallagher	fiona@example.com	Viewer	Pending
7	George Miller	george@example.com	Viewer	Active
8	Hannah Lee	hannah@example.com	Admin	Active
9	Ian Wright	ian@example.com	Editor	Invited
10	Julia Roberts	julia@example.com	Viewer	Active
11	Kevin Durant	kevin@example.com	Viewer	Pending
12	Laura Palmer	laura@example.com	Admin	Suspended

Filterable table

Filter rows...

Showing 1-12 of 12 matching rows (total: 12)

ID	Name	Email	Role	Status
1	Alice Johnson	alice@example.com	Admin	Active
2	Bob Smith	bob@example.com	Editor	Invited
3	Charlie Brown	charlie@example.com	Viewer	Active
4	Diana Prince	diana@example.com	Admin	Suspended
5	Ethan Hunt	ethan@example.com	Editor	Active
6	Fiona Gallagher	fiona@example.com	Viewer	Pending
7	George Miller	george@example.com	Viewer	Active
8	Hannah Lee	hannah@example.com	Admin	Active
9	Ian Wright	ian@example.com	Editor	Invited
10	Julia Roberts	julia@example.com	Viewer	Active
11	Kevin Durant	kevin@example.com	Viewer	Pending
12	Laura Palmer	laura@example.com	Admin	Suspended

Paginated table

Rows per page:51020

Showing 1-5 of 12 matching rows (total: 12)Page 1 of 3

ID	Name	Email	Role	Status
1	Alice Johnson	alice@example.com	Admin	Active
2	Bob Smith	bob@example.com	Editor	Invited
3	Charlie Brown	charlie@example.com	Viewer	Active
4	Diana Prince	diana@example.com	Admin	Suspended
5	Ethan Hunt	ethan@example.com	Editor	Active

Full-featured table

Filter rows...

Rows per page:51020

Showing 1-5 of 12 matching rows (total: 12)Page 1 of 3

ID↑	Name↑	Email↑	Role↑	Status
1	Alice Johnson	alice@example.com	Admin	Active
2	Bob Smith	bob@example.com	Editor	Invited
3	Charlie Brown	charlie@example.com	Viewer	Active
4	Diana Prince	diana@example.com	Admin	Suspended
5	Ethan Hunt	ethan@example.com	Editor	Active

Props

Prop	Type	Default	Description
rows	AdvancedTableRow[]	required	Data rows; each row is a record keyed by column keys.
columns	Array<{ key: string; label: string; sortable?: boolean }>	required	Column definitions. Use sortable: false to disable sorting for that column.
enableSorting	boolean	true	When true, sortable column headers are clickable and show ↑/↓.
defaultSortKey	string	first column key	Initial sort column when sorting is enabled.
defaultSortDirection	'asc' | 'desc'	'asc'	Initial sort direction.
enableFiltering	boolean	true	When true, shows filter input and clear button; filters rows and highlights matches.
filterPlaceholder	string	'Filter rows...'	Placeholder for the filter input.
enablePagination	boolean	true	When true, shows rows-per-page selector and page controls.
initialPage	number	1	Initial page (1-based).
initialRowsPerPage	number	5	Initial rows per page.
rowsPerPageOptions	number[]	[5, 10, 20]	Options for the rows-per-page dropdown.
className	string	-	Optional class for the outer container.