import React from "react";
import { Table } from "@tencent/tea-component";

const { groupable } = Table.addons;

const records = [
  {
    id: 1,
    name: "Link",
    age: 20,
    landline: "0755-88888888",
    mobile: "18888888888",
    mail: "link@qq.com",
  },
  {
    id: 2,
    name: "Zelda",
    age: 18,
    landline: "0755-86013388",
    mobile: "18777777777",
    mail: "zelda@qq.com",
  },
  {
    id: 3,
    name: "Mario",
    age: 38,
    landline: "0755-86013388",
    mobile: "13888888888",
    mail: "mario@qq.com",
  },
  {
    id: 4,
    name: "Luigi",
    age: 48,
    landline: "0755-86013388",
    mobile: "13666666666",
    mail: "luigi@qq.com",
  },
];

export default function TableAddonExample() {
  return (
    <Table
      records={records}
      recordKey="id"
      bordered="all"
      columns={[
        { key: "id", header: "ID", width: 32 },
        { key: "name", header: "姓名" },
        { key: "age", header: "年龄", width: 64 },
        { key: "landline", header: "固话" },
        { key: "mobile", header: "手机" },
        { key: "mail", header: "邮箱" },
      ]}
      addons={[
        groupable({
          headerGroups: [
            {
              key: "phone",
              title: "电话",
              children: ["landline", "mobile"],
            },
            {
              key: "contact",
              title: "联系方式",
              children: ["phone", "mail"],
            },
            {
              key: "info",
              title: "个人信息",
              children: ["name", "age", "contact"],
            },
          ],
        }),
      ]}
    />
  );
}