Кесте

Бапталатын бағандары және жол мәндерін анық маппингтеу мүмкіндігі бар қайта қолданылатын деректер кестесі.

Орнату

npx alixan-ui-nuxt add table

Қолдану

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 анықтамасы

Қасиет	Түрі	Әдепкі	Сипаттама
columns	TableColumn[]	-	Labels және айқын value mappers бар баған сипаттамалары.
rows	Record<string, unknown>[]	-	Кесте көрсететін деректер жолдары.
columns[].getValue	(row, rowIndex) => unknown	required	Жол объектісінен ұяшық мәнін қайтаратын arrow function.
minWidth	string	-	Горизонталды overflow басқаруға арналған қосымша Tailwind class.