All files / src/table/_example TableTipsExample.jsx

40% Statements 2/5
50% Branches 2/4
25% Functions 1/4
40% Lines 2/5

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            1x 1x                                                                                            
import React, { useState, Fragment } from "react";
import { Table } from "@tencent/tea-component/lib/table";
import { StatusTip } from "@tencent/tea-component/lib/tips";
import { RadioGroup, Radio } from "@tencent/tea-component/lib/radio";
 
export default function TableTipsExample() {
  const [status, setStatus] = useState("none");
  return (
    <Fragment>
      <RadioGroup value={status} onChange={value => setStatus(value)}>
        <Radio name="none">无</Radio>
        <Radio name="loading">加载中</Radio>
        <Radio name="empty">空数据</Radio>
        <Radio name="found">找到数据</Radio>
        <Radio name="error">加载失败</Radio>
      </RadioGroup>
      <Table
        columns={[
          {
            key: "movie",
            header: "电影",
          },
          {
            key: "director",
            header: "导演",
          },
          {
            key: "type",
            header: "类型",
          },
        ]}
        records={
          status === "empty"
            ? []
            : [
                { movie: "流浪地球", director: "张帆", type: "科幻" },
                { movie: "大话西游", director: "周星驰", type: "喜剧" },
              ]
        }
        topTip={
          status !== "none" && (
            <StatusTip
              // @ts-ignore
              status={status}
              onClear={() => setStatus("loading")}
              onRetry={() => setStatus("loading")}
            />
          )
        }
      />
    </Fragment>
  );
}