Orasund / elm-ui-widgets

Collection of reusable views for elm-ui.
https://orasund.github.io/elm-ui-widgets/
BSD 3-Clause "New" or "Revised" License
85 stars 11 forks source link

How to customize the rows of a table? #87

Closed pedromss closed 2 years ago

pedromss commented 2 years ago

I'm trying to add padding to every row in a table like this one https://orasund.github.io/elm-ui-widgets/Sort%20Table and not really sure how to. Is this possible? Elm UI exposes the view field we could customize the cell, but I'm not finding that with elm-ui-widgets, maybe that's by design and I should just use Elm-UI directly to have a custom table?


Btw, was trying to follow the guide here https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/Widget-Customize to customize the style of a SortTable but couldn't understand where I was going wrong.

I took that example:

{- Make a button fill the full width -}
Widget.textButton
  ( Material.containedButton
    |> Customize.element [Element.width Element.fill]
  )
  { onPress = Just PressedButton
  , text = "Press Button"
  }

But it doesn't compile. Maybe the example should be:

Widget.textButton
    (Material.containedButton Material.defaultPalette
        |> Customize.elementButton [ Element.width Element.fill ]
    )
    { onPress = Nothing
    , text = "Press Button"
    }

Or am I missing something here?

Orasund commented 2 years ago

Hi. The only way I would know how to style rows would be by defining your ColumnStyle. In there, you can specify custom styling for individual cells.

Material.column
|> Customize.mapContent (Customize.element [ Element.paddingXY 0 10 ])

You are right with respect to the customization.

pedromss commented 2 years ago

Thank you. I need to customize more than the styles so I defaulted to building the custom table with Elm UI, which allows specifying the whole view for each "cell"