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
Jonathan Gutmann[email protected]
Active
Rosie Sauer-Spencer[email protected]
Active
Gwendolyn Larson[email protected]
Inactive
Mr. Terrance Mertz Sr.[email protected]
Active
Laurence Haley[email protected]
Active

Required icons

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

Props

data-set: 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.

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 rows: T[];
    readonly total: number;
})
The footer of the data table.

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

[key: string] ({
    readonly index: number;
    readonly page: number;
    readonly per-page: number;
    readonly row: T;
    readonly rows: 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
pliers.pngimage/png
Dr. Vernon Johns
stuff_mould.pngimage/png
Roman Willms PhD
electrify_whether.pngimage/png
Claire Jacobson
what.pngimage/png
Freddie Bradtke Sr.
pfft_carelessly.pngimage/png
Judy Lowe

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

            <template #name="{row: {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="{row: {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/flux';
    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
Rows per page
1–10 of 500

<template>
    <FluxPane>
        <FluxDataTable
            :data-set="visibleDataSet"
            :total="dataSet.length"
            is-hoverable>
            <template #header>
                <FluxTableHeader>Name</FluxTableHeader>
            </template>

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

        <FluxPaneFooter>
            <FluxPaginationBar
                :limits="[5, 10, 25, 50, 100]"
                :page="page"
                :per-page="perPage"
                :total="dataSet.length"
                @limit="limit => perPage = limit"
                @navigate="p => page = p"/>
        </FluxPaneFooter>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxDataTable, FluxPaginationBar, FluxPane, FluxPaneFooter, FluxTableCell, FluxTableHeader } from '@flux-ui/flux';
    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 visibleDataSet = computed(() => unref(dataSet).slice((unref(page) - 1) * unref(perPage), unref(page) * unref(perPage)));
</script>

Used components ​