Table

Tables are containers for displaying information. They allow users to quickly scan, compare, and take action on large amounts of data.

When including tools, they should be placed directly above or below the table.

Sonnat's Tables are fully customizable. We have implemented the basic features so you can add your own features without any problem / overriding hells.

Basic Table

Basic Table
Name	Age	Tags
John Doe	25	Front-end Developer Senior
Jim Halpert	30	Sales Manager
Jude Brown	23	Back-end Developer Junior
This is the footer

Dense Table

To have a denser table, use the dense property.

Dense Table
Name	Age	Tags
John Doe	25	Front-end Developer Senior
Jim Halpert	30	Sales Manager
Jude Brown	23	Back-end Developer Junior
This is the footer

With Selection

Table With Selection
Name	Age	Tags
John Doe	25	Front-end Developer Senior
Jim Halpert	30	Sales Manager
Jude Brown	23	Back-end Developer Junior

import {
  Button,
  Checkbox,
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHeader,
  TableRow,
  Tag,
  Text
} from "@sonnat/ui";
import makeStyles from "@sonnat/ui/styles/makeStyles";
import * as React from "react";

const useStyles = makeStyles(({ spacings: { spaces } }) => ({
  tags: { "& > * + *": { marginLeft: spaces[3].rem } },
  footBar: { display: "flex", alignItems: "center" }
}));

interface DataRow {
  name: string;
  age: number;
  tags: [string, string];
}

const dataRows: DataRow[] = [
  { name: "John Doe", age: 25, tags: ["Front-end Developer", "Senior"] },
  { name: "Jim Halpert", age: 30, tags: ["Sales", "Manager"] },
  { name: "Jude Brown", age: 23, tags: ["Back-end Developer", "Junior"] }
];

const Demo = () => {
  const classes = useStyles();

  const [selected, setSelected] = React.useState<DataRow[]>([]);
  const [isIndeterminated, setIndeterminated] = React.useState(false);

  const toggleSelectAll = (checkedState: boolean) => {
    if (checkedState) setSelected(dataRows);
    else setSelected([]);
  };

  const toggleSelectRow = (checkedState: boolean, dataRow: DataRow) => {
    if (checkedState) {
      setSelected(s => [...s, dataRow]);
    } else {
      setSelected(s => s.filter(i => i.name !== dataRow.name));
    }
  };

  React.useEffect(() => {
    if (selected.length > 0 && selected.length !== dataRows.length) {
      setIndeterminated(true);
    } else setIndeterminated(false);
  }, [selected.length]);

  return (
    <Table caption="Table With Selection">
      <TableHeader>
        <TableRow>
          <TableCell>
            <Checkbox
              checked={selected.length === dataRows.length}
              indeterminated={isIndeterminated}
              onChange={checkedState =>void toggleSelectAll(checkedState)}
              inputProps={{ "aria-label": "Select all names" }}
            />
            Name
          </TableCell>
          <TableCell>Age</TableCell>
          <TableCell>Tags</TableCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {dataRows.map(dataRow => {
          return (
            <TableRow key={JSON.stringify(dataRow)}>
              <TableCell>
                <Checkbox
                  checked={selected.some(s => s.name === dataRow.name)}
                  onChange={checkedState =>
                    void toggleSelectRow(checkedState, dataRow)
                  }
                  inputProps={{ "aria-label": `Select ${dataRow.name}` }}
                />
                {dataRow.name}
              </TableCell>
              <TableCell>{dataRow.age}</TableCell>
              <TableCell className={classes.tags}>
                <Tag color="secondary" label={dataRow.tags[0]} />
                <Tag color="primary" label={dataRow.tags[1]} />
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
      {selected.length > 0 && (
        <TableFooter>
          <TableRow>
            <TableCell colSpan={4}>
              <div className={classes.footBar}>
                <Text variant="subtitleSmall">
                  {selected.length} selected
                </Text>
                <Button
                  style={{ marginLeft: "auto" }}
                  label="Delete Selected Items"
                  variant="outlined"
                />
              </div>
            </TableCell>
          </TableRow>
        </TableFooter>
      )}
    </Table>
  );
};

export default Demo;

With Sort

Table With Sort
Name	Age	Tags
Jim Halpert	30	Sales Manager
John Doe	25	Front-end Developer Senior
Jude Brown	23	Back-end Developer Junior

import { ArrowDown, ArrowUp } from "@sonnat/icons";
import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableRow,
  Tag
} from "@sonnat/ui";
import makeStyles from "@sonnat/ui/styles/makeStyles";
import clx from "classnames";
import * as React from "react";

const useStyles = makeStyles(theme => {
  const {
    colors,
    spacings: { spaces }
  } = theme;

  return {
    tags: { "& > * + *": { marginLeft: spaces[3].rem } },
    interactableHead: {},
    headContent: {
      display: "inline-flex",
      alignItems: "center",
      cursor: "pointer",
      "&:hover > $sortIcon": { opacity: 1, visibility: "visible" }
    },
    sortIcon: {
      marginLeft: spaces[3].rem,
      opacity: 0,
      visibility: "hidden",
      color: colors.text.dark.disabled,
      transition: ["opacity 180ms ease", "visibility 180ms ease"].join(", ")
    },
    active: {
      "& > $sortIcon": {
        opacity: 1,
        visibility: "visible",
        color: colors.text.dark.primary
      }
    }
  };
});

interface DataRow {
  name: string;
  age: number;
  tags: [string, string];
}

const dataRows: DataRow[] = [
  { name: "John Doe", age: 25, tags: ["Front-end Developer", "Senior"] },
  { name: "Jim Halpert", age: 30, tags: ["Sales", "Manager"] },
  { name: "Jude Brown", age: 23, tags: ["Back-end Developer", "Junior"] }
];

type OrderBy = "name" | "age";
type Order = "asc" | "desc";

const descendingComparator = (a: DataRow, b: DataRow, orderBy: OrderBy) => {
  if (b[orderBy] < a[orderBy]) return -1;
  if (b[orderBy] > a[orderBy]) return 1;
  return 0;
};

const getComparator = (order: Order, orderBy: OrderBy) => {
  return order === "desc"
    ? (a: DataRow, b: DataRow) => descendingComparator(a, b, orderBy)
    : (a: DataRow, b: DataRow) => -descendingComparator(a, b, orderBy);
};

const sort = (
  data: DataRow[],
  comparator: ReturnType<typeof getComparator>
): DataRow[] => {
  const stabilizedThis = data.map((el, index) => [el, index]);

  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0] as DataRow, b[0] as DataRow);
    if (order !== 0) return order;
    return (a[1] as number) - (b[1] as number);
  });

  return stabilizedThis.map(touple => touple[0] as DataRow);
};

