semantic-ui-react#Table JavaScript Examples

Identifiers = ({ identifiers }) => {
  return (
    <>
      <Divider horizontal>Identifiers</Divider>
      {_isEmpty(identifiers) ? (
        'No identifiers'
      ) : (
        <Table definition>
          <Table.Body>
            <IdentifierRows identifiers={identifiers} />
          </Table.Body>
        </Table>
      )}
    </>
  );
}

function Main (props) {
  const { api, keyring } = useSubstrate();
  const accounts = keyring.getPairs();
  const [balances, setBalances] = useState({});

  useEffect(() => {
    const accountIDs = keyring.getPairs().map(account => utils.getEVMAccountID(keyring.decodeAddress(account.address)));
    let unsubscribeAll = null;
    api.query.evm.accounts.multi(accountIDs, (accounts) => {
      const balancesMap = accountIDs.reduce((acc, cur, idx) => {
        acc[cur] = utils.prettyBalance(accounts[idx].balance.toString(), { power: 18, decimal: 18, unit: 'ETH' });
        return acc;
      }, {});
      setBalances(balancesMap);
    }).then((unsubscribe) => {
      unsubscribeAll = unsubscribe;
    }).catch(console.error);

    return () => unsubscribeAll && unsubscribeAll();
  }, [api.query.evm.accounts, keyring]);

  return (
    <Grid.Column>
      <h1>EVM Accounts</h1>
      <Table celled striped size='small'>
        <Table.Body>{accounts.map(account =>
          <Table.Row key={account.address}>
            <Table.Cell textAlign='right'>{account.meta.name}</Table.Cell>
            <Table.Cell>{utils.getEVMAccountID(keyring.decodeAddress(account.address))}</Table.Cell>
            <Table.Cell>{balances[utils.getEVMAccountID(keyring.decodeAddress(account.address))]}</Table.Cell>
          </Table.Row>
        )}
        </Table.Body>
      </Table>
    </Grid.Column>
  );
}

TableExample = () => (
  <Table celled unstackable striped className="dnxTable">
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Header1</Table.HeaderCell>
        <Table.HeaderCell>Header2</Table.HeaderCell>
        <Table.HeaderCell>Header3</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell data-label="Header1">Cell</Table.Cell>
        <Table.Cell data-label="Header2">Cell</Table.Cell>
        <Table.Cell data-label="Header3">Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell data-label="Header1">Cell</Table.Cell>
        <Table.Cell data-label="Header2">Cell</Table.Cell>
        <Table.Cell data-label="Header3">Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell data-label="Header1">Cell</Table.Cell>
        <Table.Cell data-label="Header2">Cell</Table.Cell>
        <Table.Cell data-label="Header3">Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
)

render(){
        const { Row, Cell} = Table;
        const {id, request, approversCount} = this.props;
        const readyToFinalize = request.approvalCount > approversCount/2;

        return (
            <Row disabled={request.complete} positive={readyToFinalize && !request.complete}>
                <Cell>{id+1}</Cell>
                <Cell>{request.description}</Cell>
                <Cell>{web3.utils.fromWei(request.value,'ether')}</Cell>
                <Cell>{request.recipient}</Cell>
                <Cell>{request.approvalCount}/{approversCount}</Cell>
                <Cell>
                    {
                        request.complete ? null : (
                            <Button color="green" basic onClick={this.onApprove}>Approve</Button>
                        )
                    }
                </Cell>
                <Cell>
                    {
                        request.complete ? null : (
                            <Button color="teal" basic onClick={this.onFinalize}>Finalize</Button>
                        )
                    }
                </Cell>
            </Row>
        )
    }

render() {
    const {
      allRowsNumber,
      currentPage,
      showMaxRows,
      showAllResults,
      columnsNumber,
      seeAllComponent,
      paginationComponent,
      showFooterSummary,
    } = this.props;
    const start = showAllResults ? 0 : (currentPage - 1) * showMaxRows;
    const end = showAllResults
      ? allRowsNumber
      : Math.min(start + showMaxRows, allRowsNumber);
    return showAllResults || allRowsNumber > showMaxRows ? (
      <Table.Footer fullWidth data-test="footer">
        <Table.Row>
          <Table.HeaderCell colSpan={columnsNumber + 1} textAlign="right">
            {showFooterSummary && (
              <span className="results-table-compact-summary">
                Showing entries {start + 1}-{end} of {allRowsNumber}{' '}
              </span>
            )}
            <span>{seeAllComponent}</span>
            <span>{paginationComponent}</span>
          </Table.HeaderCell>
        </Table.Row>
      </Table.Footer>
    ) : null;
  }

