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>

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

<dhl-table></dhl-table>

Code

React
Angular
Vue.js

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

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

<duil301-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",
  },
];

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
`caption`	`caption`	A REQUIRED caption prop used to set the caption of the table	`string`	`undefined`
`columns`	`columns`	A REQUIRED columns prop used to generate the table. Each column may override the global `isSortable` prop with its own `isSortable` flag.	`{ name: string; selector: string; textAlign?: "left" \| "right" \| "center"; verticalAlign?: "top" \| "bottom" \| "middle"; isSortable?: boolean; }[]`	`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`	`duil301-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`
`hasPagination`	`has-pagination`	An optional prop that enables built-in pagination. When `true`, the table manages `currentPage` and `itemsPerPage` internally, slices `rowData` accordingly, and renders a `duil301-dhl-pagination` control below the table. For server-side pagination or custom placement, leave this `false` and compose `duil301-dhl-pagination` externally.	`boolean`	`false`
`isSelectable`	`is-selectable`	An optional prop that toggles the row selection column. When `true`, a leading column with row checkboxes (and a select-all checkbox in the header) is rendered, and selected rows are visually highlighted.	`boolean`	`false`
`isSortable`	`is-sortable`	An optional prop that toggles the column header sort indicators (up/down arrows) for every column. Individual columns can override this default by setting `isSortable` on their entry in `columns`.	`boolean`	`false`
`mobileVariant`	`mobile-variant`	An optional mobileVariant prop used to set the variant of the table. `horizontal` renders as a standard column-headed table (thead across the top, rows below). `vertical` renders a transposed layout: column headers become a left column and each original row becomes a vertical column that scrolls horizontally.	`"horizontal" \| "vertical"`	`DHL_TABLE.MOBILE_VARIANT.HORIZONTAL`
`pagination`	`pagination`	An optional prop that configures the built-in pagination. Only used when `hasPagination` is `true`. Any field left `undefined` falls back to the `duil301-dhl-pagination` default.	`{ itemsPerPage?: number; itemsPerPageOptions?: number[]; counterLabel?: string; displayLabel?: string; labels?: { showing?: string; of?: string; previousPage?: string; nextPage?: string; paginationNav?: string; }; }`	`undefined`
`rowData`	`row-data`	A REQUIRED rowData prop used to generate the table	`{ [key: string]: string \| number \| any[]; id: number; textAlign: "left" \| "right" \| "center"; verticalAlign: "top" \| "bottom" \| "middle"; }[]`	`undefined`
`size`	`size`	An optional prop that controls the density (row and header height) of the table. `md` matches the legacy table height; `lg` increases vertical padding for a roomier layout. Works in both legacy and brand refresh modes.	`"lg" \| "md"`	`DHL_TABLE.SIZE.MD`
`stickyHeader`	`sticky-header`	An optional prop that pins the header edge while the table body scrolls. In `horizontal` mode the top header row stays visible on vertical scroll. In `vertical` (transposed) mode the left header column stays visible on horizontal scroll. Override the wrapper's vertical bound via the `--dhl-table-max-height` CSS variable (default: 60vh).	`boolean`	`false`

Events

Event	Description	Type
`dhlTableItemsPerPageChange`	Event emitted when the built-in pagination changes the items-per-page size. Only fires when `hasPagination` is enabled. The table also resets to page 1 when this changes.	`CustomEvent<{ itemsPerPage: number; }>`
`dhlTablePageChange`	Event emitted when the built-in pagination changes the current page. Only fires when `hasPagination` is enabled.	`CustomEvent<{ page: number; }>`
`dhlTableSelectionChange`	Event emitted when the row selection changes (row toggle or select-all). Only fires when `isSelectable` is enabled.	`CustomEvent<{ selectedIds: number[]; }>`

Slots

Slot	Description
`"cell-{selector}-{id}"`	Per-cell slot for the data-driven layout. `{selector}` is the column's `selector` and `{id}` is the row's `id`. When populated, the slotted content replaces the default text (`rowData[selector]`) in that single cell. Useful for placing `duil301-dhl-button`, `duil301-dhl-chip`, `duil301-dhl-progress`, images, or any other component inside a specific cell.
`"header-{selector}"`	Per-column header slot rendered next to the column name and sort controls. Additive: does not replace `column.name` or sort arrows. Useful for column-level actions such as a filter menu or a kebab trigger.
`"unnamed"`	Fallback slot rendered only when `columns` and `rowData` are not provided. Lets consumers hand-author the entire `<table>` markup (`<tr>`, `<th>`, `<td>`) instead of the data-driven layout.

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Migrating from DUIL 1.0​

Readme​

Properties​

Events​

Slots​

Dependencies​

Depends on​

Graph​