Table group

The table group renders a full-width header row that gathers a set of rows under a shared label. It can optionally be made expandable, so its rows collapse and reveal when the header is clicked.

Name

Role

Ada Lovelace

Lead

Alan Turing

Engineer

Design

Grace Hopper

Designer

TIP

This component is best used within a Table. For dynamic data, combine it with the Data table's group-by prop and #group slot.

Required icons

angle-right

Props

label: string
The label shown in the group header.

icon?: FluxIconName
An optional icon shown before the label.

is-expandable?: boolean
Whether the group can be collapsed and expanded by clicking its header.

is-expanded?: boolean
Controls whether the group is expanded. Only relevant when `is-expandable` is set, and defaults to expanded.
Default: true

Emits

update:is-expanded: [boolean]
Triggered when the group is collapsed or expanded.

Slots

default
The rows that belong to the group. Hidden while the group is collapsed.

after
Content shown at the end of the group header, after the label.

Examples

Plain

Groups used as static section headers, without collapsing.

Preview

Name

Role

Engineering

Ada Lovelace

Lead

Alan Turing

Engineer

Design

Grace Hopper

Designer

Code

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableRow>
                    <FluxTableHeader>Name</FluxTableHeader>
                    <FluxTableHeader is-shrinking>Role</FluxTableHeader>
                </FluxTableRow>
            </template>

            <FluxTableGroup label="Engineering">
                <FluxTableRow>
                    <FluxTableCell>Ada Lovelace</FluxTableCell>
                    <FluxTableCell>Lead</FluxTableCell>
                </FluxTableRow>

                <FluxTableRow>
                    <FluxTableCell>Alan Turing</FluxTableCell>
                    <FluxTableCell>Engineer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>

            <FluxTableGroup label="Design">
                <FluxTableRow>
                    <FluxTableCell>Grace Hopper</FluxTableCell>
                    <FluxTableCell>Designer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>
        </FluxTable>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxTable, FluxTableCell, FluxTableGroup, FluxTableHeader, FluxTableRow } from '@flux-ui/components';
</script>

Icon

Group headers with an icon before their label.

Preview

Name

Role

Engineering

Ada Lovelace

Lead

Alan Turing

Engineer

Design

Grace Hopper

Designer

Code

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableRow>
                    <FluxTableHeader>Name</FluxTableHeader>
                    <FluxTableHeader is-shrinking>Role</FluxTableHeader>
                </FluxTableRow>
            </template>

            <FluxTableGroup
                icon="gear"
                label="Engineering">
                <FluxTableRow>
                    <FluxTableCell>Ada Lovelace</FluxTableCell>
                    <FluxTableCell>Lead</FluxTableCell>
                </FluxTableRow>

                <FluxTableRow>
                    <FluxTableCell>Alan Turing</FluxTableCell>
                    <FluxTableCell>Engineer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>

            <FluxTableGroup
                icon="palette"
                label="Design">
                <FluxTableRow>
                    <FluxTableCell>Grace Hopper</FluxTableCell>
                    <FluxTableCell>Designer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>
        </FluxTable>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxTable, FluxTableCell, FluxTableGroup, FluxTableHeader, FluxTableRow } from '@flux-ui/components';
</script>

Expandable

Collapsible groups with their open state bound through v-model:is-expanded.

Preview

Name

Role

Ada Lovelace

Lead

Alan Turing

Engineer

Code

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableRow>
                    <FluxTableHeader>Name</FluxTableHeader>
                    <FluxTableHeader is-shrinking>Role</FluxTableHeader>
                </FluxTableRow>
            </template>

            <FluxTableGroup
                v-model:is-expanded="isEngineeringExpanded"
                icon="users"
                label="Engineering"
                is-expandable>
                <template #after>
                    <FluxBadge label="2"/>
                </template>

                <FluxTableRow>
                    <FluxTableCell>Ada Lovelace</FluxTableCell>
                    <FluxTableCell>Lead</FluxTableCell>
                </FluxTableRow>

                <FluxTableRow>
                    <FluxTableCell>Alan Turing</FluxTableCell>
                    <FluxTableCell>Engineer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>

            <FluxTableGroup
                v-model:is-expanded="isDesignExpanded"
                icon="palette"
                label="Design"
                is-expandable>
                <template #after>
                    <FluxBadge label="1"/>
                </template>

                <FluxTableRow>
                    <FluxTableCell>Grace Hopper</FluxTableCell>
                    <FluxTableCell>Designer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>
        </FluxTable>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxBadge, FluxPane, FluxTable, FluxTableCell, FluxTableGroup, FluxTableHeader, FluxTableRow } from '@flux-ui/components';
    import { ref } from 'vue';

    const isEngineeringExpanded = ref(true);
    const isDesignExpanded = ref(false);
</script>

After slot

Summaries and actions rendered at the end of the group header.

Preview

Name

Role

Engineering

2 members

Ada Lovelace

Lead

Alan Turing

Engineer

Design

1 member

Grace Hopper

Designer

Code

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableRow>
                    <FluxTableHeader>Name</FluxTableHeader>
                    <FluxTableHeader is-shrinking>Role</FluxTableHeader>
                </FluxTableRow>
            </template>

            <FluxTableGroup
                icon="users"
                label="Engineering">
                <template #after>
                    <FluxBadge
                        color="primary"
                        label="2 members"/>

                    <FluxSecondaryButton
                        icon-leading="plus"
                        size="small"/>
                </template>

                <FluxTableRow>
                    <FluxTableCell>Ada Lovelace</FluxTableCell>
                    <FluxTableCell>Lead</FluxTableCell>
                </FluxTableRow>

                <FluxTableRow>
                    <FluxTableCell>Alan Turing</FluxTableCell>
                    <FluxTableCell>Engineer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>

            <FluxTableGroup
                icon="palette"
                label="Design">
                <template #after>
                    <FluxBadge
                        color="primary"
                        label="1 member"/>

                    <FluxSecondaryButton
                        icon-leading="plus"
                        size="small"/>
                </template>

                <FluxTableRow>
                    <FluxTableCell>Grace Hopper</FluxTableCell>
                    <FluxTableCell>Designer</FluxTableCell>
                </FluxTableRow>
            </FluxTableGroup>
        </FluxTable>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxBadge, FluxPane, FluxSecondaryButton, FluxTable, FluxTableCell, FluxTableGroup, FluxTableHeader, FluxTableRow } from '@flux-ui/components';
</script>