I am using reactable with custom filtering/searching methods and regular expression patterns, and special functions to collapse rows if they are identical (to avoid repetition of the same rows, which can occur in my database). See a reproducible example below:
library(reactable)
library(htmltools)
customsearch <- JS('
function(rows, columnIds, filterValue) {
let arrFilterValues = filterValue.split(" ");
return rows.filter(function(row) {
return arrFilterValues.map(function(e) {
return columnIds.some(function(columnId) {
return new RegExp(e,"i").test(row.values[columnId])
});
}).every(v => v === true);
});
}')
customfilter <- JS('function(rows, columnId, filterValue) {
let arrFilterValues = filterValue.split(" ");
return rows.filter(function(row) {
return arrFilterValues.map(function(e) {
return new RegExp(e,"i").test(row.values[columnId])
}).every(v => v === true);
});
}')
reactable(iris,filterable=TRUE,searchable=TRUE,static=TRUE, rowStyle=JS("function(rowInfo, state) {
const firstSorted = state.sorted[0]
// Merge cells if unsorted or sorting by school
if (!firstSorted || firstSorted.id === 'Journal') {
const prevRow = state.pageRows[rowInfo.viewIndex - 1]
if (prevRow && rowInfo.values['Journal'] === prevRow['Journal']) {
return { visibility: 'collapse' }
}
}
}"), searchMethod = customsearch, defaultColDef=colDef(filterMethod=customfilter, html=TRUE))
The problem is that, if I input some characters in the search box, the table disappear and the only way to make it appear again is to refresh the page: I can put numbers or text in the search box, but as soon as I input “” (as well as other special characters I guess, such as “*”) the table disappears. This also occur if I input a string which is not found in the table.
Is there a way to prevent this behavior?