Table Components

Table

A Table is a CMS driven component that displays tabular data comprised of rows and cells.

Field	Description	Values
header	Table title, represented as a <caption> element	String
fullBleed	Boolean to determine whether the table spans full width or has padding	true false
paddingTop	Controls spacing above the table	regular extra
paddingBottom	Controls spacing below the table	regular extra
headerPosition	Alignment of the header	start center end
borderColor	The border color for the table	border background primary secondary accent muted destructive
rows	Array of table rows	Array

Preview

Table

Header 1	Header 2	Header 3	Header 4	Header 5
Row 1 Col 1	Row 1 Col 2	Row 1 Col 3	Row 1 Col 4	Row 1 Col 5
Row 2 Col 1	Row 2 Col 2	Row 2 Col 3	Row 2 Col 4	Row 2 Col 5
Row 3 Col 1	Row 3 Col 2	Row 3 Col 3	Row 3 Col 4	Row 3 Col 5
Row 4 Col 1	Row 4 Col 2	Row 4 Col 3	Row 4 Col 4	Row 4 Col 5

Code

import {
  Table,
  TableCaption,
  TableHead,
  TableCell,
  TableRow,
  TableBody,
} from '@hv/ui/table';
import { Hypertext } from '@hv/ui/hypertext';

export default function TableExample({
  fullBleed = true,
  paddingTop,
  paddingBottom,
  ariaLabel,
  rows = [],
  header,
  headerPosition,
  borderColor,
}) {
  const headerRows = rows.filter(row => row.isHeader);
  const bodyRows = rows.filter(row => !row.isHeader);
  return (
    <Table
      ariaLabel={ariaLabel}
      paddingTop={paddingTop}
      paddingBottom={paddingBottom}
      fullBleed={fullBleed}
    >
      <TableCaption position={headerPosition}>
        <Hypertext format='markdown' text={header?.text} />
      </TableCaption>
      {headerRows.length > 0 && (
        <TableHead>
          {headerRows.map(row => (
            <TableRow key={row.id}>
              {row.cells?.map(cell => (
                <TableCell
                  key={cell.id}
                  as='th'
                  colSpan={cell?.columnSpan ?? 1}
                  backgroundColor={cell?.backgroundColor}
                  textColor={cell?.textColor}
                  borderColor={borderColor}
                  position={cell?.textPosition}
                >
                  <Hypertext text={cell?.text?.text} format='markdown' />
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableHead>
      )}
      <TableBody>
        {bodyRows?.map(row => (
          <TableRow key={row.id}>
            {row?.cells?.map(cell => {
              return (
                <TableCell
                  key={cell.id}
                  colSpan={cell?.columnSpan ?? 1}
                  backgroundColor={cell?.backgroundColor}
                  textColor={cell?.textColor}
                  borderColor={borderColor}
                >
                  <Hypertext text={cell?.text?.text} format='markdown' />
                </TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

---

Table Row

A TableRow is comprised of table cells.

Field	Description	Values
cells	An array of table cells	Array
isHeader	An boolean to determine if the row serves as a header for the table columns	true false

---

Table Cell

A Table Cell is a subcomponent of a TableRow.

Field	Description	Values
text	The text content of the cell in markdown	String
columnSpan	Determines how many columns the cell spans. The sum of all colSpan values in a row must equal the total number of columns in the table.	Integer
backgroundColor	Background color of the cell	background primary secondary accent destructive muted
textColor	Text color of the cell	foreground primary foreground secondary foreground accent foreground muted foreground destructive foreground
position	Text alignment of the cell content	start center end

Preview

Example Cell

Code

import { TableCell } from '@hv/ui/table';
import { Hypertext } from '@hv/ui/hypertext';

const TableCellExample = ({
  id,
  colSpan = 1,
  className,
  backgroundColor,
  textColor,
  borderColor,
  position,
  text = '',
  as = 'td',
  children,
  ...props
}) => {
  return (
    <TableCell
      key={id}
      as={as}
      colSpan={colSpan}
      backgroundColor={backgroundColor}
      textColor={textColor}
      borderColor={borderColor}
      position={position}
      className='w-96 py-10'
      {...props}
    >
      <Hypertext text={text} format='markdown' />
      {children}
    </TableCell>
  );
};

export default TableCellExample;

---

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.