Table

A reusable data table with configurable columns and explicit row value mapping.

Installation

npx alixan-ui-nuxt add table

Usage

Name	Type	Status
Button	Component	READY
Input	Form	READY
Toast	Overlay	BETA

<script setup lang="ts">
const columns = [
  { label: 'Name', getValue: row => row.name },
  { label: 'Type', getValue: row => row.type },
  {
    label: 'Status',
    getValue: row => row.status.toUpperCase(),
  },
]

const rows = [
  { id: 1, name: 'Button', type: 'Component', status: 'Ready' },
  { id: 2, name: 'Input', type: 'Form', status: 'Ready' },
  { id: 3, name: 'Toast', type: 'Overlay', status: 'Beta' },
]

</script>

<template>
  <Table
    :columns="columns"
    :rows="rows"
  />
</template>

API Reference

Prop	Type	Default	Description
columns	TableColumn[]	-	Column definitions with labels and explicit value mappers.
rows	Record<string, unknown>[]	-	Data rows rendered by the table.
columns[].getValue	(row, rowIndex) => unknown	required	Arrow function that returns the cell value from a row object.
minWidth	string	-	Optional Tailwind class for horizontal overflow control.