render() {
    // const challengeInterestArray = this.findInterests();
    // console.log(challengeInterestArray);
    return (
        <Table.Row>
          <Table.Cell width={2}>{this.props.minorParticipants.username}</Table.Cell>
          <Table.Cell width={5}>{this.props.minorParticipants.parentFirstName}</Table.Cell>
          <Table.Cell width={5}>{this.props.minorParticipants.parentLastName}</Table.Cell>
          <Table.Cell width={5}>{this.props.minorParticipants.parentEmail}</Table.Cell>
          {/* eslint-disable-next-line max-len */}
          <Table.Cell width={2}><Button><Link to={`/edit-challenge/${this.props.minorParticipants._id}`} style={{ color: 'rgba(0, 0, 0, 0.6)' }}>Edit</Link></Button></Table.Cell>
          {/* eslint-disable-next-line max-len */}
          <Table.Cell width={2}><Button negative onClick={() => this.removeItem(this.props.minorParticipants._id)}>Delete</Button></Table.Cell>
        </Table.Row>
    );
  }

IdentifierRows = ({ includeSchemes, identifiers }) => {
  const idsByScheme = {};
  for (const id of identifiers) {
    // Only include whitelisted schemes if includeSchemes is set
    if (includeSchemes.length === 0 || includeSchemes.includes(id.scheme)) {
      const value = { value: id.value, material: id.material };
      if (id.scheme in idsByScheme) {
        idsByScheme[id.scheme].push(value);
      } else {
        idsByScheme[id.scheme] = [value];
      }
    }
  }

  return Object.entries(idsByScheme).map(([scheme, ids]) => {
    const values = ids.map((id) => (
      <>
        {id.value}
        {id.material && (
          <>
            {' '}
            <InfoPopup message="Material for this identifier">
              ({capitalize(id.material)})
            </InfoPopup>
          </>
        )}
      </>
    ));
    return (
      <Table.Row key={scheme}>
        <Table.Cell width={4}>{scheme}</Table.Cell>
        <Table.Cell>
          <SeparatedList items={values} />
        </Table.Cell>
      </Table.Row>
    );
  });
}

FileTableHeader = ({ isDraftRecord }) => (
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>
        {i18next.t('Preview')}{' '}
        <Popup
          content="Set the default preview"
          trigger={<Icon fitted name="help circle" size="small" />}
        />
      </Table.HeaderCell>
      <Table.HeaderCell>
        {i18next.t('Filename')}
      </Table.HeaderCell>
      <Table.HeaderCell>
        {i18next.t('Size')}
      </Table.HeaderCell>
      {isDraftRecord && (
        <Table.HeaderCell textAlign="center">
          {i18next.t('Progress')}
        </Table.HeaderCell>
      )}
      {isDraftRecord && <Table.HeaderCell />}
    </Table.Row>
  </Table.Header>
)

export function TokenIntrospect({ introspection }) {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Value</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        {Object.entries(introspection).map(([key, val]) => {
          return (
            <Table.Row key={key}>
              <Table.Cell>{key}</Table.Cell>
              <Table.Cell style={{ 'overflow-wrap': 'anywhere' }}>
                {val}
              </Table.Cell>
            </Table.Row>
          );
        })}
      </Table.Body>
    </Table>
  );
}

render() {
        return (
            <Table.Row disabled={this.props.loading}>
                <Table.Cell>{this.props.word}</Table.Cell>
                <Table.Cell>
                    <Dropdown
                        fluid
                        selection
                        name='weight'
                        value={this.state.weight}
                        options={[
                            { key: 'A', text: 'A', value: 'A' },
                            { key: 'B', text: 'B', value: 'B' },
                            { key: 'C', text: 'C', value: 'C' },
                            { key: 'D', text: 'D', value: 'D' },
                        ]}
                        onChange={this.handleSelectChange}
                    />
                </Table.Cell>
                <Table.Cell textAlign='right' collapsing>
                    <ConfirmDeleteDialog
                        id={this.props.word}
                        table='weights'
                    />
                </Table.Cell>
            </Table.Row>
        );
    }

render() {
    if (this.state.redirectToReferer) {
      const from = { pathname: ROUTES.LANDING };
      return <Redirect to={from}/>;
    }
    return (
        <div style={{ paddingBottom: '50px' }}>
          <div style={{
            backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
            borderRadius: '2rem',
          }}>
          <Header as="h2" textAlign="center">Minor Participants List ({this.props.MinorParticipantsID.length})</Header>
            <Button color="green" onClick={() => this.download()}>Download minor participants</Button>
          </div>
          <div style={{
            borderRadius: '1rem',
            backgroundColor: '#E5F0FE',
          }}>
          <Table fixed>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Minor Participant Name</Table.HeaderCell>
                <Table.HeaderCell>Parent Name (Email)</Table.HeaderCell>
                <Table.HeaderCell>Compliant</Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>{this.renderMinorParticipants()}</Table.Body>
          </Table>
          <Grid centered >

              <Button type='button' style={{ textAlign: 'center', color: 'white', backgroundColor: '#DB2828',
                margin: '2rem 0rem' }} onClick = {() => this.submitData()}>submit</Button>
          </Grid>

          </div>
        </div>
    );
  }

