Add search bar

DESCRIPTION

@@ -29,6 +29,7 @@ Suggests:
     shiny,
     quarto,
     knitr,
-    dplyr
+    dplyr,
+    palmerpenguins
 Config/testthat/edition: 3
 VignetteBuilder: quarto

R/cheetah.R

@@ -9,6 +9,9 @@
 #' @param height Height of the widget
 #' @param elementId The element ID for the widget
 #' @param rownames Logical. Whether to show rownames. Defaults to TRUE.
+#' @param search Whether to enable a search field on top of the table.
+#' Default to `disabled`. Use `exact` for exact matching
+#' or `contains` to get larger matches.
 #'
 #' @return An HTML widget object of class 'cheetah' that can be:
 #'   \itemize{
@@ -29,8 +32,10 @@ cheetah <- function(
   width = NULL,
   height = NULL,
   elementId = NULL,
-  rownames = TRUE
+  rownames = TRUE,
+  search = c("disabled", "exact", "contains")
 ) {
+  search <- match.arg(search)
   # Only show rownames if they are character strings (meaningful) and rownames is TRUE
   processed_rn <- process_rownames(data, columns, rownames)
 
@@ -47,7 +52,7 @@ cheetah <- function(
 
   data_json <- toJSON(data, dataframe = "rows")
   # forward options using x
-  x = list(data = data_json, columns = columns)
+  x <- list(data = data_json, columns = columns, search = search)
 
   # create widget
   htmlwidgets::createWidget(

srcjs/widgets/cheetah.js

@@ -38,12 +38,102 @@ HTMLWidgets.widget({
         const grid = new cheetahGrid.ListGrid({
           parentElement: document.getElementById(id),
           header: columns,
-          // Array data to be displayed on the grid
-          records: x.data,
           // Column fixed position
           // frozenColCount: 1,
         });
 
+        // Search feature
+        if (x.search !== 'disabled') {
+          const filterDataSource = new cheetahGrid
+            .data
+            .FilterDataSource(
+              cheetahGrid.data.DataSource.ofArray(x.data)
+            );
+          grid.dataSource = filterDataSource;
+
+          $(`#${el.id}`).prepend(
+            `<label>Filter:</label><input id="${el.id}-filter-input" style="margin: 10px;"/>`
+          )
+
+          $(`#${el.id}-filter-input`).on('input', (e) => {
+            const filterValue = $(e.currentTarget).val();
+            filterDataSource.filter = filterValue
+              ? (record) => {
+                // filtering method
+                for (const k in record) {
+                  let testCond;
+                  switch (x.search) {
+                    case 'contains':
+                      testCond = `${record[k]}`.indexOf(filterValue) >= 0;;
+                      break;
+                    case 'exact':
+                      let r = new RegExp(`^${filterValue}$`);
+                      testCond = r.test(`${record[k]}`);
+                      break;
+                    default:
+                      console.log(`${x.search} value not implemented yet.`);
+                  }
+                  if (testCond) {
+                    return true;
+                  }
+                }
+                return false;
+              }
+              : null;
+            grid.invalidate();
+          })
+        } else {
+          // Array data to be displayed on the grid
+          grid.records = x.data;
+        }
+
+
+        // Search feature
+        if (x.search !== 'disabled') {
+          const filterDataSource = new cheetahGrid
+            .data
+            .FilterDataSource(
+              cheetahGrid.data.DataSource.ofArray(x.data)
+            );
+          grid.dataSource = filterDataSource;
+
+          $(`#${el.id}`).prepend(
+            `<label>Filter:</label><input id="${el.id}-filter-input" style="margin: 10px;"/>`
+          )
+
+          $(`#${el.id}-filter-input`).on('input', (e) => {
+            const filterValue = $(e.currentTarget).val();
+            filterDataSource.filter = filterValue
+              ? (record) => {
+                // filtering method
+                for (const k in record) {
+                  let testCond;
+                  switch (x.search) {
+                    case 'contains':
+                      testCond = `${record[k]}`.indexOf(filterValue) >= 0;;
+                      break;
+                    case 'exact':
+                      let r = new RegExp(`^${filterValue}$`);
+                      testCond = r.test(`${record[k]}`);
+                      break;
+                    default:
+                      console.log(`${x.search} value not implemented yet.`);
+                  }
+                  if (testCond) {
+                    return true;
+                  }
+                }
+                return false;
+              }
+              : null;
+            grid.invalidate();
+          })
+        } else {
+          // Array data to be displayed on the grid
+          grid.records = x.data;
+        }
+
+
         // Only is Shiny exists
         if (HTMLWidgets.shinyMode) {
           const {

tests/testthat/_snaps/cheetah.md

@@ -0,0 +1,8 @@
+# test cheetah
+
+    Code
+      cheetah(iris, search = "plop")
+    Condition
+      Error in `match.arg()`:
+      ! 'arg' should be one of "disabled", "exact", "contains"
+

tests/testthat/test-cheetah.R

@@ -30,4 +30,8 @@ test_that("test cheetah", {
   shiny::testServer(server, {
     expect_s3_class(session$getOutput("grid"), "json")
   })
+
+  expect_snapshot(error = TRUE, {
+    cheetah(iris, search = "plop")
+  })
 })

vignettes/cheetahR.qmd

@@ -16,6 +16,7 @@ knitr::opts_chunk$set(
 
 ```{r setup}
 library(cheetahR)
+library(palmerpenguins)
 library(dplyr)
 ```
 
@@ -92,6 +93,14 @@ head(airquality, 10) %>%
   )
 ```
 
+## Filtering data
+
+You can filter data by setting `search` to either `exact` or `contains` when you call `cheetah()` like so:
+
+```{r}
+cheetah(penguins, search = "contains")
+```
+
 ## Sortable columns
 
 To make a column sortable, you can pass `sort = TRUE` to the `column_def()` function:
@@ -112,7 +121,7 @@ cheetah(
 
 If you want finer control over the sorting logic and provide your own, you can pass a `htmlwidgets::JS` callback instead:
 
-```r
+```{r}
 cheetah(
   mtcars,
   columns = list(