Scroll Loading tables should work with non-fixed tables

[bschmelcher]

Describe the bug
Currently scroll loading tables only work with a fixed table.
Because we use non-fixed tables to distribute the columns evenly across the whole available screen width and want to use ScrollLoading for these, it would be awesome if Scroll Loading tables could work with non-fixed tables.
It would be great if this could be fixed/implemented for v1 and v2 as we didn't have the time yet to upgrade to v2.

To Reproduce
See attached code snippet

Expected behavior
Scroll Loading tables should work without having to be fixed to profit from both features - distributing the columns evenly across the table width to look better and use all available space, and simultaneously enabling scroll loading for the table.

Screenshots
Fixed table:

Unfixed table:

Code to reproduce

import com.google.gwt.core.client.EntryPoint;
import elemental2.dom.Event;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import org.dominokit.domino.ui.cards.Card;
import org.dominokit.domino.ui.cards.HeaderAction;
import org.dominokit.domino.ui.datatable.ColumnConfig;
import org.dominokit.domino.ui.datatable.DataTable;
import org.dominokit.domino.ui.datatable.TableConfig;
import org.dominokit.domino.ui.datatable.events.BodyScrollEvent;
import org.dominokit.domino.ui.datatable.plugins.BodyScrollPlugin;
import org.dominokit.domino.ui.datatable.plugins.BodyScrollPlugin.ScrollPosition;
import org.dominokit.domino.ui.datatable.plugins.SortPlugin;
import org.dominokit.domino.ui.datatable.plugins.SortPluginConfig;
import org.dominokit.domino.ui.datatable.store.LocalListScrollingDataSource;
import org.dominokit.domino.ui.icons.Icons;
import org.dominokit.domino.ui.layout.Layout;
import org.dominokit.domino.ui.style.ColorScheme;
import org.dominokit.domino.ui.utils.TextNode;

public class ScrollLoadingFixedTable implements EntryPoint {

    private LocalListScrollingDataSource<DataObject> localListScrollingDataSource;

    private DataTable<DataObject> table;

    private final TableConfig<DataObject> tableConfig = new TableConfig<>();

    private final Card card = Card.create();

    private final static int NUMBER_OF_COLUMNS = 5;

    private final static int NUMBER_OF_ROWS = 30;

    private final static int SCROLL_LOADING_ROW_NUMBER = 10;

    public static int reloadCounter = 0;

    @Override
    public void onModuleLoad() {

        Layout layout = Layout.create("Scroll Loading").show(ColorScheme.AMBER);

        initTableConfig();

        localListScrollingDataSource = new LocalListScrollingDataSource<>(SCROLL_LOADING_ROW_NUMBER);

        table = new DataTable<>(tableConfig, localListScrollingDataSource).noStripes();

        List<DataObject> data = createTableData(0);
        localListScrollingDataSource.setData(data);
        localListScrollingDataSource.load();

        card.addHeaderAction(new HeaderAction(Icons.MDI_ICONS.database_refresh_mdi()).addClickListener((Event evt) -> {
            table.fireTableEvent(new BodyScrollEvent(ScrollPosition.BOTTOM));
        }));
        
        card.appendChild(table);

        layout.getContentPanel().appendChild(card);
    }

    private void initTableConfig() {
        addTableConfigColumns();
        tableConfig.setFixedBodyHeight("400px");
        tableConfig.addPlugin(new BodyScrollPlugin<>());
        //It would be great if Scroll Loading also works with a not fixed TableConfig
//        tableConfig.setFixed(true);
        tableConfig.addPlugin(new SortPlugin<DataObject>()
                .configure((SortPluginConfig config) -> {
                    config.setShowIconOnSortedColumnOnly(true);
                }));

    }

    private void addTableConfigColumns() {
        tableConfig
                .addColumn(ColumnConfig.<DataObject>create("index", "index")
                        .setCellRenderer(
                                cell -> TextNode.of(cell.getTableRow().getRecord().getValue("index").toString())
                        )
                        .sortable());

        for (int i = 1; i <= NUMBER_OF_COLUMNS; i++) {
            final int j = i;
            tableConfig.addColumn(ColumnConfig.<DataObject>create("column" + i, "column" + i)
                    .setCellRenderer(
                            cell -> TextNode.of(cell.getTableRow().getRecord().getValue("column" + j).toString()))
                    .sortable()
            );
        }
    }

    private List<DataObject> createTableData(int offset) {

        List<DataObject> data = new ArrayList<>();

        for (int i = 0; i <= NUMBER_OF_ROWS; i++) {
            DataObject object = new DataObject()
                    .addDataObject("index", (i + offset));
            for (int j = 1; j <= NUMBER_OF_COLUMNS; j++) {
                object.addDataObject("column" + j, "Value " + (i + offset));
            }
            data.add(object);
        }
        return data;
    }

    private static class DataObject {

        private final HashMap<String, Object> keyValuePair = new HashMap<>();

        public DataObject addDataObject(String key, Object value) {
            keyValuePair.put(key, value);
            return this;
        }

        public Object getValue(String key) {
            return keyValuePair.get(key);
        }
    }
}

[vegegoku]

The correct answer for this is to implement the datatable using something that is not html table, this is not possible using normal tables because of the nature of the html table, well maybe it can be done but it is not easy and wont perform very well and might cause in so many data table plugins.

This will require the rewrite of the datatable with divs maybe, or introduce it as a new component to avoid braking the current one, well if we had the sponsoring for such a task we can start it for sure.

The only work around I can think of right now is to use percentage sizes, didnt test that so I am not sure how it goes specially that this might also affect other plugins and depends on what plugins you are using.