TableLocalAppState = () => {
  
  return (
    <Table celled>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Alice</Table.HeaderCell>
          <Table.HeaderCell>Bob</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell><GetAppLocalState who={0}/></Table.Cell>
          <Table.Cell><GetAppLocalState who={1}/></Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell></Table.Cell>
          <Table.Cell><OptInApp who={1}/></Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell><CallApp who={0}/></Table.Cell>
          <Table.Cell><CallApp who={1}/></Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

render() {
    return (
        <Table.Row>
          <Table.Cell>{this.props.tools.name}</Table.Cell>
          <Table.Cell>{this.props.tools.description}</Table.Cell>
          {/* eslint-disable-next-line max-len */}
          <Table.Cell width={2}><Button><Link to={`/edit-tool/${this.props.tools._id}`} style={{ color: 'rgba(0, 0, 0, 0.6)' }}>Edit</Link></Button></Table.Cell>
          {/* eslint-disable-next-line max-len */}
          <Table.Cell width={2}><Button negative onClick={() => this.removeItem(this.props.tools._id)}>Delete</Button></Table.Cell>
        </Table.Row>
    );
  }

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

    return items.map((item) => (
      <Table.Row key={item.pid}>
        <Table.Cell
          data-label="Barcode"
          className="document-item-table-itemCell"
        >
          {item.barcode}
        </Table.Cell>

        <Media greaterThanOrEqual="tablet">
          <Table.Cell
            data-label="Shelf"
            className="document-item-table-itemCell"
          >
            {item.shelf}
          </Table.Cell>
        </Media>

        <Media lessThan="tablet">
          <Table.Cell
            data-label="Shelf"
            className="document-item-table-itemCell"
          >
            {item.shelf || 'none'}
          </Table.Cell>
        </Media>

        <Table.Cell data-label="Status">{this.statusLabel(item)}</Table.Cell>
        <Table.Cell data-label="Medium">
          {getDisplayVal('ITEMS.mediums', item.medium)}
        </Table.Cell>
        <Table.Cell data-label="Restrictions">
          {getDisplayVal(
            'ITEMS.circulationRestrictions',
            item.circulation_restriction
          )}
        </Table.Cell>
      </Table.Row>
    ));
  }

render() {
    // console.log('ManageMinorWidget');
    return (
        <div style={{ backgroundColor: '#C4C4C4', paddingBottom: '50px' }}>
          <Grid container centered>
            <Grid.Column>
              <div style={{
                backgroundColor: '#393B44', padding: '1rem 0rem', margin: '2rem 0rem',
                borderRadius: '2rem',
              }}>
                <Header as="h2" textAlign="center" inverted>Minor Participant</Header>
                <Header as="h2" textAlign="center" inverted>{this.props.minorParticipants.length}</Header>
              </div>
              <Segment style={{
                borderRadius: '1rem',
                backgroundColor: '#393B44',
              }} className={'teamCreate'}>
                <Header as="h2" textAlign="center" inverted>Information</Header>
                <Table fixed columns={5}>
                  <Table.Header>
                    <Table.Row>
                      <Table.HeaderCell width={2}>Username</Table.HeaderCell>
                      <Table.HeaderCell width={5}>Parent/Guardian:FirstName</Table.HeaderCell>
                      <Table.HeaderCell width={5}>Parent/Guardian:LastName</Table.HeaderCell>
                      <Table.HeaderCell width={5}>Parent/Guardian:Email</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Approve</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Delete</Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  {/* eslint-disable-next-line max-len */}
                  <Table.Body>{this.props.minorParticipants.map((minorParticipants => <ListMinorWidget key={minorParticipants._id} minorParticipants={minorParticipants} />
                  ))}
                  </Table.Body>
                </Table>
              </Segment>
            </Grid.Column>
          </Grid>
        </div>
    );
  }

function customerDataTable(items) {
  const table =
    <Table celled striped>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell colSpan='2'>{items.telephoneNumber}</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row>
          <Table.Cell collapsing>
            Name
          </Table.Cell>
          <Table.Cell>{items.firstName} {items.lastName}</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell collapsing>
            Mood
          </Table.Cell>
          <Table.Cell>{items.choice}</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell collapsing>
            contactAttempts
          </Table.Cell>
          <Table.Cell>{items.contactAttempts}</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell collapsing>
            lastAttemptDateTime
          </Table.Cell>
          <Table.Cell>{items.lastAttemptDateTime}</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell collapsing>
            lastSuccessDateTime
          </Table.Cell>
          <Table.Cell>{items.lastSuccessDateTime}</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell collapsing>
            SuccessfulConnections
          </Table.Cell>
          <Table.Cell>{items.successfulConnections}</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell collapsing>
            Enabled (0=False 1=True)
          </Table.Cell>
          <Table.Cell>{items.enabled}</Table.Cell>
        </Table.Row>

        <Table.Row>
          <Table.Cell collapsing>
            Created
          </Table.Cell>
          <Table.Cell>{items.createdDateTime}</Table.Cell>
        </Table.Row>

      </Table.Body>
    </Table>;
  return table;
}

renderStats() {
    const { isLoading, error, documentStats, documentDetails } = this.props;
    const renewalCount = sumBy(
      documentStats.hits,
      (loan) => loan.metadata.extension_count
    );
    const pastLoans = documentStats.total || 0;
    const itemsCount =
      documentDetails.metadata.circulation.can_circulate_items_count;
    const avgLoans = itemsCount ? (pastLoans / itemsCount).toFixed(1) : '-';

    return (
      <Loader isLoading={isLoading}>
        <Error error={error}>
          <Table basic="very" textAlign="right">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>past loans</Table.HeaderCell>
                <Table.HeaderCell>renewals</Table.HeaderCell>
                <Table.HeaderCell>
                  average{' '}
                  <Popup
                    position="top right"
                    content={`This average is computed with the number of past
                    loans on the selected range of dates, and the current number
                    of items (${itemsCount}) of the document.`}
                    trigger={<Icon name="info circle" size="small" />}
                  />
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell>{pastLoans}</Table.Cell>
                <Table.Cell>{renewalCount}</Table.Cell>
                <Table.Cell data-test="cell-average">{avgLoans}</Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </Error>
      </Loader>
    );
  }

function LocationRawDataViewChild({ __id }) {
  const locationUrl = useRecoilValue(locationURLFromId(__id));
  const [locationInfo, setLocationInfo] = useState({});

  useEffect(() => {
    let unmounted = false;
    fetch(locationUrl, {
      headers: {
        Authorization: `Bearer ${authState.accessToken.access_token}`,
      },
    })
      .then(res => res.json())
      .then(jsonDat => {
        if (!unmounted) setLocationInfo(jsonDat);
      });

    return function cleanup() {
      unmounted = true;
    };
  }, [locationUrl]);

  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Value</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        {Object.entries(locationInfo).map(([key, val]) => {
          const _val = typeof val === 'object' ? JSON.stringify(val) : val;
          return (
            <Table.Row key={key}>
              <Table.Cell>{key}</Table.Cell>
              <Table.Cell style={{ overflowWrap: 'anywhere' }}>
                {_val}
              </Table.Cell>
            </Table.Row>
          );
        })}
      </Table.Body>
    </Table>
  );
}

