SpreadSheet Like Scrolling

[takumicapital]

Hi, thanks for writing such a neat library. I'm trying to use it to create a live updating spreadsheet for monitoring stocks. I've got the table component working but I don't think that the correct approach.
What I'd like to do is to have a component that renders each cell via a call back function. It'd also like to to be able to scroll vertically and horizontally like a spreadsheet keeping the row and column headers locked. Any pointers on how to implement this in your library?

[ArthurSonzogni]

Hello!

What about:

• The elements are rendered via a ftxui::Table.
• The layout (e.g. Component) are made of Container::Vertical and Container::Horizontal. They are sharing the same vertical and horizontal selector so that you can move in the two directions correctly.

Example:

#include <memory>
#include <string>
#include <utility>
#include <vector>

#include <ftxui/component/captured_mouse.hpp>
#include <ftxui/component/component.hpp>
#include <ftxui/component/component_base.hpp>
#include <ftxui/component/screen_interactive.hpp>
#include <ftxui/dom/elements.hpp>
#include <ftxui/dom/table.hpp>

using namespace ftxui;

Component Grid(const std::vector<Components>& elements) {
  class Impl : public ComponentBase {
    private:
      std::vector<Components> rows_;
      int selector_x_ = 0;
      int selector_y_ = 0;

    public:
      Impl(std::vector<Components> rows) : rows_(std::move(rows)) {
        Components components;
        for (const auto& line : rows_) {
          components.push_back(Container::Horizontal(line, &selector_x_));
        }
        Add(Container::Vertical(components, &selector_y_));
      }

      Element Render() override {
        // Render every cells:
        std::vector<Elements> elements;
        for(auto& row : rows_) {
          elements.emplace_back();
          for(auto& element : row) {
            elements.back().push_back(element->Render()); 
          }
        }

        auto table = Table(std::move(elements));
        table.SelectAll().Separator(LIGHT);
        table.SelectAll().Border(DOUBLE);

        auto element = table.Render();

        // Wrap it into a frame so that it becomes scrollable.
        element |= vscroll_indicator;
        element |= hscroll_indicator;
        element |= frame;
        element |= center;
        element |= flex;
        return element;
      }

  };

  return Make<Impl>(elements);
}

Component Dummy() {
  return Renderer([](bool focused) {
    Element element = text("Dummy");
    if (focused) {
      element |= focus;
      element |= inverted;
    }
    return element;
  });
}

int main() {
  auto component = Grid({
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
    { Dummy(), Dummy(), Dummy(), Dummy(), Dummy(),Dummy(), Dummy()},
  });

  auto screen = ScreenInteractive::Fullscreen();
  screen.Loop(component);
  return 0;
}

test-2024-03-20_16.54.31.mp4

[ArthurSonzogni]

You can also highlight the currently focused line:

  auto table = Table(std::move(elements));
  table.SelectAll().Separator(LIGHT);
  table.SelectAll().Border(DOUBLE);
  table.SelectRow(selector_y_).Decorate(bgcolor(Color::Blue));

test-2024-03-20_17.13.21.mp4

[takumicapital]

This is great! Is there a way of the render for Dummy() to know which cell location it is rendering? I maintain a matrix of data and when the dummy() is called return the right number.

[takumicapital]

Also, does the table only render what's visible on the window. The spreadsheet is 2000x25 rows, so lot's of live data being updated on a different thread?

[ArthurSonzogni]

To avoid rendering too many elements, and the associated layout, you can only add the rows around selector_y_:

(Feel free to increase 5 to a sufficiently large number.

        // Render every cells:
        std::vector<Elements> elements;
        for(int y = std::max(selector_y_-5, 0);
                y < std::min(selector_y_+5, (int)rows_.size());
              ++y) {
          elements.emplace_back();
          for(auto& element : rows_[y]) {
            elements.back().push_back(element->Render()); 
          }
        }

So lot's of live data being updated on a different thread?

Components can hold a "current" state and use a thread to fetch new data.
To avoid race condition, you can update the "current" state by posting a task on the main thread when it is available using: ScreenInteractive::Post(task).

[takumicapital]

Hi, I've got a working prototype. It works but the behavior of the scrolling is strange.

When it first start the selector in on a single cell and I can scroll horizontal. But when I go past bottom of the
window, I loose the cursor on a single cell and then I can't scroll horizontal. It works fast to just render what's around the selector. The only other thing to implement is columns headers. I suppose I can make sure the first
row of elements is always the column headers.

#include
#include
#include
#include

#include <ftxui/component/captured_mouse.hpp>
#include <ftxui/component/component.hpp>
#include <ftxui/component/component_base.hpp>
#include <ftxui/component/screen_interactive.hpp>
#include <ftxui/dom/elements.hpp>
#include <ftxui/dom/table.hpp>

using namespace ftxui;

Component Grid(const std::vector& elements) {
class Impl : public ComponentBase {
private:
std::vector rows_;
int selector_x_ = 0;
int selector_y_ = 0;

public:
  Impl(std::vector<Components> rows) : rows_(std::move(rows)) {
    Components components;
    for (const auto& line : rows_) {
      components.push_back(Container::Horizontal(line, &selector_x_));
    }
    Add(Container::Vertical(components, &selector_y_));
  }

  Element Render() override 
  {
    std::vector<Elements> elements;

    int step = 10;

    int start = std::max(selector_y_-step,0);
    int end   = std::min(start+step,(int)rows_.size());

    for(int y = start; y < end; ++y) 
    {
      elements.emplace_back();

      for(auto& element : rows_[y]) 
      {
        elements.back().push_back(element->Render()); 
      }
    }

    auto table = Table(std::move(elements));
    table.SelectAll().Separator(LIGHT);
    table.SelectAll().Border(DOUBLE);
    table.SelectRow(selector_y_).Decorate(bgcolor(Color::Blue));

    auto element = table.Render();

    // Wrap it into a frame so that it becomes scrollable.
    element |= vscroll_indicator;
    element |= hscroll_indicator;
    element |= frame;
    element |= center;
    element |= flex;

    return element;
  }

};

return Make(elements);
}

Component Cell(int row,int col) {
return Renderer([=](bool focused) {

char buf[32];
sprintf(buf,"(%d,%d)",row,col);    

Element element = text(buf);
if (focused) {
  element |= focus;
  element |= inverted;
}
return element;

});
}

int main() {

std::vector elements;

for(int ri=0;ri<1000;ri++)
{
Components comps;
for(int ci=0;ci<50;ci++)
{
Component comp = Cell(ri,ci);
comps.push_back(comp);
}
elements.push_back(comps);
}

auto component = Grid(elements);

auto screen = ScreenInteractive::Fullscreen();
screen.Loop(component);
return 0;
}`