Update OJS example to use setFilter instead of setData

vignettes/quarto/observable-reactable.qmd

@@ -34,12 +34,9 @@ viewof islands = Inputs.checkbox(
 //| include: false
 data = FileAttachment("palmer-penguins.csv").csv({ typed: true })
 
-filtered = data.filter(penguin => {
-  return penguin.bill_length > billLengthMin && islands.includes(penguin.island)
-})
-
-// Update table data when filtered data changes
-Reactable.setData('tbl', filtered)
+// Update table filters when filtered data changes
+Reactable.setFilter('tbl', 'bill_length', billLengthMin)
+Reactable.setFilter('tbl', 'island', islands)
 ```
 
 ```{r}
@@ -52,6 +49,18 @@ reactable(
   wrap = FALSE,
   resizable = TRUE,
   minRows = 10,
+  columns = list(
+    bill_length = colDef(
+      filterMethod = JS("(rows, columnId, billLengthMin) => {
+        return rows.filter(row => row.values[columnId] > billLengthMin)
+      }")
+    ),
+    island = colDef(
+      filterMethod = JS("(rows, columnId, islands) => {
+        return rows.filter(row => islands.includes(row.values[columnId]))
+      }")
+    )
+  ),
   elementId = "tbl"
 )
 ```