render() {
        return (
            <Table celled compact sortable>
                <Table.Header fullWidth>
                    <Table.Row>
                        <Table.HeaderCell
                            sorted={this.props.sortedColumn === 'key' ? this.props.sortDirection : null}
                            onClick={() => {this.props.changeConjunctionSort('key');}}
                        >Medical Abbreviation</Table.HeaderCell>
                        <Table.HeaderCell
                            sorted={this.props.sortedColumn === 'value' ? this.props.sortDirection : null}
                            onClick={() => {this.props.changeConjunctionSort('value');}}
                        >Meaning</Table.HeaderCell>
                        <Table.HeaderCell collapsing textAlign='center'>
                            <AddConjunctionForm/>
                        </Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {this.props.conjunctions.map((conj, index) =>
                        <Table.Row disabled={this.props.loading}>
                            <Table.Cell>{conj.key}</Table.Cell>
                            <Table.Cell>{conj.value}</Table.Cell>
                            <Table.Cell textAlign='right' collapsing>
                                <ModifyConjunctionForm
                                    abbrev={conj.key}
                                    meaning={conj.value}
                                />
                                <ConfirmDeleteDialog
                                    id={conj.key}
                                    table='conj'
                                />
                            </Table.Cell>
                        </Table.Row>
                    )}
                </Table.Body>


                <Table.Footer fullWidth>
                    <Table.Row>
                        <Table.HeaderCell colSpan='8'>
                            {/*<Button size='small'>A Button</Button>*/}
                            {/*<Button disabled size='small'>*/}
                            {/*    Another Button*/}
                            {/*</Button>*/}
                        </Table.HeaderCell>
                    </Table.Row>
                </Table.Footer>
            </Table>
        )
    }

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

    return (
      <>
        <Divider horizontal>Details</Divider>
        <Table definition>
          <Table.Body>
            <Table.Row>
              <Table.Cell width={4}>Title</Table.Cell>
              <Table.Cell>{metadata.title}</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell width={4}>Alternative titles</Table.Cell>
              <Table.Cell>
                <List bulleted>
                  {(metadata.alternative_titles || []).map((entry) => (
                    <List.Item key={entry.value}>
                      <List.Content className="alternative-title">
                        {entry.value}
                      </List.Content>
                    </List.Item>
                  ))}
                </List>
              </Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell width={4}>Authors</Table.Cell>
              <Table.Cell>
                <DocumentAuthors
                  authors={metadata.authors}
                  hasOtherAuthors={metadata.other_authors}
                  withPopUpShowMoreFields
                  limit={invenioConfig.LITERATURE.authors.maxDisplay}
                  scrollLimit={300}
                  expandable
                  withVerticalScroll
                />
              </Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell width={4}>Publication year</Table.Cell>
              <Table.Cell>{metadata.publication_year}</Table.Cell>
            </Table.Row>
            {metadata.edition && (
              <Table.Row>
                <Table.Cell width={4}>Edition</Table.Cell>
                <Table.Cell>{metadata.edition}</Table.Cell>
              </Table.Row>
            )}

            {this.renderLanguages()}
            {this.renderKeywords()}
          </Table.Body>
        </Table>
        {!isEmpty(metadata.imprint) ? (
          <>
            <Divider horizontal>Publishing details</Divider>
            <MetadataTable rows={this.prepareImprintInfo()} />
          </>
        ) : null}
        {metadata.urls && (
          <>
            <Divider horizontal>More information</Divider>
            <LiteratureUrls urlArray={metadata.urls} />
          </>
        )}
      </>
    );
  }

