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>
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>
);
}
Vertical line
A table cell can have an optional rightBorder.
<Table.Cell rightBorder>Eric Morton</Table.Cell>
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>
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) => {
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>
);
}
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>
{}
<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>
);
}
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>
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>
