ttk.js

<!-- table tennis king -->
import './App.css';
import { Table,Button,Layout,Input} from 'antd';
import React, { useState,useRef } from 'react';
import ReactToPrint from "react-to-print";
import { PrinterOutlined } from '@ant-design/icons';

const { Header, Content, Footer } = Layout;

function App() {

  const [count, setCount] = useState(0);
  const data = [
    
  ];   
  const [dataSource, setDataSource] = useState(data)
  let componentRef = useRef();

  const handleAdd = () => {
    const newData = {
      key: count,
      no: count+1,
      name: ``,
      action: <a>Delete</a>,
    };
    setDataSource([...dataSource, newData]);
    
    setCount(count+1);
  };

  const handleAdd2 = () => {
    const newData1 = {
      key: count,
      no: count+1,
      name: ``,
      action: <a>Delete</a>,
    };
    const newData2 = {
      key: count,
      no: count+2,
      name: ``,
      action: <a>Delete</a>,
    };    
    var copiedDataSource = dataSource.slice();
    copiedDataSource.push(newData1, newData2);
    setDataSource(copiedDataSource);
    
    setCount(count+2);
  };  

  const handleDelete = (key) => {
    const newData = dataSource.filter((item) => item.key !== key);
    setDataSource(newData);
  };
  
  const onChange = (e) => {
    console.log('Change:', e.target.value);
  };  

  const columns = [
    {
      title: 'No#',
      dataIndex: 'no',
      key: 'no'
      
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Action',
      dataIndex: 'action',
      key: 'action',
      render: (_, record) =>
        dataSource.length >= 1 ? (
          
            <a onClick={() => handleDelete(record.key)}>Delete</a>
          
        ) : null,      
    }
  ];
   
  return (
    <div className="App">

     <Layout ref={(el) => (componentRef = el)}> 
      <Header
        style={{
          color: 'white',
          textAlign:'center'
        }}
        
      >

      桌球出賽名單  

      </Header>      
      <Content className="site-layout" style={{ padding: '0 50px' }}
      >

      <div style={{ padding: 24, height: '100%' }}>  

        <div style={{display:'block',textAlign:'right'}}>

        
        <ReactToPrint
          trigger={() => <Button icon={<PrinterOutlined />}>Print</Button>}
          content={() => componentRef}
        />
        </div>

        <div style={{width:"20%",textAlign:"left"}}>
          隊名:
          <Input showCount maxLength={20} onChange={onChange} />
          <br/>
          <br/>
          隊長:
          <Input showCount maxLength={20} onChange={onChange} />
          <br/>
          <br/>
          <Button type="primary" onClick={handleAdd}>+1 Player</Button>
          <Button style={{marginLeft:6}} onClick={handleAdd2}>+2 Player</Button>          
        </div>
        <br/>
        <Table columns={columns} dataSource={dataSource} />
      </div>  

      </Content>
      <Footer
        style={{
          textAlign: 'center',
          
        }}
      >
        桌球王 ©2023 Created by 阿瑜
      </Footer>      
    </Layout>

    </div>
  );
}

export default App;