render() {
        return (
            <Table celled compact sortable >
                <Table.Header fullWidth>
                    <Table.Row>
                        <Table.HeaderCell
                            sorted={this.props.sortedColumn === 'exam' ? this.props.sortDirection : null}
                            onClick={() => this.props.changeSpecialtyExamSort()}
                        >Specialty Exam</Table.HeaderCell>
                        <Table.HeaderCell collapsing textAlign='center'>
                            <AddSpecialtyExamForm/>
                        </Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {this.props.specialtyExam.map((specialtyExam, index) =>
                        <Table.Row disabled={this.props.loading}>
                            <Table.Cell>{specialtyExam}</Table.Cell>
                            <Table.Cell textAlign='right' collapsing>
                                <ConfirmDeleteDialog
                                    id={specialtyExam}
                                    table='specialtyExam'
                                />
                            </Table.Cell>
                        </Table.Row>
                    )}
                </Table.Body>


                <Table.Footer fullWidth>
                    <Table.Row>
                        <Table.HeaderCell colSpan='8'>
                            {/*<Button size='small'>A Button</Button>*/}
                            {/*<Button disabled size='small'>*/}
                            {/*    Another Button*/}
                            {/*</Button>*/}
                        </Table.HeaderCell>
                    </Table.Row>
                </Table.Footer>
        </Table >
        )
    }

render() {
    const { conference } = this.props;
    return (
      <Overridable id="DocumentConference.layout" conference={conference}>
        <>
          <Divider horizontal>Conference information</Divider>
          {_isEmpty(conference) && 'No conference information.'}
          {conference.map((conf) => {
            return (
              <>
                <Table definition key={conf}>
                  <Table.Body>
                    <Table.Row>
                      <Table.Cell width={4}>Conference</Table.Cell>
                      <Table.Cell>{conf.title}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>Acronym</Table.Cell>
                      <Table.Cell>{conf.acronym}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>Dates</Table.Cell>
                      <Table.Cell>{conf.dates}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>Identifiers</Table.Cell>
                      <Table.Cell>
                        {conf.identifiers &&
                          conf.identifiers.map(
                            (identifier) =>
                              '(' + identifier.scheme + ') ' + identifier.value
                          )}
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>Place</Table.Cell>
                      <Table.Cell>{conf.place}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>Series number</Table.Cell>
                      <Table.Cell>{conf.series}</Table.Cell>
                    </Table.Row>
                  </Table.Body>
                </Table>
                <br />
              </>
            );
          })}
        </>
      </Overridable>
    );
  }

render() {
        return (
            <Table celled compact sortable>
                <Table.Header fullWidth>
                    <Table.Row>
                        <Table.HeaderCell
                            sorted={this.props.sortedColumn === 'word' ? this.props.sortDirection : null}
                            onClick={() => this.props.changeSpellcheckSort()}
                        >Word</Table.HeaderCell>
                        <Table.HeaderCell collapsing textAlign='center'>
                            <AddSpellcheckWordForm/>
                        </Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {this.props.spellcheck.map((spell, index) =>
                        <Table.Row disabled={this.props.loading}>
                            <Table.Cell>{spell}</Table.Cell>
                            <Table.Cell textAlign='right' collapsing>
                                <ConfirmDeleteDialog
                                    id={spell}
                                    table='spell'
                                />
                            </Table.Cell>
                        </Table.Row>
                    )}
                </Table.Body>


                <Table.Footer fullWidth>
                    <Table.Row>
                        <Table.HeaderCell colSpan='8'>
                            {/*<Button size='small'>A Button</Button>*/}
                            {/*<Button disabled size='small'>*/}
                            {/*    Another Button*/}
                            {/*</Button>*/}
                        </Table.HeaderCell>
                    </Table.Row>
                </Table.Footer>
            </Table>
        )
    }

render() {
    const { columns, rows } = this.props;
    return <Table.Body>{this.renderRow(columns, rows)}</Table.Body>;
  }

