Details table

The details table displays a structured list of label–value pairs under a heading. It is suitable for summarizing the attributes or properties of an entity alongside a chart or metric.

Order details

Order ID#ORD-00482

StatusPaid

CustomerJohn Doe

Total€ 149.99

DateMarch 7, 2026

Props

title: string
The title shown above the rows.

Slots

default
The rows of the details table.

Examples

Standalone

A details table used without a pane wrapper.

Preview

Shipment details

CarrierDHL Express

Tracking numberJD014600006281230897

Estimated deliveryMarch 10, 2026

Weight2.4 kg

Code

<template>
    <FluxStatisticsDetailsTable title="Shipment details">
        <FluxStatisticsDetailsTableRow
            label="Carrier"
            value="DHL Express"/>
        <FluxStatisticsDetailsTableRow
            label="Tracking number"
            value="JD014600006281230897"/>
        <FluxStatisticsDetailsTableRow
            label="Estimated delivery"
            value="March 10, 2026"/>
        <FluxStatisticsDetailsTableRow
            label="Weight"
            value="2.4 kg"/>
    </FluxStatisticsDetailsTable>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsDetailsTable, FluxStatisticsDetailsTableRow } from '@flux-ui/statistics';
</script>

Used components

• Row