These are chat archives for chandu0101/scalajs-react-components

30th
Dec 2015
Alexej Haak
@Daxten
Dec 30 2015 01:10
Hey, worked a little bit on the TypedReactTable again today.. might want some feedback if you like it so far or not.. still need major work on it (trying to find the right way to do it while coding it / using it in a project)
  // ...
  val table = TypedReactTable[ListItem, Long]("projectTable")
      .header(
        (e, epochMillis) => <.span("Start Time"),
        epochMillis => _.start > _.start  // sorting function for this column
      )
      .header(
        (e, epochMillis) => <.span("Running Time"),
        epochMillis => _.time.getOrElse(0l) > _.time.getOrElse(0l) // sorting function for this column
      )
      .column((e, epochSeconds) => <.span(TimeHelper.formatSecondsToDate(e.start)))
      .column((e, epochSeconds) => <.span(TimeHelper.formatSeconds(e.time.getOrElse(epochSeconds - e.start))))
      .filter((e, epochSeconds, text) => TimeHelper.formatSecondsToDate(e.start).contains(text)) 
      .build(
        e => e.id.get.toString,  // key to use for rows
        (old, next, oldEpoch, newEpoch) => old != next || next.time.isEmpty && oldEpoch != newEpoch  // shouldComponentUpdate for rows
      )

    def render(p: Props, s: State) = {
      <.div(
          table(s.listItems.toVector, p.epochSeconds)
        )
    }
  }
  /// ...
and this is how I use it atm (routing a timer into the table)
Alexej Haak
@Daxten
Dec 30 2015 01:39
ah actually I think it would make it nicer to merge header / column / filter and use currying
then it wouldnt be possible to define more columns in the head then in the body
√ėyvind Raddum Berg
@oyvindberg
Dec 30 2015 13:53
cool, good start
i dont really like the mutable builder approach tbh, i would much rather pass everything through and apply method to build it immutably, and possibly enforce things like equal lengths lists if possible
the second problem is that when building the table like this, it is createClassed for every render, which means that the whole thing will be re-rendered no matter how little data is updated inside it
that said, i really want something like this, happy that youre working on it
Alexej Haak
@Daxten
Dec 30 2015 15:19
no it's only 1 createClass
as long as the val table stays alive in the above example
that can live either in the component where you use it (and it dies then with the component) or get wrapped in an own object (and then it works like a normal component)
I was pretty sure it works this way, but I actually tested the life cycle since you said that already last time, and it only creates the class once and then makes normal updates
y I get why you dont like the mutable factory, will change that :-)