DataTable (with ResizeColumnsPlugin) does not remember column widths when loading new data

[jhickman]

When using the new (RC14) DataTable plugin "ResizeColumnsPlugin", the DataTable does not remember the column widths and will use the default widths (default or set via TableConfig) when loading the new data. This causes the headers to not be aligned with the columns.

To reproduce, create a DataTable with the ResizeColumnsPlugin. Load some data. Resize a column. Replace the store data:

dataSource.setData(newList);
dataTable.load();

Simple setup to reproduce (not including the generateData function)

  private void basic(Column column) {
    TableConfig<Car> tableConfig = new TableConfig<Car>()
        .setFixed(true)
        .addColumn(ColumnConfig.<Car>create("index", "ID")
            .setCellRenderer(
                cell -> TextNode.of("" + cell.getRecord().getId())
            )
        )
        .addColumn(ColumnConfig.<Car>create("make", "Make")
            .setCellRenderer(
                cell -> TextNode.of(cell.getTableRow().getRecord().getMake())
            )
        )
        .addColumn(ColumnConfig.<Car>create("model", "Model")
            .setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getModel())))
        .addColumn(ColumnConfig.<Car>create("price", "Price")
            .setCellRenderer(this::priceRenderer))
        .addColumn(ColumnConfig.<Car>create("color", "Color")
            .setCellRenderer(cell -> TextNode.of(cell.getRecord().getColor().getLabel()))
        )
        .addPlugin(new ResizeColumnsPlugin<>());

    LocalListDataStore<Car> store = new LocalListDataStore<>();
    DataTable<Car> dataTable = new DataTable<>(tableConfig, store)
        .condense();

    int initialValue = 50;

    List<Car> backingData = new ArrayList<>(generateData(initialValue));
    IntegerBox countBox = IntegerBox.create("Row Count")
        .setMarginBottom("0")
        .value(initialValue);
    countBox.addChangeHandler(value -> {
      if (countBox.validate().isValid()) {
        backingData.clear();
        backingData.addAll(generateData(countBox.getValue()));
      }
    });

    column.appendChild(Card.create("Basic Grid")
        .appendChild(FlexLayout.create()
            .setDirection(FlexDirection.LEFT_TO_RIGHT)
            .setGap("15px")
            .appendChild(countBox)
            .appendChild(Button.createPrimary("Load Data")
                .addClickListener(evt -> {
                  if (countBox.validate().isValid()) {
                    store.setData(backingData);
                    dataTable.load();
                  }
                })
            )
        )
        .appendChild(dataTable)
    );
  }

Screenshots:

Before reload:

After reload:

Possible couple solutions:

1. Use dynamic CSS and make a class name for each column; then changing the width just requires update the styles of a single CSSRule; which will automatically set for all cells. Then, when appending new TableRecords on the data table, it just has to apply the same class name for each column. Drag and Drop resizing no longer requires iterating across all cells to update.
2. Probably a faster implementation as it doesn't require rewrite: When resizing a column; it may make sense to update the TableConfig/Column and set the width appropriately. This way, when new data is appended, and it's going through the mechanism for setting cell widths, it'll just grab through the current convention of getting the Column definition.