Updating table in real-time

[yyhay]

I am starting out with FTXUI, it looks really great, but I just can't figure out how to update a table in real-time. I can create one following the example from examples/dom/table.cpp
But how do I go about displaying a table on the screen, not just printing it once like in the example, and accessing random cells for updates?

A small example will be much appreciated.

Thank you

[ArthurSonzogni]

Hello @yyhay.
Here is an example:

video
https://user-images.githubusercontent.com/4759106/217115885-1964a418-a865-43b3-849d-1724df9e6fe4.mp4

code

#include <memory> 
#include <string> 

#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;

int main(int argc, const char* argv[]) {

  std::string value_1;
  std::string value_2;
  std::string value_3;
  std::string value_4;

  auto input_1 = Input(value_1, "input_1");
  auto input_2 = Input(value_2, "input_2");
  auto input_3 = Input(value_3, "input_3");
  auto input_4 = Input(value_4, "input_3");

  // Layout combine the components above, so that user can navigate them using
  // arrow keys in both directions. Unfortunately, ftxui doesn't provide a
  // Container::Array component, so this is a best effort here:
  auto layout = Container::Vertical({
      Container::Horizontal({input_1, input_2}),
      Container::Horizontal({input_3, input_4}),
  });

  // Renderer override the `ComponentBase::Render` function of `layout`, to
  // display them using a Table.
  auto renderer = Renderer(layout, [&] {
    auto table = Table({
        {text("")      , text("Columns 1") , text("Column2")}   ,
        {text("row_1") , input_1->Render() , input_2->Render()} ,
        {text("row_2") , input_3->Render() , input_4->Render()} ,
    });

    table.SelectAll().Border(DOUBLE);
    table.SelectAll().Separator(LIGHT);

    return table.Render();
  });

  // Execute the main loop:
  auto screen = ScreenInteractive::FitComponent();
  screen.Loop(renderer);
  return 0;
}

// Copyright 2023 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.

The Table is within ftxui/dom, it can only be used to draw one frame.
You need to use a component from ftxui/dom to render multiple frame. You can implement your own and return the dom element in ComponentBase::Render, or combine some like in the example.

Does this help?

[yyhay]

This works. Thank you very much.
I will do more test, I actually need to update cells from a separate thread consuming data, but I think I got the concept.

Awesome GUI toolkit!

[InnocentZero]

Hi, sorry for necrobumping, but can you tell me a method where I can do it dynamically? I basically have to take input for x and y from the user, and render the table with x rows and y columns and each cell being a button (capable of handling events).

I don't know how to do it without it being a massive headache. As of now, I generate the buttons as a grid-container but it wastes a lot of space because of the gaps.

I am storing the buttons as a vector of Components, so I have that at my disposal.

Thanks for the amazing tool!

[ArthurSonzogni]

I am not sure I understood what was the questions.

Here is a tentative reply, hoping it helps using a Table with a dynamic number of elements in it:

#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
#include <string>  // for to_string, operator+

#include "ftxui/component/captured_mouse.hpp"  // for ftxui
#include "ftxui/component/component.hpp"       // for Button, Renderer, Vertical
#include "ftxui/component/component_base.hpp"  // for ComponentBase
#include "ftxui/component/component_options.hpp"   // for ButtonOption
#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
#include "ftxui/dom/elements.hpp"  // for operator|, text, Element, hbox, separator, size, vbox, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
#include "ftxui/dom/table.hpp"     // for Table
#include "ftxui/screen/color.hpp"  // for Color, Color::Default, Color::GrayDark, Color::White

using namespace ftxui;

Component Cell(std::string label, Color fg, Color hi) {
  auto cell = Renderer([=](bool focused) {
    auto element = text(label) | color(fg) | bgcolor(hi);
    if (focused) {
      element = element | focus | bold | inverted;
    }
    return element;
  });
  return cell;
}

int main() {
  const int size_x = 10;
  const int size_y = 10;

  // Create the cells:
  std::vector<Component> buttons;
  for (int y = 0; y < size_y; y++) {
    for (int x = 0; x < size_x; x++) {
      std::string label = std::to_string(x) + "x" + std::to_string(y);
      buttons.push_back(Cell(label, Color::White, Color::Black));
    }
  }

  // Use a grid layout for navigation:
  int selected_x = 0;
  int selected_y = 0;
  auto rows = Container::Vertical({}, &selected_y);
  for (int y = 0; y < size_y; y++) {
    auto row = Container::Horizontal({}, &selected_x);
    for (int x = 0; x < size_x; x++) {
      row->Add(buttons[y * size_x + x]);
    }
    rows->Add(row);
  }

  // Draw them using a table
  auto renderer = Renderer(rows, [&] {
    // Render every cells:
    std::vector<std::vector<Element>> elements;
    for (int y = 0; y < size_y; y++) {
      std::vector<Element> row;
      for (int x = 0; x < size_x; x++) {
        row.push_back(buttons[y * size_x + x]->Render());
      }
      elements.push_back(row);
    }

    // Draw them into a table:
    auto table = Table(elements);
    table.SelectAll().Border(DOUBLE);
    table.SelectAll().Separator(LIGHT);

    return table.Render();
  });

  // Execute the main loop:
  auto screen = ScreenInteractive::FitComponent();
  screen.Loop(renderer);

  return 0;
}