Flux

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

INFO

The table is built from plain elements but exposes semantic ARIA table roles: the wrapper is a table labelled by its title (announced as the caption), and the rows are grouped in a rowgroup so assistive technologies present it as a real table.

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.

Shipment details
CarrierDHL Express
Tracking numberJD014600006281230897
Estimated deliveryMarch 10, 2026
Weight2.4 kg

<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>

Inside a pane

A details table placed inside a statistics base widget.

Invoice #2026-0148
Summary
Subtotal€ 1,240.00
VAT (21%)€ 260.40
Total€ 1,500.40
StatusPaid

<template>
    <FluxStatisticsBase
        style="min-width: 100%; max-width: 360px"
        icon="file-lines"
        title="Invoice #2026-0148">
        <FluxStatisticsDetailsTable title="Summary">
            <FluxStatisticsDetailsTableRow
                label="Subtotal"
                value="€ 1,240.00"/>
            <FluxStatisticsDetailsTableRow
                label="VAT (21%)"
                value="€ 260.40"/>
            <FluxStatisticsDetailsTableRow
                label="Total"
                value="€ 1,500.40"/>
            <FluxStatisticsDetailsTableRow
                label="Status"
                value="Paid"/>
        </FluxStatisticsDetailsTable>
    </FluxStatisticsBase>
</template>

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

Used components ​