Skip to main content Skip to docs navigation

Selectable Rows With Actions Table Example

On this page
Stats
#callbacks:

Source

Selectable rows

Region Name Capital Area Actions
Americas Aruba Oranjestad 180.0
Asia Afghanistan Kabul 652230.0
Africa Angola Luanda 1246700.0
Americas Anguilla The Valley 91.0
Europe Åland Islands Mariehamn 1580.0
Europe Albania Tirana 28748.0
Europe Andorra Andorra la Vella 468.0
Asia United Arab Emirates Abu Dhabi 83600.0
Americas Argentina Buenos Aires 2780400.0
Asia Armenia Yerevan 29743.0
Showing 10 of 250
scala
val table = new Table6Base with Table6BootrapStyling with Table6StandardColumns with Table6SelectableRowsWithActions with Table6SelectableRows with Table6PaginatedWithSeqDataSource {
  override type R = Country

  override def defaultPageSize: Int = 10

  override def actionsBtnToIncludeInTopDropdown: BSBtn = BSBtn().BtnPrimary.lbl("Actions").sm.addClass(ms_2.getClassAttr)

  override def actionsForRows(rows: Seq[Country]): Seq[BSBtn] = List(
    Some(()).filter(_ => rows.size >= 2).map(_ =>
      BSBtn().lbl("Calculate total area").callback(implicit fsc => JS.alert(s"Total area of ${rows.map(_.name.common).mkString(", ")}: ${rows.map(_.area).sum}"))
    ),
    Some(
      BSBtn().lbl("Download as TSV").callback(implicit fsc =>
        JS.redirectTo(fsc.fileDownloadByteArray(
          "countries.tsv",
          "text/tab-separated-values",
          () => {
            ("Name\tCapital\tRegion\tArea" ::
              rows.toList.sortBy(_.name.common)
                .map(c => s"${c.name.common}\t${c.capital.mkString(", ")}\t${c.region}\t${c.area}"))
              .mkString("\n").getBytes("UTF-8")
          }
        ))
      )
    )
  ).flatten

  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(
    ColRegion,
    ColName,
    ColCapital,
    ColArea,
    ColActionsDefault,
    ColSelectRow
  )

  override def seqRowsSource: Seq[Country] = CountriesData.data
}

new Widget {
  override def widgetTitle: String = "Selectable rows"

  override def transformWidgetCardBody(elem: Elem): Elem = super.transformWidgetCardBody(elem).p_0

  override def widgetTopRight()(implicit fsc: FSContext): NodeSeq =
    table.selectAllVisibleRowsBtn.sm.btn.ms_2 ++
      table.clearRowSelectionBtn.sm.btn.ms_2 ++
      table.actionsDropdownBtnRenderer.render()

  override def widgetContents()(implicit fsc: FSContext): NodeSeq = table.render()
}.renderWidget()