Flux

Appearance

Table bar ​

The table bar renders a full-width row inside a table that spans all columns. It is useful for embedding inline toolbars, action bars, or notices directly within a table structure.

Name
Status
3 items match the current filter.
Project Aurora
Active
Project Borealis
Active
Project Cinder
Paused

TIP

This component is best used within a Table.

Slots

default
The content shown inside the table bar row.

Snippet ​

vue
<template>
    <Preview>
        <FluxPane style="width: min(100%, 540px)">
            <FluxTable>
                <template #header>
                    <FluxTableRow>
                        <FluxTableHeader>Name</FluxTableHeader>
                        <FluxTableHeader>Status</FluxTableHeader>
                    </FluxTableRow>
                </template>

                <FluxTableBar>
                    <FluxStack
                        direction="horizontal"
                        :gap="9"
                        is-centered>
                        <FluxIcon name="circle-info"/>
                        <span>3 items match the current filter.</span>
                    </FluxStack>
                </FluxTableBar>

                <FluxTableRow>
                    <FluxTableCell>Project Aurora</FluxTableCell>
                    <FluxTableCell><FluxBadge
                        color="success"
                        label="Active"/></FluxTableCell>
                </FluxTableRow>

                <FluxTableRow>
                    <FluxTableCell>Project Borealis</FluxTableCell>
                    <FluxTableCell><FluxBadge
                        color="success"
                        label="Active"/></FluxTableCell>
                </FluxTableRow>

                <FluxTableRow>
                    <FluxTableCell>Project Cinder</FluxTableCell>
                    <FluxTableCell><FluxBadge
                        color="warning"
                        label="Paused"/></FluxTableCell>
                </FluxTableRow>
            </FluxTable>
        </FluxPane>
    </Preview>
</template>

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