Improve performance of large tables

[Clumsyndicate]

I'm trying to use a ftxui::Table to display large amount of rows that are continuously updated. Upon every network update I would update an underlying std::vector<std::vector> .

Since there are a lot of rows, I'm having trouble with performance. Navigation (arrow up / down in a yframe) is very slow, despite technically ftxui only need to render the rows that can be shown in the screen.

I tried reading your jsontui code, when I tried it out it doesn't have navigation lag nearly as bad as my code, but I'm having trouble contrasting with my implementation and identifying the cause of the lag.

Any help would be appreciated.

ftxui::Component RenderTable()
    {
        auto table_component = ftxui::Renderer([&](bool focused) {

            auto table = ftxui::Table(_element_rows);
            table.SelectAll().Border(ftxui::LIGHT);
            table.SelectColumn(0).Border(LIGHT);

            table.SelectRow(0).Decorate(bold);
            table.SelectRow(0).SeparatorVertical(LIGHT);
            table.SelectRow(0).Border(DOUBLE);

            table.SelectRow(line_focused + 1).Decorate(focus);

            auto document = table.Render();

            auto menu = vbox({ hbox({ text("Rerender cnts: " + std::to_string(rerender_cnt++) + "     "),
                                      text("lineno focused: " + std::to_string(line_focused)) }),
                               document | yframe });

            return menu;
        });

        table_component |= CatchEvent([&](Event event) {
            if (event == Event::ArrowUp)
            {
                if (line_focused > 0)
                    line_focused--;
                return true;
            }
            else if (event == Event::ArrowDown)
            {
                line_focused++;
                return true;
            }
            return false;
        });

        return table_component;
    }

[Clumsyndicate]

To add, if I want to limit the amount of rows loaded, such as introducing pages, how do I know how many rows would be shown on the screen so I would only supply that exact number of rows to the Table Element?