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>




© 2021 Better Solutions Limited. All Rights Reserved. © 2021 Better Solutions Limited TopPrevNext