antd/lib/table#ColumnProps TypeScript Examples

commonColumn: Array<ColumnProps<any>> = [
  {
    title: 'Key',
    dataIndex: 'key',
  },
  {
    title: 'Value',
    dataIndex: 'value',
  },
]

getColumns(): ColumnProps<ITableRecord>[] {
        return [{
                title: '编号',
                dataIndex: 'assetCode',
                key: 'assetCode'
            }, {
                title: '名称',
                dataIndex: 'assetName',
                key: 'assetName'
            }, {
                title: '主体',
                dataIndex: 'contract',
                key: 'contract'
            }, {
                title: '时间',
                dataIndex: 'contractDate',
                key: 'contractDate'
            }, {
                title: '创建时间',
                dataIndex: 'createDate',
                key: 'createDate'
            }, {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Link to={`${this.context.CONTAINER_ROUTE_PREFIX}/item/${record.id}`}>查看/修改</Link>
                )
            }, {
                title: '操作',
                key: 'action',
                render: (text, record) => {
                    return <a onClick={()=>{this._onDelete(record.id)}} >删除</a> ;
                }
            }]
    }

TableView = React.memo(({ data }: { data: any }) => {
  const columns: Array<ColumnProps<any>> = [
    {
      title: 'Key',
      dataIndex: 'key',
    },
    {
      title: 'Value',
      dataIndex: 'value',
    },
  ];

  return <ErdaTable hideHeader columns={columns} dataSource={translateData(data)} pagination={false} />;
})

columns: ColumnProps<any>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '分类',
      dataIndex: 'type',
    },
    {
      title: '描述',
      dataIndex: 'remark',
    },
    {
      title: '操作',
      render: () => '删除',
    },
  ];

/**
     * table的列对象
     * @override
     */
    getColumns(): ColumnProps<Record>[] {
        throw new Error('getColumns must be overriden to return an array')
    }

columns: Array<ColumnProps<TEST.RunTestItem>> = [
  {
    title: i18n.t('default:Name'),
    dataIndex: 'name',
    width: 176,
    render: (text) => <span>{cutStr(text, 30, { showTip: true })}</span>,
  },
  {
    title: i18n.t('dop:branch'),
    dataIndex: 'branch',
  },
  {
    title: i18n.t('default:Creator'),
    dataIndex: 'operatorName',
    width: 120,
  },
  {
    title: i18n.t('Creation time'),
    dataIndex: 'createdAt',
    width: 176,
    render: (text) => fromNow(text),
  },
  {
    title: i18n.t('default:Type'),
    dataIndex: 'type',
    width: 120,
  },
  {
    title: i18n.t('dop:Time'),
    dataIndex: ['totals', 'duration'],
    width: 160,
    render: (text) => getTestDuration(text),
  },
  {
    title: i18n.t('dop:execution result'),
    width: 200,
    dataIndex: ['totals', 'tests'],
    render: (_text, record) => <ExecuteResult totals={record.totals} />,
  },
  {
    title: i18n.t('dop:Code Coverage Statistics'),
    width: 200,
    dataIndex: 'coverageReport',
    render: (text: Array<{ value: number[] }>) => <CodeCoverage data={text} />,
  },
]

