dynamic-width-filtering-sorting-scroll-table-with-data-loading

This branch is in turn based off of https://github.com/justinwoo/react-rxjs-flow/tree/dynamic-width-scroll-table, and has more featuers and still ends up combining the multiple features together by combining relevant streams.

Before

  let columns$             = Rx.Observable.just(['ID (fixed width)', 'ID * 10', 'Random Number']);
  let defaultColumnWidths$ = Rx.Observable.just([300, null, null]);

  let tableHeight$ = Rx.Observable.just(500);
  let rowHeight$   = Rx.Observable.just(30);
  let rowCount$    = Rx.Observable.just(10000);
  let scrollTop$   = actions.scrollTop$.startWith(0);

  let visibleIndices$ = makeVisibleIndices$(
    tableHeight$, rowHeight$, rowCount$, scrollTop$
  );

  let containerWidth$ = actions.containerWidth$.startWith(window.innerWidth);
  let columnWidths$ = makeColumnWidths$(
    defaultColumnWidths$,
    containerWidth$
  );

After

  let columnSort$     = actions.columnSort$.startWith(defaultColumnSort);
  let filterEvenRows$ = actions.filterEvenRows$.startWith(false);

  // Actually load data in
  let tableData$           = actions.tableData$.startWith(defaultTableData);
  let columns$             = tableData$.map(data => data.columns);
  let defaultColumnWidths$ = tableData$.map(data => data.defaultColumnWidths);

  // Row data is mapped from the table data stream
  let rawRows$ = tableData$.map(data => data.rows);

  // Sort rows with information about how columns are sorted
  let sortedRows$ = makeSortedRows$(rawRows$, columnSort$);

  // Then we take that to filter the rows by criteria
  // In this case whether filtering by even-numbered ids or not
  let rows$     = makeFilteredRows$(sortedRows$, filterEvenRows$);
  let rowCount$ = rows$.map(rows => rows.length);

  let tableHeight$ = Rx.Observable.just(500);
  let rowHeight$   = Rx.Observable.just(30);
  let scrollTop$   = actions.scrollTop$.startWith(0);

  let visibleIndices$ = makeVisibleIndices$(
    tableHeight$, rowHeight$, rowCount$, scrollTop$
  );

  let containerWidth$ = actions.containerWidth$.startWith(window.innerWidth);
  let columnWidths$ = makeColumnWidths$(
    defaultColumnWidths$,
    containerWidth$
  );