Flux

Appearance

Table header ​

The table header defines the label for a column within the table. It helps users understand the meaning of the data below it and provides structure and clarity to the table’s content.

Header 1
Header 2
Header 3
Cell 1×1
Cell 1×2
Cell 1×3

WARNING

This component is best used within a Table.

Required icons

arrow-down-a-z
arrow-up-a-z
arrow-up-arrow-down
circle-xmark

Props

is-shrinking?: boolean
If the header will shrink to fit its cell group.

is-sortable?: boolean
If the table header will render a sorting flyout.

is-sticky?: boolean
If the table header will stick to the top of the table.

min-width?: number
The minimal width of the cell group.

sort?: "ascending" | "descending"
The current sorting that is applied to the header.

Emits

sort: [ascending | descending | null]
Triggered when the sorting type changes.

Slots

default
The content of the header.

Examples ​

Basic

A basic table header.

Header 1
Header 2
Header 3
Cell 1×1
Cell 1×2
Cell 1×3

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableHeader
                    v-for="header in 3"
                    :is-sortable="header === 2">
                    Header {{ header }}
                </FluxTableHeader>
            </template>

            <FluxTableRow>
                <FluxTableCell
                    v-for="cell in 3">
                    Cell 1&times;{{ cell }}
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

Shrinking

A table header that shrinks to fit its cell group.

Header 1
Header 2
Header 3
Cell 1×1
Cell 1×2
Cell 1×3
... 

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableHeader
                    v-for="header in 3">
                    Header {{ header }}
                </FluxTableHeader>
                <FluxTableHeader is-shrinking/>
            </template>

            <FluxTableRow>
                <FluxTableCell
                    v-for="cell in 3">
                    Cell 1&times;{{ cell }}
                </FluxTableCell>

                <FluxTableCell>
                    ...
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

Sortable

A table header that can be sorted.

Header 1
Header 2
Header 3
Cell 1×1
Cell 1×2
Cell 1×3

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableHeader
                    :sort="sort"
                    v-for="header in 3"
                    :is-sortable="header === 2"
                    @sort="updateSorting">
                    Header {{ header }}
                </FluxTableHeader>
            </template>

            <FluxTableRow>
                <FluxTableCell
                    v-for="cell in 3">
                    Cell 1&times;{{ cell }}
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

    const sort = ref<'ascending' | 'descending'>("ascending");

    function updateSorting(sorting: 'ascending' | 'descending' | null): void {
        sort.value = sorting ?? "ascending";
    }
</script>

Width

A table header with a custom width.

Header 1
Header 2
Header 3
Cell 1×1
Cell 1×2
Cell 1×3

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableHeader
                    v-for="header in 3"
                    :min-width="header * 100">
                    Header {{ header }}
                </FluxTableHeader>
            </template>

            <FluxTableRow>
                <FluxTableCell
                    v-for="cell in 3">
                    Cell 1&times;{{ cell }}
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

Used components ​