index = (_props: any) => {
  const history = useHistory();
  const { t, i18n } = useTranslation();
  const [query, setQuery] = useState('');
  const [mine, setMine] = useState(true);
  const [days, setDays] = useState(7);
  const { curBusiItem } = useSelector<RootState, CommonStoreState>((state) => state.common);
  const { tableProps } = useAntdTable((options) => getTableData(options, curBusiItem.id, query, mine, days), { refreshDeps: [curBusiItem.id, query, mine, days] });
  const columns: ColumnProps<DataItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
    },
    {
      title: t('task.title'),
      dataIndex: 'title',
      width: 200,
      render: (text, record) => {
        return <Link to={{ pathname: `/job-tasks/${record.id}/result` }}>{text}</Link>;
      },
    },
    {
      title: t('table.operations'),
      width: 150,
      render: (_text, record) => {
        return (
          <span>
            <Link to={{ pathname: '/job-tasks/add', search: `task=${record.id}` }}>{t('task.clone')}</Link>
            <Divider type='vertical' />
            <Link to={{ pathname: `/job-tasks/${record.id}/detail` }}>{t('task.meta')}</Link>
          </span>
        );
      },
    },
    {
      title: t('task.creator'),
      dataIndex: 'create_by',
      width: 100,
    },
    {
      title: t('task.created'),
      dataIndex: 'create_at',
      width: 160,
      render: (text) => {
        return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
      },
    },
  ];
  return (
    <PageLayout
      hideCluster
      title={
        <>
          <CodeOutlined />
          {t('执行历史')}
        </>
      }
    >
      <div style={{ display: 'flex' }}>
        <LeftTree></LeftTree>
        {curBusiItem.id ? (
          <div style={{ flex: 1, padding: 10 }}>
            <Row>
              <Col span={16} className='mb10'>
                <Input
                  style={{ width: 200, marginRight: 10 }}
                  prefix={<SearchOutlined />}
                  defaultValue={query}
                  onPressEnter={(e) => {
                    setQuery(e.currentTarget.value);
                  }}
                  placeholder='搜索标题'
                />
                <Select
                  style={{ marginRight: 10 }}
                  value={days}
                  onChange={(val: number) => {
                    setDays(val);
                  }}
                >
                  <Select.Option value={7}>{t('last.7.days')}</Select.Option>
                  <Select.Option value={15}>{t('last.15.days')}</Select.Option>
                  <Select.Option value={30}>{t('last.30.days')}</Select.Option>
                  <Select.Option value={60}>{t('last.60.days')}</Select.Option>
                  <Select.Option value={90}>{t('last.90.days')}</Select.Option>
                </Select>
                <Checkbox
                  checked={mine}
                  onChange={(e) => {
                    setMine(e.target.checked);
                  }}
                >
                  {t('task.only.mine')}
                </Checkbox>
              </Col>
              <Col span={8} style={{ textAlign: 'right' }}>
                <Button
                  type='primary'
                  ghost
                  onClick={() => {
                    history.push('/job-tasks/add');
                  }}
                >
                  {t('task.temporary.create')}
                </Button>
              </Col>
            </Row>
            <Table
              rowKey='id'
              columns={columns as any}
              {...(tableProps as any)}
              pagination={
                {
                  ...tableProps.pagination,
                  showSizeChanger: true,
                  pageSizeOptions: ['10', '50', '100', '500', '1000'],
                  showTotal: (total) => {
                    return i18n.language == 'en' ? `Total ${total} items` : `共 ${total} 条`;
                  },
                } as any
              }
            />
          </div>
        ) : (
          <BlankBusinessPlaceholder text={t('执行历史')}></BlankBusinessPlaceholder>
        )}
      </div>
    </PageLayout>
  );
}

getColumns = (t: TFunction): ColumnProps<GetAllCustomers_getAllCustomers_items>[] => [
	{
		title: t('Company name'),
		ellipsis: true,
		dataIndex: 'name',
		render: (_, record) => {
			return <Link to={`/customers/${record.id}`}>{record.name}</Link>;
		},
	},
	{
		title: t('Identification number'),
		width: 150,
		ellipsis: true,
		dataIndex: 'identificationNumber',
	},
	{
		title: t('Contact person name'),
		width: 250,
		ellipsis: true,
		dataIndex: 'personName',
	},
	{
		title: t('Email'),
		width: 150,
		ellipsis: true,
		dataIndex: 'email',
	},
	{
		title: t('Phone'),
		width: 150,
		ellipsis: true,
		dataIndex: 'phone',
	},
	{
		key: 'actions',
		width: 50,
		render: (_, record) => {
			return (
				<Link to={`/customers/${record.id}`}>
					<Button icon={<RightCircleOutlined />} type="link"></Button>
				</Link>
			);
		},
	},
]

