InfoTable

Ixtiyoriy nusxa ko'chirish qo'llab-quvvatlashi bilan kalit-qiymat ma'lumotlarini ko'rsatish.

Basic

Project	Velox UI
Version	2.4.1
License	MIT
Repository	github.com/velox/ui
Last updated	April 7, 2026

<template>
  <VxInfoTable>
    <VxInfoTableRow label="Project" value="Velox UI" />
    <VxInfoTableRow label="Version" value="2.4.1" />
    <VxInfoTableRow label="License" value="MIT" />
    <VxInfoTableRow label="Repository" value="github.com/velox/ui" copyable />
    <VxInfoTableRow label="Last updated" value="April 7, 2026" />
  </VxInfoTable>
</template>

Bordered

bordered tashqi chegara, yumaloq burchaklar, qator ajratgichlari va ustun ajratgichini qo'shadi — xuddi Table komponenti kabi. Standart holatda yoqilgan.

Order #	ORD-2024-00847
Status	Delivered
Total	$1,240.00
Payment	Visa **** 4821

<template>
  <VxInfoTable bordered>
    <VxInfoTableRow label="Order #" value="ORD-2024-00847" copyable />
    <VxInfoTableRow label="Status" value="Delivered" />
    <VxInfoTableRow label="Total" value="$1,240.00" />
    <VxInfoTableRow label="Payment" value="Visa **** 4821" />
  </VxInfoTable>
</template>

Custom Slots

Employee	JDJohn Doe
Department	Engineering
Status	Active
Email	john.doe@company.com

<template>
  <VxInfoTable>
    <VxInfoTableRow label="Employee">
      <div style="display: flex; align-items: center; gap: 8px;">
        <VxAvatar name="John Doe" size="sm" />
        <span>John Doe</span>
      </div>
    </VxInfoTableRow>
    <VxInfoTableRow label="Department" value="Engineering" />
    <VxInfoTableRow label="Status">
      <VxTag type="success" size="sm">Active</VxTag>
    </VxInfoTableRow>
    <VxInfoTableRow label="Email" value="john.doe@company.com" copyable />
  </VxInfoTable>
</template>

Label Width

Server	us-east-1.prod.api
Uptime	43 days, 7 hours
CPU Usage	24%
Memory	3.2 GB / 8 GB
Disk	47.6 GB / 100 GB

<template>
  <VxInfoTable label-width="200">
    <VxInfoTableRow label="Server" value="us-east-1.prod.api" copyable />
    <VxInfoTableRow label="Uptime" value="43 days, 7 hours" />
    <VxInfoTableRow label="CPU Usage" value="24%" />
    <VxInfoTableRow label="Memory" value="3.2 GB / 8 GB" />
    <VxInfoTableRow label="Disk" value="47.6 GB / 100 GB" />
  </VxInfoTable>
</template>

Striped

Server	us-east-1.prod.api
Uptime	43 days, 7 hours
CPU Usage	24%
Memory	3.2 GB / 8 GB
Disk	47.6 GB / 100 GB

<template>
  <VxInfoTable striped label-width="180">
    <VxInfoTableRow label="Server" value="us-east-1.prod.api" copyable />
    <VxInfoTableRow label="Uptime" value="43 days, 7 hours" />
    <VxInfoTableRow label="CPU Usage" value="24%" />
    <VxInfoTableRow label="Memory" value="3.2 GB / 8 GB" />
    <VxInfoTableRow label="Disk" value="47.6 GB / 100 GB" />
  </VxInfoTable>
</template>

Label / Value Background Color

Order #	ORD-2024-00847
Status	Delivered
Total	$1,240.00
Payment	Visa **** 4821

<template>
  <VxInfoTable label-color="var(--muted)" label-width="180">
    <VxInfoTableRow label="Order #" value="ORD-2024-00847" copyable />
    <VxInfoTableRow label="Status" value="Delivered" />
    <VxInfoTableRow label="Total" value="$1,240.00" />
    <VxInfoTableRow label="Payment" value="Visa **** 4821" />
  </VxInfoTable>
</template>

Props

InfoTable

Prop	Type	Default	Description
bordered	boolean	true	Tashqi chegara, qator ajratgichlari va ustun ajratgichini ko'rsatish
striped	boolean	false	Navbatlashgan qator fon rangi
labelWidth	number | string	—	Yorliq ustuni uchun belgilangan kenglik
labelColor	string	—	Yorliq katakchalari uchun fon rangi
valueColor	string	—	Qiymat katakchalari uchun fon rangi

InfoTableRow

Prop	Type	Default	Description
label	string	''	Qator yorlig'i (chap tomon)
value	string | number	—	Qator qiymati (o'ng tomon)
copyable	boolean	false	Qiymat uchun nusxa ko'chirish tugmasini ko'rsatish

Slots

InfoTable

Slot	Description
default	VxInfoTableRow komponentlari

InfoTableRow

Slot	Description
default	O'zgartirilgan qiymat kontenti (value prop'ini almashtiradi)
label	O'zgartirilgan yorliq kontenti (label prop'ini almashtiradi)