Table | React | Anduin Design

val idColumn = TableR.Column[Employee](
  title = "ID",
  field = "id",
  renderCell = renderProps => <.div(renderProps.data.id),
  width = Option(120)
)

val fullNameColumn = TableR.Column[Employee](
  title = "Full name",
  field = "fullName",
  renderCell = renderProps => <.div(renderProps.data.fullName)
)

val emailAddressColumn = TableR.Column[Employee](
  title = "Email address",
  field = "email",
  renderCell = renderProps => <.div(renderProps.data.email)
)

val dateOfBirthColumn = TableR.Column[Employee](
  title = "Date of birth",
  field = "dateOfBirth",
  renderCell = renderProps => <.div(renderProps.data.dateOfBirth),
  width = Option(150)
)

val phoneColumn = TableR.Column[Employee](
  title = "Phone number",
  field = "phone",
  renderCell = renderProps => <.div(renderProps.data.phone),
  width = Option(200)
)

val initialEmployees = 0
  .to(10)
  .map { _ =>
    MockData
      .Employees(Random.between(0, MockData.Employees.length - 1))
      .copy(id = Random.alphanumeric.filter(_.isLetter).take(6).mkString)
  }
  .toList

val TableOfEmployees = (new TableR[Employee])()

<.div(
  ^.maxHeight := 500.px,
  TableOfEmployees(
    columns = List(
      idColumn,
      fullNameColumn,
      emailAddressColumn,
      dateOfBirthColumn,
      phoneColumn
    ),
    data = initialEmployees
  )()
)

val idColumn = TableR.Column[Employee](  title = "ID",  field = "id",  renderCell = renderProps => <.div(renderProps.data.id),  width = Option(120))val fullNameColumn = TableR.Column[Employee](  title = "Full name",  field = "fullName",  renderCell = renderProps => <.div(renderProps.data.fullName))val emailAddressColumn = TableR.Column[Employee](  title = "Email address",  field = "email",  renderCell = renderProps => <.div(renderProps.data.email))val dateOfBirthColumn = TableR.Column[Employee](  title = "Date of birth",  field = "dateOfBirth",  renderCell = renderProps => <.div(renderProps.data.dateOfBirth),  width = Option(150))val phoneColumn = TableR.Column[Employee](  title = "Phone number",  field = "phone",  renderCell = renderProps => <.div(renderProps.data.phone),  width = Option(200))val initialEmployees = 0  .to(10)  .map { _ =>    MockData      .Employees(Random.between(0, MockData.Employees.length - 1))      .copy(id = Random.alphanumeric.filter(_.isLetter).take(6).mkString)  }  .toListval TableOfEmployees = (new TableR[Employee])()<.div(  ^.maxHeight := 500.px,  TableOfEmployees(    columns = List(      idColumn,      fullNameColumn,      emailAddressColumn,      dateOfBirthColumn,      phoneColumn    ),    data = initialEmployees  )())