import React from "react";
import { Table } from "antd";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
    description: `My name is Edward King ${i}, I am 32 years old, living in Sydney No. ${i} Lake Park.`,
  });
}

const TableExpand = (props) => {
  const { size, children, bordered, ...rest } = props;
  return (
    <Table
      columns={columns}
      expandable={{
        expandedRowRender: (record) => (
          <p
            style={{
              margin: 0,
            }}
          >
            {record.description}
          </p>
        ),
        rowExpandable: (record) => record.name !== "Edward King 2",
      }}
      dataSource={data}
      size={size}
      bordered={bordered}
      style={{ width: "80%" }}
      {...rest}
    >
      {children}
    </Table>
  );
};

export default TableExpand;