@fortawesome/free-solid-svg-icons#faStepBackward TypeScript Examples

render() {
    return(
      <div className="table-content-viewer">
        <div className={this.props.selectedTableType === TableType.COMPUTED ? 'content-view-header computed ' : this.props.selectedTableType === TableType.IMPORTED  ? 'content-view-header imported' : this.props.selectedTableType === TableType.LOOKUP ? 'content-view-header lookup' : this.props.selectedTableType === TableType.MANUAL ? 'content-view-header manual' : 'content-view-header part'}>
          <div className={this.props.selectedTableType === TableType.COMPUTED ? 'computed table-type-tag' : this.props.selectedTableType === TableType.IMPORTED  ? 'imported table-type-tag' : this.props.selectedTableType === TableType.LOOKUP ? 'lookup table-type-tag' : this.props.selectedTableType === TableType.MANUAL ? 'manual table-type-tag' : 'part table-type-tag'}>{TableType[this.props.selectedTableType]}</div>
          <h4 className="table-name">{this.props.selectedTableName}</h4>
          {this.getTableActionButtons()}
        </div>
        {this.state.hideTableActionMenu ? '' : <this.getCurrentTableActionMenuComponent/>}
        {this.state.showWarning ? <this.getShowWarningComponent />: ''}
        <div className="content-view-area">
          <table className="table">
            <thead>
              <tr className="headerRow" onMouseMove={(event) => {this.cellResizeMouseMove(event)}} onMouseUp={(event) => {this.cellResizeMouseUp(event)}}　ref={this.state.headerRowReference}>
                <th className="buffer"></th>
                {this.getPrimaryKeys().map((attributeName, index) => {
                  return(
                    <th key={attributeName} className="headings">
                      <div className="headerContent primary">{attributeName}</div>
                    </th>
                  )
                })}
                {this.getSecondaryKeys().map((attributeName, index) => {
                  return(
                    <th key={attributeName} className="headings">
                      <div className="headerContent secondary" style={{color: 'inherit'}}>{attributeName}</div>
                    </th>
                  )
                })}
              </tr>
            </thead>
            <tbody>
            {this.props.contentData.map((entry: any, tupleIndex: number) => {
              // creating reference for each body column to track the width
              return (
                <tr key={entry} className="tableRow" onMouseMove={(event) => {this.cellResizeMouseMove(event)}} onMouseUp={(event) => {this.cellResizeMouseUp(event)}}　ref={this.state.tuplesReference[tupleIndex]}>
                  <td className="check-box-cell">
                    <input type="checkbox" 
                      // disable multiple check for insert mode as well until multiple insert is supported.
                      disabled={this.state.selectedTupleIndex > -1 && this.state.selectedTupleIndex !== tupleIndex} 
                      onChange={(event) => this.handleCheckedEntry(event, tupleIndex)} 
                      checked={this.state.selectedTupleIndex === tupleIndex}/>
                  </td>
                  {entry.map((column: any, index: number) => {
                    return (
                      <td key={`${column}-${index}`} className="tableCell">{column} 
                      </td>)
                  })
                  }</tr>)
              })}
            </tbody>
          </table>
          <div className="paginator">
            <p>Total Table Entries: {this.props.totalNumOfTuples}</p>
            <div className="number-of-rows-per-page-input">
              <p>Number of row per page</p>
              <input type='number' value={this.props.tuplePerPage} onChange={this.handleNumberOfTuplesPerPageChange}></input>
            </div>
            {Object.entries(this.props.contentData).length ?
              <div className="controls">
                <FontAwesomeIcon className={true ? "backAll icon" : "backAll icon disabled"} icon={faStepBackward} onClick={() => this.goToFirstPage()} />
                <FontAwesomeIcon className={true  ? "backOne icon" : "backOne icon disabled"} icon={faChevronLeft} onClick={() => this.goBackwardAPage()} />
                Page: ({this.props.currentPageNumber + ' / ' + this.props.maxPageNumber})
                <FontAwesomeIcon className={true  ? "forwardOne icon" : "forwardOne icon disabled"} icon={faChevronRight} onClick={() => this.goForwardAPage()} />
                <FontAwesomeIcon className={true  ? "forwardAll icon" : "forwardAll icon disabled"} icon={faStepForward} onClick={() => this.goToLastPage()} />
              </div>
              : ''
            }
          </div>
        </div>
        {this.state.isWaiting ? (
          <div className="loadingBackdrop">
            <div className="loadingPopup">
              <BasicLoadingIcon size={80} />
              <p>{this.tableActionEnumToString(this.state.currentSelectedTableActionMenu)} in action, please hold.</p>
            </div>
          </div>
        ) : ''}
      </div>
    )
  }