Table style guide

A table is used to display tabular data within a grid layout. The following provides a comprehensive style guide for implementing tables using custom CSS classes defined in App. These classes are tailored to use with Tailwind CSS, ensuring a consistent and maintanable design system for displaying tabular data.

Tables are created using <ul> elements, where each row is represented by <li> elements, and cells are wrapped inside <span> elements. This structure helps maintain accessibility while offering flexibility in styling.

Base table container

<ul role="table" class="table-container grid gap-0">

• .table-container: Defines the overall structure of the table, ensuring full width and maintaining borders.

Table headers

  <li role="row" class="table-header grid grid-cols-[COLUMN_SIZES]">
    <span role="columnheader" class="table-header-cell">Header 1</span>
    <span role="columnheader" class="table-header-cell">Header 2</span>
  </li>

• .table-header: Defines the row style for headers, such as the height and background color.
• .table-header-cell: Styles the content of the header cells, such as the font size and color.
• COLUMN_SIZES: Defines the width of each column in the table.

Table rows and cells

  <li role="row" class="grid grid-cols-[COLUMN_SIZES]">
    <span role="cell" class="table-cell">Regular text</span>
    <span role="cell" class="table-cell">
      <a class="table-cell-link" href="a link">This is a link</a>
    </span>
    <span role="cell" class="table-cell">
      <span class="table-cell-flex">
        <Pill value="something.txt" removable={false} />
        <Pill value="another.txt" removable={false} />
      </span>
    </span>
  </li>

• .table-cell: Ensures consistent padding, border styling and text alignment.
• .table-cell-link: Adds hover underline for links inside table cells and ensures the entire cell is clickable.
• .table-cell-flex: Used to wrap components in a flex container.
• COLUMN_SIZES: Defines the width of each column in the table.

Cell content

Pill, breadcrumb, tag, icon, and link components can be used inside table cells.

For links, use the table-cell-link class. For flex containers, use the table-cell-flex class. For icons, ensure the width is auto hugging the text.

Responsive and scrollable tables

For tables that exceed available width, wrap them inside a scrollable container.

<div class="max-w-full overflow-x-auto">
  <ul role="table" class="table-container grid gap-0">
    <!-- Table Content -->
  </ul>
</div>

• .max-w-full: ensures the table does not exceed the parent container.
• .overflow-x-auto: enables horizontal scrolling for wide tables.

Usage

<h1 class="text-xl">Example: All machines dashboard</h1>

  <div class="max-w-full overflow-x-auto">
    <ul
      role="table"
      class="table-container grid gap-0"
    >
      <!-- Header row -->
      <li
        role="row"
        class="table-header grid grid-cols-[11%_12%_12%_12.5%_15%_12.5%_12.5%_12.5%]"
      >
        <span
          role="columnheader"
          class="table-header-cell">Location</span
        >
        <span
          role="columnheader"
          class="table-header-cell">Machine</span
        >
        <span
          role="columnheader"
          class="table-header-cell">Part</span
        >
        <span
          role="columnheader"
          class="table-header-cell">Fragments</span
        >
        <span
          role="columnheader"
          class="table-header-cell">Status</span
        >
        <span
          role="columnheader"
          class="table-header-cell">Viam server version</span
        >
        <span
          role="columnheader"
          class="table-header-cell">Viam agent version</span
        >
        <span
          role="columnheader"
          class="table-header-cell">Architecture</span
        >
      </li>

      <!-- data row 1 -->
      <li
        role="row"
        class="grid grid-cols-[11%_12%_12%_12.5%_15%_12.5%_12.5%_12.5%]"
      >
        <span
          role="cell"
          class="table-cell"
        >
          <Pill
            value="officetemp"
            icon="domain"
            removable={false}
          />
        </span>
        <span
          role="cell"
          class="table-cell"
        >
          <Pill
            value="1"
            icon="broadcast"
            removable={false}
          />
        </span>
        <span
          role="cell"
          class="table-cell"
        >
          <Pill
            value="1-main"
            icon="multiplication-box"
            removable={false}
          />
        </span>
        <span
          role="cell"
          class="table-cell"
        >
          <Pill
            value="microtemp"
            icon="viam-fragment"
            removable={false}
          />
        </span>
        <span
          role="cell"
          class="table-cell"
        >
          <a
            href="/"
            class="group flex items-center gap-1 hover:underline"
          >
            <span class="shrink-0"><Icon name="broadcast" /> </span>
            <span> Awaiting setup </span>
            <Icon
              name="open-in-new"
              cx="shrink-0 text-gray-6 group-hover:text-gray-7"
            />
          </a>
        </span>
        <span
          role="cell"
          class="table-cell"
        >
          <span class="font-roboto-mono text-link">0.3.4</span>
        </span>
        <span
          role="cell"
          class="table-cell"
        >
          -
        </span>
        <span
          role="cell"
          class="table-cell"
        >
          Darwin > Arm64
        </span>
      </li>
    </ul>
  </div>