antd#Table JavaScript Examples

render() {
    const {
      currentPage,
      pageSize,
      totalCount,
      onShowSizeChange,
      onChange,
      columns,
    } = this.props
    const hasMultiHead = columns.filter(one => !!one.children).length > 0
    return (
      <div className={`table-content ${hasMultiHead ? 'clear-overlap-border' : ''}`}>
        <Table
          pagination={false}
          bordered
          rowKey="id"
          // rowClassName={this.props.rowClassName}
          {...this.props}
        />
        { currentPage ?
          <Pagination
            total={totalCount || 0}
            showSizeChanger // 是否可以改变pageSize
            showQuickJumper={false}// 是否可以快速跳转某一页
            onShowSizeChange={onShowSizeChange}
            onChange={onChange}
            showTotal={_totalCount => `共 ${_totalCount} 条`}
            current={currentPage || 1}
            pageSize={pageSize || 10}
            {...this.props}
          /> : null
        }
      </div>
    )
  }

APYtable = props => {
    //read props

    return (
        <div className={styles.APYtable}>
            <div className={styles.tableHead}>
                <div className={styles.tableHeadBlock}>
                    <div className={styles.data}>APY 8.88%</div>
                    <div className={styles.expContent}>30 day trailing average</div>
                </div>
                <div className={styles.tableHeadBlock}>
                    <div className={styles.data}>564.18 OUSD</div>
                    <div className={styles.expContent}>Next rebase</div>
                </div>
            </div>
            <div color="#fff">Daily APY for the last thirty days:</div>
            <div className={styles.tableDate}>
                <Table dataSource={dataSource} columns={columns} pagination={false} width/>
            </div>
        </div>
    );
}

render() {
    let experiments = this.state.experiments;
    let data = experiments.map((experiment, i) => {
      return {
        key: i,
        experiment: experiment.name,
        author: 'Admin',
        runs: experiment.runs,
        createdAt: experiment.created_at,
      }
    })

    return (
      <div>
        <Row>
          <Col span={this.state.run ? 12 : 24}>
            <div style={{ margin: "0 20px" }}>
              <Table
                className="components-table-demo-nested"
                columns={experimentsColumns}
                expandable={{ expandedRowRender: this.expandedRowRender.bind(this) }}
                dataSource={data}
              />
            </div>
          </Col>
          <Col span={this.state.run ? 12 : 0}>
            <RunWidget run={this.state.run} />
          </Col>
        </Row>
      </div>
    )
  }

render() {
    const cardContent = `此页面是用来展示通过项目内埋点收集到的异常信息。你可以点击不同种类的异常按钮，来观察捕获到的异常信息。`;
    const { bugList } = this.props
    return (
      <div className="app-container">
        <TypingCard title="Bug收集" source={cardContent} />
        <br />
        <Collapse defaultActiveKey={["1"]}> 
          <Panel header="报错" key="1">
            <Button type="primary" onClick={this.jsError}>jsError</Button>
            <Button type="primary" onClick={this.loadResourceError} style={{marginLeft:"20px"}}>资源加载异常</Button>
          </Panel>
        </Collapse>
        <br />
        <Table
          bordered
          rowKey={(record) => record.timestamp}
          dataSource={bugList}
          pagination={false}
        >
          <Column title="序号" dataIndex="id" key="id" width={60} render={(text,record,index) => index+1}/>
          <Column title="监控指标" dataIndex="kind" key="kind" width={80} />
          <Column title="异常类型" dataIndex="errorType" key="errorType" width={160} />
          <Column title="url" dataIndex="url" key="url" width={150} />
          <Column title="异常信息" dataIndex="desc" key="desc" width={300} ellipsis={true}/>  
          <Column title="异常堆栈" dataIndex="stack" key="stack" width={300} ellipsis={true}/>  
          <Column title="操作元素" dataIndex="selector" key="selector" width={195} ellipsis={true}/>
          <Column title="userAgent" dataIndex="userAgent" key="userAgent" width={100} />
          <Column title="时间" dataIndex="timestamp" key="timestamp" width={100} render={(value) => timestampToTime(value)}/>
        </Table>
      </div>
    );
  }