useTableEffect = () => {
    // 控制modal显示隐藏
    const [visible, setVisible] = useState<boolean>(false)

    // get history by hooks, useHistory可以完全替代withRouter
    // const history = useHistory()

    // 路由根路径
    const CONTAINER_ROUTE_PREFIX = useBaseContext();

    // handle delete
    function onDelete() {
        console.log('onDelete', arguments)
    }

    // handle close modal
    function closeModal() {
        setVisible(false);
    }

    const columns: ColumnProps<ITableRecord>[] = useMemo(() => ([
        {
            title: '资产方编号',
            dataIndex: 'assetCode',
            key: 'assetCode'
        }, {
            title: '资产方名称',
            dataIndex: 'assetName',
            key: 'assetName'
        }, {
            title: '签约主体',
            dataIndex: 'contract',
            key: 'contract'
        }, {
            title: '签约时间',
            dataIndex: 'contractDate',
            key: 'contractDate'
        }, {
            title: '联系人',
            dataIndex: 'contacts',
            key: 'contacts'
        }, {
            title: '联系电话',
            dataIndex: 'contactsPhone',
            key: 'contactsPhone'
        }, {
            title: '创建时间',
            dataIndex: 'createDate',
            key: 'createDate'
        }, {
            title: '操作人',
            dataIndex: 'operator',
            key: 'operator'
        }
        , {
            title: '操作',
            key: 'action',
            fixed: 'right',
            render: (text, record) => (
                <Link to={`${CONTAINER_ROUTE_PREFIX}/item/edit/${record.id}`}>查看/修改</Link>
            )
        }, {
            title: '操作',
            key: 'action',
            fixed: 'right',
            render: (text, record) => {
                return (
                    <Popconfirm
                        title="Are you sure to delete this task?"
                        onConfirm={onDelete.bind(null, record.id)}
                    >
                        <a>删除</a>
                    </Popconfirm>
                )
            }
        }, {
            title: '操作',
            key: 'action',
            fixed: 'right',
            render: (text, record) => {
                return (
                    <a onClick={() => setVisible(true)}>新增</a>
                )
            }
        }
    ]), [CONTAINER_ROUTE_PREFIX])

    return {
        columns,
        onDelete,
        visible,
        closeModal,
    }
}

