Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content of DataTable overlaps when set to noStripes and the first columns are pinned #801

Closed
bschmelcher opened this issue Aug 2, 2023 · 1 comment
Assignees
Labels
bug Something isn't working version 1.x.x Version 1.x.x issues version 2.x.x Version 2.x.x issues
Projects
Milestone

Comments

@bschmelcher
Copy link

Describe the bug
When a DataTable is set to nostripes, the background of the table entries is transparent by default.
If pinning for columns is enabled, the not-pinned content overlaps with the content of pinned columns.

To Reproduce
Steps to reproduce the behavior:

  1. Create a DataTable which is set to nostripes
  2. Add the PinColumnsPlugin and apply PinColumnMeta.left to one of the columns
  3. Make sure the content of the table exceeds the browser windows width, so the content is scrollable horizontally
  4. Scroll to the right in the table
  5. The not pinned content should be hidden behind the pinned columns

Fails in Step 5, the content of the pinned and not pinned columns is overlapping.

Expected behavior
The content should not overlap

Proposed solution
Set the background-color for table cells to white as in fix #792 DataTable Header has a transparent background

Screenshot
image

@vegegoku vegegoku added bug Something isn't working version 1.x.x Version 1.x.x issues version 2.x.x Version 2.x.x issues labels Aug 2, 2023
@bschmelcher
Copy link
Author

Code to reproduce:

public class CodeToReproduce implements EntryPoint {

    private LocalListDataStore<DataObject> localListDataStore;

    private DataTable<DataObject> table;

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

    private final Card card = Card.create();

    private final static int NUMBER_OF_COLUMNS = 30;

    public static int reloadCounter = 0;

    @Override
    public void onModuleLoad() {

        Layout layout = Layout.create("Pin column overlap no stripes").show(ColorScheme.AMBER);

        initTableConfig();

        localListDataStore = new LocalListDataStore<>();

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

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

        card.addHeaderAction(new HeaderAction(Icons.MDI_ICONS.refresh_mdi()).addClickListener((Event evt) -> {
            card.getBody().clearElement();
            localListDataStore = new LocalListDataStore<>();
            table = new DataTable<>(tableConfig, localListDataStore).noStripes();
            localListDataStore.setData(createTableData(++reloadCounter));
            card.appendChild(table);

        }));

        card.appendChild(table);

        layout.getContentPanel().appendChild(card);

    }

    private void initTableConfig() {
        addTableConfigColumns();

        tableConfig.setFixed(true);
        tableConfig.addPlugin(new ResizeColumnsPlugin<DataObject>().configure((ResizeColumnsConfig config) -> {
            config.setClipContent(true);
        }));
        tableConfig.addPlugin(new PinColumnsPlugin<>());
    }

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

        for (int i = 2; 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()))
            );
        }
    }

    private List<DataObject> createTableData(int offset) {

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

        for (int i = 0; i <= 5; 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 vegegoku added this to the 1.0.2 milestone Aug 3, 2023
@vegegoku vegegoku added this to To do in Domino UI via automation Aug 3, 2023
vegegoku added a commit that referenced this issue Aug 3, 2023
vegegoku added a commit that referenced this issue Aug 3, 2023
@vegegoku vegegoku self-assigned this Aug 3, 2023
@vegegoku vegegoku closed this as completed Aug 3, 2023
Domino UI automation moved this from To do to Done Aug 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working version 1.x.x Version 1.x.x issues version 2.x.x Version 2.x.x issues
Projects
Domino UI
  
Done
Development

No branches or pull requests

2 participants