Tui

<template>
  <TsTable :columns="commonColumns" :dataSource="commonDataSource" />
</template>

<script setup lang="ts">
import { TsTable } from 'tui';
const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable headerBg :columns="columns" :dataSource="dataSource" :fixedHeader="true" :maxHeight="260" border />
</template>

<script setup lang="ts">
import { TsTable } from 'tui';

const columns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', width: 120 },
  { title: 'address', key: 'address' },
];

const dataSource = Array.from({ length: 24 }).map((_, index) => ({
  name: `User ${index + 1}`,
  age: 20 + (index % 15),
  address: `Road ${index + 1}, City Center`,
}));
</script>

<template>
  <TsTable :columns="fitWidthColumns" :dataSource="fitDataSource" single-line>
    <template #deliveryAreas="{ row }">
      <div class="tag-wrap">
        <TsTag v-for="(item, index) in row.deliveryAreas" :key="index">{{ item }}</TsTag>
      </div>
    </template>
  </TsTable>
</template>
<script setup lang="ts">
const fitWidthColumns = [
  { title: '产品编号', key: 'productCode', width: 100 },
  { title: '产品名称', key: 'productName' },
  { title: '供应商ID', key: 'supplierId' },
  { title: '供应商密钥', key: 'supplierSecret' },
  { title: '库存数量', key: 'stockCount' },
  { title: '保质期(天)', key: 'shelfLife' },
  { title: '商品出厂时间', key: 'productFinishTime' },
  { title: '商品检验时间', key: 'productCheckTime' },
  { title: '上架时间', key: 'createdAt' },
  { title: '更新时间', key: 'updatedAt' },
];

const fitDataSource = [
  {
    productId: 'p10001',
    productCode: 'PRD-001',
    productName: '智能手表 X1',
    supplierId: 'SUP-100',
    supplierSecret: 'sec-abc123xyz82abc123xyz82881881',
    deliveryAreas: ['华东', '华南', '西南'],
    isHot: true,
    isNew: false,
    isFreeShipping: true,
    isLimited: false,
    stockCount: 120,
    shelfLife: 365,
    productType: '电子产品',
    productFinishTime: '2025-01-15 10:22:33',
    productCheckTime: '2025-03-20 15:10:12',
    createdAt: '2025-01-15 10:22:33',
    updatedAt: '2025-03-20 15:10:12',
  },
];
</script>

<style scoped>
.tag-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  column-gap: 6px;
}
</style>

<template>
  <TsTable :columns="commonColumns" :dataSource="ofDataSource" />
</template>

<script setup lang="ts">
const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const ofDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  {
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
];
</script>

<template>
  <TsTable :columns="ofColumns" :dataSource="ofDataSource" />
</template>
<script setup lang="ts">
const ofColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address', showOverflowTooltip: true },
];

const ofDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  {
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
];
</script>

<template>
  <TsTable :columns="slotTooltipColums" :dataSource="commonDataSource">
    <template #age="{ row }">
      <TsTooltip :content="row.age" :placements="['top-center', 'top-start', 'top-end', 'left-start', 'right-start', 'right-center']">
        <span style="height: 100%; line-height: 22px; padding: 9px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; width: 100%">
          {{ row.age }} -- 我接管了这里的内容来超出悬浮展示，你看不到我，你看不到我，你看不到我, 这是一个很长的文案来保证超出悬浮效果展示
        </span>
      </TsTooltip>
    </template>
  </TsTable>
  <div class="ts-doc-tip">注意：使用 slot 自定义渲染内容时，请确保自行处理 overflow 样式，避免内容溢出遮挡其他列。</div>
</template>

<script setup lang="ts">
const slotTooltipColums = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', custom: true },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>
<style scoped>
.ts-doc-tip {
  margin-top: 12px;
  padding: 8px 12px;
  background-color: var(--ts-bg-gray-color);
  border-left: 4px solid #ccc;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ts-color-primary);
}
</style>

<template>
  <div class="demo-wrap">
    <div class="demo-title">默认 expandList（点击项后自动关闭）</div>
    <TsTable :columns="expandCustomColumns" :dataSource="ofDataSource"></TsTable>
  </div>

  <div class="demo-wrap">
    <div class="demo-title">自定义 expand 插槽（手动调用 closeExpand）</div>
    <TsTable :columns="expandSlotColumns" :dataSource="ofDataSource">
      <template #expand="{ row, closeExpand }">
        <div class="docs-table-expand-wrap ts-select-none">
          <div
            class="docs-table-expand-item"
            @click="
              TsToast({ message: `查看 ${row.name}` });
              closeExpand?.();
            "
          >
            查看
          </div>
          <div
            class="docs-table-expand-item"
            @click="
              TsToast({ message: `编辑 ${row.name}` });
              closeExpand?.();
            "
          >
            编辑
          </div>
        </div>
      </template>
    </TsTable>
  </div>
