Table

Sorting is controlled: use the emitted sort value to sort or request rows in the parent. Pagination is separate. Supply unique row IDs. No virtualization in this release. Rows animate when the parent adds, removes, filters, or sorts them.

Preview

Open in the playground

Usage

TableExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzTable } from '@chrisdalbano/forza-ui'
const sort = ref({ key: 'gold', direction: 'asc' as 'asc' | 'desc' })
const rows = [{ id: 1, name: 'Sunbreaker', gold: 3200 }]
const columns = [
  { key: 'name', label: 'Item' },
  { key: 'gold', label: 'Gold', sortable: true },
]
</script>

<template>
  <FzTable
    v-model:sort="sort"
    :rows="rows"
    :columns="columns"
    label="Items"
  />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
rows	readonly T[]	Yes	None
columns	readonly ForzaColumn[]	Yes	None
label	string	Yes	None
motionDisabled	boolean | undefined	No	None
sort	ForzaSort | undefined	No	None

Events and state

v-model:sort; parent sorts rows

• update:sort: [value: ForzaSort | undefined]

Slots

cell({row,column,value}), empty

Add from source

forza add table

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.