Flux

Table row ​

The table row groups multiple cells together to form a single row of data. It organizes related information into a horizontal sequence, making it easy to scan and compare values across columns.

1×1
1×2
1×3
1×4
1×5
1×6
2×1
2×2
2×3
2×4
2×5
2×6

WARNING

This component is best used within a Table.

Keyboard

Clickable rows form a single roving tab stop: Tab reaches the last-focused row, ArrowUp/ArrowDown move between clickable rows, Home/End jump to the first or last one, and Enter/Space activate the focused row. Interactive elements inside a row (buttons, links, inputs) keep their own place in the tab order.

Props

color?: FluxColor
Tints the row to mark it, for example a row that failed (`danger`) or needs attention (`warning`). A row is not tinted by default. A selected row keeps its selected styling, even when a color is set.

is-clickable?: boolean
Makes the row interactive by showing a pointer cursor and making it focusable so it can be activated with `Enter`/`Space`. Pair it with a `row-click` listener.

is-selected?: boolean
Marks the row as selected, applying the selected styling.

Emits

row-click: [number, MouseEvent]
Triggered when the row is activated by a click, or by pressing `Enter`/`Space` while the row is focused. Clicks and key presses that originate from an interactive element within the row (buttons, links, inputs) are ignored. The first argument is the index of the clicked cell (`cellIndex` of the `<td>`), or `-1` when the row is activated by keyboard.

Slots

default
The content of the table row.

Examples ​

Basic

A basic table row.

1×1
1×2
1×3
1×4
1×5
1×6
2×1
2×2
2×3
2×4
2×5
2×6

<template>
    <FluxPane>
        <FluxTable>
            <FluxTableRow v-for="row in 2">
                <FluxTableCell
                    v-for="cell in 6">
                    {{ row }}&times;{{ cell }}
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

Clickable

A clickable row that emits row-click, while ignoring clicks on the button inside a cell.

Nelle Murphy PhDDoug.Sauer@gmail.com
Shana WeberRonald97@hotmail.com
Kiara GleasonLois.Zemlak@hotmail.com

<template>
    <FluxPane>
        <FluxTable is-hoverable>
            <FluxTableRow
                v-for="person in dataSet"
                :key="person.id"
                is-clickable
                @row-click="columnIndex => onRowClick(person, columnIndex)">
                <FluxTableCell content-direction="column">
                    <strong>{{ person.name }}</strong>
                    <small>{{ person.email }}</small>
                </FluxTableCell>

                <FluxTableCell>
                    <FluxTableActions>
                        <FluxSecondaryButton
                            label="Email"
                            @click="onEmail(person)"/>
                    </FluxTableActions>
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxPane, FluxSecondaryButton, FluxTable, FluxTableActions, FluxTableCell, FluxTableRow, showSnackbar } from '@flux-ui/components';
    import { faker } from '@faker-js/faker';
    import { computed } from 'vue';

    type Person = {
        readonly id: number;
        readonly name: string;
        readonly email: string;
    };

    const dataSet = computed<Person[]>(() => Array(3)
        .fill(null)
        .map((_, index) => ({
            id: index,
            name: faker.person.fullName(),
            email: faker.internet.email()
        })));

    function onRowClick(person: Person, columnIndex: number): void {
        showSnackbar({
            icon: 'user',
            message: `You clicked ${person.name} in column ${columnIndex}.`
        });
    }

    function onEmail(person: Person): void {
        showSnackbar({
            color: 'info',
            icon: 'paper-plane',
            message: `Composing an email to ${person.email}.`
        });
    }
</script>

Selected

Use is-selected to highlight a row as selected.

Alice Johnson
Designer
Bas Milius
Engineer
Carol White
Product Manager

<template>
    <FluxPane>
        <FluxTable>
            <FluxTableRow
                v-for="person in dataSet"
                :key="person.id"
                :is-selected="person.id === 2">
                <FluxTableCell>{{ person.name }}</FluxTableCell>
                <FluxTableCell>{{ person.role }}</FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

    const dataSet = [
        {id: 1, name: 'Alice Johnson', role: 'Designer'},
        {id: 2, name: 'Bas Milius', role: 'Engineer'},
        {id: 3, name: 'Carol White', role: 'Product Manager'}
    ];
</script>

Colors

Use color to tint a row.

gray
A row marked as gray.
primary
A row marked as primary.
danger
A row marked as danger.
info
A row marked as info.
success
A row marked as success.
warning
A row marked as warning.

<template>
    <FluxPane>
        <FluxTable>
            <FluxTableRow
                v-for="color of colors"
                :key="color"
                :color="color">
                <FluxTableCell>{{ color }}</FluxTableCell>
                <FluxTableCell>A row marked as {{ color }}.</FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

    const colors: FluxColor[] = ['gray', 'primary', 'danger', 'info', 'success', 'warning'];
</script>