In Review

Table

Basic Table

Table Header
Name	Email	Role
John Doe	john.doe@example.com	Admin
Jane Smith	jane.smith@example.com	User
Sam Lee	sam.lee@example.com	Editor

Usage

<table class="gi-table">
  <caption class="gi-table-caption-text gi-text-lg">Default Table Example</caption>
  <thead>
    <tr>
      <th class="gi-table-th">Name</th>
      <th class="gi-table-th">Email</th>
      <th class="gi-table-th">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="gi-table-td">John Doe</td>
      <td class="gi-table-td">john.doe@example.com</td>
      <td class="gi-table-td">Admin</td>
    </tr>
    <tr>
      <td class="gi-table-td">Jane Smith</td>
      <td class="gi-table-td">jane.smith@example.com</td>
      <td class="gi-table-td">User</td>
    </tr>
    <tr>
      <td class="gi-table-td">Sam Lee</td>
      <td class="gi-table-td">sam.lee@example.com</td>
      <td class="gi-table-td">Editor</td>
    </tr>
  </tbody>
</table>

{{ govieTable({
"captionText": "Default Table Example",
"headers": [
  "Name",
  "Email",
  "Role"
],
"rows": [
  [
    "John Doe",
    "john.doe@example.com",
    "Admin"
  ],
  [
    "Jane Smith",
    "jane.smith@example.com",
    "User"
  ],
  [
    "Sam Lee",
    "sam.lee@example.com",
    "Editor"
  ]
]
}) }}

import React from 'react';
import {
  Table,
  Caption,
  TableHead,
  TableRow,
  TableHeader,
  TableData,
  TableBody,
} from '@govie-ds/react';
<Table>
<Caption>
  User Information
</Caption>
<TableHead>
  <TableRow>
    <TableHeader>
      Name
    </TableHeader>
    <TableHeader>
      Email
    </TableHeader>
    <TableHeader>
      Role
    </TableHeader>
  </TableRow>
</TableHead>
<TableBody>
  <TableRow>
    <TableData>
      John Doe
    </TableData>
    <TableData>
      john.doe@example.com
    </TableData>
    <TableData>
      Admin
    </TableData>
  </TableRow>
  <TableRow>
    <TableData>
      Jane Smith
    </TableData>
    <TableData>
      jane.smith@example.com
    </TableData>
    <TableData>
      User
    </TableData>
  </TableRow>
  <TableRow>
    <TableData>
      Sam Lee
    </TableData>
    <TableData>
      sam.lee@example.com
    </TableData>
    <TableData>
      Editor
    </TableData>
  </TableRow>
</TableBody>
</Table>

Best Practices

Provide clear headings: Use descriptive table headers to clearly communicate the data presented in each column.
Ensure data accessibility: Always use <caption> to provide a description for the table when possible. This enhances accessibility, particularly for screen readers.
Use table footers for totals or summaries: If your table involves financial data or other summarisable information, use the <tfoot> element to summarise the data, e.g., total sums or averages.
Use <thead>, <tbody>, and <tfoot> appropriately: Keep the table's structure clear by grouping the header, body, and footer sections properly.

When to use this component

When displaying structured data: Use the Table component when you need to present information in rows and columns. This could include user lists, product details, or financial data.
For accessibility compliance: Tables are ideal when your data needs to be structured for accessibility tools like screen readers. Use semantic HTML with appropriate headings and captions.
When you need actions within the table: You can integrate checkboxes, buttons, and links within your table to allow user interaction, like selecting rows, editing, or deleting records.

When not to use this component

For displaying non-tabular data: Avoid using tables for layout purposes or when the data doesn’t need to be structured into rows and columns. Use other components, like lists or grids, for such cases.
For small data sets: For simple data presentation or when displaying a small amount of information, simpler structures like lists or cards might be more appropriate.
When responsiveness is a priority: While tables are excellent for presenting structured data, they may require additional styling and responsive behaviour for smaller screens. Consider using grids or other flexible layout components when responsiveness is a priority.

Status

Figma Library	Considering
Local HTML	Stable
Global HTML	Beta
Global React	Beta