Table

v1.0.0

Structured table component for tabular data and actions.

Import

import { Table } from '@meteorack/sdk-react';

How To Use It

Use it for multi-column records such as logs, licenses, plugins, or jobs where users need to compare rows quickly.
Keep row actions predictable and pair large result sets with pagination rather than loading every row at once.

Works Well With

Pagination Badge Button

Props

columns: TableColumn<T>[]

Column definitions; each column has a key, label, and optional custom render function.

rows: T[]

Row data rendered in the table body.

loading?: boolean

Shows skeleton rows while data is being fetched.

emptyMessage?: string

Fallback message shown when rows are empty.

className?: string

Optional class name for the scroll container around the table.

Example

Table.tsx

import { Table, Badge, Button } from '@meteorack/sdk-react';

const rows = [
  { module: 'Meteorack SEO', status: 'active' },
  { module: 'Meteorack Forms', status: 'trial' },
];

export function ModuleTable() {
  return (
    <Table
      columns={[
        { key: 'module', label: 'Module' },
        {
          key: 'status',
          label: 'Status',
          render: (row) => (
            <Badge variant={row.status === 'active' ? 'success' : 'warning'}>
              {row.status}
            </Badge>
          ),
        },
        {
          key: 'actions',
          label: 'Actions',
          render: () => <Button size="sm" variant="secondary">Manage</Button>,
        },
      ]}
      rows={rows}
      emptyMessage="No modules found."
    />
  );
}

PreviousTabs NextSkeleton