List

link - developer.microsoft.com/en-us/fluentui#/controls/web/list

using DetailsList

                      <div> 
                        <Label>Selected:</Label> 
                        <FocusZone 
                          direction={FocusZoneDirection.vertical}> 
                          <div style={{ border: '1px solid #2947A8' }}> 
                            <DetailsList 
                              styles={{ 
                                root: { 
                                  height: '180px',  
                                  // border: '1px solid #2947A8' 
                                } 
                              }} 
                              constrainMode={ConstrainMode.unconstrained}   // hack to remove the horizontal scrollbar 
                              compact={true} 
                              columns={[{ key: 'column1', name: 'text', fieldName: 'text', minWidth: 1, isResizable: true }]}  
                              items={this.method_getItems()} 
                              selectionMode={SelectionMode.single} 
                              selectionPreservedOnEmptyClick={true} 
                              isHeaderVisible={false} 
                              layoutMode={DetailsListLayoutMode.justified} 
                              checkboxVisibility={CheckboxVisibility.hidden} 
                              setKey={'set'}  
                            ></DetailsList> 
                          </div> 
                        </FocusZone> 
                      </div> 
                      <div> 
                        <br></br> 
                        <br></br> 
                        <DefaultButton 
                          styles={{ 
                            root: { 
                              // backgroundColor: '#FFFFFF',  
                              // color: getTheme().palette.neutralPrimary, 
                              height: '30px',  
                              width: '25px'  
                            } 
                          }} 
                          text='<<'  
                        > 
                        </DefaultButton> 
                      </div> 
                      <div> 
                        <Label>Authors List (name - role):</Label> 
                        <FocusZone 
                          direction={FocusZoneDirection.vertical}> 
                          <div style={{ 
                            border: '1px solid #2947A8' 
                          }}> 
                            <DetailsList 
                              styles={{ 
                                root: { 
                                  height: '180px'  
                                } 
                              }} 
                              constrainMode={ConstrainMode.unconstrained}   // hack to remove the horizontal scrollbar 
                              compact={true} 
                              columns={[{ key: 'column1', name: 'text', fieldName: 'text', minWidth: 1, isResizable: true }]}  
                              items={this._allItems} 
                              selectionMode={SelectionMode.single} 
                              selectionPreservedOnEmptyClick={true} 
                              isHeaderVisible={false} 
                              layoutMode={DetailsListLayoutMode.justified} 
                              checkboxVisibility={CheckboxVisibility.hidden} 
                              setKey={'set'}  
                            ></DetailsList> 
                          </div> 
                        </FocusZone> 
                      </div>