Sorting/filtering/searching with input values within reactable

[olbrown95]

I keep encountering a problem, one where I try to find workarounds. I am trying to sort/filter/search by input values within the reactable. The table is sorted by default at initialization. To be clear, the inputs are Shiny/HTML inputs and populate in cells within particular columns of the table. Whenever a sort, filter, or search occurs, the table state changes and re-renders. Thus, any input changes are forgotten.

Using Reactable.setData() doesn't produce the best results. The table re-renders moving the row with the altered input value to wherever its place might be, given the default sorting when the table initializes. The same can be said when wrapping the table data in a Shiny reactive and updating the reactive data as necessary.

What would be great is a way to observe the inputs within the table. If any of them change from the original values (reactable knows the original values) change how the table is sorted (i.e., reactable now sorts by the input values). Unfortunately, I am not sure how to do this, since the table data would need to be altered for this to happen.

reactable.extras does something similar with their inputs -- the package uses a JS array as memory in case the table state changes. However, I noticed the original data for each input does not change in the table even if the input value changes. Meaning the table will sort by the original data and not the new input values.

I understand this is a really complex problem, which requires a complex solution. My JS skills are not exactly great. Sorry, I do not have a reprex.

Any help would be appreciated.

[glin]

Hi, I don't totally understand this so an example, even if it doesn't work, would probably help. From what I gather though, you're trying to integrate Shiny inputs into cells and have them be the table data as if you had an editable table?

I don't have an example on hand, but the best way to do this would likely be 100% JavaScript, rendering a custom React input in a cell that can update the table via setData(). The custom filter input examples might be the closest example, although would have to be adapted for cells and setData(), rather than rendering in headers and calling setFilter(): https://glin.github.io/reactable/articles/custom-filtering.html#basic-custom-filter-input-react

[olbrown95]

"From what I gather though, you're trying to integrate Shiny inputs into cells and have them be the table data as if you had an editable table?" - Yes, although it does not necessarily need to be shiny inputs. That might be more difficult to handle than creating simpler HTML inputs, at least for what I am doing.

One thing I forgot to mention in the original post was that I am/was using editableSelect.js for the cell inputs within a particular column. Before posting, I created HTML inputs using React (not Shiny inputs) and tried to apply editableSelect.js. I think that's where I was encountering some problems and didn't really understand why -- probably a conflict between React and jQuery.

Thanks for the help!