Table Widget

This tutorial demonstrates the Table widget in Widgetastic.core using comprehensive examples from testing_page.html. You’ll learn to work with HTML tables, read data from rows and cells, handle embedded widgets, and manage complex table structures with merged cells.

Note

Prerequisites: Basic widgets tutorial Test Pages Used: testing/html/testing_page.html

Table Widget Fundamentals

The Table widget lets you work with HTML tables easily. Think of it as a way to read and interact with table data on web pages.

What is a Table Widget?

A table widget represents an HTML <table> element. It helps you: * Read data from table rows and cells * Fill in form inputs that are inside table cells * Find specific rows based on their content * Handle complex tables with merged cells

Let’s learn with three simple examples from the testing page.

Basic Table - Reading Data

The simplest use case: reading data from a standard table with headers.

"""Basic Table - Reading Data

This example demonstrates reading data from a standard table with headers.
"""

from widgetastic.widget import Table

# Initialize the table widget
table = Table(parent=browser, locator="#with-thead")  # noqa: F821

# Get table information
print(f"Headers: {table.headers}")
print(f"Number of rows: {len(list(table))}")

# Read all rows
print("All rows:")
for row in table:
    print([cell.text for header, cell in row])

# Access a specific row (first row is index 0)
first_row = table[0]
print(f"First row data: {first_row.read()}")

# Access a specific cell (row 0, column 0)
cell = table[0][0]
print(f"First cell text: {cell.text}")

# Read the entire table as a list of dictionaries
all_data = table.read()
print(f"Table has {len(all_data)} rows")
print(f"First row from read(): {all_data[0]}")

Accessing Cells in Different Ways

When you have a row, you can access cells in multiple ways:

"""Accessing Cells in Different Ways

This example demonstrates multiple methods to access table cells.
"""

from widgetastic.widget import Table

table = Table(parent=browser, locator="#with-thead")  # noqa: F821
row = table[0]  # Get first row

# Method 1: By index (0-based)
cell = row[0]
print(f"Cell by index [0]: {cell.text}")

# Method 2: By column name (exact match)
cell = row["Column 1"]
print(f"Cell by column name 'Column 1': {cell.text}")

# Method 3: By attributized name (Django-style)
# Column names are automatically converted: "Column 1" -> "column_1"
cell = row.column_1
print(f"Cell by attributized name 'column_1': {cell.text}")

# You can also click on cells
print("Clicking on column_1 cell...")
row.column_1.click()
print("Cell clicked successfully")

Finding Rows by Content

You can search for rows that contain specific values using several methods:

"""Finding Rows by Content

This example demonstrates different methods to search for specific rows.
"""

from widgetastic.widget import Table

table = Table(parent=browser, locator="#with-thead")  # noqa: F821

# Method 1: Keyword-based filtering (Django-style)
print("Finding rows with keyword filters:")
rows = list(table.rows(column_1="qwer"))
print(f"Rows where Column 1 equals 'qwer': {len(rows)}")

rows_containing = list(table.rows(column_2__contains="foo"))
print(f"Rows with 'foo' in Column 2: {len(rows_containing)}")

rows_starting = list(table.rows(column_2__startswith="bar"))
print(f"Rows starting with 'bar' in Column 2: {len(rows_starting)}")

rows_ending = list(table.rows(column_2__endswith="_y"))
print(f"Rows ending with '_y' in Column 2: {len(rows_ending)}")

# Find a single row (returns first match or raises RowNotFound)
row = table.row(column_1="qwer")
print(f"Single row where column_1='qwer': {row.read()}")

# Method 2: Tuple-based filtering
print("Tuple-based filtering:")
rows = list(table.rows((0, "asdf")))
print(f"Rows where column 0 equals 'asdf': {len(rows)}")

rows = list(table.rows((1, "contains", "bar")))
print(f"Rows where column 1 contains 'bar': {len(rows)}")

# Method 3: Row attribute filtering
print("Row attribute filtering:")
rows = list(table.rows(_row__attr=("data-test", "abc-123")))
print(f"Rows with data-test='abc-123': {len(rows)}")

Table with Embedded Widgets

Some tables have input fields (like text inputs) inside their cells. You need to tell the Table widget which columns contain widgets.

"""Table with Embedded Widgets

This example demonstrates working with tables that have input fields in cells.
"""

from widgetastic.widget import Table, TextInput

# Create the table with column_widgets
# Tell the table which columns have widgets
widget_table = Table(
    parent=browser,  # noqa: F821
    locator="#withwidgets",
    column_widgets={
        "Column 2": TextInput(locator="./input"),
        "Column 3": TextInput(locator="./input"),
    },
)

# Read the table (widgets are automatically read when present)
data = widget_table.read()
print(f"Table data: {data[0]}")

# Access and fill a widget in a specific cell
first_row = widget_table[0]
column2_cell = first_row["Column 2"]

# Fill the input
column2_cell.widget.fill("new value")
print(f"Value after filling: {column2_cell.widget.read()}")

# The read() method handles this automatically
print(f"Cell value using read(): {column2_cell.read()}")

# Fill multiple rows at once
print("Filling multiple rows:")
widget_table.fill([{"Column 2": "value1"}, {"Column 3": "value3"}])
print(f"After batch fill: {widget_table.read()}")

Complex Table with Merged Cells

Some tables have cells that span multiple rows or columns (rowspan/colspan). Widgetastic handles these automatically.

"""Complex Table with Merged Cells

This example demonstrates handling tables with rowspan/colspan cells.
"""

from widgetastic.widget import Table, TextInput

# Create the table with column_widgets
complex_table = Table(
    parent=browser,  # noqa: F821
    locator="#rowcolspan_table",
    column_widgets={
        "Widget": TextInput(locator="./input"),
    },
)

# Get headers
print(f"Headers: {complex_table.headers}")

# Read the table - merged cells are handled automatically
data = complex_table.read()
print(f"Table has {len(data)} rows")
print(f"First row: {data[0]}")

# Access and fill a widget in a merged cell
row = complex_table[7]  # Access row 8
widget_cell = row["Widget"]
widget_cell.widget.fill("test value")
print(f"Widget value after fill: {widget_cell.widget.read()}")

What Happens with Merged Cells?

When a cell spans multiple rows or columns, Widgetastic creates a TableReference that points to the original cell. This means: * You can still access all cells normally * Merged cells are handled transparently * Widgets in merged cells work just like regular cells

Associative Column Filling

When you have a table where one column uniquely identifies each row, you can use assoc_column to fill rows by their key value:

"""Associative Column Filling

This example demonstrates filling rows using an associative column as a key.
"""

from widgetastic.widget import Table, TextInput

# The edge_case_test_table has a "Status" column with unique values
# Use "Status" column as the associative column
status_table = Table(
    parent=browser,  # noqa: F821
    locator="#edge_case_test_table",
    column_widgets={
        "Input": TextInput(locator="./input"),
    },
    assoc_column="Status",
)

# Read the table - returns a dictionary keyed by Status value
data = status_table.read()
print("Table data (keyed by Status):")
for status, row_data in data.items():
    print(f"  {status}: {row_data}")

# Fill rows by their Status value
print("Filling rows by Status:")
status_table.fill(
    {"Active": {"Input": "new_active_value"}, "Inactive": {"Input": "new_inactive_value"}}
)

# Read back to verify
updated_data = status_table.read()
print(f"After fill - Active row Input: {updated_data['Active']['Input']}")
print(f"After fill - Inactive row Input: {updated_data['Inactive']['Input']}")