const Demo = () => {
  const classes = useStyles();

  const [order, setOrder] = React.useState<Order>("asc");
  const [orderBy, setOrderBy] = React.useState<OrderBy>("name");

  const requestSort = (orderByProp: OrderBy) => {
    const isAsc = orderBy === orderByProp && order === "asc";
    setOrder(isAsc ? "desc" : "asc");
    setOrderBy(orderByProp);
  };

  const ArrowUpIcon = <ArrowUp size={20} className={classes.sortIcon} />;
  const ArrowDownIcon = <ArrowDown size={20} className={classes.sortIcon} />;

  return (
    <Table caption="Table With Selection">
      <TableHeader>
        <TableRow>
          <TableCell
            className={classes.interactableHead}
            onClick={() => void requestSort("name")}
          >
            <div
              className={clx(classes.headContent, {
                [classes.active]: orderBy === "name"
              })}
            >
              Name
              {orderBy !== "name"
                ? ArrowUpIcon
                : order === "asc"
                ? ArrowUpIcon
                : ArrowDownIcon}
            </div>
          </TableCell>
          <TableCell
            className={classes.interactableHead}
            onClick={() => void requestSort("age")}
          >
            <div
              className={clx(classes.headContent, {
                [classes.active]: orderBy === "age"
              })}
            >
              Age
              {orderBy !== "age"
                ? ArrowUpIcon
                : order === "asc"
                ? ArrowUpIcon
                : ArrowDownIcon}
            </div>
          </TableCell>
          <TableCell>Tags</TableCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {sort(dataRows, getComparator(order, orderBy)).map(dataRow => {
          return (
            <TableRow key={JSON.stringify(dataRow)}>
              <TableCell>{dataRow.name}</TableCell>
              <TableCell>{dataRow.age}</TableCell>
              <TableCell className={classes.tags}>
                <Tag color="secondary" label={dataRow.tags[0]} />
                <Tag color="primary" label={dataRow.tags[1]} />
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

export default Demo;

API

Learn more about the properties and the customization points.

Usage

import Table, {
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableCell
} from "@sonnat/ui/Table";

//or
import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableCell
} from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Table Properties

Table Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
caption	string	-	Set the content of the `<caption>` element.
htmlTableProps	object	-	The properties applied to the `<table>` element.
dense	boolean	false	If `true`, the table will appear denser.
borderLess	boolean	false	If `true`, the table will be border-less.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

TableHeader Properties

TableHeader Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

TableBody Properties

TableBody Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

TableFooter Properties

TableFooter Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

TableRow Properties

TableRow Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
verticalAlign	"top" \| "middle" \| "bottom"	"middle"	Set the vertical-align css property of the table row.
selected	boolean	false	If `true`, the table row will indicate the selected state.
hoverable	boolean	false	If `true`, the table row will indicate the hovered state on `:hover`.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

TableCell Properties

TableCell Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
textAlign	"inherit" \| "center" \| "justify" \| "left" \| "right"	"inherit"	Set the text-align css property of the table cell.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.