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!