Table

The Table component is used to display data in a tabular format.

Import

React
Angular
Vue.js

// with @dhl-official/react-library:
import { DhlTable } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlTable } from "@dhl-official/ui-libraries/react-library"

If the DUIL has been installed, you can use the web component directly:

<dhl-table></dhl-table>

// with @dhl-official/vue-library:
import { DhlTable } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlTable } from "@dhl-official/ui-libraries/vue-library"

Code

React
Angular
Vue.js

<DhlTable rowData={rowData} columns={columns} caption="Table Caption" />

<dhl-table [rowData]="rowData" [columns]="columns" caption="Table Caption" />

<dhl-table :rowData.prop="rowData" :columns.prop="columns" caption="Table Caption" />

The implementation above matches the rowData fields to defined columns via the selector field within the column object.

const columns = [
  {
    name: "Title",
    selector: "title",
  },
  {
    name: "Director",
    selector: "director",
    textAlign: "left",
    verticalAlign: "middle",
  },
  {
    name: "Year",
    selector: "year",
    textAlign: "left",
    verticalAlign: "middle",
  },
];

const rowData = [
  {
    id: 1,
    title: "Beetlejuice",
    textAlign: "left",
    verticalAlign: "middle",
    year: "1988",
    runtime: "92",
    genres: ["Comedy", "Fantasy"],
    director: "Tim Burton",
    actors: "Alec Baldwin",
    plot: "A couple",
    posterUrl:
      "https://images-na.ssl-images-amazon.com/images/M/MV5BMTUwODE3MDE0MV5BMl5BanBnXkFtZTgwNTk1MjI4MzE@._V1_SX300.jpg",
  },
  {
    id: 2,
    title: "The Cotton Club",
    textAlign: "left",
    verticalAlign: "middle",
    year: "1984",
    runtime: "127",
    genres: ["Crime", "Drama", "Music"],
    director: "Francis Ford",
    actors: "Richard Gere",
    plot: "The Cotton",
    posterUrl:
      "https://images-na.ssl-images-amazon.com/images/M/MV5BMTU5ODAyNzA4OV5BMl5BanBnXkFtZTcwNzYwNTIzNA@@._V1_SX300.jpg",
  },
];

The Table can also be custom built using semantic HTML table tags. An example implementation can be seen below:

Custom Table Implementation

<dhl-table variant="striped" border-color="gray">
  <table>
    <caption>
      Table Caption
    </caption>
    <thead>
      <tr>
        <th></th>
        <th>Director</th>
        <th>Year</th>
        <th>Runtime</th>
        <th>Actors</th>
        <th>Plot</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Beetlejuice</th>
        <td data-label="Director">Tim Burton</td>
        <td data-label="Year">1988</td>
        <td data-label="Runtime">92</td>
        <td data-label="Actors">Alec Baldwin</td>
        <td data-label="Plot">A couple</td>
      </tr>
      <tr>
        <th>Beetlejuice</th>
        <td data-label="Director">Tim Burton</td>
        <td data-label="Year">1988</td>
        <td data-label="Runtime">92</td>
        <td data-label="Actors">Alec Baldwin</td>
        <td data-label="Plot">A couple</td>
      </tr>
      <tr>
        <th>Beetlejuice</th>
        <td data-label="Director">Tim Burton</td>
        <td data-label="Year">1988</td>
        <td data-label="Runtime">92</td>
        <td data-label="Actors">Alec Baldwin</td>
        <td data-label="Plot">A couple</td>
      </tr>
      <tr>
        <th>Beetlejuice</th>
        <td data-label="Director">Tim Burton</td>
        <td data-label="Year">1988</td>
        <td data-label="Runtime">92</td>
        <td data-label="Actors">Alec Baldwin</td>
        <td data-label="Plot">A couple</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Table Footer</td>
      </tr>
    </tfoot>
  </table>
</dhl-table>

Interactive Demo

Migrating from DUIL 1.0

Now a required prop: columns
Rename field align to text-align within the rowData prop

Readme

Properties

Property	Attribute	Description	Type	Default
`borderColor`	`border-color`	An optional borderColor prop used to set the Table border to a defined color	`"black" \\| "gray" \\| "red"`	`DHL_TABLE.BORDER_COLOR.GRAY`
`caption`	`caption`	A REQUIRED caption prop used to set the caption of the table	`string`	`undefined`
`columns`	--	A REQUIRED columns prop used to generate the table	`{ name: string; selector: string; textAlign?: DhlTableTextAlign; verticalAlign?: DhlTableVerticalAlign; }[]`	`undefined`
`dataClassName`	`data-class-name`	An optional class name prop for the component.	`string`	`undefined`
`dataId`	`data-id`	An optional prop. Gives a valid HTML ID attribute value for the component.	`string`	`dhl-table-${getRandomString()}`
`dataTestid`	`data-testid`	An optional prop. The test id attached to the component as a data-testid attribute.	`string`	`undefined`
`footerText`	`footer-text`	An optional variant prop used to set the text of the footer	`string`	`undefined`
`footerTextAlign`	`footer-text-align`	An optional prop used to set the alignment of the footer along the Table	`"center" \\| "left" \\| "right"`	`DHL_TABLE.FOOTER_TEXT_ALIGN.LEFT`
`mobileVariant`	`mobile-variant`	An optional mobileVariant prop used to set the variant of the table in SM breakpoints	`"horizontal" \\| "vertical"`	`DHL_TABLE.MOBILE_VARIANT.HORIZONTAL`
`rowData`	--	A REQUIRED rowData prop used to generate the table	`{ [key: string]: string \\| number \\| any[]; id: number; textAlign: DhlTableTextAlign; verticalAlign: DhlTableVerticalAlign; }[]`	`undefined`
`variant`	`variant`	An optional prop to select a component design variant.	`"regular" \\| "striped"`	`DHL_TABLE.VARIANT.REGULAR`

Slots

Slot	Description
`"unnamed"`	unnamed children slot for custom implementation of a `<table>` using tags such as `tr>`, `<th>` etc.

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Migrating from DUIL 1.0​

Readme​

Properties​

Slots​