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 ?
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
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 ?
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
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
Thanks for the suggestions , they were really helpful.
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