Simple Filter for Table Example

var countryNameFilter = ""
lazy val filterF: F7StringField = new F7StringField().label("Country name contains")
  // Option A: filter on return:
  //        .rw(countryNameFilter, v => countryNameFilter = v)
  //        .addOnThisFieldChanged(field => {
  //          table.rerenderTableAround()
  //        })
  // Option B:
  .additionalAttrs(() => Seq(
    "oninput" -> fsc.callback(JS("this.value"), value => {
      countryNameFilter = value
      table.rerender()
    }).cmd
  ))
lazy val table = new Table6Base
  with Table6BootrapStyling
  with Table6StandardColumns
  with Table6SeqSortableDataSource
  with Table6Sortable {
  override type R = Country

  val ColName = ColStr("Name", _.name.common)
  val ColCapital = ColStr("Capital", _.capital.mkString(", "))
  val ColRegion = ColStr("Region", _.region)
  val ColArea = ColStr("Area", _.area.toString)

  override def columns(): List[C] = List(
    ColName
    , ColCapital
    , ColRegion
    , ColArea
  )

  override def rowsSorter: PartialFunction[C, Seq[Country] => Seq[Country]] = {
    case ColName => _.sortBy(_.name.common)
    case ColCapital => _.sortBy(_.capital.mkString(", "))
    case ColRegion => _.sortBy(_.region)
    case ColArea => _.sortBy(_.area)
  }

  override def seqRowsSource: Seq[Country] = CountriesData.data.filter(_.name.common.toLowerCase.contains(countryNameFilter.toLowerCase))
}
new DefaultForm7() with com.fastscala.components.form7.Form7WithSaveOnEnterHint {
  override def rootField: F7Field = filterF
}.render().mb_2 ++
  table.render()