render() {
    const { dataSource } = this.state;
    return (
      <div>
        <div id="top-section">
          <Button type="primary" onClick={this.handleAdd}>添加</Button>
        </div>
        <CreateEditMaintain onRef={c => this.onRef(c)} onSubmit={this.rulesUpdate} />
        <Table dataSource={dataSource} columns={this.columns} rowKey="id" />
        <HostList onRef={c => this.onHostRef(c)} />
      </div>
    )
  }

List = () => {
  // 设置列表信息
  const [data, setData] = useState([]);
  // 设置页码信息
  const [page, setPage] = useState(1);
  const [pageInfo, setPageInfo] = useState();

  useEffect(() => {
    console.log({ page });
    (async () => {
      const result = await fetchVegetable(page, 10);
      const { vegetableList } = result.data;
      setData(() => vegetableList.items);
      setPageInfo(() => ({
        current: vegetableList.page,
        pageSize: vegetableList.pageSize,
        total: vegetableList.total,
        onChange: (page) => setPage(page),
      }));
    })();
  }, [page]);

  return (
    <Card title="React 子应用列表页">
      <Table rowKey="_id" dataSource={data} pagination={pageInfo}>
        <Column dataIndex="poster" render={(text) => <Avatar src={text} />} />
        <Column dataIndex="name" />
        <Column dataIndex="price" render={(text) => <>￥ {text}</>} />
      </Table>
    </Card>
  );
}

render() {
    const {
      rule: { data },
      loading,
    } = this.props;
    const { current, modalVisible } = this.state;

    const parentMethods = {
      handleAdd: this.handleAdd,
      handleUpdate: this.handleUpdate,
      handleModalVisible: this.handleModalVisible,
    };
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
                新建
              </Button>
            </div>
            <Table
              rowKey="id"
              loading={loading}
              dataSource={data.list}
              bordered
              columns={this.columns}
              pagination={{ showSizeChanger: true, showQuickJumper: true, ...data.pagination }}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
        <CreateForm {...parentMethods} current={current} modalVisible={modalVisible} />
      </PageHeaderWrapper>
    );
  }

render() {
    const { data, rowKey, ...rest } = this.props;
    const { list = [], pagination = false } = data || {};
    const paginationProps = pagination
      ? {
          showSizeChanger: true,
          showQuickJumper: true,
          ...pagination,
        }
      : false;
    return (
      <div className={styles.standardTable}>
        <Table
          key={Date.now()}
          rowKey={rowKey || 'id'}
          dataSource={list}
          pagination={paginationProps}
          onChange={this.handleTableChange}
          {...rest}
        />
      </div>
    );
  }

render() {
    let product;
    try {
      product = json5.parse(this.props.dataSource);
    } catch (e) {
      product = null;
    }
    if (!product) {
      return null;
    }
    let data = schemaTransformToTable(product);
    data = _.isArray(data) ? data : [];
    return <Table bordered size="small" pagination={false} dataSource={data} columns={columns} />;
  }

Chart8 = () => {
  return (
    <div>
      <div className={`${style.textDivider} mb-2`}>
        <h4 className={`${style.textDividerContent} font-size-24 font-weight-bold`}>
          Waiting actions
        </h4>
      </div>
      <div className={style.table}>
        <Table
          columns={columns}
          dataSource={data.table}
          pagination={false}
          rowSelection={rowSelection}
        />
      </div>
    </div>
  )
}

render() {
    const { selectedRowKeys, needTotalList } = this.state;
    const { data = {}, rowKey, ...rest } = this.props;
    const { list = [], pagination } = data;

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <div className={styles.tableAlert}>
          <Alert
            message={
              <Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                {needTotalList.map(item => (
                  <span style={{ marginLeft: 8 }} key={item.dataIndex}>
                    {item.title}
                    总计&nbsp;
                    <span style={{ fontWeight: 600 }}>
                      {item.render ? item.render(item.total) : item.total}
                    </span>
                  </span>
                ))}
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                  清空
                </a>
              </Fragment>
            }
            type="info"
            showIcon
          />
        </div>
        <Table
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={list}
          pagination={paginationProps}
          onChange={this.handleTableChange}
          {...rest}
        />
      </div>
    );
  }

function FeedbackTable({ feedback }) {
	return <Table columns={columns} dataSource={feedback} pagination={{pageSize: 100}}rowKey="id" />;
}

{ Column } = Table

