How to create a grid like this in React JS with the functionality of sorting, filtering, column chooser etc?

Question

I'm working on a react project where I want to design a grid like this(image shown below) with some functionalities like sorting, filtering, column chooser etc.

I have tried it with the help of Material UI, Infragistics and some more framework as well.

I want to choose a framework that will be open source. Material UI is not fully opensource as the community version does not contain all the required functionality.

So which UI framework can I choose for the same. If anyone can help me out with it.

Here in this above grid after last price header there is a menu with multiple options. And the rows are with the alternate colors.

Something like this-

I am not asking for the exact code for it but if you can suggest a framework which can help me to achieve the output as image 1 then it would be a great help for me.

What I have tried

I tried to achieve it with the help of material ui but it's not fully opensource and the required functionality is not there in the community version. I tried the same with infragistics as well but not able to complete it.

Hoping for a positive response.

Thanks!!!

Answer 1

How about ant design? (Its Github)

Also has filter and sort.