InfoTable

Отображение данных в виде пар ключ-значение с опциональной поддержкой копирования.

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 добавляет внешнюю границу, скруглённые углы, разделители строк и разделитель столбцов — как у компонента Table. Включено по умолчанию.

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	Показывать внешнюю границу, разделители строк и столбцов
striped	boolean	false	Чередующийся фон строк
labelWidth	number | string	—	Фиксированная ширина столбца с лейблами
labelColor	string	—	Цвет фона ячеек с лейблами
valueColor	string	—	Цвет фона ячеек со значениями

InfoTableRow

Prop	Type	Default	Description
label	string	''	Лейбл строки (левая сторона)
value	string | number	—	Значение строки (правая сторона)
copyable	boolean	false	Показывать кнопку копирования значения

Slots

InfoTable

Slot	Description
default	Компоненты VxInfoTableRow

InfoTableRow

Slot	Description
default	Кастомное содержимое значения (заменяет prop value)
label	Кастомное содержимое лейбла (заменяет prop label)