Flux

Appearance

Table cell ​

The table cell represents a single cell within the table. It holds individual pieces of data, ensuring information is displayed clearly and consistently across the table’s layout.

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

WARNING

This component is best used within a Row.

Props

content-direction?: "column" | "row"
The direction of the content.
Default: row

content-gap?: number
The gap between items inside the cell content (in pixels).

Slots

default
The slot for the cell content.

content
The slot for the cell content, use this one when you want to customize the cell design.

Examples ​

Basic

A basic table cell.

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

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

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

Column

A column table cell.

Top
Bottom
Top
Bottom
Top
Bottom
Top
Bottom
Top
Bottom
Top
Bottom

<template>
    <FluxPane>
        <FluxTable>
            <FluxTableRow>
                <FluxTableCell
                    content-direction="column"
                    v-for="_ in 6">
                    <div>Top</div>
                    <div>Bottom</div>
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

Custom

A table cell with a custom design.

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

<template>
    <FluxPane>
        <FluxTable>
            <FluxTableRow>
                <FluxTableCell
                    v-for="cell in 6">
                    <template #content>
                        <div class="custom-cell">
                            1&times;{{ cell }}
                        </div>
                    </template>
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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

<style
    scoped
    lang="scss">
    .custom-cell {
        display: flex;
        padding: 12px 10px;
        place-content: center;
        font-weight: bolder;

        &:hover {
            color: white;
            background: var(--primary-800);
        }
    }
</style>