components

Table

Table provides a composable set of sub-components for building data tables: Table, TableHead, TableHeadRow, TableBody, TableRow, and TableCell. The TableHead component accepts a cells array of IHeaderCell objects to define columns, and supports a sticky prop for fixed headers during scroll. This is a low-level, structural component — you manually create rows and cells for each data item. Sorting, filtering, selection, and pagination are handled by your own logic, giving full control over the table's behavior.

Import

import { Table, TableHead, TableBody, TableRow, TableCell } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Display structured data in rows and columns.
+When users need to scan, compare, or sort data.
+For data-heavy views like lists, reports, or grids.

When not to use

−For key-value pairs — use RecordField.
−For simple lists without columns — use a styled list.
−For card-based layouts — use Card grid.

Examples

Code Samples

Basic Table

A simple table with header cells and a few data rows. Use TableHead with a cells array for the header, and compose TableBody > TableRow > TableCell for data.

import { Table, TableHead, TableBody, TableRow, TableCell } from "@skedulo/breeze-ui-react";

const columns = [
  { name: "Name", width: "200px" },
  { name: "Role" },
  { name: "Status" },
];

const data = [
  { name: "Sarah Connor", role: "Field Technician", status: "Active" },
  { name: "John Smith", role: "Electrician", status: "Active" },
  { name: "Jane Doe", role: "Plumber", status: "On Leave" },
];

export default function BasicTable() {
  return (
    <Table>
      <TableHead cells={columns} />
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.name}>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.role}</TableCell>
            <TableCell>{row.status}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Styled Table with Badges

Combine TableCell with other Breeze components like Badge to create richer table layouts.

import { Table, TableHead, TableBody, TableRow, TableCell, Badge } from "@skedulo/breeze-ui-react";

const columns = [
  { name: "Job", width: "220px" },
  { name: "Resource" },
  { name: "Priority" },
];

export default function StyledTable() {
  return (
    <Table>
      <TableHead cells={columns} />
      <TableBody>
        <TableRow>
          <TableCell>Install Solar Panels</TableCell>
          <TableCell>Sarah Connor</TableCell>
          <TableCell><Badge color="red">High</Badge></TableCell>
        </TableRow>
        <TableRow>
          <TableCell>HVAC Maintenance</TableCell>
          <TableCell>John Smith</TableCell>
          <TableCell><Badge color="blue">Normal</Badge></TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Guidelines

Do

✓Use sticky headers for long scrollable tables.
✓Keep column count manageable (3-7).
✓Right-align numeric columns for easy comparison.

Don't

✗Don't nest tables.
✗Don't use tables for layout purposes.
✗Don't hide critical columns on mobile — make tables responsive.

API Reference

Prop	Type	Default	Description
cells*	IHeaderCell[]	—	Array of header cell definitions passed to TableHead. Each cell has a name (string), optional width (CSS string), and optional className.
sticky	boolean	false	When true on TableHead, the header row sticks to the top of the scroll container.

Related Components

RecordField Pagination Card