expandedRowRender(experiment) {
    let runs = experiment.runs.map((run, i) => {
      return {
        key: i,
        date: run.created_at,
        name: run.uuid,
        operation: run
      }
    })

    const runColumns = [
      { title: 'Date', dataIndex: 'date', key: 'date' },
      { title: 'Run', dataIndex: 'name', key: 'name' },
      {
        title: 'Status',
        key: 'state',
        render: () => (
          <span>
            <Badge status="success" />
            Finished
          </span>
        ),
      },
      { title: 'Tags', dataIndex: 'tags', key: 'tags', render: () => <Tag>Qiskit</Tag> },
      {
        title: 'Action',
        dataIndex: 'operation',
        key: 'operation',
        render: (run) => (
          <Space size="middle">
            <a onClick={() => {
              this.setState({...this.state, run: run})
            }}>View</a>
            <a>Rerun</a>
          </Space>
        ),
      },
    ];
  
    return <Table 
                columns={runColumns}
                dataSource={runs} 
                pagination={false} />;
  }

SimpleTableWidget = ({
  columnBuilders,
  rowData,
  emptyText,
  margin,
  loading,
}) => {
  const _rowData = rowData || [];
  const customizeRenderEmpty = () => <EmptyTableIndicator text={emptyText} />;

  const columns = columnBuilders.map((builder, j) => ({
    ...builder,
    title: (
      <Header margin={margin}>
        <I s={builder.label} />
      </Header>
    ),
    dataIndex: 'col_' + j,
  }));

  const dataSource = _rowData.map((row, i) => {
    var rowValue = { key: i };

    columnBuilders.forEach((builder, j) => {
      rowValue['col_' + j] = (
        <Cell margin={margin} sortedValue={builder.sortedValue(row)}>
          {builder.getColValue(row)}
        </Cell>
      );
    });

    return rowValue;
  });

  return (
    <SimpleTableContainer>
      <ConfigProvider
        renderEmpty={dataSource.length === 0 && customizeRenderEmpty}
      >
        <TableLoadingSpin loading={loading}>
          <Table
            tableLayout="auto"
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
        </TableLoadingSpin>
      </ConfigProvider>
    </SimpleTableContainer>
  );
}

{ Column } = Table

