Flux

Appearance

Data table ​

Data tables are a powerful tool for organizing and presenting large sets of data in a structured and easy-to-read format. Like traditional tables, data tables use rows and columns to organize data, but they also offer additional functionality and features that are specifically designed for working with large datasets.

One of the key benefits of using data tables is their ability to handle large amounts of data, making them an ideal choice for applications that require data visualization and analysis. Data tables often include advanced sorting and filtering capabilities, allowing users to quickly search and analyze data based on specific criteria.

Person
Status
Danny Stroman Jr.[email protected]
Active
Bobby Parisian PhD[email protected]
Inactive
Miss Jan Stoltenberg[email protected]
Active
Angelica Emmerich-Schiller PhD[email protected]
Active
Frank DuBuque[email protected]
Inactive

Required icons

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

Props

items: T[]
The data to show in the table.

is-bordered?: boolean
Show borders between cells.

is-hoverable?: boolean
Enable a hover state for each row.

is-loading?: boolean
Show that the data table is loading.

is-separated?: boolean
Show borders between rows.

is-striped?: boolean
Show alternating backgrounds for each row.

limits: number[]
The available options for the pagination limit.

page: number
The page that is currently shown, starting from 1.

per-page: number
The number of rows to show per page.

total: number
The total number of items in the data set.

unique-key?: string
The unique key for each row.

Slots

footer ({
    readonly page: number;
    readonly per-page: number;
    readonly items: T[];
    readonly total: number;
})
The footer of the data table.

header ({
    readonly page: number;
    readonly per-page: number;
    readonly items: T[];
    readonly total: number;
})
The header of the data table.

[key: string] ({
    readonly index: number;
    readonly page: number;
    readonly per-page: number;
    readonly item: T;
    readonly items: T[];
    readonly total: number;
})
A slot representing a cell for each visible row.

Examples ​

File manager

A data table that is used for file management.

Name
Owner
oof.pngimage/png
Janet Ernser
but.pngimage/png
Abbigail Haag
underneath.pngimage/png
Jack Terry
clavicle_inside_boohoo.pngimage/png
Elise Bergstrom
geez.pngimage/png
Sheldon Turner

<template>
    <FluxPane>
        <FluxDataTable
            :items="dataSet"
            :limits="[]"
            :page="1"
            :per-page="20"
            :total="dataSet.length"
            is-hoverable>
            <template #header>
                <FluxTableHeader>Name</FluxTableHeader>
                <FluxTableHeader>Owner</FluxTableHeader>
                <FluxTableHeader is-shrinking/>
            </template>

            <template #name="{item: {name, type}}">
                <FluxTableCell>
                    <FluxStack
                        direction="horizontal"
                        :gap="21">
                        <FluxBoxedIcon name="image"/>

                        <FluxStack
                            direction="vertical"
                            :gap="0">
                            <strong>{{ name }}</strong>
                            <small>{{ type }}</small>
                        </FluxStack>
                    </FluxStack>
                </FluxTableCell>
            </template>

            <template #owner="{item: {owner}}">
                <FluxTableCell>{{ owner }}</FluxTableCell>
            </template>

            <template #actions="{}">
                <FluxTableCell>
                    <FluxTableActions>
                        <FluxAction icon="arrow-down-to-line"/>
                        <FluxAction icon="ellipsis-h"/>
                    </FluxTableActions>
                </FluxTableCell>
            </template>
        </FluxDataTable>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxAction, FluxBoxedIcon, FluxDataTable, FluxPane, FluxStack, FluxTableActions, FluxTableCell, FluxTableHeader } from '@flux-ui/components';
    import { faker } from '@faker-js/faker';
    import { computed } from 'vue';

    const dataSet = computed(() => Array(5)
        .fill(null)
        .map((_, index) => ({
            id: index,
            name: faker.system.commonFileName('png'),
            owner: faker.person.fullName(),
            type: 'image/png'
        })));
</script>

Paginated

A data table that is split into pages.

Name
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
1–10 of 500

<template>
    <FluxPane>
        <FluxDataTable
            :items="visibleItems"
            is-hoverable
            :limits="[5, 10, 25, 50, 100]"
            :page="page"
            :per-page="perPage"
            :total="dataSet.length"
            @limit="limit => perPage = limit"
            @navigate="p => page = p">
            <template #header>
                <FluxTableHeader>Name</FluxTableHeader>
            </template>

            <template #name="{item: {name}}">
                <FluxTableCell>{{ name }}</FluxTableCell>
            </template>
        </FluxDataTable>
    </FluxPane>
</template>

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

    const page = ref(1);
    const perPage = ref(10);

    const dataSet = computed(() => Array(500)
        .fill(null)
        .map((_, index) => ({
            id: index,
            name: `Item ${index + 1}`
        })));

    const visibleItems = computed(() => unref(dataSet).slice((unref(page) - 1) * unref(perPage), unref(page) * unref(perPage)) ?? []);
</script>

Used components ​