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

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>