export default function ContactTable() {
  // Subscribe to `contacts` state and access dispatch function
  const [state, dispatch] = useContext(ContactContext);
  // Declare a local state to be used internally by this component
  const [selectedId, setSelectedId] = useState();

  const delContact = id => {
    dispatch({
      type: "DEL_CONTACT",
      payload: id
    });
  };

  const onRemoveUser = () => {
    delContact(selectedId);
    setSelectedId(null); // Clear selection
  };

  const rows = state.contacts.map(contact => (
    <Table.Row
      key={contact.id}
      onClick={() => setSelectedId(contact.id)}
      active={contact.id === selectedId}
    >
      <Table.Cell>{contact.id}</Table.Cell>
      <Table.Cell>{contact.name}</Table.Cell>
      <Table.Cell>{contact.email}</Table.Cell>
    </Table.Row>
  ));

  return (
    <Segment>
      <Table celled striped selectable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>{rows}</Table.Body>
        <Table.Footer fullWidth>
          <Table.Row>
            <Table.HeaderCell />
            <Table.HeaderCell colSpan="4">
              <Button
                floated="right"
                icon
                labelPosition="left"
                color="red"
                size="small"
                disabled={!selectedId}
                onClick={onRemoveUser}
              >
                <Icon name="trash" /> Remove User
              </Button>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
    </Segment>
  );
}

TableExamplePagination = () => (
  <Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Label ribbon>First</Label>
        </Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>

    <Table.Footer>
      <Table.Row>
        <Table.HeaderCell colSpan="3">
          <Menu floated="right" pagination>
            <Menu.Item as="a" icon>
              <Icon name="chevron left" />
            </Menu.Item>
            <Menu.Item as="a">1</Menu.Item>
            <Menu.Item as="a">2</Menu.Item>
            <Menu.Item as="a">3</Menu.Item>
            <Menu.Item as="a">4</Menu.Item>
            <Menu.Item as="a" icon>
              <Icon name="chevron right" />
            </Menu.Item>
          </Menu>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Footer>
  </Table>
)

render() {
    //console.log("this.items");
    //console.log(this.state.items);

    var tableitems = this.state.items.sort( compare );
    var tablerows = tableitems.map(function (item, i) {
      let toggleEnabled;
      if (item.enabled === "0"){
        toggleEnabled = <Checkbox toggle checked={false} onChange={(event) => this.onEnabledClickHandler(item, i, event, "1")} /> // click enables "1"
      };
      if (item.enabled === "1") { 
        toggleEnabled = <Checkbox toggle checked={true} onChange={(event) => this.onEnabledClickHandler(item, i, event, "0")} />  // click disabled "0"
      }; 
      return <Table.Row key={i} >
        <Table.Cell collapsing>{item.telephoneNumber}</Table.Cell>
        <Table.Cell>{item.firstName} {item.lastName}</Table.Cell>
        <Table.Cell>{toggleEnabled}</Table.Cell>
        <Table.Cell><Button negative circular icon='delete' onClick={(event) => this.onDeleteClickHandler(item, i, event)}/></Table.Cell>
      </Table.Row>
    }.bind(this));

    var leftDisabled = false
    var rightDisabled = false
    if(this.state.scanIndexForward === false && this.state.lastEvaluatedKey === ""){leftDisabled = true} else {leftDisabled = false};
    if(this.state.scanIndexForward === true  && this.state.lastEvaluatedKey === ""){rightDisabled = true} else {rightDisabled = false};
    if(this.state.pageturns < 2){leftDisabled = true} // handle just started use case


    const table =
    <div>
      <Table celled striped>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Telephone</Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell><Checkbox toggle checked={this.state.filterEnabled} onClick={(event) => this.onFilterEnabledClickHandler()}/> Enabled</Table.HeaderCell>
            <Table.HeaderCell>Delete</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {tablerows}
        </Table.Body>
      </Table>
      
      <Button icon labelPosition='left' onClick={(event) => this.componentDidMount(true)} disabled={leftDisabled}><Icon name='left arrow' />Back</Button>
      <Button icon labelPosition='right' onClick={(event) => this.componentDidMount(false)} disabled={rightDisabled}>Next<Icon name='right arrow' /></Button>
    </div>
    return table;
  }

