Table

Tables are a popular and effective way to display information in a clear and concise manner. They offer a structured way to present data, making it easy for users to scan through and locate the information they need. By using rows and columns to organize information, tables provide a systematic approach to displaying data that can help users identify patterns and insights.

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

Props

caption-side?: "top" | "bottom"
The side where the caption should be placed.
Default: bottom

fill-columns?: number
The number of columns that should be filled.

is-bordered?: boolean
If borders should be applied to all sides of the table.
Default: true

is-hoverable?: boolean
If each row should be highlighted on hover.

is-loading?: boolean
If the table is in a loading state.

is-separated?: boolean
If a border should be added between each row.
Default: true

is-striped?: boolean
If alternated colors should be added to each row.

Slots

default
The slot for the table content.

colgroups
The slot for the colgroups.

caption
The slot for the table caption.

footer
The slot for the table footer.

header
The slot for the table headers.

pagination
The slot for pagination.

Examples

Basic

A basic table.

Preview

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

Code

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

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

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

Pane

A table inside a pane.

Preview

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

Code

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

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

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

Caption

A table with an caption.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi asperiores, commodi cupiditate doloremque eligendi exercitationem facilis, illum ipsa ipsam modi nesciunt nobis, odit quidem sit temporibus ullam. Et, nam.

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

Code

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

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

            <template #caption>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi asperiores, commodi cupiditate doloremque eligendi exercitationem facilis, illum ipsa ipsam modi nesciunt nobis, odit quidem sit temporibus ullam. Et, nam.
            </template>
        </FluxTable>
    </FluxPane>
</template>

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

Sticky

A table with sticky headers.

Preview

Header 1	Header 2	Header 3
Cell 1×1	Cell 2×1	Cell 3×1
Cell 1×2	Cell 2×2	Cell 3×2
Cell 1×3	Cell 2×3	Cell 3×3
Cell 1×4	Cell 2×4	Cell 3×4
Cell 1×5	Cell 2×5	Cell 3×5
Cell 1×6	Cell 2×6	Cell 3×6
Cell 1×7	Cell 2×7	Cell 3×7
Cell 1×8	Cell 2×8	Cell 3×8
Cell 1×9	Cell 2×9	Cell 3×9
Cell 1×10	Cell 2×10	Cell 3×10
Cell 1×11	Cell 2×11	Cell 3×11
Cell 1×12	Cell 2×12	Cell 3×12
Cell 1×13	Cell 2×13	Cell 3×13
Cell 1×14	Cell 2×14	Cell 3×14
Cell 1×15	Cell 2×15	Cell 3×15
Cell 1×16	Cell 2×16	Cell 3×16
Cell 1×17	Cell 2×17	Cell 3×17
Cell 1×18	Cell 2×18	Cell 3×18
Cell 1×19	Cell 2×19	Cell 3×19
Cell 1×20	Cell 2×20	Cell 3×20
Cell 1×21	Cell 2×21	Cell 3×21
Cell 1×22	Cell 2×22	Cell 3×22
Cell 1×23	Cell 2×23	Cell 3×23
Cell 1×24	Cell 2×24	Cell 3×24
Cell 1×25	Cell 2×25	Cell 3×25
Cell 1×26	Cell 2×26	Cell 3×26
Cell 1×27	Cell 2×27	Cell 3×27
Cell 1×28	Cell 2×28	Cell 3×28
Cell 1×29	Cell 2×29	Cell 3×29
Cell 1×30	Cell 2×30	Cell 3×30

Code

<template>
    <FluxPane>
        <FluxTable style="max-height: 330px; overflow-x: hidden;">
            <template #header>
                <FluxTableHeader
                    is-sticky
                    is-shrinking
                    v-for="header in 3">
                    Header {{ header }}
                </FluxTableHeader>
            </template>

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

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

Actions

A table with actions.

Preview

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

Code

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

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

                <FluxTableCell>
                    <FluxTableActions>
                        <FluxAction
                            icon="pen"/>
                        <FluxAction
                            icon="ellipsis-h"/>
                    </FluxTableActions>
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

Loading

A table with a loading state.

Preview

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

Code

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

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

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

Hoverable

A table with rows that have a hoverable state.

Preview

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

Code

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

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

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

Used components

• Pane
  • Body
• Spinner
• Table
  • Cell
  • Row