Table

Introduction

Table widget in Supervisely allows for displaying and manipulating data in a table format.

It supports data in the Pandas DataFrame format or a Python dictionary with a specific structure.

The Table widget allows searching, sorting by column and direction, and the ability to download or customize data before downloading. It also allows for the creation of buttons in table cells and updating table data in real-time through Python code.

Function signature

table = Table()
table.read_pandas(pd.DataFrame(data=data, index=b, columns=a))

or

table = Table(
    data=pd.DataFrame(data=data, index=b, columns=a),
    fixed_cols=1,
    per_page=10,
    page_sizes=[10, 15, 30, 50, 100],
    width="auto",
    sort_column_id=1,
    sort_direction="asc",
    widget_id=None
)

Parameters

data

Data of table in different formats:

1. Pandas Dataframe:

pd.DataFrame(data=data, columns=columns)

1. Python dict with structure:

 {
    "columns": ["col_name_1", "col_name_2", ...],
    "data": [
        ["row_1_column_1", "row_1_column_2", ...],
        ["row_2_column_1", "row_2_column_2", ...],
        ...
    ]
}

# prepare data for table
a = list(range(1, 11))
b = list(range(1, 5))

data = []
for row in b:
    temp = [round(row * number, 1) for number in a]
    data.append(temp)

a = [str(i) for i in a]
b = [str(i) for i in b]

data = pd.DataFrame(data=data, index=b, columns=a)

table = Table(data=df)

columns

List of columns names.

type: Optional[list]

default value: None

columns = [f"Col#{i}" for i in range(1, 11)]
data = pd.DataFrame(data=data, index=b, columns=columns)

table = Table(data=df)

fixed_cols

Number of fixed colums (left to right).

type: Optional[int]

default value: None

table = Table(data=df, fixed_cols=2)

per_page

Default per page value.

type: Optional[int]

default value: 10

table = Table(data=df, per_page=4)

page_sizes

Page sizes presets.

type: Optional[List[int]]

default value: [10, 15, 30, 50, 100]

width

Width of table.

type: Optional[str]

default value: auto

table = Table(data=df, width="200px")

sort_column_id

Column ID by which the table will be sorted.

type: int

default value: 0

table = Table(data=df, sort_column_id=2)

sort_direction

Table sorting direction.

type: Optional[Literal["asc", "desc"]]

default value: asc

table = Table(data=df, sort_direction="desc")

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/tables/001_table/src/main.py

Import libraries

import os

import pandas as pd
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, Table

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

Prepare function that creates example pandas table

def multiplication_table():
    a = list(range(1, 11))
    b = list(range(1, 6))

    data = []
    for row in b:
        temp = [round(row * number, 1) for number in a]
        temp[-1] = sly.app.widgets.Table.create_button("Delete row")
        data.append(temp)

    a = [f"Col#{str(i)}" for i in a]
    b = [str(i) for i in b]
    return pd.DataFrame(data=data, index=b, columns=a)

Create data for table.

df = multiplication_table()

Initialize Table widget

table = Table(data=df)

or you can initialize empty table and set data later.

table = Table()
table.read_pandas(df)

Create app layout

Prepare a layout for app using Card widget with the content parameter and place widget that we've just created in the Container widget.

card = Card(
    title="Table",
    content=table,
)
layout = Container(widgets=[card])

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add functions to control widget from python code

@table.download_as_csv
def download_as_csv():
    df = table.to_pandas()
    df = df.drop(index=[0, 1, 2])
    return df
    

@table.click
def handle_table_button(datapoint: sly.app.widgets.Table.ClickedDataPoint):
    if datapoint.button_name is None:
        return
    row_num = datapoint.row["Col#1"]
    if datapoint.button_name == "Delete row":
        table.delete_row("Col#1", row_num)