Table - Components - Design System

#Overview

The <DataTable /> component displays data in an organized, easy-to-analyze tabular format.

ERROR
Typedoc PropTable did not find any documented props - make sure there is JSDOC for all props of the interface and the interface is being exported.

#Interface IDataTableColumn

The IDataTableColumn<T> interface defines the columns of a data table. It is generically typed to match your data's interface and includes the following properties:

Name	Type	Default	Description
selector *	`DataTableCellDataSelector` \| `keyof PickProperties<T, ReactNode>`	-	The selector defines what to render. It can be a string which just defines the fieldname, or a function returning a string or number.
align	`"center"` \| `"left"` \| `"right"`	-	Text align
cell	`YakComponent<FastOmit<ITableHeadProps & ITableCellProps & GenericTableCellProps<ElementType>, never>, object, AttrsMerged<FastOmit<ITableHeadProps & ITableCellProps & GenericTableCellProps<ElementType>, never>, object>>`	-	Override the component used to render a cell.
hideColumnTitle	`boolean`	-	If true, no table head title will be rendered.
sortable	`boolean`	-	Can be used to disable sorting functionality, true by default
title	`ReactNode`	-	The title of the column, used for the table head.
titleBold	`boolean`	-	If true, the font in table head will be bold
verticalAlign	`"bottom"` \| `"middle"` \| `"top"`	-	Vertical text align

#Cell Rendering

You can easily customize how to render each cell. The selector of each column definition can be the fieldname of your data or a function that returns a string or number. The data returned by the selector is also used for the internal sorting functionality of the data table.

Additionaly, you can define a render method for each column where you can return custom JSX.

Show codeHide code

export const BasicDataTableDemo: FunctionComponent = () => {
  const columns: IDataTableColumn<Row>[] = [
    {
      title: "Title",
      selector: (row) => (
        <Link $isExternal href={row.href} aria-label="A standard link">
          <ExternalLinkIcon />
          &nbsp;
          {row.title}
        </Link>
      ),
      titleBold: true,
    },
    {
      title: "Director",
      selector: (row) => row.director,
    },
    {
      title: "Year",
      selector: (row) => row.year,
      cell: StyledTableCell,
    },
  ];

  const handleSort = (_sort?: ITableSort) => {
    // here you would initiate a new fetch with the sort params
  };

  return (
    <BasicStyledDataTable
      hoverStyles
      onSort={handleSort}
      columns={columns}
      data={data}
      rowOverlayLink={(tabIndex, row) => (
        <OverlayLink
          $isExternal={true}
          href={row.href}
          tabIndex={tabIndex}
          $invisible
        >
          overlay link
        </OverlayLink>
      )}
    />
  );
};

#Sorting

You can enable sorting by adding an onSort callback, which activates the sorting functionality on the table header cells. This callback is particularly useful for refetching your data through GraphQL with the correct sorting parameters.

#Hide Table Headers

You can hide table headers by adding hideColumnTitle: true to the column definition.

Show codeHide code

export const NoTableHeadDataTableDemo: FunctionComponent = () => {
  const columns: IDataTableColumn<Row>[] = [
    {
      title: "Title",
      selector: (row) => row.title,
      hideColumnTitle: true,
    },
    {
      title: "Director",
      selector: "director",
      hideColumnTitle: true,
    },
    {
      title: "Year",
      selector: (row) => row.year,
      hideColumnTitle: true,
    },
  ];

  return (
    <>
      <Title tag="h3">A Title</Title>
      <DataTable hoverStyles columns={columns} data={data} />
    </>
  );
};

#Small Screen Wrapped Data Table

The <DataTable /> maintains its layout on mobile screens, keeping the columns side by side.

In contrast, the <SmallScreenWrappedDataTable /> component rearranges the columns vertically, stacking them on top of each other for better readability on smaller screens.

Show codeHide code

export const SmallScreenWrappedDataTableDemo: FunctionComponent = () => {
  const columns: IDataTableColumn<Row>[] = [
    {
      title: "Title",
      selector: (row) => (
        <Link $isExternal href={row.href}>
          <ExternalLinkIcon />
          &nbsp;
          {row.title}
        </Link>
      ),
      verticalAlign: "bottom",
    },
    {
      title: "Director",
      selector: "director",
    },
    {
      title: "Year",
      selector: (row) => row.year,
    },
  ];

  return (
    <SmallScreenWrappedDataTable hoverStyles columns={columns} data={data} />
  );
};

#Table without Data

The components that are used in the data table can also be used directly. This can be the case if there is no data to connect to or if you want full control over every single element.

Show codeHide code

export const TableDemo = () => {
  return (
    <Table>
      <tbody>
        <TableRow>
          <TableCell>Order</TableCell>
          <TableCell $variant="secondary">1235456 at the 12.12.2020</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Problem</TableCell>
          <TableCell $variant="secondary">
            My product is defective and I would like to have it repaired
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cause</TableCell>
          <TableCell $variant="secondary">
            The defect occured without any external influence
          </TableCell>
        </TableRow>
      </tbody>
    </Table>
  );
};

#Overview

#Interface IDataTableColumn

#Cell Rendering

#Sorting

#Hide Table Headers

#Small Screen Wrapped Data Table

#Table without Data

#Colors

#Table Head

#Table Row

About us