</template>
<script setup lang="ts">
import { TsTable, TsToast } from 'tui';
const expandList = [
  { name: '查看', onClick: () => TsToast({ message: '准备查看' }) },
  { name: '编辑' },
  { name: '删除', type: 'danger' },
  { name: '驳回' },
  { name: '提交' },
  { name: '预览' },
  { name: '下载' },
];

const expandCustomColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
  { title: '操作', key: 'expand', expandList, custom: true },
];

const expandSlotColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
  { title: '操作', key: 'expand', custom: true },
];

const ofDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  {
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
];
</script>

<style scoped>
.demo-wrap + .demo-wrap {
  margin-top: 16px;
}

.demo-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
</style>

<template>
  <TsTable border headerBg :columns="commonColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :columns="indexColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const indexColumns = [
  { title: 'index', key: 'index' },
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :columns="selectionColumns" :dataSource="commonDataSource" />
</template>

<script setup lang="ts">
const selectionColumns = [
  {
    title: 'selection',
    key: 'selection',
    disabled: (row: any) => {
      return row.name === 'John Brown';
    },
  },
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsButton @click="autoFitOnDataChange = !autoFitOnDataChange">{{ autoFitOnDataChange ? '关闭动态计算' : '开启动态计算' }}</TsButton>
    <TsButton @click="handleAddDataSource">增加数据数据</TsButton>
  </div>
  <TsTable :columns="commonColumns" :autoFitOnDataChange="autoFitOnDataChange" singleLine :autoFit="false" :dataSource="orginDataSource" />
</template>
<script setup lang="ts">
import { ref } from 'vue';

const autoFitOnDataChange = ref(false);
const orginDataSource = ref([{ name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }]);

const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const handleAddDataSource = () => {
  orginDataSource.value.push({
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  });
};
</script>

<template>
  <TsTable :columns="emptyColumns" :responsive="true" :dataSource="[]" />
</template>

<script setup lang="ts">
const emptyColumns = [
  { title: 'name', key: 'name', width: 100 },
  { title: 'age', key: 'age', width: 200 },
  { title: 'address', key: 'address', width: 'auto' },
  { title: '操作', key: 'action', custom: true, width: 50 },
];
</script>

<template>
  <TsTable :columns="renderColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const renderColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', render: (row: any) => row.age + '岁' },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :autoFit="false" :columns="childrenColumns" :dataSource="childrenDateSource" />
</template>

<script setup lang="ts">
const childrenColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', width: 'auto' },
  { title: 'address', key: 'address', width: 200 },
  { title: 'action', key: 'action', width: 100 },
];

const childrenDateSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  {
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    children: [
      { name: 'his brother', age: 32, address: 'Sydney No. 1 Lake Park' },
      { name: 'his sister', age: 30, address: 'Sydney No. 1 Lake Park' },
    ],
  },
  {
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
];
</script>

<template>
  <div class="demo-group">
    <div class="demo-title">固定表头 + 基础横向滚动</div>
    <TsTable fixedHeader :maxHeight="220" :autoFit="false" :columns="longColumns" :dataSource="longDataSource" singleLine>
      <template #deliveryAreas="{ row }">
        <div class="tag-wrap">
          <TsTag v-for="(item, index) in row.deliveryAreas" :key="index">{{ item }}</TsTag>
        </div>
      </template>
      <template #expand="{ closeExpand }">
        <div class="docs-table-expand-wrap ts-select-none">
          <div class="docs-table-expand-item" @click="closeExpand?.()">查看</div>
          <div class="docs-table-expand-item" @click="closeExpand?.()">预览</div>
        </div>
      </template>
    </TsTable>
  </div>

  <div class="demo-group">
    <div class="demo-title">大数据 + 固定列 + 虚拟滚动（750 行）</div>
    <div class="demo-tip">
      推荐配置：
      <code>fixedHeader + maxHeight + singleLine + virtualScroll</code>
      ，并为大部分列设置
      <code>width</code>
      。
    </div>
    <TsTable fixedHeader virtualScroll :virtualRowHeight="40" :virtualOverscan="8" :maxHeight="220" :autoFit="false" :columns="fixedColumns" :dataSource="longDataSSource" singleLine>
      <template #deliveryAreas="{ row }">
        <div class="tag-wrap">
          <TsTag v-for="(item, index) in row.deliveryAreas" :key="index">{{ item }}</TsTag>
        </div>
      </template>
      <template #expand="{ closeExpand }">
        <div class="docs-table-expand-wrap ts-select-none">
          <div class="docs-table-expand-item" @click="closeExpand?.()">编辑</div>
          <div class="docs-table-expand-item" @click="closeExpand?.()">删除</div>
        </div>
      </template>
      <template #actions="{ row }">
        <span class="actions-text">详情 · {{ row.productCode }}</span>
      </template>
    </TsTable>
  </div>
</template>
<script setup lang="ts">
import { TsTable } from 'tui';
import type { ColumnsType } from '../../../packages/components/src/table/src/types';

const longColumns = [
  { title: '产品编号', key: 'productCode' },
  { title: '产品名称', key: 'productName' },
  { title: '供应商ID', key: 'supplierId' },
  { title: '供应商密钥', key: 'supplierSecret', showOverflowTooltip: true },
  { title: '库存数量', key: 'stockCount' },
  { title: '保质期(天)', key: 'shelfLife' },
  { title: '是否热销', key: 'isHot', render: (row: any) => (row.isHot ? '是' : '否') },
  { title: '是否新品', key: 'isNew', render: (row: any) => (row.isNew ? '是' : '否') },
  { title: '支持配送区域', key: 'deliveryAreas', custom: true, minWidth: 200 },
  { title: '是否包邮', key: 'isFreeShipping', render: (row: any) => (row.isFreeShipping ? '是' : '否') },
  { title: '是否限购', key: 'isLimited', render: (row: any) => (row.isLimited ? '是' : '否') },
  { title: '商品类型', key: 'productType' },
  { title: '上架时间', key: 'createdAt' },
  { title: '更新时间', key: 'updatedAt' },
  { title: '操作', key: 'expand', custom: true, fixed: 'right' },
] satisfies ColumnsType<any>[];

const fixedColumns = [
  { title: '', key: 'selection', width: 68, fixed: 'left' },
  { title: '产品编号', key: 'productCode', width: 140, fixed: 'left' },
  { title: '产品名称', key: 'productName', width: 180, fixed: 'left' },
  { title: '供应商ID', key: 'supplierId', width: 120 },
  { title: '供应商密钥', key: 'supplierSecret', width: 260, showOverflowTooltip: true },
  { title: '库存数量', key: 'stockCount', width: 120 },
  { title: '保质期(天)', key: 'shelfLife', width: 130 },
  { title: '是否热销', key: 'isHot', width: 120, render: (row: any) => (row.isHot ? '是' : '否') },
  { title: '是否新品', key: 'isNew', width: 120, render: (row: any) => (row.isNew ? '是' : '否') },
  { title: '支持配送区域', key: 'deliveryAreas', custom: true, width: 260 },
  { title: '是否包邮', key: 'isFreeShipping', width: 120, render: (row: any) => (row.isFreeShipping ? '是' : '否') },
  { title: '是否限购', key: 'isLimited', width: 120, render: (row: any) => (row.isLimited ? '是' : '否') },
  { title: '商品类型', key: 'productType', width: 140 },
  { title: '上架时间', key: 'createdAt', width: 180 },
  { title: '更新时间', key: 'updatedAt', width: 180, fixed: 'right' },
  { title: '操作', key: 'actions', custom: true, width: 160, fixed: 'right' },
] satisfies ColumnsType<any>[];

const longDataSource = [
  {
    productId: 'p10002',
    productCode: 'PRD-002',
    productName: '蓝牙耳机 AirLite',
    supplierId: 'SUP-101',
    supplierSecret: 'sec-xyz789qwxyz789qweisiajakkeisiajakk',
    deliveryAreas: ['华北', '东北', '西北', '华中'],
    isHot: false,
    isNew: true,
    isFreeShipping: false,
    isLimited: true,
    stockCount: 50,
    shelfLife: 180,
    productType: '音频设备',
    createdAt: '2025-02-01 09:12:45',
    updatedAt: '2025-03-21 11:00:00',
  },
  {
    productId: 'p10003',
    productCode: 'PRD-003',
    productName: '空气净化器 Pro',
    supplierId: 'SUP-102',
    supplierSecret: 'sec-555aaa7770555aaa77708s82jskak8s82jskak',
    deliveryAreas: ['全国'],
    isHot: true,
    isNew: true,
    isFreeShipping: true,
    isLimited: false,
    stockCount: 300,
    shelfLife: 720,
    productType: '家用电器',
    createdAt: '2025-02-10 14:35:20',
    updatedAt: '2025-03-22 13:25:56',
  },
  {
    productId: 'p10003',
    productCode: 'PRD-003',
    productName: '空气净化器 Pro',
    supplierId: 'SUP-102',
    supplierSecret: 'sec-555aaa7770555aaa77708s82jskak8s82jskak',
    deliveryAreas: ['全国'],
    isHot: true,
    isNew: true,
    isFreeShipping: true,
    isLimited: false,
    stockCount: 300,
    shelfLife: 720,
    productType: '家用电器',
    createdAt: '2025-02-10 14:35:20',
    updatedAt: '2025-03-22 13:25:56',
  },
];

const longDataSSource = Array.from({ length: 1000 }).map((_, index) => ({
  ...longDataSource[0],
  productId: `p${1 + index}`,
  productCode: `PRD-${1 + index}`,
  productName: `商品 ${1 + index}`,
  createdAt: `2025-02-${10 + (index % 20)} 14:35:20`,
  updatedAt: `2025-03-${10 + (index % 20)} 13:25:56`,
}));
</script>

<style scoped>
.demo-group + .demo-group {
  margin-top: 16px;
}

.demo-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.demo-tip {
  margin-bottom: 10px;
  color: #666;
  line-height: 1.6;
  font-size: 12px;
}

.tag-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  column-gap: 6px;
}

.actions-text {
  color: #409eff;
  white-space: nowrap;
}
</style>