Layer5: [NG] Make Service Mesh Patterns table sortable and filterable

[leecalcote]

Current Behavior
The table of service mesh patterns has two columns, neither of which are sortable, nor filterable.

Desired Behavior

1. Users can click on the column name to sort each column, toggling between ascending and descending alphabetical order.
2. Users can filter on Category type.

---

Contributor Resources
The layer5 repo contains two websites. The current generation and the next-generation of the layer5.io site.

If the layer5-ng label is absent on this issue, then this issue pertains to the current generation of the layer5.io website, which uses Jekyll and GitHub Pages. Site content is found under the master branch.

• See layer5 contributing instructions

If the layer5-ng label is present on this issue, then this issue pertains to the next-generation of the layer5.io website, which uses Gatsby, Strapi, and GitHub Pages. Site content is found under the layer5-ng branch.

• See layer5-ng contributing instructions
• See Layer5 site designs in this Figma project.

[leecalcote]

Yoo-hoo, @EmperorYP7... in case this is of interest.

[EmperorYP7]

@leecalcote Thanks for following up so quick. I'd love to take this up! 😄

[leecalcote]

Beautiful. :) The description leaves a little room for creativity with respect to item #2 - filtering on Category. I don't know that we have a standard approach to filtering on table columns (tagging @Nikhil-Ladha, @Tanuj22, @Jashpatel1 for guidance). If not, it'd be good to see a suggestion or two from you on the approach.

[Nikhil-Ladha]

There is an option to filter columns in react-table, please use that.
Checkout this link: https://react-table.tanstack.com/docs/overview

[EmperorYP7]

@Nikhil-Ladha Thanks for the docs.

Here's one quick question, do I need to retain the subsections (or "Areas") in the table while sorting i.e. sort each subsection independently?

[Nikhil-Ladha]

Hmm, yeah that should be the way.

[Jashpatel1]

Closing with #1400