Displaying Data Using a Table Widget#

If you want to display data arranged in a table, use a QTableWidget to do so, without dealing with much configuration.

Notice that using a QTableWidget is not the only path to display information in tables. You can also create a data model and display it using a QTableView, but that is not in the scope of this tutorial.

Note

This Widget is a ready-to-use version of something you can customize further on. To know more about the Model/View architecture in Qt, refer to its official documentation.

  1. Import QTableWidget, QTableWidgetItem, and QColor to display background colors:

    import sys
from PySide6.QtGui import QColor
from PySide6.QtWidgets import (QApplication, QTableWidget,
                               QTableWidgetItem)

  2. Create a simple data model containing the list of names and hex codes for different colors:

    colors = [("Red", "#FF0000"),
          ("Green", "#00FF00"),
          ("Blue", "#0000FF"),
          ("Black", "#000000"),
          ("White", "#FFFFFF"),
          ("Electric Green", "#41CD52"),
          ("Dark Blue", "#222840"),
          ("Yellow", "#F9E56d")]

  3. Define a function to translate the hex code into an RGB equivalent:

    def get_rgb_from_hex(code):
    code_hex = code.replace("#", "")
    rgb = tuple(int(code_hex[i:i+2], 16) for i in (0, 2, 4))
    return QColor.fromRgb(rgb[0], rgb[1], rgb[2])

  4. Initialize the QApplication singleton:

    app = QApplication()

  5. Configure the QTableWidget to have a number of rows equivalent to the amount of items from the colors structure, and a number of columns with the members of one color entry, plus one. You can set the column name using the setHorizontalHeaderLabels as described below:

    table = QTableWidget()
table.setRowCount(len(colors))
table.setColumnCount(len(colors[0]) + 1)
table.setHorizontalHeaderLabels(["Name", "Hex Code", "Color"])

    Note

    the reason of using + 1 is to include a new column where we can display the color.

  6. Iterate the data structure, create the QTableWidgetItems instances, and add them into the table using a x, y coordinate. Here the data is being assigned row-per-row:

    for i, (name, code) in enumerate(colors):
    item_name = QTableWidgetItem(name)
    item_code = QTableWidgetItem(code)
    item_color = QTableWidgetItem()
    item_color.setBackground(get_rgb_from_hex(code))
    table.setItem(i, 0, item_name)
    table.setItem(i, 1, item_code)
    table.setItem(i, 2, item_color)

  7. Show the table and execute the QApplication.

    table.show()
sys.exit(app.exec())

The final application will look like this:

QTableWidget example