export function ProviderDoc({
  docKey,
  docData,
  showCard,
  debuggerPanelExpand,
  onDebuggerExpand,
}: ProviderDocProps): React.ReactElement {
  const { t } = useTranslation(NS_DEVELOPERS);

  if (!docData) {
    return null;
  }

  const providerName = `providers-of-${docData.serviceId}.${docData.brickName}`;

  const columns: ColumnProps<any>[] = [
    {
      title: t(K.PARAMETER_INDEX),
      key: "index",
      className: styles.code,
      width: "20%",
      render(value, record, index) {
        return index;
      },
    },
    {
      title: t(K.TYPE),
      dataIndex: "type",
      className: styles.code,
      width: "30%",
      render: function renderGeneralType(type: Type): React.ReactNode {
        return <GeneralType type={type} />;
      },
    },
    {
      title: t(K.REQUIRED),
      dataIndex: ["flags", "isOptional"],
      width: "10%",
      render: (optional: boolean) => (optional ? "-" : "✔️"),
    },
    {
      title: t(K.DESCRIPTION),
      dataIndex: "name",
    },
  ];

  const content = (
    <>
      <ProviderDebugger
        key={docKey}
        providerName={providerName}
        debuggerPanelExpand={debuggerPanelExpand}
        onDebuggerExpand={onDebuggerExpand}
      />
      <h2 style={{ marginTop: gap }}>{t(K.BASIC_INFO)}</h2>
      <dl className={styles.basicInfo}>
        {docData.endpoint && (
          <>
            <dt>{t(K.ENDPOINT_METHOD)}</dt>
            <dd>{docData.endpoint.split(/\s+/)[0]}</dd>
            <dt>{t(K.ENDPOINT_URL)}</dt>
            <dd>
              <Typography.Paragraph copyable className={styles.paragraph}>
                {docData.endpoint.split(/\s+/)[1]}
              </Typography.Paragraph>
            </dd>
          </>
        )}
        <dt>provider:</dt>
        <dd>
          <Typography.Paragraph copyable className={styles.paragraph}>
            {providerName}
          </Typography.Paragraph>
        </dd>
      </dl>
      <h2 style={{ marginTop: gap }}>{t(K.PARAMETERS)}</h2>
      {docData.parameters.length > 0 ? (
        <Table
          dataSource={docData.parameters}
          rowKey="name"
          columns={columns}
          pagination={false}
        ></Table>
      ) : (
        <p>{t(K.NONE)}</p>
      )}
      <h2 style={{ marginTop: gap }}>{t(K.RETURNS)}</h2>
      <code>
        <GeneralType type={docData.returns} />
      </code>
      {docData.examples && (
        <>
          <h2 style={{ marginTop: gap }}>{t(K.SAMPLE_LIST)}</h2>
          <ProviderSample
            key={docKey}
            endpoint={docData.endpoint}
            examples={docData.examples}
          ></ProviderSample>
        </>
      )}
      <h2 style={{ marginTop: gap }}>{t(K.TYPE_REFERENCES)}</h2>
      {docData.usedReferenceIds.length > 0 ? (
        docData.usedReferenceIds.map((id) => (
          <GeneralReference key={id} reference={docData.references.get(id)} />
        ))
      ) : (
        <p>{t(K.NONE)}</p>
      )}
    </>
  );

  return showCard ? (
    <Card title={docData.comment} bordered={false}>
      {content}
    </Card>
  ) : (
    content
  );
}

