Bootstrap Styling Table Example

On this page

Stats

#callbacks:

class SampleTable extends Table6Base with Table6BootrapStyling with Table6StandardColumns with Table6SeqDataSource with Table6PaginatedWithSeqDataSource {
  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 seqRowsSource: Seq[Country] = CountriesData.data.take(3)
}

Striped rows

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableStriped: Boolean = true
}.render()

Striped columns

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableStripedColumns: Boolean = true
}.render()

Dark

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableDark: Boolean = true
}.render()

Dark & Stripped

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableDark: Boolean = true

  override def tableStriped: Boolean = true
}.render()

Dark & Stripped Columns

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableDark: Boolean = true

  override def tableStripedColumns: Boolean = true
}.render()

Hoverable rows

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableHoverable: Boolean = true
}.render()

Hoverable rows & Stripped

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableHoverable: Boolean = true
  override def tableStriped: Boolean = true
}.render()

Bordered tables

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableBordered: Boolean = true
}.render()

Borderless

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableBorderless: Boolean = true
}.render()

Small tables

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

new SampleTable() {
  override def tableSmall: Boolean = true
}.render()

Table group dividers

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

import com.fastscala.components.bootstrap5.helpers.BSHelpers.*
new SampleTable().onTableBody(_.table_group_divider).render()

Table header styling

Name	Capital	Region	Area
Aruba	Oranjestad	Americas	180.0
Afghanistan	Kabul	Asia	652230.0
Angola	Luanda	Africa	1246700.0

Showing 3 of 3

scala

import com.fastscala.components.bootstrap5.helpers.BSHelpers.*
new SampleTable().onTableHead(_.table_light).render()