Table actions

The table actions component provides a place to display actions related to a specific table row, such as editing, viewing, or deleting an item. It keeps row-level controls organized and easy to find without cluttering the data.

Header	Actions
Row

Slots

default
The slot for the table actions.

Examples

Basic

A basic table actions.

Preview

Header	Actions
Row

Code

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableHeader>
                    Header
                </FluxTableHeader>
                <FluxTableHeader is-shrinking>
                    Actions
                </FluxTableHeader>
            </template>

            <FluxTableRow>
                <FluxTableCell>
                    Row
                </FluxTableCell>

                <FluxTableCell>
                    <FluxTableActions>
                        <FluxAction
                            icon="pen"/>
                        <FluxAction
                            icon="ellipsis-h"/>
                    </FluxTableActions>
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

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