render() {
    const { dataSource, page, labalWidth } = this.state
    const { getFieldDecorator } = this.props.form
    const columns = [
      { title: 'id', align: 'center', dataIndex: 'id', sorter: (a, b) => a.id - b.id },
      {
        title: 'Rule ID',
        align: 'center',
        dataIndex: 'rule_id',
        render: ruleId => (<Link to={`/rules?id=${ruleId}`}>{ruleId}</Link>),
      },
      { title: '报警值', align: 'center', dataIndex: 'value' },
      {
        title: '当前状态',
        align: 'center',
        dataIndex: 'status',
        render: status => (
          <span>{status === 2 ? '报警' : status === 0 ? '恢复' : '已确认'}</span>
        ),
      },
      {
        title: '异常分钟数',
        align: 'center',
        dataIndex: 'count',
        render: count => (
          <span>{count+1}</span>
        ),
      },
      { title: '标题', align: 'center', dataIndex: 'summary', width: 100 },
      {
        title: 'label',
        align: 'center',
        dataIndex: 'labels',
        width: labalWidth,
        render: (labels) => {
          if (labels && Object.prototype.toString.call(labels) === '[object Object]') {
            return Object.keys(labels).map(key => <Tag color="cyan" style={{ marginTop: '5px' }}>{key}: {labels[key]}</Tag>)
          }
          return '-'
        },
      },
      { title: '描述', align: 'center', dataIndex: 'description' },
      { title: '确认人', align: 'center', dataIndex: 'confirmed_by' },
      {
        title: '触发时间',
        align: 'center',
        dataIndex: 'fired_at',
        width: tableTimeWidth,
        render: firedAt => (
          <span>{firedAt === '0001-01-01T00:00:00Z' ? '--' : moment(firedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认时间',
        align: 'center',
        dataIndex: 'confirmed_at',
        width: tableTimeWidth,
        render: confirmedAt => (
          <span>{confirmedAt === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认截止时间',
        align: 'center',
        dataIndex: 'confirmed_before',
        width: tableTimeWidth,
        render: confirmedBefore => (
          <span>{confirmedBefore === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedBefore).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '恢复时间',
        align: 'center',
        dataIndex: 'resolved_at',
        width: tableTimeWidth,
        render: resolvedAt => (
          <span>{resolvedAt === '0001-01-01T00:00:00Z' ? '--' : moment(resolvedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
    ]
    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSearch}>
          <Form.Item label="标题">
            {getFieldDecorator('summary', {})(<Input placeholder="请输入标题" />)}
          </Form.Item>
          <Form.Item label="状态">
            {getFieldDecorator('status', {
              initialValue: -1,
            })(<Select>
              <Option value={-1}>所有</Option>
              <Option value={0}>恢复</Option>
              <Option value={1}>已确认</Option>
              <Option value={2}>报警</Option>
            </Select>)}
          </Form.Item>
          <Form.Item label="报警时间" style={{ marginBottom: 0 }}>
            <Form.Item style={{ marginRight: 0 }}>
              {getFieldDecorator('timestart', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警开始时间"
              />)}
            </Form.Item>
            <span style={{ width: '24px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>~</span>
            <Form.Item style={{ marginBottom: 0 }}>
              {getFieldDecorator('timeend', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警结束时间"
              />)}
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
        <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ x: 1300 }} rowKey="id" />
        <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '15px' }}>
          <Pagination onChange={this.pageChange} current={page.current} pageSize={page.size} total={page.total} />
        </div>
      </div>
    )
  }

{ Column } = Table

TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
  <Transfer {...restProps} showSelectAll={false}>
    {({
      direction,
      filteredItems,
      onItemSelectAll,
      onItemSelect,
      selectedKeys: listSelectedKeys,
      disabled: listDisabled,
    }) => {
      const columns = direction === "left" ? leftColumns : rightColumns;

      const rowSelection = {
        getCheckboxProps: (item) => ({
          disabled: listDisabled || item.disabled,
        }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter((item) => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, listSelectedKeys)
            : difference(listSelectedKeys, treeSelectedKeys);
          onItemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          onItemSelect(key, selected);
        },
        selectedRowKeys: listSelectedKeys,
      };

      return (
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={filteredItems}
          size="small"
          style={{ pointerEvents: listDisabled ? "none" : null }}
          onRow={({ key, disabled: itemDisabled }) => ({
            onClick: () => {
              if (itemDisabled || listDisabled) return;
              onItemSelect(key, !listSelectedKeys.includes(key));
            },
          })}
        />
      );
    }}
  </Transfer>
)

render() {
    const { data } = this.props;

    return (
      <>
        <Table
          dataSource={data}
          rowKey={record => record._id}
          pagination={false}
        >
          <Column title="文件名" dataIndex="fileName" key="fileName" />
          <Column
            title="上传者"
            dataIndex="uploader"
            key="uploader"
            render={record => (
              <span>
                {record === "admin" ? (
                  <Tag color="geekblue">admin</Tag>
                ) : (
                  record
                )}
              </span>
            )}
          />
          <Column
            title="上传时间"
            dataIndex="timeOfUpload"
            key="timeOfUpload"
            render={record => <span>{numberToTime(record)}</span>}
          />
          <Column
            title="文件大小"
            dataIndex="fileSize"
            key="fileSize"
            render={record => <span>{kbToMb(record)}</span>}
          />
          <Column
            title="操作"
            key="action"
            render={record => (
              <span>
                <DeleteOutlined
                  onClick={() =>
                    this.deleteHanler(record["_id"], record["filePath"])
                  }
                />
              </span>
            )}
          />
        </Table>
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            paddingTop: "20px",
            paddingRight: "20px"
          }}
        >
          <Pagination
            defaultCurrent={1}
            defaultPageSize={10}
            total={50}
            hideOnSinglePage
          />
        </div>
      </>
    );
  }

function MenteeList({ mentees, userData, history, getUserMenteesProfileApi }) {
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      render: text => (
        <Link to={`/dashboard/mentor/mentee/${text}`}>{text}</Link>
      ),
    },
    {
      title: 'First Name',
      dataIndex: 'firstName',
      sorter: (a, b) => a.firstName.length - b.firstName.length,
      sortDirections: ['descend'],
    },
    {
      title: 'Last Name',
      dataIndex: 'lastName',
    },
    // {
    //   title: 'Track',
    //   dataIndex: 'tracks',
    //   render: (text, record) =>
    //     record.tracks && record.tracks.length > 0
    //       ? record.tracks[0].title
    //       : 'Not Enrolled Yet',
    // },
  ];


  useEffect(() => {
    if (userData) {
      const {
        city,
        country,
        phoneNumber,
        description,
        technologies,
      } = userData;
      if (
        !city ||
        !country ||
        !phoneNumber
      ) {
        // return
        history.push({
          pathname: '/dashboard/mentor/profile',
          state: { editProfile: true },
        });
      }
    }
  }, [userData, history]);

  const fetchMentees = useCallback(() => {
    getUserMenteesProfileApi();
  }, [getUserMenteesProfileApi]);

  useEffect(() => {
    fetchMentees();
  }, [fetchMentees]);

  return (
    <div>
      <h2 className="ml-4">Your Mentees</h2>
      <Table
        className="mentee-table ml-4"
        columns={columns}
        dataSource={mentees}
        size="small"
        pagination={{ pageSize: 10 }}
        // scroll={{ y: 240 }}
      />
    </div>
  );
}

ListNewsletter = () => {
  const [n, setN] = useState([]);

  const getN = async () => {
    await fetch(`/api/v1/newsletter/get`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        if (res) {
          setN(res.newsletters);
        }
      });
  };

  useEffect(() => {
    getN();
  }, []);

  const columns = [
    {
      title: "Title",
      dataIndex: "title",
      key: "title",
      width: 300,
    },
    {
      key: "action",
      render: (text, record) => <ViewNewsletter n={record} />,
    },
  ];

  return (
    <div>
      <Table
        showHeader={false}
        dataSource={n}
        columns={columns}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          pageSizeOptions: ["3", "5", "10"],
        }}
      />
    </div>
  );
}

