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

const { removeable } = Table.addons;

const records = [
  { name: "Link", age: 20 },
  { name: "Zelda", age: 18 },
  { name: "Mario", age: 38 },
  { name: "Luigi", age: 48 },
];

export default function TableAddonExample() {
  const [removedKeys, setRemoveKeys] = useState([]);
  return (
    <Table
      records={records.filter(({ name }) => !removedKeys.includes(name))}
      recordKey="name"
      columns={[
        { key: "name", header: "姓名" },
        { key: "age", header: "年龄" },
      ]}
      addons={[
        removeable({
          onRemove: (key, context) => {
            console.log(key, context);
            setRemoveKeys(keys => [...keys, key]);
          },
        }),
      ]}
    />
  );
}