AusSummary = ({ pageId, data, setActive }) => {
  let OFFSET = {};
  let offsetText = '';
  try {
    OFFSET = JSON.parse(data.offset[1].config);
    for (const key in OFFSET) {
      if (OFFSET.hasOwnProperty(key)) {
        const stateOffset = OFFSET[key];
        if (
          stateOffset.totalConfirmed &&
          stateOffset.totalConfirmed !== 0 &&
          key !== 'AUS'
        ) {
          if (offsetText) {
            offsetText += ', ';
          }
          offsetText += `${key} State ${
            data[key].dailyHistorys[data[key].dailyHistorys.length - 1]
              .totalConfirmed
          }`;
        }
      }
    }
    if (offsetText) {
      offsetText += '.';
    }
  } catch (error) {
    OFFSET = {};
    console.error(error);
  }
  const dailyHistorys = data[pageId].dailyHistorys;
  const todaySummary = dailyHistorys[dailyHistorys.length - 1];
  const totalRemianNumber =
    todaySummary.totalConfirmed -
    todaySummary.totalDeath -
    todaySummary.totalRecovered;
  const totalConfirmed = getActualNumber(
    OFFSET,
    pageId,
    'totalConfirmed',
    todaySummary
  );
  const totalRecovered = getActualNumber(
    OFFSET,
    pageId,
    'totalRecovered',
    todaySummary
  );
  const totalDeath = getActualNumber(
    OFFSET,
    pageId,
    'totalDeath',
    todaySummary
  );
  let totalTested = 0;
  states.forEach(state => {
    totalTested += data[state].statistics[0]['total tested'];
  });
  return (
    <div className='summary'>
      {
        // eslint-disable-next-line
        <a id='summary' className='target'></a>
      }
      <h2 className='ui small header'>Summary data:</h2>
      <Grid columns='equal'>
        <Grid.Column>
          <Statistic color='blue' label='Active' value={totalRemianNumber} />
        </Grid.Column>
        <Grid.Column>
          <NewNumber newNumber={todaySummary.newConfirmed} showDonut={true} />
          <Statistic color='red' label='Total' value={totalConfirmed} />
        </Grid.Column>
        <Grid.Column>
          <NewNumber newNumber={todaySummary.newDeath} />
          <Statistic
            color='grey'
            label='Death'
            value={getActualNumber(OFFSET, pageId, 'totalDeath', todaySummary)}
          />
        </Grid.Column>
        <Grid.Column>
          <NewNumber newNumber={todaySummary.newRecovered} showZero={false} />
          <Statistic color='green' label='Recovered' value={totalRecovered} />
        </Grid.Column>
      </Grid>
      <Table unstackable compact>
        <Table.Header>
          <Table.Row textAlign='center'>
            <Table.HeaderCell>State</Table.HeaderCell>
            <Responsive as='th' minWidth={Responsive.onlyTablet.minWidth}>
              Active
            </Responsive>
            <Table.HeaderCell>Total</Table.HeaderCell>
            <Table.HeaderCell>Death</Table.HeaderCell>
            <Table.HeaderCell>
              Recovered
              <ResponsiveDiv>
                <small>(%)</small>
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              Tested
              <ResponsiveDiv>
                <small>(positive %)</small>
              </ResponsiveDiv>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {states.map(state => {
            const dailyHistorys = data[state].dailyHistorys;
            const todaySummary = dailyHistorys[dailyHistorys.length - 1];
            const statistic = data[state].statistics[0];
            const totalTested = statistic
              ? statistic['total tested']
              : 'pending';
            const totalTestedReport = data[state].totalTestedReport;
            const totalConfirmed = getActualNumber(
              OFFSET,
              state,
              'totalConfirmed',
              todaySummary
            );
            const totalRecovered = getActualNumber(
              OFFSET,
              state,
              'totalRecovered',
              todaySummary
            );
            const totalDeath = getActualNumber(
              OFFSET,
              state,
              'totalDeath',
              todaySummary
            );

            return (
              <Table.Row textAlign='center' key={state}>
                <Table.Cell>
                  <NavLink
                    exact
                    activeClassName='active'
                    to={state}
                    onClick={() => setActive(state)}
                  >
                    {state}
                  </NavLink>
                </Table.Cell>
                <Responsive as='td' minWidth={Responsive.onlyTablet.minWidth}>
                  {todaySummary.totalConfirmed -
                    todaySummary.totalRecovered -
                    todaySummary.totalDeath}
                </Responsive>
                <Table.Cell>
                  <strong>{totalConfirmed}</strong>
                  {OFFSET[state] &&
                    typeof OFFSET[state].totalConfirmed === 'number' &&
                    OFFSET[state].totalConfirmed !== 0 && <span>*</span>}
                  <ResponsiveDiv>
                    <NewNumber
                      newNumber={todaySummary.newConfirmed}
                      showDonut={true}
                      className='new-number'
                    />
                  </ResponsiveDiv>
                </Table.Cell>
                <Table.Cell>
                  {totalDeath}{' '}
                  <ResponsiveDiv>
                    <NewNumber
                      newNumber={todaySummary.newDeath}
                      className='new-number'
                    />
                  </ResponsiveDiv>
                </Table.Cell>
                <Table.Cell>
                  {totalRecovered}
                  <ResponsiveDiv>
                    <small className='new-number'>
                      {((totalRecovered / totalConfirmed) * 100).toFixed(0)}%
                    </small>
                  </ResponsiveDiv>
                </Table.Cell>
                <Table.Cell>
                  {totalTestedReport && totalTestedReport.count
                    ? Math.max(
                        totalTestedReport.count,
                        totalTested
                      ).toLocaleString()
                    : totalTested.toLocaleString()}
                  <ResponsiveDiv>
                    <small>
                      ({((totalConfirmed / totalTested) * 100).toFixed(1)}
                      %)
                    </small>
                  </ResponsiveDiv>
                </Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>
        <Table.Footer>
          <Table.Row textAlign='center'>
            <Table.HeaderCell>Total</Table.HeaderCell>
            <Responsive as='th' minWidth={Responsive.onlyTablet.minWidth}>
              {totalRemianNumber.toLocaleString()}
            </Responsive>
            <Table.HeaderCell>
              <strong>{totalConfirmed.toLocaleString()}</strong>
              <ResponsiveDiv>
                <NewNumber
                  newNumber={todaySummary.newConfirmed}
                  showDonut={true}
                  className='new-number'
                />
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              {totalDeath.toLocaleString()}
              <ResponsiveDiv>
                <NewNumber
                  newNumber={todaySummary.newDeath}
                  className='new-number'
                />
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              {totalRecovered.toLocaleString()}
              <ResponsiveDiv>
                <small className='new-number'>
                  {((totalRecovered / totalConfirmed) * 100).toFixed(0)}%
                </small>
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              {totalTested.toLocaleString()}
              <ResponsiveDiv>
                <small>
                  ({((totalConfirmed / totalTested) * 100).toFixed(1)}%)
                </small>
              </ResponsiveDiv>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
      {offsetText && (
        <p style={{ marginTop: '10px' }}>
          <small>
            * Numbers in this national summary page reconciles with{' '}
            <a href='https://www.health.gov.au/resources/publications/coronavirus-covid-19-at-a-glance'>
              Feds number
            </a>
            , states with different number: {offsetText}
          </small>
          <br />
          <small>
            * Reason for that is the federal government reports cases according
            to residency while states generally report cases diagnosed in the
            state.
          </small>
          <br />
          <small>
            * On 3 July, 189 historic cases reported in crew members on board a
            ship were classified as Australian cases and included in national
            NSW totals, dated 15 April.
          </small>
        </p>
      )}
    </div>
  );
}

render() {
    // console.log(this.state);
    return (
        <div style={{ paddingBottom: '50px' }}>
          <Grid container centered>
            <Grid.Column>
              <div style={{
                backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
                borderRadius: '2rem',
              }}>
                <Header as="h2" textAlign="center">Manage HACC</Header>
                <Header as="h5" textAlign="center">
                  <Radio toggle label="Can Create Teams"
                          checked={this.state.canCreateTeams}
                          onChange={this.toggleTeam} />&nbsp;
                  <Radio toggle label="Can Change Challenges"
                         checked={this.state.canChangeChallenges}
                         onChange={this.toggleChallenge} />
                </Header>
              </div>
              <Segment style={{
                borderRadius: '1rem',
                backgroundColor: '#E5F0FE',
              }} className={'teamCreate'}>
                <Header as="h2" textAlign="center" >Challenges</Header>
                <Table fixed columns={5}>
                  <Table.Header>
                    <Table.Row>
                      <Table.HeaderCell width={2}>Title</Table.HeaderCell>
                      <Table.HeaderCell width={5}>Description</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Submission Detail</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Pitch</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Edit</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Delete</Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  {/* eslint-disable-next-line max-len */}
                  <Table.Body>{this.props.challenges.map((challenges => <ChallengesAdminWidget key={challenges._id} challenges={challenges} />
                  ))}
                  </Table.Body>
                </Table>
                <div align='center'>
                  <Button style={{
                    color: 'white', backgroundColor: '#DB2828',
                    margin: '2rem 0rem',
                  }}><Link to={ROUTES.ADD_CHALLENGE} style={{ color: 'white' }}>Add Challenge</Link></Button>
                </div>
                <Header as="h2" textAlign="center">Skills</Header>
                <Table>
                  <Table.Header>
                    <Table.Row>
                      <Table.HeaderCell>Name</Table.HeaderCell>
                      <Table.HeaderCell>Description</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Edit</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Delete</Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  {/* eslint-disable-next-line max-len */}
                  <Table.Body>{this.props.skills.map((skills => <SkillsAdminWidget key={skills._id} skills={skills} />))}
                  </Table.Body>
                </Table>
                <div align='center'>
                  <Button style={{
                    color: 'white', backgroundColor: '#DB2828',
                    margin: '2rem 0rem',
                  }}><Link to={ROUTES.ADD_SKILL} style={{ color: 'white' }}>Add Skill</Link></Button>
                </div>
                <Header as="h2" textAlign="center">Tools</Header>
                <Table>
                  <Table.Header>
                    <Table.Row>
                      <Table.HeaderCell>Name</Table.HeaderCell>
                      <Table.HeaderCell>Description</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Edit</Table.HeaderCell>
                      <Table.HeaderCell width={2}>Delete</Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  <Table.Body>{this.props.tools.map((tools => <ToolsAdminWidget key={tools._id} tools={tools} />))}
                  </Table.Body>
                </Table>
                <div align='center'>
                  <Button style={{
                    color: 'white', backgroundColor: '#DB2828',
                    margin: '2rem 0rem',
                  }}><Link to={ROUTES.ADD_TOOL} style={{ color: 'white' }}>Add Tool</Link></Button>
                </div>
              </Segment>
            </Grid.Column>
          </Grid>
        </div>
    );
  }