Analysis = () => {
  const [services, runningList, historyList, historyPaging] = jvmStore.useStore((s) => [
    s.services,
    s.runningList,
    s.historyList,
    s.historyPaging,
  ]);
  const addonDetail = addonStore.useStore((s) => s.addonDetail);
  const insId = addonDetail.realInstanceId;
  const runningTimer = React.useRef(-1);
  const pendingTimer = React.useRef(-1);

  const [{ idList, isPending, isLoadHistory }, updater] = useUpdate({
    idList: [] as string[],
    isPending: false,
    isLoadHistory: false,
  });

  const getRunningList = React.useCallback(() => {
    jvmStore.getProfileList({ insId, state: ProfileStateMap.RUNNING, isHistory: false }).then(() => {
      runningTimer.current = window.setTimeout(() => {
        getRunningList();
      }, 15 * 1000);
    });
  }, [insId]);

  const getHistoryList = React.useCallback(
    (q = {}) => {
      updater.isLoadHistory(true);
      jvmStore
        .getProfileList({
          insId,
          isHistory: true,
          state: [ProfileStateMap.COMPLETED, ProfileStateMap.FAILED, ProfileStateMap.TERMINATING],
          ...q,
        })
        .finally(() => {
          updater.isLoadHistory(false);
        });
    },
    [insId, updater],
  );

  React.useEffect(() => {
    if (addonDetail.realInstanceId) {
      jvmStore.getServiceInsList(addonDetail.realInstanceId);
    }
    getRunningList();
    getHistoryList();

    return () => {
      clearTimeout(runningTimer.current);
      clearTimeout(pendingTimer.current);
    };
  }, [addonDetail, getHistoryList, getRunningList, insId]);

  const onChange = (values: any) => {
    updater.idList(values.ids);
  };

  const rollingState = React.useCallback(
    (s) => {
      jvmStore.getProfileStatus({ insId, profileId: s.id }).then((res) => {
        switch (res.state) {
          case 'pending':
            pendingTimer.current = window.setTimeout(() => {
              rollingState(res);
            }, 5000);
            break;
          // case ProfileStateMap.COMPLETED:
          // case ProfileStateMap.TERMINATING:
          case ProfileStateMap.RUNNING:
            goTo(`./${res.id}`);
            break;
          case ProfileStateMap.FAILED:
            message.error(res.message);
            break;
          default:
            break;
        }
      });
    },
    [insId],
  );

  const startProfile = () => {
    const [applicationId, serviceId, serviceInstanceId] = idList;
    jvmStore
      .startProfile({
        insId,
        applicationId,
        serviceId,
        serviceInstanceId,
      })
      .then((s) => {
        updater.isPending(true);
        rollingState(s);
      });
  };

  const getCols = (isHistory: boolean) => {
    const cols: Array<ColumnProps<JVM.ProfileItem>> = [
      {
        title: i18n.t('dop:application / service / instance name'),
        dataIndex: 'serviceInstanceName',
        key: 'serviceInstanceName',
        render: (_, record) => `${record.applicationName} / ${record.applicationName} / ${record.serviceInstanceName}`,
      },
      {
        title: i18n.t('dop:analyze id'),
        dataIndex: 'profiling',
        key: 'profiling',
        render: (v) => <Tooltip title={v}>{v}</Tooltip>,
      },
      {
        title: i18n.t('common:state'),
        dataIndex: ['state', 'state'],
        key: 'state.state',
        width: 160,
        render: (v) => {
          return (
            {
              [ProfileStateMap.PENDING]: i18n.t('dop:attaching to process'),
              [ProfileStateMap.RUNNING]: i18n.t('In Progress'),
              [ProfileStateMap.COMPLETED]: i18n.t('dop:Completed'),
              [ProfileStateMap.FAILED]: i18n.t('failed'),
              [ProfileStateMap.TERMINATING]: i18n.t('dop:Terminated'),
            }[v] || null
          );
        },
      },
      {
        title: i18n.t('Creation time'),
        dataIndex: 'createTime',
        key: 'createTime',
        width: 200,
        render: (v) => formatTime(v, 'YYYY-MM-DD HH:mm:ss'),
      },
      isHistory
        ? {
            title: i18n.t('common:End time'),
            dataIndex: 'finishTime',
            key: 'finishTime',
            width: 180,
            render: (v) => formatTime(v, 'YYYY-MM-DD HH:mm:ss'),
          }
        : {
            title: i18n.t('dop:started at'),
            key: 'startFrom',
            width: 120,
            render: (v) => fromNow(v),
          },
      {
        title: i18n.t('operations'),
        width: 80,
        render: (record: JVM.ProfileItem) => {
          return (
            <div className="table-operations">
              <span className="table-operations-btn" onClick={() => goTo(`./${record.profiling}`)}>
                {i18n.t('common:view')}
              </span>
            </div>
          );
        },
      },
    ];
    return cols;
  };

  return (
    <div className="jvm-profile">
      <Spin spinning={isPending} tip={i18n.t('dop:attaching to process')}>
        <div className="px-5 pt-5 pb-1 mb-5 bg-white border-all">
          <FilterGroup
            list={[
              {
                label: i18n.t('dop:select instance'),
                name: 'ids',
                type: 'custom',
                placeholder: '选择后进行分析',
                Comp: <Cascader options={services} expandTrigger="hover" style={{ width: 400 }} />,
              },
            ]}
            onChange={onChange}
          >
            <Button type="primary" disabled={!idList.length} onClick={startProfile}>
              {i18n.t('dop:start analysis')}
            </Button>
          </FilterGroup>
        </div>
      </Spin>
      <SimplePanel title={i18n.t('dop:analyzing')} className="block">
        <Table
          dataSource={runningList}
          columns={getCols(false)}
          rowKey="profiling"
          pagination={false}
          scroll={{ x: 900 }}
        />
      </SimplePanel>
      <SimplePanel title={i18n.t('dop:historical analysis')} className="block mt-5">
        <Table
          dataSource={historyList}
          columns={getCols(true)}
          rowKey="profiling"
          loading={isLoadHistory}
          pagination={{
            current: historyPaging.pageNo,
            pageSize: historyPaging.pageSize,
            total: historyPaging.total,
            onChange: (no: number) => getHistoryList({ pageNo: no }),
          }}
          scroll={{ x: 900 }}
        />
      </SimplePanel>
    </div>
  );
}

