Table

Basic table

Name	Role	Status
Alice	Developer	Active
Bob	Designer	Away
Charlie	PM	Active

<FuiTable>
  <FuiTableHeader>
    <FuiTableRow>
      <FuiTableHeaderCell>Name</FuiTableHeaderCell>
      <FuiTableHeaderCell>Role</FuiTableHeaderCell>
    </FuiTableRow>
  </FuiTableHeader>
  <FuiTableBody>
    <FuiTableRow>
      <FuiTableCell>Alice</FuiTableCell>
      <FuiTableCell>Developer</FuiTableCell>
    </FuiTableRow>
  </FuiTableBody>
</FuiTable>

With selection

		Name	Role
	Alice	Developer
	Bob	Designer

Selected: alice

<script setup>
import { ref } from 'vue'
const rowCheck = ref({ alice: true, bob: false })
</script>

<template>
  <FuiTable>
    <FuiTableHeader>
      <FuiTableRow>
        <FuiTableHeaderCell>
          <FuiTableSelectionCell :checked="allChecked" @click="toggleAll" />
        </FuiTableHeaderCell>
        <FuiTableHeaderCell>Name</FuiTableHeaderCell>
      </FuiTableRow>
    </FuiTableHeader>
    <FuiTableBody>
      <FuiTableRow>
        <FuiTableSelectionCell :checked="rowCheck.alice" @click="rowCheck.alice = !rowCheck.alice" />
        <FuiTableCell>Alice</FuiTableCell>
      </FuiTableRow>
    </FuiTableBody>
  </FuiTable>
</template>

Props

Component	Prop	Type	Default	Description
Table	size	small | medium | large	medium	Table size
TableRow	appearance	default | brand | none	default	Row appearance
TableSelectionCell	checked	boolean	false	Checked state
TableHeaderCell	sortDirection	ascending | descending | undefined	undefined	Sort indicator