# Show Facets Data in a specific order

**URL:** <https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [August 2, 2021, 9:34am UTC](https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199 "2021-08-02T09:34:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anuragchoudhary01](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anuragchoudhary01/32/83611_2.png) [@anuragchoudhary01](https://discuss.elastic.co/u/anuragchoudhary01)\
**Post date:** [August 2, 2021, 9:34am UTC](https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199/1 "2021-08-02T09:34:32Z")

</div>

I am using the reference UI react project to display the search results and facets.  
But here the facets are being displayed in either descending order or in ascending order.  
But I need to display the results in a specific order.

This is how it is currently being displayed ( Ascending )  
**Status:**  
Active  
Closed  
Pending  
Warning

I need this data in custom order like  
**Status:**  
Warning  
Active  
Pending  
Closed

Please help and advise.

---

<div class="post-metadata">

**Author:** ![Gustavo\_Llermaly](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/gustavo_llermaly/32/92019_2.png) [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)\
**Post date:** [August 2, 2021, 4:36pm UTC](https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199/2 "2021-08-02T16:36:37Z")

</div>

Hello, you can use this snippet:

```auto
<Facet
  mapContextToProps={context => {
    if (!context.facets.states) return context;
    return {
      ...context,
      facets: {
        ...(context.facets || {}),
        states: context.facets.states.map(s => ({
          ...s,
          data: s.data.sort((a, b) => {
            if (a.value > b.value) return 1;
            if (a.value < b.value) return -1;
            return 0;
          })
        }))
      }
    };
  }}
  field="states"
  label="States"
  show={10}
/>

```

And replace the logic with something like this :

```auto
  const order = [
    "Warning",
    "Active",
    "Pending",
    "Closed",
  ];

```

```auto
  s.data.sort(
    (a, b) => order.indexOf(a.value) - order.indexOf(b.value)

```

---

<div class="post-metadata">

**Author:** ![anuragchoudhary01](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anuragchoudhary01/32/83611_2.png) [@anuragchoudhary01](https://discuss.elastic.co/u/anuragchoudhary01)\
**Post date:** [August 3, 2021, 7:28am UTC](https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199/3 "2021-08-03T07:28:02Z")

</div>

Thanks @Gustavo_Llermaly, this works for me. Just one more small help. How we can mark any field on loading the page ( as default checked ). Previously, I was using the initialState in which I have set the default checked status as Active and Warning.  
After adding this logic the data output is correct but the values on Facet are not checked.

---

<div class="post-metadata">

**Author:** ![Gustavo\_Llermaly](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/gustavo_llermaly/32/92019_2.png) [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)\
**Post date:** [August 3, 2021, 12:07pm UTC](https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199/4 "2021-08-03T12:07:55Z")

</div>

Thats right, using searchQuery: {filters} property will not affect the app state. Not sure what's the best way to do it but you should put the filter actions on your app start

```auto
addFilter("status", "Warning", "any") 
addFilter("status", "Active", "any") 

```

If you need more help I recommend you to fork the default sandbox and create a new ticket reproducing your problem.

Best,

---

<div class="post-metadata">

**Author:** ![anuragchoudhary01](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anuragchoudhary01/32/83611_2.png) [@anuragchoudhary01](https://discuss.elastic.co/u/anuragchoudhary01)\
**Post date:** [August 3, 2021, 1:10pm UTC](https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199/5 "2021-08-03T13:10:04Z")

</div>

Thanks, @Gustavo_Llermaly for your help. Appreciated !

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 31, 2021, 1:10pm UTC](https://discuss.elastic.co/t/show-facets-data-in-a-specific-order/280199/6 "2021-08-31T13:10:27Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.