React Reference

Bifrost table

Static Table

A basic bifrost table.

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
      <Table.HeaderCell>Title</Table.HeaderCell>
      <Table.HeaderCell>Department</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Eric Morton</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
      <Table.Cell>Developer Services</Table.Cell>
    </Table.Row>
    (more rows...)
  </Table.Body>
</Table>
<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
      <Table.HeaderCell>Title</Table.HeaderCell>
      <Table.HeaderCell>Department</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Eric Morton</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
      <Table.Cell>Developer Services</Table.Cell>
    </Table.Row>
    (more rows...)
  </Table.Body>
</Table>

Navn	Tittel	Avdeling
Eric Morton	Developer	Developer Services
Linda Tran	Datteren til oppfinneren av Tran	Developer Services
Herman Jensen	Developer	Developer Services

Interactive

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

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

const data = [
  {
    name: "Eric Morton",
    title: "Developer",
    department: "Developer Services",
  },
  {
    name: "Linda Tran",
    title: "Datteren til oppfinneren av Tran",
    department: "Developer Services",
  },
  {
    name: "Herman Jensen",
    title: "Developer",
    department: "Developer Services",
  },
];

export default function () {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Navn</Table.HeaderCell>
          <Table.HeaderCell>Tittel</Table.HeaderCell>
          <Table.HeaderCell>Avdeling</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map((employee) => (
          <Table.Row
            key={employee.name}
            onClick={() => alert("Clicked on: " + employee.name)}
          >
            <Table.Cell>{employee.name}</Table.Cell>
            <Table.Cell>{employee.title}</Table.Cell>
            <Table.Cell>{employee.department}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Open Sandbox

Vertical line

A table cell can have an optional rightBorder.

<Table.Cell rightBorder>Eric Morton</Table.Cell>
<Table.Cell rightBorder>Eric Morton</Table.Cell>

Navn	Tittel	Avdeling
Eric Morton	Developer	Developer Services
Linda Tran	Datteren til oppfinneren av Tran	Developer Services
Herman Jensen	Developer	Developer Services

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>
<Table noBorder>...</Table>

Navn	Tittel	Avdeling
Eric Morton	Developer	Developer Services
Linda Tran	Datteren til oppfinneren av Tran	Developer Services
Herman Jensen	Developer	Developer Services

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.

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

export default function () {
  const data = [
    {
      name: "Eric Morton",
      title: "Developer",
      department: "Developer Services",
    },
    {
      name: "Linda Tran",
      title: "Datteren til oppfinneren av Tran",
      department: "Developer Services",
    },
    {
      name: "Herman Jensen",
      title: "Developer",
      department: "Developer Services",
    },
  ];

  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")}
          >
            Navn
          </Table.HeaderCell>
          <Table.HeaderCell
            sorting={getSortProp("title")}
            onClick={onSortChangeCreator("title")}
          >
            Tittel
          </Table.HeaderCell>
          <Table.HeaderCell
            sorting={getSortProp("department")}
            onClick={onSortChangeCreator("department")}
          >
            Avdeling
          </Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {sortedData.map((employee) => (
          <Table.Row key={employee.name}>
            <Table.Cell>{employee.name}</Table.Cell>
            <Table.Cell>{employee.title}</Table.Cell>
            <Table.Cell>{employee.department}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Open Sandbox

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.

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

export default function () {
  const data = [
    {
      name: "Eric Morton",
      title: "Developer",
      department: "Developer Services",
      age: "oldest",
    },
    {
      name: "Linda Tran",
      title: "Datteren til oppfinneren av Tran",
      department: "Developer Services",
      age: "youngest",
    },
    {
      name: "Herman Jensen",
      title: "Developer",
      department: "Developer Services",
      age: "middlest",
    },
  ];
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          {/* IMPORTANT EMPTY CELL */}
          <Table.HeaderCell></Table.HeaderCell>
          <Table.HeaderCell>Navn</Table.HeaderCell>
          <Table.HeaderCell>Tittel</Table.HeaderCell>
          <Table.HeaderCell>Avdeling</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map((employee) => (
          <Table.Row
            key={employee.name}
            content={
              <div style={{ padding: "20px" }}>
                <Message header="Age">{employee.age}</Message>
              </div>
            }
            limitExpandClick
          >
            <Table.Cell>{employee.name}</Table.Cell>
            <Table.Cell>
              <a className="bf-link" href="#path">
                {employee.title}
              </a>
            </Table.Cell>
            <Table.Cell>{employee.department}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Open Sandbox

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>Navn</Table.HeaderCell>
      <Table.Cell>Cecilie Tornaas Johnsen</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Avdeling</Table.HeaderCell>
      <Table.Cell>Developer Services</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Interesser</Table.HeaderCell>
      <Table.Cell>Tukle med tabeller</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
<Table vertical>
  <Table.Body>
    <Table.Row>
      <Table.HeaderCell>Navn</Table.HeaderCell>
      <Table.Cell>Cecilie Tornaas Johnsen</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Avdeling</Table.HeaderCell>
      <Table.Cell>Developer Services</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Interesser</Table.HeaderCell>
      <Table.Cell>Tukle med tabeller</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Navn	Cecilie Tornaas Johnsen
Avdeling	Developer Services
Interesser	Tukle med tabeller

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>Gratis</Table.HeaderCell>
      <Table.HeaderCell>Profesjonell</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.HeaderCell>Åpne dokumenter</Table.HeaderCell>
      <Table.Cell>
        <Icon icon={faCheck} />
      </Table.Cell>
      <Table.Cell>
        <Icon icon={faCheck} />
      </Table.Cell>
    </Table.Row>
    more rows...
  </Table.Body>
</Table>
<Table vertical>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell></Table.HeaderCell>
      <Table.HeaderCell>Gratis</Table.HeaderCell>
      <Table.HeaderCell>Profesjonell</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.HeaderCell>Åpne dokumenter</Table.HeaderCell>
      <Table.Cell>
        <Icon icon={faCheck} />
      </Table.Cell>
      <Table.Cell>
        <Icon icon={faCheck} />
      </Table.Cell>
    </Table.Row>
    more rows...
  </Table.Body>
</Table>

	Gratis	Profesjonell
Åpne dokumenter
Lukke dokumenter
Endre dokumenter
Vri dokumenter
Sende fax