DeviceList = (props: Props) => {
  const [searchParam, setSearchParam] = useState({
    pageSize: 10,
    terms: { productId: props.productId },
  });
  const [deviceData, setDeviceData] = useState<any>({});
  const [deviceId, setDeviceId] = useState(props.data);

  const submitData = () => {
    props.save(deviceId);
  };

  const handleSearch = (params?: any) => {
    setSearchParam(params);
    apis.deviceInstance
      .list(encodeQueryParam(params))
      .then(response => {
        if (response.status === 200) {
          setDeviceData(response.result);
        }
      })
      .catch(() => {});
  };

  useEffect(() => {
    handleSearch(searchParam);
  }, []);

  const onTableChange = (pagination: PaginationConfig, filters: any, sorter: SorterResult<any>) => {
    apis.deviceInstance
      .list(
        encodeQueryParam({
          pageIndex: Number(pagination.current) - 1,
          pageSize: pagination.pageSize,
          sorts: sorter,
          terms: { productId: props.productId },
        }),
      )
      .then(response => {
        if (response.status === 200) {
          setDeviceData(response.result);
        }
      })
      .catch(() => {});
  };

  const rowSelection = {
    onChange: (selectedRowKeys: any) => {
      setDeviceId(selectedRowKeys);
    },
  };

  const statusMap = new Map();
  statusMap.set('在线', 'success');
  statusMap.set('离线', 'error');
  statusMap.set('未激活', 'processing');

  const columns: ColumnProps<any>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      ellipsis: true,
    },
    {
      title: '设备名称',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      ellipsis: true,
    },
    {
      title: '注册时间',
      dataIndex: 'registryTime',
      width: '200px',
      ellipsis: true,
      render: (text: any) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
      sorter: true,
      defaultSortOrder: 'descend',
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: '120px',
      render: record =>
        record ? <Badge status={statusMap.get(record.text)} text={record.text} /> : '',
    },
  ];

  return (
    <Modal
      title="选择设备"
      visible
      okText="确定"
      cancelText="取消"
      onOk={() => {
        submitData();
      }}
      width="60%"
      style={{ marginTop: -30 }}
      onCancel={() => props.close()}
    >
      <div
        className={styles.tableList}
        style={{ maxHeight: 600, overflowY: 'auto', overflowX: 'hidden' }}
      >
        <div className={styles.tableListForm}>
          <SearchForm
            search={(params: any) => {
              handleSearch({ terms: { ...searchParam.terms, ...params }, pageSize: 10 });
            }}
            formItems={[
              {
                label: '设备名称',
                key: 'name$LIKE',
                type: 'string',
              },
              {
                label: '设备ID',
                key: 'deviceId$IN',
                type: 'string',
              },
            ]}
          />
        </div>

        <div className={styles.StandardTable}>
          <Table
            columns={columns}
            dataSource={deviceData.data}
            rowKey="id"
            onChange={onTableChange}
            rowSelection={{
              selectedRowKeys: deviceId,
              type: 'checkbox',
              ...rowSelection,
            }}
            pagination={{
              current: deviceData.pageIndex + 1,
              total: deviceData.total,
              pageSize: deviceData.pageSize,
              showQuickJumper: true,
              showSizeChanger: true,
              pageSizeOptions: ['10', '20', '50', '100'],
              showTotal: (total: number) =>
                `共 ${total} 条记录 第  ${deviceData.pageIndex + 1}/${Math.ceil(
                  deviceData.total / deviceData.pageSize,
                )}页`,
            }}
          />
        </div>
      </div>
    </Modal>
  );
}