render() {
    const {
      list,
      current,
      expendKeys,
      // loading,
      requirementSeach,
      fetching,
      ownerList,
    } = this.state;
    const { total, loading } = this.props;
    return (
      <div>
        <Table
          columns={this.setColumns()}
          dataSource={list}
          expandedRowRender={item => this.renderExpand(item)}
          className="table-wrap"
          onExpand={this.onExpand}
          expandedRowKeys={expendKeys}
          rowKey="id"
          size="middle"
          loading={loading}
          pagination={false}
          expandIcon={props => {
            if (props.record.recordNum > 0) {
              if (!props.expanded) {
                return (
                  <div
                    role="button"
                    tabIndex="0"
                    className="ant-table-row-expand-icon ant-table-row-collapsed"
                    aria-label="展开行"
                    onClick={() => {
                      let extendLoading = this.state.extendLoading.set(
                        props.record.id,
                        true,
                      );

                      this.setState({ extendLoading });
                      this.seeDetail(props);
                    }}
                  ></div>
                );
              } else {
                return (
                  <div
                    role="button"
                    tabIndex="0"
                    className="ant-table-row-expand-icon ant-table-row-expanded"
                    aria-label="关闭行"
                    onClick={() => {
                      this.seeDetail(props);
                    }}
                  ></div>
                );
              }
            } else {
              return null;
            }
          }}
          footer={currentData => (
            <div style={{ height: '32px' }}>
              {
                <div
                  className="pagination"
                  style={{
                    display: total === 0 ? 'none' : 'block',
                    float: 'right',
                  }}
                >
                  <Pagination
                    onChange={this.onChangePagination}
                    current={current}
                    total={Number(total)}
                    pageSize={10}
                  />
                </div>
              }
            </div>
          )}
        />
        <TaskModal
          key="id"
          visible={this.state.taskVisible}
          caseInfo={this.state.caseInfo}
          onClose={this.onCloseTask}
          handleOkTask={this.handleOkTask}
          showTask={this.showTask}
          getOwnerList={this.getOwnerList}
          ownerList={ownerList}
          fetching={fetching}
          requirementSeach={requirementSeach}
          clearRequire={this.clearRequire}
          record={this.state.record}
          type={this.props.type}
          doneApiPrefix={this.props.doneApiPrefix}
          titleModeTask={this.state.titleModeTask}
          getCaseInfo={this.getCaseInfo}
        />
      </div>
    );
  }

