Add sort configuration

samples/react-accordion-dynamic-section/src/webparts/reactAccordion/ReactAccordionWebPart.ts

@@ -35,6 +35,8 @@ export interface IReactAccordionWebPartProps {
   allowMultipleExpanded: boolean;
   accordianTitleColumn: string;
   accordianContentColumn: string;
+  accordianSortColumn: string;
+  isSortDescending: false;
 }
 
 export default class ReactAccordionWebPart extends BaseClientSideWebPart<
@@ -65,6 +67,8 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<
         accordionTitle: this.properties.accordionTitle,
         accordianTitleColumn: this.properties.accordianTitleColumn,
         accordianContentColumn: this.properties.accordianContentColumn,
+        accordianSortColumn: this.properties.accordianSortColumn,
+        isSortDescending: this.properties.isSortDescending,
         allowZeroExpanded: this.properties.allowZeroExpanded,
         allowMultipleExpanded: this.properties.allowMultipleExpanded,
         displayMode: this.displayMode,
@@ -342,6 +346,17 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<
                   options: this.allListColumns,
                   disabled: this.choicesDropdownDisabled,
                 }),
+                PropertyPaneDropdown("accordianSortColumn", {
+                  label: "Select the Column for Accordion Sort Rows.",
+                  options: this.allListColumns,
+                  disabled: this.choicesDropdownDisabled,
+                }),
+                PropertyPaneToggle("isSortDescending", {
+                  label: "Sort type",
+                  onText: "Descending",
+                  offText: "Ascending",
+                  disabled: !this.properties.accordianSortColumn
+                }),
                 PropertyPaneToggle("allowZeroExpanded", {
                   label: "Allow zero expanded",
                   checked: this.properties.allowZeroExpanded,

samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/IReactAccordionProps.ts

@@ -7,6 +7,8 @@ export interface IReactAccordionProps {
   selectedChoice: string;
   accordianTitleColumn: string;
   accordianContentColumn: string;
+  accordianSortColumn: string;
+  isSortDescending: boolean;
   allowZeroExpanded: boolean;
   allowMultipleExpanded: boolean;
   displayMode: DisplayMode;

samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.tsx

@@ -46,12 +46,24 @@ export default class ReactAccordion extends React.Component<
       typeof this.props.selectedChoice !== "undefined" &&
       this.props.selectedChoice.length > 0
     ) {
-      let query =
+      let orderByQuery = '';
-        "<View><Query><Where><Eq><FieldRef Name='" +
+      if (this.props.accordianSortColumn) {
-        this.props.columnTitle +
+        orderByQuery = `<OrderBy>
-        "'/><Value Type='Text'>" +
+          <FieldRef Name='${this.props.accordianSortColumn}' ${this.props.isSortDescending ? 'Ascending="False"' : ''} />
-        this.props.selectedChoice +
+        </OrderBy>`;
-        "</Value></Eq></Where></Query></View>";
+      }
+
+      let query = `<View>
+        <Query>
+          <Where>
+            <Eq>
+              <FieldRef Name='${this.props.columnTitle}'/>
+              <Value Type='Text'>${this.props.selectedChoice}</Value>
+            </Eq>
+          </Where>
+          ${orderByQuery}
+        </Query>
+      </View>`;
 
       let theAccordianList = sp.web.lists.getById(this.props.listId);
       theAccordianList