All files / src/table/_example TableLayoutExample.jsx

92.31% Statements 12/13
75% Branches 3/4
100% Functions 7/7
92.31% Lines 12/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132                  1x   1x                                           1x                                                     2x 2x           2x                         2x 1x   1x 1x                                   2x                                   1x                      
import React from "react";
import { Table } from "@tencent/tea-component/lib/table";
import { Justify } from "@tencent/tea-component/lib/justify";
import { Button } from "@tencent/tea-component/lib/button";
import { SearchBox } from "@tencent/tea-component/lib/searchbox";
import { Card } from "@tencent/tea-component/lib/card";
import { Layout } from "@tencent/tea-component/lib/layout";
import { Pagination } from "@tencent/tea-component/lib/pagination";
 
const { Body, Content } = Layout;
 
const cvmList = [
  {
    instanceId: "ins-4m99aio4",
    instanceName: "Hongkong VPN",
    status: "running",
    area: "香港一区",
    modal: "标准型 S1",
    publicIP: "119.28.142.24",
    privateIP: "10.144.77.75",
  },
  {
    instanceId: "ins-3e7y5ww3",
    instanceName: "Guangzhou Test",
    status: "stopped",
    area: "广州三区",
    modal: "标准型 S1",
    publicIP: "112.30.42.241",
    privateIP: "10.121.72.123",
  },
];
 
function TableLayoutExample() {
  return (
    <Layout>
      <Body>
        <Content>
          <Content.Body>
            <Table.ActionPanel>
              <Justify
                left={
                  <>
                    <Button type="primary">新建</Button>
                    <Button>开机</Button>
                  </>
                }
                right={
                  <>
                    <SearchBox />
                    <Button icon="setting" />
                    <Button icon="refresh" />
                    <Button icon="download" />
                  </>
                }
              />
            </Table.ActionPanel>
            <Card>
              <Table
                records={cvmList}
                recordKey="instanceId"
                rowDisabled={record => record.status === "stopped"}
                rowClassName={record => record.status}
                columns={[
                  {
                    key: "instance",
                    header: "ID/实例名",
                    render: cvm => (
                      <>
                        <p>
                          <a>{cvm.instanceId}</a>
                        </p>
                        <p>{cvm.instanceName}</p>
                      </>
                    ),
                  },
                  {
                    key: "status",
                    header: "状态",
                    width: 100,
                    render: cvm => {
                      if (cvm.status === "running") {
                        return <span style={{ color: "green" }}>运行中</span>;
                      }
                      Eif (cvm.status === "stopped") {
                        return <span style={{ color: "red" }}>已关机</span>;
                      }
                      return cvm.status;
                    },
                  },
                  {
                    key: "area",
                    header: "可用区域",
                  },
                  {
                    key: "modal",
                    header: "主机型号",
                  },
                  {
                    key: "ip",
                    header: "IP 地址",
                    align: "right",
                    render: cvm => (
                      <>
                        <p>{cvm.publicIP} (公)</p>
                        <p>{cvm.privateIP} (内)</p>
                      </>
                    ),
                  },
                ]}
              />
              <Pagination recordCount={2} />
            </Card>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}
 
export default function Demo() {
  return (
    <section
      style={{
        height: 320,
        border: "1px solid #ddd",
      }}
    >
      <TableLayoutExample />
    </section>
  );
}