PySimpleGUI – Editable Table with an Excel-like design

Posted by


PySimpleGUI is a simple yet powerful Python GUI library that allows you to create user interfaces with minimal code. One of the many features of PySimpleGUI is the ability to create an Excel-style editable table widget, which can be useful for displaying and editing tabular data in your application.

In this tutorial, we will walk through the process of creating an Excel-style editable table using PySimpleGUI. We will cover how to create the table, add data to it, and handle user interactions such as editing cell values.

Step 1: Setting up PySimpleGUI

Before we can create our Excel-style editable table, we need to install PySimpleGUI. You can install PySimpleGUI using pip by running the following command in your terminal:

pip install PySimpleGUI

Once you have installed PySimpleGUI, you can start creating your editable table.

Step 2: Creating the Excel-style Editable Table

To create an Excel-style editable table in PySimpleGUI, we need to use the sg.Table element. This element allows us to display and edit tabular data in a grid format.

import PySimpleGUI as sg

# Define the layout of the window
layout = [
    [sg.Table(values=[], headings=[], auto_size_columns=True, num_rows=10, enable_events=True, key='-TABLE-')],
    [sg.Button('Add Row'), sg.Button('Delete Row')]
]

# Create the window
window = sg.Window('Editable Table', layout)

# Display the window and read events
while True:
    event, values = window.read()

    if event in (sg.WIN_CLOSED, 'Exit'):
        break

window.close()

In the code above, we create a simple PySimpleGUI window with an empty table. We also add buttons to the window that will allow us to add and delete rows from the table.

Step 3: Adding Data to the Table

Next, we need to populate our table with data. We can do this by updating the values and headings properties of the sg.Table element.

# Define the layout of the window
layout = [
    [sg.Table(values=[[f'Row {i}' for i in range(3)] for _ in range(10)],
              headings=['Column 1', 'Column 2', 'Column 3'],
              auto_size_columns=False, num_rows=10, enable_events=True, key='-TABLE-')],
    [sg.Button('Add Row'), sg.Button('Delete Row')]
]

In the code above, we create a table with 3 columns and 10 rows, where each cell contains a placeholder value. You can replace these placeholder values with your own data.

Step 4: Handling User Interactions

Now that we have a populated table, we need to handle user interactions such as editing cell values and adding/deleting rows. We can do this by adding event handlers to our window loop.

while True:
    event, values = window.read()

    if event in (sg.WIN_CLOSED, 'Exit'):
        break

    if event == 'Add Row':
        table_values = values['-TABLE-']
        table_values.append(['' for _ in range(len(table_values[0]))])
        window['-TABLE-'].update(values=table_values)

    if event == 'Delete Row':
        table_values = values['-TABLE-']
        if len(table_values) > 1:
            table_values.pop()
            window['-TABLE-'].update(values=table_values)

In the code above, we add event handlers for the ‘Add Row’ and ‘Delete Row’ buttons. When the ‘Add Row’ button is clicked, a new row with empty values is appended to the table. When the ‘Delete Row’ button is clicked, the last row in the table is removed.

Step 5: Customizing the Table

You can customize the appearance and behavior of the table by using the various properties of the sg.Table element. For example, you can set the background_color, text_color, and select_mode properties to change the colors and selection behavior of the table.

sg.Table(values=[[f'Row {i}' for i in range(3)] for _ in range(10)],
              headings=['Column 1', 'Column 2', 'Column 3'],
              auto_size_columns=False, num_rows=10, enable_events=True, key='-TABLE-',
              background_color='lightgrey', text_color='black', select_mode='cell')

And that’s it! You have now created an Excel-style editable table using PySimpleGUI. You can use this table to display and edit tabular data in your Python applications. Feel free to further customize the table and add additional features to suit your needs.

0 0 votes
Article Rating
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@randydurnil1824
2 months ago

Thank you for the great tutorials on this channel. (QUESTION) How do I update an array when I 'Focus_Out' in this script (I used an array to input data into the table)? If i do another update to table from array after I have changed the table from my table screen, the array data wipes out changes. Basically, I would like to update my array data with the changes I make to the table.
Sorry if I am not explaining this well. I am new to this.

@sews1523
2 months ago

thank you very much, i needed to find how to select a specific cell as opposed to the entire row

@gandavnarrain2855
2 months ago

Interesting and helpful example. Lets me see how PySimpleGUI can be used. Thankyou.

@md.masumomarjashim
2 months ago

Please make a video on how to enable a disabled button and make it do something without calling read everytime.

@elretacodigo
2 months ago

Interesante! Muchas gracias por compartir, Saludos y Bendiciones en Jesús desde Lima Perú.

@jamesburman9784
2 months ago

Just a brief question, after implementing it on my own pysimplegui table, when i click a cell it displays the "edit cell" widget two places above the cell i clicked, do you know why that is? Thanks

@jacpat98
2 months ago

I actually subscribed for the JS validation video, I am glad I did, I had heard of tkinter and PySimpleGUI, but I have never actually seen them. Very cool introduction to them. Not sure how great you are with bootstrap, front end design, or react, but more videos on those kinda topics would be cool to see. Keep up the great content!