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.
WARNING
This component is best used within a Row.
Column formatting
align, is-numeric and no-wrap set on the column's Header apply to every cell in that column. A cell's own align overrides the inherited value. Spanning cells (colspan) never inherit column formatting, and cells in the rows below a rowspan may resolve the wrong column, so set their formatting explicitly when it matters.
Props
align?: "start" | "center" | "end"
Horizontal alignment of the cell content. Use `end` for numeric columns. When unset, the cell inherits the `align` of its column's header.
colspan?: number
Number of columns the cell spans. A spanning cell does not derive formatting or pinning from a column.
content-direction?: "column" | "row"
The direction of the content.
Default: row
content-gap?: number
The gap between items inside the cell content (in pixels).
is-numeric?: boolean
Renders the cell content with tabular (monospaced) figures. Use for numeric columns so digits align vertically. Combine with `align` set to `end` for right-aligned numbers. Also inherited from the column's header, which is preferred for whole columns.
no-wrap?: boolean
Keeps the cell content on a single line. Useful for cells in an `is-shrinking` column whose value would otherwise wrap. Also inherited from the column's header, which is preferred for whole columns.
pinned?: boolean | "start" | "end"
Overrides the pinning of the cell. By default the cell follows the `pinned` prop of its column's header, so this is only needed for spanning cells or when the table has no headers. Spanning cells (`colspan`) never derive pinning from their column.
rowspan?: number
Number of rows the cell spans. Omit the covered cells in the following rows, like a spanning `<td rowspan>`. Not supported in tables with clickable rows, whose focusable row keeps a single-row box. Cells in the rows below a rowspan may not resolve their column's formatting or pinning; set `align` or `pinned` on them explicitly when needed.
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.
<template>
<FluxPane>
<FluxTable>
<FluxTableRow>
<FluxTableCell
v-for="cell in 6">
1×{{ 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.
<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.
<template>
<FluxPane>
<FluxTable>
<FluxTableRow>
<FluxTableCell
v-for="cell in 6">
<template #content>
<div class="custom-cell">
1×{{ 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>Pinned
A headerless table whose first and last cells pin themselves through the pinned override.
<template>
<FluxPane>
<FluxTable>
<FluxTableRow
v-for="row in 3"
:key="row">
<FluxTableCell
no-wrap
pinned>
Row {{ row }}
</FluxTableCell>
<FluxTableCell
v-for="cell in 6"
:key="cell"
no-wrap>
Some wide content {{ cell }}×{{ row }}
</FluxTableCell>
<FluxTableCell
no-wrap
pinned="end">
End {{ row }}
</FluxTableCell>
</FluxTableRow>
</FluxTable>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxTable, FluxTableCell, FluxTableRow } from '@flux-ui/components';
</script>