WTableView header display issues

Added by James Choa 4 months ago

Hi, I'm currently using Wt for a project and I'm having issues when it comes to using the WTableView widget. The problem comes from the table header. I can't seem to get it to align properly. Attached are some images that illustrate my problem. In the image "current_problem.png", you'll notice that the header is overlapping with the 1st row of data. If I manually edit the styling through the chrome developer tools by omitting the height element for "#oq8mm2y .headerrh", the issues gets resolved as shown in "fixed.png".

One way to fix this is to somehow get Wt to omit the height property for the said element, but I'm not sure how to go about it.

The other solution is to have WTableView render the cells as individual <div> elements as shown in the Wt Widget Gallery (shown in the attached "widget_gallery.png"). I'm open to going about this option as well, but I'm not sure how to get Wt to do so.

Here's a snippet of how I'm currently setting up WTableView

if (!m_model) {
    m_model = new Wt::WStandardItemModel(m_tableView);
}

populateModel();

m_tableView->setModel(m_model);
m_tableView->setRowHeaderCount(1);
m_tableView->setEditTriggers(Wt::WAbstractItemView::SingleClicked);
m_tableView->setSortingEnabled(false);
m_tableView->setColumnResizeEnabled(false);

And how the model is setup under populateModel()

        m_transactions = m_db->listDetailedTransactions();

        if (m_filterData) {
                filterData();
        }

        m_model->clear();

        int idx = 0;
        std::for_each(m_transactions.begin(), m_transactions.end(),
                [this, &idx](const collector::DatabaseAccess::DetailedTransaction& tx) {
                        std::string direction;
                        switch(tx.direction) {
                                case collector::DIR_INGRESS:
                                        direction = "Ingress";
                                        break;
                                case collector::DIR_EGRESS:
                                        direction = "Egress";
                                        break;
                                default:
                                        direction = "Invalid";
                        }

                        auto userItem = new Wt::WStandardItem();
                        userItem->setData(tx.userName, Wt::DisplayRole);
                        m_model->setItem(idx, 0, userItem);

                        auto stationItem = new Wt::WStandardItem();
                        stationItem->setData(tx.stationName, Wt::DisplayRole);
                        m_model->setItem(idx, 1, stationItem);

                        auto typeItem = new Wt::WStandardItem();
                        typeItem->setData(tx.itemType, Wt::DisplayRole);
                        m_model->setItem(idx, 2, typeItem);

                        auto weightItem = new Wt::WStandardItem();
                        weightItem->setData(tx.weight, Wt::DisplayRole);
                        m_model->setItem(idx, 3, weightItem);

                        auto expirationItem = new Wt::WStandardItem();
                        expirationItem->setData(convert::timeToString(tx.expiration, convert::FORMAT_HUMAN), Wt::DisplayRole);
                        m_model->setItem(idx, 4, expirationItem);

                        auto directionItem = new Wt::WStandardItem();
                        directionItem->setData(direction, Wt::DisplayRole);
                        m_model->setItem(idx, 5, directionItem);

                        auto locationItem = new Wt::WStandardItem();
                        locationItem->setData(tx.location, Wt::DisplayRole);
                        m_model->setItem(idx, 6, locationItem);

                        auto timeStampItem = new Wt::WStandardItem();
                        timeStampItem->setData(convert::timeToString(tx.timestamp, convert::FORMAT_HUMAN), Wt::DisplayRole);
                        m_model->setItem(idx, 7, timeStampItem);

                        ++idx;
                });

        if (!m_transactions.empty()) {
                m_model->setHeaderData(0, std::string("User:"));
                m_model->setHeaderData(1, std::string("Station:"));
                m_model->setHeaderData(2, std::string("Item:"));
                m_model->setHeaderData(3, std::string("Weight:"));
                m_model->setHeaderData(4, std::string("Expiration:"));
                m_model->setHeaderData(5, std::string("Direction:"));
                m_model->setHeaderData(6, std::string("Location:"));
                m_model->setHeaderData(7, std::string("Transaction Time:"));
        }

        for (int i = 0; i < m_model->columnCount(); ++i) {
                m_tableView->setHeaderAlignment(i, Wt::AlignTop);
        }

Thanks for reading through all that and taking the time to help me solve this issue.

James

current_problem.png (193 KB)

fixed.png (194 KB)

widget_gallery.png (178 KB)


Replies (2)

RE: WTableView header display issues - Added by Koen Deforche 4 months ago

Hey James,

The problem seems to be caused by progressive bootstrap. This sounds clearly as a bug.
When using progressive bootstrap the tableview will render as a real <table> (assuming no JavaScript support is available).

If you will disable progressive bootstrap then it should work.
In the mean time can you file this as a bug?

Regards,
koen

RE: WTableView header display issues - Added by James Choa 4 months ago

Hi Koen,

Thanks for the help, I set the bootstrap method to default instead of progressive
in wt_config and I got the tables to render as divs instead of plain tables.

I'll file this as a bug report after I catch up on my deadlines. Thank you
very much for the help!

James

(1-2/2)