render() {
    const that = this;
    const { list = [], show } = this.props;

    const cols = [
      {
        key: 'key',
        dataIndex: 'key',
        title: 'Key',
      },
      {
        key: 'resource_name',
        dataIndex: 'resource_name',
        title: '资源名',
      },
      {
        key: 'config_value',
        dataIndex: 'config_value',
        title: '配置中的值',
      },
      {
        key: 'resource_value',
        dataIndex: 'resource_value',
        title: '最新的资源值',
      },
    ];

    return (
      <Modal
        title="资源检查"
        visible={show}
        maskClosable
        onCancel={this.props.cancel}
        footer={null}
        destroyOnClose
        width={1200}
      >
        <div>
          <Table columns={cols} dataSource={list} />
          <Button type={'primary'} onClick={this.syncResource} disabled={list.length === 0}>
            一键同步
          </Button>
        </div>
      </Modal>
    );
  }

SpamDays = () => {
	let today = new Date();
	const [isLoading, setIsLoading] = useState(false);
	const [users, setUsers] = useState([]);

	const getBday = obj => {
		let days;
		if (obj.dob) {
			let bday = new Date(obj.dob.split("T")[0]);
			let bdayThisYear = new Date(
				today.getFullYear(),
				bday.getMonth(),
				bday.getDate()
			);
			today.setHours(0, 0, 0, 0);
			if (today > bdayThisYear) {
				bdayThisYear.setFullYear(today.getFullYear() + 1);
			}
			let diff = bdayThisYear - today;
			days = Math.round(diff / 8.64e7);
		}

		if (days <= 30) {
			return { ...obj, daysLeft: days };
		}
	};

	useEffect(() => {
		(async () => {
			setIsLoading(true);
			let arr = [];
			try {
				let params = {
					sortBy: "name"
				};
				const { data } = await getUsersService(params);

				data.forEach(d => {
					if (getBday(d)) arr.push(getBday(d));
				});

				setUsers(arr);

				setIsLoading(false);
			} catch (err) {
				_notification("warning", "Error", err.message);
			}
		})();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);
	return (
		<>
			<Card style={{ marginTop: "16px" }}>
				<div
					style={{
						display: "flex",
						justifyContent: "space-between"
					}}
				>
					<h2 style={{ fontWeight: 700 }}>Spam Days</h2>
					<span>
						<FaBirthdayCake
							style={{ height: "2em", width: "auto" }}
						/>
					</span>
				</div>
				<hr />
				<Table
					loading={isLoading}
					dataSource={users}
					columns={columns}
					pagination={false}
				/>
			</Card>
		</>
	);
}

render() {

        const columns = [{
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: 'Host',
            dataIndex: 'host',
            key: 'host',
            defaultSortOrder: 'ascend',
        }, {
            title: 'Port',
            dataIndex: 'port',
            key: 'port',
        }, {
            title: 'Partitions as Leader',
            dataIndex: 'leaderPartitions',
            key: 'leaderPartitions',
            render: (leaderPartitions, record, index) => {
                return <Tooltip title={leaderPartitions.join('、')}>
                    <Button type="link" size='small'>{leaderPartitions.length}</Button>
                </Tooltip>;
            }
        }, {
            title: 'Partitions as Follower',
            dataIndex: 'followerPartitions',
            key: 'followerPartitions',
            render: (followerPartitions, record, index) => {
                return <Tooltip title={followerPartitions.join('、')}>
                    <Button type="link" size='small'>{followerPartitions.length}</Button>
                </Tooltip>;
            }
        }];

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        title={this.state.clusterName}
                        subTitle={<FormattedMessage id="broker-management" />}
                    />
                </div>

                <div className='kd-content'>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={8} key={1}>
                                <Title level={3}>Broker</Title>
                            </Col>
                            <Col span={16} key={2} style={{textAlign: 'right'}}>

                            </Col>
                        </Row>
                    </div>
                    <Table
                        rowKey='id'
                        dataSource={this.state.items}
                        columns={columns}
                        position={'both'}
                        size={'small'}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                    />
                </div>

            </div>
        );
    }

