Need a special offer?Find out if your project fits.
+

Search + Actionable item on pivot table

Answered
Pranay Bhatia asked on February 6, 2024

Hi Team ,

Is there a way to search entire data on the pivot table except for going to filter and then filtering the searchable item ? plus Is there a way to add actionable react component as one of the columns ?

6 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster February 6, 2024

Hello Pranay,

Thank you for reaching out to us.

Please find our answers below:
Search on the pivot table
It is possible to implement custom search control based on the setFilter API call. The idea is to use the contain query filter property and filter the data on input change. For example:

const searchElement = document.getElementById("search");

searchElement.addEventListener("input", function(event) {
  const inputValue = event.target.value;
  setFilter(inputValue);
});

function setFilter(input) {
  flexmonster.setFilter("Country", {
    query: {
      contain: input,
    },
  });
}

You are welcome to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/2x9ghe46/. Feel free to customize the described approach for your use case.

Adding an actionable React component as one of the columns
Currently, Flexmonster does not provide adding custom React components to Flexmonster components. However, you can use the customizeCell API call to insert HTML components into cells. These components can be styled as needed and can also be handled using your React code. If you could provide more details on what you want to add to the columns, it would be very helpful for us.

Please let us know if it works for you. Looking forward to hearing from you.

Kind regards,
Nadia

Public
Pranay Bhatia February 6, 2024

For search , Is it possible to do a dynamic search on all the elements present in multiple rows and not filteration on a single column , something like an Full text search on all elements ?

 For Actionable item , can we convert a cell into a button that can be used to call an api with payload as the remaining elements of the row ?

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster February 8, 2024

Hello,

Thank you for the response.

Regarding the search on all elements, you can use the live filtering feature. Feel free to check the following JSFiddle: https://jsfiddle.net/flexmonster/20es6ax4/
Regarding the actionable button, we recommend using the context menu. You can add a custom option to the context menu via context menu customization: https://www.flexmonster.com/doc/customizing-context-menu/ and add custom handlers with the help of our API calls. One of the customizeContextMenu API call parameters is CellDataObject, which contains information about the right-clicked element.

Please let us know if it works for you. Looking forward to hearing your feedback.

Kind regards,
Nadia

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster February 22, 2024

Hello,

Hope you are doing well.

We were wondering if you had a chance to check the suggested approaches. Could you please confirm if they work for you?

Looking forward to hearing your feedback.

Kind regards,
Nadia

Public
Pranay Bhatia February 22, 2024

Thanks for the suggestions , they were really helpful.

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster February 22, 2024

Hello,

Thank you for the feedback.

We are glad to hear that the solution was helpful.

As always, do not hesitate to contact us in case other questions arise.

Kind regards,
Nadia

Please login or Register to Submit Answer