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

const { indentable } = Table.addons;

const records = [
  { id: "1", content: "内容 1" },
  { id: "1-1", content: "内容 1-1" },
  { id: "2", content: "内容 2" },
  { id: "2-1", content: "内容 2-1" },
  { id: "2-1-1", content: "内容 2-1-1" },
];

export default function TableAddonExample() {
  return (
    <Table
      records={records}
      recordKey="id"
      columns={[
        { key: "id", header: "ID" },
        { key: "content", header: "内容" },
      ]}
      addons={[
        indentable({
          targetColumnKey: "id",
          indent: 50,
          relations: {
            "1-1": "1",
            "2-1": "2",
            "2-1-1": "2-1",
          },
        }),
      ]}
    />
  );
}