req_query(query) {
    const columns = [
      {
        title: '参数名称',
        dataIndex: 'name',
        width: 140,
        key: 'name',
      },
      {
        title: '类型',
        dataIndex: 'type',
        width: 140,
        key: 'type',
      },
      {
        title: '是否必须',
        width: 100,
        dataIndex: 'required',
        key: 'required',
      },
      {
        title: '示例',
        dataIndex: 'example',
        key: 'example',
        width: 80,
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
        },
      },
      {
        title: '备注',
        dataIndex: 'value',
        key: 'value',
        render(_, item) {
          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.value}</p>
        },
      },
    ]

    const dataSource = []
    if (query && query.length) {
      query.map((item, i) => {
        dataSource.push({
          key: i,
          name: item.name,
          value: item.desc,
          example: item.example,
          required: item.required == 0 ? '否' : '是',
          type: item.type,
        })
      })
    }

    return (
      <Table
        bordered
        size='small'
        pagination={false}
        columns={columns}
        dataSource={dataSource}
      />
    )
  }

render() {
    const {SysDepartmentModel: {tree}, form, submitting} = this.props;
    const {getFieldDecorator} = form;
    const columns = [
      {title: '部门名称', dataIndex: 'name'},
      {title: '排序 ', dataIndex: 'sort'},
      {
        title: '部门状态', dataIndex: 'state',
        render: (text, record) => this.renderStateTag(record.state),
      },
      {title: '备注', dataIndex: 'remark'},
      {title: '创建时间', dataIndex: 'createTime'},
      {
        title: '操作', dataIndex: 'action',
        render: (text, record) => (<Button.Group size="small">
          <Button type="link" size="small" onClick={() => this.handlerGetById(record.id)}>修改</Button>
          <Popconfirm
            title={`你确定要删除部门 ${record.name} 吗?`}
            onConfirm={() => this.handlerDeleteById(record.id)}
            okText="是"
            cancelText="否"
          >
            <Button type='link' size="small">删除</Button>
          </Popconfirm>
        </Button.Group>)
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card>
          <Form layout="inline" onSubmit={this.onSubmit}>
            <Row gutter={24}>
              <Col span={6}>
                <Form.Item label="部门名">
                  {getFieldDecorator('Departmentname', {})(
                    <Input placeholder="请输入部门名"/>,
                  )}
                </Form.Item>
              </Col>

              <Col span={12}>
                <div style={{float: 'right'}}>
                  <Button type="primary" htmlType="submit" loading={submitting}>
                    查询
                  </Button>
                  <Button loading={submitting} style={{marginLeft: 8}} onClick={() => {
                    this.props.form.resetFields();
                    this.fetchSysDepartmentList();
                  }}>
                    重置
                  </Button>
                </div>
              </Col>

            </Row>
          </Form>
          <Button type="primary" className={style.tool}
                  onClick={() => this.handlerVisibleAddModal()}>添加</Button>
          <Table
            className={style.table}
            columns={columns}
            rowKey={record => record.id}
            loading={submitting}
            dataSource={tree}
            pagination={false}
          />

          <SysDepartmentAdd
            visible={this.state.visibleAddModal}
            handlerVisibleAddModal={this.handlerVisibleAddModal}
          />

          <SysDepartmentUpdate
            visible={this.state.visibleUpdateModal}
            handlerVisibleAddModal={this.handlerVisibleUpdateModal}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

Chart7 = () => {
  return (
    <div>
      <div className="height-300 position-relative mb-3">
        <VectorMap
          map="us_aea"
          backgroundColor="transparent"
          containerStyle={{
            width: '100%',
            height: '100%',
          }}
          containerClassName="map"
          regionStyle={{
            initial: {
              fill: '#d1e6fa',
              'fill-opacity': 0.9,
              stroke: '#fff',
              'stroke-width': 2,
              'stroke-opacity': 0.05,
            },
            hover: {
              'fill-opacity': 0.8,
              fill: '#1b55e3',
              cursor: 'pointer',
            },
          }}
          series={{
            regions: [
              {
                attribute: 'fill',
                values: {
                  'US-CA': '#69b2f8',
                  'US-MO': '#69b2f8',
                  'US-FL': '#69b2f8',
                  'US-OR': '#69b2f8',
                  'US-TX': '#69b2f8',
                },
              },
            ],
          }}
        />
      </div>
      <div className={style.table}>
        <Table columns={columns} dataSource={data.table} pagination={false} />
      </div>
    </div>
  )
}