DEV Community

Discussion on: Transitioning from traditional PC apps to Web Development

 
kspeakman profile image
Kasey Speakman • Edited

Pretty good on that front, as far as the UI elements.

semantic-ui.com/collections/table....

Edit: If you're looking for databinding though (something the Telerik / DevExpress controls do), you won't find it. That's left up to the language or framework you are using. I much prefer to handle this anyway rather than spending a lot of time trying to figure out the right data binding expressions to accomplish exactly what I want to do. It is pretty straightforward in Elm, for instance.

-- in Update
    SearchSubmitted ->
        { model | results = Loading }
            ! [ Api.search model.apiConfig
                    { search = model.search
                    , page = model.page
                    , pageSize = model.pageSize
                    }
              ]

    SearchReturned (Err err) ->
        { model | results = LoadFailed err } ! []

    SearchReturned (Ok ok) ->
        { model | results = Loaded ok } ! []


-- in view

view model =
    -- semantic celled table
    table [ class "ui celled table" ]
        [ thead [] [ ... ] -- header stuff
        , tbody []
            ( case model.result of
                  Loading ->
                      -- display a spinner or loading message

                  LoadFailed err ->
                      -- display an error message, could be elsewhere

                  Loaded data ->
                      -- toRow: fn to convert data to table row
                      List.map toRow data
            )
        , tfoot [] [ ... ] -- pager stuff
        ]
Thread Thread
 
rhymes profile image
rhymes

Thanks for the explanation. I'm using Bulma through buefy right now in a Vue app but I'm not 100% satisfied. Semantic UI's approach is interesting.