Nimda Nimda - 1 month ago 21
Python Question

How to show image and text at same cell in QTableWidget in PyQt?

I want to have a table with 2 or 3 columns with rows that shows image and text alongside each other in PyQt (I am using python3.5 and PyQt 5). First I chose QListWidget but it was limited to only one column. I figured out that QTableWidget is the best way for doing this. But when I put an image for a cell in the table the text of that cell is not being shown at bottom of it. How can I make the cell show text and image in proper place?
This my code:

self.main_table = QTableWidget(self)
self.main_table.setGeometry(QRect(20, 140, 600, 330))
sizePolicy = QSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(self.main_table.sizePolicy().hasHeightForWidth())
self.main_table.setSizePolicy(sizePolicy)
self.main_table.setLayoutDirection(Qt.LeftToRight)
self.main_table.setLocale(QLocale(QLocale.Persian, QLocale.Iran))
self.main_table.setInputMethodHints(Qt.ImhNone)
self.main_table.setFrameShape(QFrame.NoFrame)
self.main_table.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.main_table.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.main_table.setEditTriggers(QAbstractItemView.NoEditTriggers)
self.main_table.setTabKeyNavigation(False)
self.main_table.setShowGrid(False)
self.main_table.setCornerButtonEnabled(False)
self.main_table.setIconSize(QSize(210,150))

self.main_table.setRowCount(2)
self.main_table.setColumnCount(2)


self.main_table.setObjectName("main_table")
self.main_table.horizontalHeader().setVisible(False)
self.main_table.horizontalHeader().setHighlightSections(False)
self.main_table.verticalHeader().setVisible(False)
self.main_table.verticalHeader().setHighlightSections(False)
self.main_table.horizontalHeader().setDefaultSectionSize(250)
self.main_table.verticalHeader().setDefaultSectionSize(250)

self.item = QTableWidgetItem(QIcon('content/img/food.png'),'Food')
self.main_table.setItem(0 , 0, self.item)

Answer Source

The simplest is to use a create a custom widget where we locate the elements as we want, the following code implements the icon appears at the top and the text below it.

class CustomWidget(QWidget):
    def __init__(self, text, img, parent=None):
        QWidget.__init__(self, parent)

        self._text = text
        self._img = img

        self.setLayout(QVBoxLayout())
        self.lbPixmap = QLabel(self)
        self.lbText = QLabel(self)
        self.lbText.setAlignment(Qt.AlignCenter)

        self.layout().addWidget(self.lbPixmap)
        self.layout().addWidget(self.lbText)

        self.initUi()

    def initUi(self):
        self.lbPixmap.setPixmap(QPixmap(self._img).scaled(self.lbPixmap.size(),Qt.KeepAspectRatio))
        self.lbText.setText(self._text)


    @pyqtProperty(str)
    def img(self):
        return self._img

    @img.setter
    def total(self, value):
        if self._img == value:
            return
        self._img = value
        self.initUi()

    @pyqtProperty(str)
    def text(self):
        return self._text

    @text.setter
    def text(self, value):
        if self._text == value:
            return
        self._text = value
        self.initUi()

Then add the widget through the setCellWidget() function to add them and scale the space of each cell with resizeColumnsToContents() and resizeRowsToContents() as I show below:

class TableWidget(QTableWidget):
    def __init__(self, parent=None):
        QTableWidget.__init__(self, parent)
        self.setColumnCount(5)
        self.setRowCount(5)
        for i in range(self.columnCount()):
            for j in range(self.rowCount()):
                lb = CustomWidget(str(i)+str(j), "/path/of/image")
                self.setCellWidget(i, j, lb)

        self.resizeColumnsToContents()
        self.resizeRowsToContents()
        self.cellClicked.connect(self.onCellClicked)

    @pyqtSlot(int, int)
    def onCellClicked(self, row, column):
        w = self.cellWidget(row, column)
        print(w.text, w.img)


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    tw = TableWidget()

    tw.show()
    sys.exit(app.exec_())

enter image description here