Hey team! need help! i need to create a UI like a List of Users. Which componente should i use? a Co...

# kobweb

[Eduardo Ruesta]

Hey team! need help! i need to create a UI like a List of Users. Which componente should i use? a Columns and Row inside?

[Eduardo Ruesta]

also im not good at design an css styles? where i can learn more? thanks

[Ryan Scott]

If you want a vertical layout, go with Column. If you want a horizontal layout, Row should be your go-to. So I think you have the right idea there.

As an Android engineer, I also am on the CSS learning curve. This has been a good resource for me: https://www.w3schools.com/

[S.]

but keep in mind that there is no LazyColumn yet. So depending on how much data you have you need to consider pagination and probably splitting the data.

There is already a prototype implementation for a web LazyColumn here https://gitlab.com/opensavvy/ui/compose-lazy-html , but it currently has some recomposition bugs. (#opensavvy)

[Ryan Scott]

Ah--good point.

[S.]

also for css/js/html docs prefer mdn

[Eduardo Ruesta]

Cool!! thanks both!

[David Herman]

(@CLOVIS FYI re: your lazy column implementation project, see @S.’s comment if you weren't aware)

[David Herman]

@Eduardo Ruesta in general I would start getting in the habit of trying to figure out how things work in the web world, as in googling "html css list of elements" and looking at some of the results to see if any look good to you

[David Herman]

That being said, Row and Column Kobweb primitives can be pretty good for this.

[David Herman]

This page: https://bitspittle.dev/blog/
is implemented using Column:

Relevant code #1: https://github.com/bitspittle/bitspittle.dev/blob/1e5bcb1331fcfd896c5a9896216ed5377d45d738/site/build.gradle.kts#L122

Relevant code #2:
https://github.com/bitspittle/bitspittle.dev/blob/1e5bcb1331fcfd896c5a9896216ed537[…]ain/kotlin/dev/bitspittle/site/components/layouts/PageLayout.kt

[Eduardo Ruesta]

Thanks a lot @David Herman!!

[David Herman]

You're quite welcome

[Eduardo Ruesta]

is Any way to convert for example Css code into kobweb style. For example: i have this CSS styile:

<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>

[Eduardo Ruesta]

how do i know this td or th thing to use in a modifier

[S.]

yes there is! https://opletter.github.io/css2kobweb/

[Eduardo Ruesta]

wowww!! like it

[Ryan Scott]

That looks like a really useful tool, @S.

[David Herman]

how do i know this td or th thing to use in a modifier

Generally looks something like this:

val CustomerTableStyle = CssStyle {
  cssRule("td") { ... }
  cssRule("th") { ... }
  cssRule("tr:hover") { ... }
}

Table(CustomerTableStyle.toAttrs() {
  ...
}