Table

<script lang="ts" setup>
import { NNTable } from "@fronntui/vue";
</script>

<template>
  <NNTable :columns="columns" :rows="rows" style="max-height: 70vh" />
</template>

Props

Name

Type

columns

{ id: string, label: string, width?: string }[]

Table columns

minColumnWidth

number

Minimum column width in px. Defaults to 160.

rows

Record<string, unknown>[]

Table rows

Slots

<script lang="ts" setup>
import { NNTable, NNTag } from "@fronntui/vue";
</script>

<template>
  <NNTable :columns="columns" :rows="rows" style="max-height: 70vh">
    <template #header-id>#</template>

    <template #cell-id="{ row }">
      <NNTag size="small">{{ row["id"] }}</NNTag>
    </template>
  </NNTable>
</template>

Name

Payload

header-${column.id}

{ column: { id: string, label: string, width?: string } }

Header cell. Renders column.label by default.

cell-${column.id}

{ column: { id: string, label: string, width?: string }, row: Record<string, unknown> }

Body cell. Renders row[column.id] by default.

Step Input Tabs