Bifrost Design System

import Table from "@intility/bifrost-react/Table";

Table

Props

Static Table

A basic bifrost table.

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
      <Table.HeaderCell>Team</Table.HeaderCell>
      <Table.HeaderCell>Position</Table.HeaderCell>
      <Table.HeaderCell>Country</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Ilya Rozanov</Table.Cell>
      <Table.Cell>Boston Bears</Table.Cell>
      <Table.Cell>Centre</Table.Cell>
      <Table.Cell>Russia</Table.Cell>
    </Table.Row>
    (more rows...)
  </Table.Body>
</Table>

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia
Shane Hollander	Montreal Voyageurs	Centre	Canada
Scott Hunter	New York Admirals	Centre	USA

Interactive

Sending onClick to Table.Row will display it as selectable.

Open Sandbox

import Table from "@intility/bifrost-react/Table";

const data = [
  {
    name: "Ilya Rozanov",
    team: "Boston Bears",
    position: "Centre",
    country: "Russia",
  },
  {
    name: "Shane Hollander",
    team: "Montreal Voyageurs",
    position: "Centre",
    country: "Canada",
  },
  {
    name: "Scott Hunter",
    team: "New York Admirals",
    position: "Centre",
    country: "USA",
  },
];

export default function () {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Team</Table.HeaderCell>
          <Table.HeaderCell>Position</Table.HeaderCell>
          <Table.HeaderCell>Country</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map((player) => (
          <Table.Row
            key={player.name}
            onClick={() => alert("Clicked on: " + player.name)}
          >
            <Table.Cell>{player.name}</Table.Cell>
            <Table.Cell>{player.team}</Table.Cell>
            <Table.Cell>{player.position}</Table.Cell>
            <Table.Cell>{player.country}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Vertical line

A table cell can have an optional rightBorder.

<Table.Cell rightBorder>Ilya Rozanov</Table.Cell>

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia
Shane Hollander	Montreal Voyageurs	Centre	Canada
Scott Hunter	New York Admirals	Centre	USA

Borderless

The outer border will not be displayed for mobile screens (less than 600px) or can be permanently removed with the noBorder prop.

<Table noBorder>...</Table>

Name	Team	Position	Country
Ilya Rozanov	Boston Bears	Centre	Russia
Shane Hollander	Montreal Voyageurs	Centre	Canada
Scott Hunter	New York Admirals	Centre	USA

Sorting

A header can indicate sort order. Note that to indicate that a column is sortable, sorting='none' has to be passed to Table.HeaderCell.

Open Sandbox

import { useState } from "react";
import Table from "@intility/bifrost-react/Table";

export default function () {
  const data = [
    {
      name: "Ilya Rozanov",
      team: "Boston Bears",
      position: "Centre",
      country: "Russia",
    },
    {
      name: "Shane Hollander",
      team: "Montreal Voyageurs",
      position: "Centre",
      country: "Canada",
    },
    {
      name: "Scott Hunter",
      team: "New York Admirals",
      position: "Centre",
      country: "USA",
    },
  ];

  const [sort, setSort] = useState({ key: "name", direction: "asc" });

  const onSortChangeCreator = (key) => () =>
    setSort((oldSort) => {
      //sort by descending if current key is sorted by ascending
      if (oldSort.key === key && oldSort.direction === "asc") {
        return { key, direction: "desc" };
      } else {
        return { key, direction: "asc" };
      }
    });

  const getSortProp = (key) => (sort.key === key ? sort.direction : "none");

  const sortedData = data.sort((a, b) => {
    if (sort.direction === "asc") {
      return a[sort.key].localeCompare(b[sort.key]);
    } else {
      return b[sort.key].localeCompare(a[sort.key]);
    }
  });
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell
            sorting={getSortProp("name")}
            onClick={onSortChangeCreator("name")}
          >
            Name
          </Table.HeaderCell>
          <Table.HeaderCell
            sorting={getSortProp("team")}
            onClick={onSortChangeCreator("team")}
          >
            Team
          </Table.HeaderCell>
          <Table.HeaderCell
            sorting={getSortProp("position")}
            onClick={onSortChangeCreator("position")}
          >
            Position
          </Table.HeaderCell>
          <Table.HeaderCell
            sorting={getSortProp("country")}
            onClick={onSortChangeCreator("country")}
          >
            Country
          </Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {sortedData.map((player) => (
          <Table.Row key={player.name}>
            <Table.Cell>{player.name}</Table.Cell>
            <Table.Cell>{player.team}</Table.Cell>
            <Table.Cell>{player.position}</Table.Cell>
            <Table.Cell>{player.country}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Expandable Rows

Rows can be made expandable by using the content prop of Table.Row. Expects an empty Table.HeaderCell as the first cell in the header.

By default, an expandable row will expand when the row is clicked. To change this behaviour, use the limitExpandClick prop. This is useful for when you have multiple clickable columns.

Open Sandbox

import Table from "@intility/bifrost-react/Table";
import Message from "@intility/bifrost-react/Message";

export default function () {
  const data = [
    {
      name: "Ilya Rozanov",
      team: "Boston Bears",
      position: "Centre",
      country: "Russia",
    },
    {
      name: "Shane Hollander",
      team: "Montreal Voyageurs",
      position: "Centre",
      country: "Canada",
    },
    {
      name: "Scott Hunter",
      team: "New York Admirals",
      position: "Centre",
      country: "USA",
    },
  ];
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          {/* IMPORTANT EMPTY CELL */}
          <Table.HeaderCell></Table.HeaderCell>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Position</Table.HeaderCell>
          <Table.HeaderCell>Country</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map((player) => (
          <Table.Row
            key={player.name}
            content={
              <div style={{ padding: "20px" }}>
                <Message noIcon header="Team">
                  {player.team}
                </Message>
              </div>
            }
            limitExpandClick
          >
            <Table.Cell>{player.name}</Table.Cell>
            <Table.Cell>{player.position}</Table.Cell>
            <Table.Cell>{player.country}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Vertical headers

A table can be turned vertical by adding the vertical prop to Table and using Table.HeaderCell in the body rows.

Also works with noBorder

<Table vertical>
  <Table.Body>
    <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
      <Table.Cell>Ilya Rozanov</Table.Cell>
      <Table.Cell>Shane Hollander</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Team</Table.HeaderCell>
      <Table.Cell>Boston Bears</Table.Cell>
      <Table.Cell>Montreal Voyageurs</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Position</Table.HeaderCell>
      <Table.Cell>Centre</Table.Cell>
      <Table.Cell>Centre</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Country</Table.HeaderCell>
      <Table.Cell>Russia</Table.Cell>
      <Table.Cell>Canada</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Name	Ilya Rozanov	Shane Hollander
Team	Boston Bears	Montreal Voyageurs
Position	Centre	Centre
Country	Russia	Canada

Two-dimensional

A table can become two-dimensional by combining a normal and vertical table. Note the first HeaderCell in the Header is empty.

<Table vertical>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell></Table.HeaderCell>
      <Table.HeaderCell>Free</Table.HeaderCell>
      <Table.HeaderCell>Professional</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.HeaderCell>Open documents</Table.HeaderCell>
      <Table.Cell>
        <Icon icon={faCheck} />
      </Table.Cell>
      <Table.Cell>
        <Icon icon={faCheck} />
      </Table.Cell>
    </Table.Row>
    more rows...
  </Table.Body>
</Table>

	Free	Professional
Open documents
Close documents
Edit documents
Rotate documents
Send fax