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: