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

render() {
    return (
      <div className="schema-menu">
        <div className="search-schema-field">
          <input type="text" onChange={this.onSearchStringChange} placeholder="Search Schema"/>
          <FontAwesomeIcon className="search-icon" icon={faSearch}/>
        </div>
        <div className="sort-schema-field">
          <div className="sort-field-head"><FontAwesomeIcon className="sort-icon" icon={faSortAmountDown} /><label>Sort<br />Schema</label></div>
          <select className="sort-schema-options" onChange={() => this.flipSchemaOrder()}>
            <option value="az">Alphabetical (A-Z)</option>
            <option value="za">Alphabetical (Z-A)</option>
          </select>
        </div>
        <div className="schema-listing">
          {this.state.restrictiedSchemaList.map((schema: string, schemaIndex: number) => {
            return (
              <div className={this.state.selectedSchemaIndex === schemaIndex ? 'schema-name selected' : 'schema-name'} key={schemaIndex} onClick={() => this.handleSchemaSelection(schemaIndex)} >{schema}</div>
            )
          })}
        </div>
      </div>
    )
  }

constructor(library: FaIconLibrary) {
    library.addIcons(fasStar, faCog, faDog, faWindowRestore)
    library.addIcons(
      farStar,
      farMoon,
      farSun,
      faSortAmountUp,
      faSortAmountDown,
      faSortAlphaUp,
      faSortAlphaDown
    )
  }

render() {
    return(
      <div className="table-menu">
         <div className="search-table-field">
          <input type="text" onChange={this.onSearchStringChange} value={this.state.searchString} placeholder="Search Table"/>
          <FontAwesomeIcon className="search-icon" icon={faSearch}/>
        </div>
        <div className="table-view-controls">
          <div className="sort-table-field">
            <div className="sort-field-head">
              <FontAwesomeIcon className="sort-icon" icon={faSortAmountDown} />
              <label>Sort<br />Table</label>
            </div>
            <select className="sort-table-options" onChange={this.changeTableSortMode}>
              <option value={TableSortMode.A_TO_Z_BY_TIER} selected={this.state.currentTableSortMode === TableSortMode.A_TO_Z_BY_TIER}>Alphabetical (A-Z)</option>
              <option value={TableSortMode.Z_TO_A_BY_TIER} selected={this.state.currentTableSortMode === TableSortMode.Z_TO_A_BY_TIER}>Alphabetical (Z-A)</option>
              {/* <option value="tb">Topological (top-bottom)</option> */}
              {/* <option value="bt">Topological (bottom-top)</option> */}
            </select>
          </div>
          <div className="view-all-part-tables">
            <div className="sort-field-head">
              <label>{this.state.viewAllPartTables ? 'Showing' : 'Hiding'} All Part Tables</label>
            </div>
            <div className="icon-container" onClick={() => this.toggleAllPartTableView()}>
              {this.state.viewAllPartTables ? <FontAwesomeIcon className="eye-icon" icon={faEye}/> : <FontAwesomeIcon className="eye-icon" icon={faEyeSlash}/>}
            </div>
          </div>
        </div>
        {this.props.tableListIsLoading ? 
        <TableListLoading /> : 
        <div className="table-listing">
          {!this.props.tableListDict ? <p className="unselectedSchemaMessage">Select a schema to see table listing</p> : ''}
          {
            this.state.restrictedTableList.map((table: ParentTableListEntry) => {
              return(
                <div key={`${table.tableName}-${table.tableType}`}>
                  <div className={this.props.selectedTableName === table.tableName && this.props.selectedTableType === table.tableType ? 'table-entry selected' : 'table-entry'} key={`${table.tableName}-${table.tableType}`} 
                  onClick={(event) => {this.props.onTableSelection(table.tableName, table.tableType)}}>
                    <p className="table-name">{table.tableName}</p>
                    <span className={table.tableType === TableType.COMPUTED ? 'computed tier-label' : (table.tableType === TableType.LOOKUP ? 
                      'lookup tier-label' : (table.tableType === TableType.MANUAL ? 'manual tier-label' : 'imported tier-label'))}>{TableType[table.tableType].toLowerCase()}</span>
                    {table.partTables.length ?
                      (<div onClick={(event) => {this.toggleEachPartTableView(event, table)}} 
                      className={table.tableType === TableType.COMPUTED ? "computed show-part-table" : table.tableType === TableType.IMPORTED ? "imported show-part-table" : table.tableType === TableType.LOOKUP  ? "lookup show-part-table" : "manual show-part-table"}>
                        <label className="head">part table</label>
                        <div className="icon">{!this.state.viewAllPartTables || this.state.hidePartTable.includes(table.tableName) ?
                          <FontAwesomeIcon className="eye-icon" icon={faEyeSlash} />
                          : <FontAwesomeIcon className="eye-icon" icon={faEye} />}
                        </div>
                      </div>) : ''}
                  </div>
                  {table.partTables.length && !this.state.hidePartTable.includes(table.tableName) ? (
                    table.partTables.map((partTable: PartTableListEntry) => {
                      return (
                        <div onClick={() => {this.props.onTableSelection(table.tableName + '.' + partTable.tableName, partTable.tableType)}} key={partTable.tableName} 
                        className={this.state.viewAllPartTables && this.props.selectedTableName === `${table.tableName}.${partTable.tableName}` && this.props.selectedTableType === partTable.tableType ? 
                        "part-table-entry selected" : this.state.viewAllPartTables && (this.props.selectedTableName !== `${table.tableName}.${partTable.tableName}` || this.props.selectedTableType !== partTable.tableType) ? 
                        "part-table-entry" : !this.state.viewAllPartTables ? "part-table-entry hide" : ""}>
                        <p className="table-name">{partTable.tableName}</p>
                        <span className={table.tableType === TableType.COMPUTED ? "part-label computed-part" : table.tableType === TableType.LOOKUP ? "part-label lookup-part" : table.tableType === TableType.IMPORTED ? "part-label imported-part" : "part-label manual-part"}>
                          <div className="MT-type">{TableType[table.tableType].toLowerCase()}</div>
                          <div className="part-table-tag">{TableType[partTable.tableType].toLowerCase() + ' table'}</div>
                        </span>
                      </div>
                      )
                    })
                  ) : ''
                  }
                </div>
              )
            })
          }
        </div>
        }
      </div>
    )
  }