Skip to content

Table#

The table widget is a powerful tool for displaying and organizing data in a tabular format. With this widget, you have the capability to present large data sets in a format that's both user-friendly and interactive.

On this page, you will learn how to create and customize table widgets. You will also learn how to format and style them.

Create Basic Table#

In this example, the table widget will be employed to showcase data related to a group of companies. We will use the data to display information about 5 companies.

First, let's begin by structuring our code. Create a dedicated folder (widgets) to house the upcoming widgets:

mkdir widgets

Add the following table code (in widgets/table.py) and data (in data/table.json):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import pandas as pd
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    columns=["symbol", "market_cap", "price", "sector"],
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
[
  {
    "symbol": "AAPL",
    "code": "US",
    "last_dividend_date": 1683849600000,
    "market_cap": 3068669460480,
    "price": 193.73,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        190.7, 188.6, 188.1, 189.8, 190.5, 190.7, 194.0, 193.7, 195.1, 194.6
      ],
      "colors": [0, -2.1, -2.6, -0.9, -0.2, 0.0, 3.3, 3.0, 4.4, 3.9]
    }
  },
  {
    "symbol": "SHEL",
    "code": "GB",
    "last_dividend_date": 1699621202000,
    "market_cap": 212379702647,
    "price": 27.435,
    "sector": "Energy Minerals",
    "price_10_days": {
      "values": [27.7, 27.7, 27.6, 27.5, 27.5, 27.3, 27.2, 27.2, 27.1, 27.1],
      "colors": [0, 0.0, -0.1, -0.2, -0.2, -0.4, -0.5, -0.5, -0.6, -0.6]
    }
  },
  {
    "symbol": "JPM",
    "code": "US",
    "last_dividend_date": 1688515200000,
    "market_cap": 448265912320,
    "price": 153.66,
    "sector": "Financial Services",
    "price_10_days": {
      "values": [
        144.3, 145.1, 147.4, 148.1, 148.9, 149.8, 153.4, 153.7, 154.2, 155.7
      ],
      "colors": [0, 0.8, 3.1, 3.8, 4.6, 5.5, 9.1, 9.4, 9.9, 11.4]
    }
  },
  {
    "symbol": "TCEHY",
    "code": "CN",
    "last_dividend_date": 1699621202000,
    "market_cap": 366822713221,
    "price": 690.33,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        706.6, 701.5, 698.3, 697.8, 689.1, 686.8, 683.1, 682.6, 678.9, 678.5
      ],
      "colors": [0, -5.1, -8.3, -8.8, -17.5, -19.8, -23.5, -24.0, -27.7, -28.1]
    }
  },
  {
    "symbol": "JNJ",
    "code": "US",
    "last_dividend_date": 1684713600000,
    "market_cap": 412522414080,
    "price": 159.06,
    "sector": "Healthcare",
    "price_10_days": {
      "values": [
        159.2, 159.5, 158.6, 158.1, 158.8, 159.9, 159.1, 159.1, 158.7, 167.9
      ],
      "colors": [0, 0.3, -0.6, -1.1, -0.4, 0.7, -0.1, -0.1, -0.5, 8.7]
    }
  }
]

For each company, the table widget will show the symbol, market_cap, price and sector columns attribute on the Table class.

As you can see, there are more columns in the table.json file than the ones displayed in the table widget. We will use the remaining columns during the tutorial.

Now, let's clear the current main.py content and add the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from engineai.sdk.dashboard import dashboard
from widgets.table import table_widget

dashboard.Dashboard(
    slug="new_dashboard",
    app_slug="<app-slug>",
    workspace_slug="<workspace-slug>",
    content=[
        table_widget,
    ],
)
Full Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import pandas as pd
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    columns=["symbol", "market_cap", "price", "sector"],
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
[
  {
    "symbol": "AAPL",
    "code": "US",
    "last_dividend_date": 1683849600000,
    "market_cap": 3068669460480,
    "price": 193.73,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        190.7, 188.6, 188.1, 189.8, 190.5, 190.7, 194.0, 193.7, 195.1, 194.6
      ],
      "colors": [0, -2.1, -2.6, -0.9, -0.2, 0.0, 3.3, 3.0, 4.4, 3.9]
    }
  },
  {
    "symbol": "SHEL",
    "code": "GB",
    "last_dividend_date": 1699621202000,
    "market_cap": 212379702647,
    "price": 27.435,
    "sector": "Energy Minerals",
    "price_10_days": {
      "values": [27.7, 27.7, 27.6, 27.5, 27.5, 27.3, 27.2, 27.2, 27.1, 27.1],
      "colors": [0, 0.0, -0.1, -0.2, -0.2, -0.4, -0.5, -0.5, -0.6, -0.6]
    }
  },
  {
    "symbol": "JPM",
    "code": "US",
    "last_dividend_date": 1688515200000,
    "market_cap": 448265912320,
    "price": 153.66,
    "sector": "Financial Services",
    "price_10_days": {
      "values": [
        144.3, 145.1, 147.4, 148.1, 148.9, 149.8, 153.4, 153.7, 154.2, 155.7
      ],
      "colors": [0, 0.8, 3.1, 3.8, 4.6, 5.5, 9.1, 9.4, 9.9, 11.4]
    }
  },
  {
    "symbol": "TCEHY",
    "code": "CN",
    "last_dividend_date": 1699621202000,
    "market_cap": 366822713221,
    "price": 690.33,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        706.6, 701.5, 698.3, 697.8, 689.1, 686.8, 683.1, 682.6, 678.9, 678.5
      ],
      "colors": [0, -5.1, -8.3, -8.8, -17.5, -19.8, -23.5, -24.0, -27.7, -28.1]
    }
  },
  {
    "symbol": "JNJ",
    "code": "US",
    "last_dividend_date": 1684713600000,
    "market_cap": 412522414080,
    "price": 159.06,
    "sector": "Healthcare",
    "price_10_days": {
      "values": [
        159.2, 159.5, 158.6, 158.1, 158.8, 159.9, 159.1, 159.1, 158.7, 167.9
      ],
      "colors": [0, 0.3, -0.6, -1.1, -0.4, 0.7, -0.1, -0.1, -0.5, 8.7]
    }
  }
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from engineai.sdk.dashboard import dashboard
from widgets.table import table_widget

dashboard.Dashboard(
    slug="new_dashboard",
    app_slug="<app-slug>",
    workspace_slug="<workspace-slug>",
    content=[
        table_widget,
    ],
)

If you publish the dashboard, you'll see the table widget displaying the data for the companies:

engineai dashboard publish

Result

The following section will guide you through the process of table customization, allowing you to modify widget styles and formatting to match your preferences.

Pagination#

If you have a large dataset, you can enable pagination for the table widget. This feature allows you to display a limited number of rows per page, making it easier to navigate through the data. To enable pagination, set the rows_per_page parameter in the Table class.

The final code for the table.py file should look like this: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import pandas as pd
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=["symbol", "market_cap", "price", "sector"],
)

Full Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import pandas as pd
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=["symbol", "market_cap", "price", "sector"],
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
[
  {
    "symbol": "AAPL",
    "code": "US",
    "last_dividend_date": 1683849600000,
    "market_cap": 3068669460480,
    "price": 193.73,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        190.7, 188.6, 188.1, 189.8, 190.5, 190.7, 194.0, 193.7, 195.1, 194.6
      ],
      "colors": [0, -2.1, -2.6, -0.9, -0.2, 0.0, 3.3, 3.0, 4.4, 3.9]
    }
  },
  {
    "symbol": "SHEL",
    "code": "GB",
    "last_dividend_date": 1699621202000,
    "market_cap": 212379702647,
    "price": 27.435,
    "sector": "Energy Minerals",
    "price_10_days": {
      "values": [27.7, 27.7, 27.6, 27.5, 27.5, 27.3, 27.2, 27.2, 27.1, 27.1],
      "colors": [0, 0.0, -0.1, -0.2, -0.2, -0.4, -0.5, -0.5, -0.6, -0.6]
    }
  },
  {
    "symbol": "JPM",
    "code": "US",
    "last_dividend_date": 1688515200000,
    "market_cap": 448265912320,
    "price": 153.66,
    "sector": "Financial Services",
    "price_10_days": {
      "values": [
        144.3, 145.1, 147.4, 148.1, 148.9, 149.8, 153.4, 153.7, 154.2, 155.7
      ],
      "colors": [0, 0.8, 3.1, 3.8, 4.6, 5.5, 9.1, 9.4, 9.9, 11.4]
    }
  },
  {
    "symbol": "TCEHY",
    "code": "CN",
    "last_dividend_date": 1699621202000,
    "market_cap": 366822713221,
    "price": 690.33,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        706.6, 701.5, 698.3, 697.8, 689.1, 686.8, 683.1, 682.6, 678.9, 678.5
      ],
      "colors": [0, -5.1, -8.3, -8.8, -17.5, -19.8, -23.5, -24.0, -27.7, -28.1]
    }
  },
  {
    "symbol": "JNJ",
    "code": "US",
    "last_dividend_date": 1684713600000,
    "market_cap": 412522414080,
    "price": 159.06,
    "sector": "Healthcare",
    "price_10_days": {
      "values": [
        159.2, 159.5, 158.6, 158.1, 158.8, 159.9, 159.1, 159.1, 158.7, 167.9
      ],
      "colors": [0, 0.3, -0.6, -1.1, -0.4, 0.7, -0.1, -0.1, -0.5, 8.7]
    }
  }
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from engineai.sdk.dashboard import dashboard
from widgets.table import table_widget

dashboard.Dashboard(
    slug="new_dashboard",
    app_slug="<app-slug>",
    workspace_slug="<workspace-slug>",
    content=[
        table_widget,
    ],
)

You can publish and see the result:

engineai dashboard publish

Result

Customizing Table Columns#

You can change the column type in the table widget to showcase data in a new format.

There are different column types:

In the section we will use the following table columns:

  • DatetimeColumn to show last_dividend_date column.
  • TextColumn to show the symbol and sector columns.
  • NumberColumn to show the market_cap and price columns.
  • LineChartColumn to visualize the price (price_10_days) of the selected company over a 10-day period.
  • TableHeader that will group the market_cap, price, sector and price_10_days columns.

The final code for the table.py file should look like this: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import pandas as pd
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=[
        table.DatetimeColumn(
            data_column="last_dividend_date",
        ),
        table.TextColumn(
            data_column="symbol",
        ),
        table.Header(
            label="Information",
            columns=[
                table.NumberColumn(data_column="market_cap"),
                table.NumberColumn(
                    data_column="price",
                ),
                table.TextColumn(data_column="sector"),
                table.LineChartColumn(
                    data_column="price_10_days",
                    data_key="values",
                ),
            ],
        ),
    ],
)

Full Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import pandas as pd
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=[
        table.DatetimeColumn(
            data_column="last_dividend_date",
        ),
        table.TextColumn(
            data_column="symbol",
        ),
        table.Header(
            label="Information",
            columns=[
                table.NumberColumn(data_column="market_cap"),
                table.NumberColumn(
                    data_column="price",
                ),
                table.TextColumn(data_column="sector"),
                table.LineChartColumn(
                    data_column="price_10_days",
                    data_key="values",
                ),
            ],
        ),
    ],
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
[
  {
    "symbol": "AAPL",
    "code": "US",
    "last_dividend_date": 1683849600000,
    "market_cap": 3068669460480,
    "price": 193.73,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        190.7, 188.6, 188.1, 189.8, 190.5, 190.7, 194.0, 193.7, 195.1, 194.6
      ],
      "colors": [0, -2.1, -2.6, -0.9, -0.2, 0.0, 3.3, 3.0, 4.4, 3.9]
    }
  },
  {
    "symbol": "SHEL",
    "code": "GB",
    "last_dividend_date": 1699621202000,
    "market_cap": 212379702647,
    "price": 27.435,
    "sector": "Energy Minerals",
    "price_10_days": {
      "values": [27.7, 27.7, 27.6, 27.5, 27.5, 27.3, 27.2, 27.2, 27.1, 27.1],
      "colors": [0, 0.0, -0.1, -0.2, -0.2, -0.4, -0.5, -0.5, -0.6, -0.6]
    }
  },
  {
    "symbol": "JPM",
    "code": "US",
    "last_dividend_date": 1688515200000,
    "market_cap": 448265912320,
    "price": 153.66,
    "sector": "Financial Services",
    "price_10_days": {
      "values": [
        144.3, 145.1, 147.4, 148.1, 148.9, 149.8, 153.4, 153.7, 154.2, 155.7
      ],
      "colors": [0, 0.8, 3.1, 3.8, 4.6, 5.5, 9.1, 9.4, 9.9, 11.4]
    }
  },
  {
    "symbol": "TCEHY",
    "code": "CN",
    "last_dividend_date": 1699621202000,
    "market_cap": 366822713221,
    "price": 690.33,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        706.6, 701.5, 698.3, 697.8, 689.1, 686.8, 683.1, 682.6, 678.9, 678.5
      ],
      "colors": [0, -5.1, -8.3, -8.8, -17.5, -19.8, -23.5, -24.0, -27.7, -28.1]
    }
  },
  {
    "symbol": "JNJ",
    "code": "US",
    "last_dividend_date": 1684713600000,
    "market_cap": 412522414080,
    "price": 159.06,
    "sector": "Healthcare",
    "price_10_days": {
      "values": [
        159.2, 159.5, 158.6, 158.1, 158.8, 159.9, 159.1, 159.1, 158.7, 167.9
      ],
      "colors": [0, 0.3, -0.6, -1.1, -0.4, 0.7, -0.1, -0.1, -0.5, 8.7]
    }
  }
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from engineai.sdk.dashboard import dashboard
from widgets.table import table_widget

dashboard.Dashboard(
    slug="new_dashboard",
    app_slug="<app-slug>",
    workspace_slug="<workspace-slug>",
    content=[
        table_widget,
    ],
)

You're all set to publish the Dashboard, and upon doing so, you should see the changes reflected in the table.

engineai dashboard publish

Result

More information

When working with table columns that display charts, make sure that the data takes the form of dictionaries within the main DataFrame. This structure is essential for proper visualization because in the chart columns the scope of the data is not the Dataframe itself, but the dictionary within the Dataframe.

As you can see in the example below, the LineChartColumn class has the data_column argument to define the data scope. In this case price_10_days is the data scope. Then, we have to define a data_key argument, that corresponds to where we find the actual values inside the scope. In this example, we find the values inside the values key.

The data snippet shows the structure of the price_10_days column. The data is a dictionary with the price_10_days key containing the values key, that contains the values.

1
2
3
4
table.LineChartColumn(
    data_column="price_10_days",
    data_key="values",
),

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[
  {
    ...
    "price_10_days": {
      "values": [
        190.7, 188.6, 188.1, 189.8, 190.5, 190.7, 194.0, 193.7, 195.1, 194.6
      ],
        ...
    }
  }
]

In the next section, you will learn how to customize your widgets by changing their style and formatting.

Formatting Table Columns#

Now, let's explore the process of adjusting formatting within the table widget.

There are several formatting options available:

First, add DateTimeFormatting class to formatting argument in the DatetimeColumn class, that displays last_dividend_date column. We will use it to set a specific date format (DD/MM/YYYY HH:MM).

Second, add NumberFormatting class to formatting argument in the NumberColumn class, that displays price column. We will use it to set a higher number of decimal places and include a dollar sign ($).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import pandas as pd
from engineai.sdk.dashboard import formatting
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=[
        table.DatetimeColumn(
            data_column="last_dividend_date",
            formatting=formatting.DateTimeFormatting(
                time_unit=formatting.DateTimeUnit.DATETIME
            ),
        ),
        table.TextColumn(
            data_column="symbol",
        ),
        table.Header(
            label="Information",
            columns=[
                table.NumberColumn(data_column="market_cap"),
                table.NumberColumn(
                    data_column="price",
                    formatting=formatting.NumberFormatting(prefix="$", decimals=2),
                ),
                table.TextColumn(data_column="sector"),
                table.LineChartColumn(
                    data_column="price_10_days",
                    data_key="values",
                ),
            ],
        ),
    ],
)
Full Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import pandas as pd
from engineai.sdk.dashboard import formatting
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=[
        table.DatetimeColumn(
            data_column="last_dividend_date",
            formatting=formatting.DateTimeFormatting(
                time_unit=formatting.DateTimeUnit.DATETIME
            ),
        ),
        table.TextColumn(
            data_column="symbol",
        ),
        table.Header(
            label="Information",
            columns=[
                table.NumberColumn(data_column="market_cap"),
                table.NumberColumn(
                    data_column="price",
                    formatting=formatting.NumberFormatting(prefix="$", decimals=2),
                ),
                table.TextColumn(data_column="sector"),
                table.LineChartColumn(
                    data_column="price_10_days",
                    data_key="values",
                ),
            ],
        ),
    ],
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
[
  {
    "symbol": "AAPL",
    "code": "US",
    "last_dividend_date": 1683849600000,
    "market_cap": 3068669460480,
    "price": 193.73,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        190.7, 188.6, 188.1, 189.8, 190.5, 190.7, 194.0, 193.7, 195.1, 194.6
      ],
      "colors": [0, -2.1, -2.6, -0.9, -0.2, 0.0, 3.3, 3.0, 4.4, 3.9]
    }
  },
  {
    "symbol": "SHEL",
    "code": "GB",
    "last_dividend_date": 1699621202000,
    "market_cap": 212379702647,
    "price": 27.435,
    "sector": "Energy Minerals",
    "price_10_days": {
      "values": [27.7, 27.7, 27.6, 27.5, 27.5, 27.3, 27.2, 27.2, 27.1, 27.1],
      "colors": [0, 0.0, -0.1, -0.2, -0.2, -0.4, -0.5, -0.5, -0.6, -0.6]
    }
  },
  {
    "symbol": "JPM",
    "code": "US",
    "last_dividend_date": 1688515200000,
    "market_cap": 448265912320,
    "price": 153.66,
    "sector": "Financial Services",
    "price_10_days": {
      "values": [
        144.3, 145.1, 147.4, 148.1, 148.9, 149.8, 153.4, 153.7, 154.2, 155.7
      ],
      "colors": [0, 0.8, 3.1, 3.8, 4.6, 5.5, 9.1, 9.4, 9.9, 11.4]
    }
  },
  {
    "symbol": "TCEHY",
    "code": "CN",
    "last_dividend_date": 1699621202000,
    "market_cap": 366822713221,
    "price": 690.33,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        706.6, 701.5, 698.3, 697.8, 689.1, 686.8, 683.1, 682.6, 678.9, 678.5
      ],
      "colors": [0, -5.1, -8.3, -8.8, -17.5, -19.8, -23.5, -24.0, -27.7, -28.1]
    }
  },
  {
    "symbol": "JNJ",
    "code": "US",
    "last_dividend_date": 1684713600000,
    "market_cap": 412522414080,
    "price": 159.06,
    "sector": "Healthcare",
    "price_10_days": {
      "values": [
        159.2, 159.5, 158.6, 158.1, 158.8, 159.9, 159.1, 159.1, 158.7, 167.9
      ],
      "colors": [0, 0.3, -0.6, -1.1, -0.4, 0.7, -0.1, -0.1, -0.5, 8.7]
    }
  }
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from engineai.sdk.dashboard import dashboard
from widgets.table import table_widget

dashboard.Dashboard(
    slug="new_dashboard",
    app_slug="<app-slug>",
    workspace_slug="<workspace-slug>",
    content=[
        table_widget,
    ],
)

At this point, you can publish the Dashboard and see the new changes reflected in the table widget.

engineai dashboard publish

Result

Styling Table Columns#

Most of the widget components come with their dedicated styling classes, and the available styling options can vary based on the specific component.

For example, for a table:

  • You can add a country flag, cell, dot or icon to a TextColumn class.
  • Implement a dynamic color palette that adjusts based on data values.

First, add a country flag to the symbol on the TextColumn class.

Second, adopt a color palette that dynamically corresponds to the data values on the colors key of the price_10_days column, now the line color will dynamically adjust based on the data value:

  • Red for negative values
  • Grey for zero
  • Blue for positive values

The final code for the table.py file should look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import pandas as pd
from engineai.sdk.dashboard import formatting
from engineai.sdk.dashboard.styling import color
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=[
        table.DatetimeColumn(
            data_column="last_dividend_date",
            formatting=formatting.DateTimeFormatting(
                time_unit=formatting.DateTimeUnit.DATETIME
            ),
        ),
        table.TextColumn(
            data_column="symbol", styling=table.CountryFlagStyling(data_column="code")
        ),
        table.Header(
            label="Information",
            columns=[
                table.NumberColumn(data_column="market_cap"),
                table.NumberColumn(
                    data_column="price",
                    formatting=formatting.NumberFormatting(prefix="$", decimals=2),
                ),
                table.TextColumn(data_column="sector"),
                table.LineChartColumn(
                    data_column="price_10_days",
                    data_key="values",
                    styling=table.LineChartStyling(
                        data_key="colors",
                        color_spec=color.DiscreteMap(
                            color.DiscreteMapIntervalItem(
                                color=color.Palette.RUBI_RED,
                                min_value=-100,
                                max_value=0,
                                exclude_max=True,
                            ),
                            color.DiscreteMapValueItem(
                                value=0, color=color.Palette.COCONUT_GREY
                            ),
                            color.DiscreteMapIntervalItem(
                                color=color.Palette.OCEAN_BLUE,
                                min_value=0,
                                max_value=100,
                                exclude_min=True,
                            ),
                        ),
                    ),
                ),
            ],
        ),
    ],
)
Full Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import pandas as pd
from engineai.sdk.dashboard import formatting
from engineai.sdk.dashboard.styling import color
from engineai.sdk.dashboard.widgets import table

table_widget = table.Table(
    data=pd.read_json(
        "data/table.json",
        orient="records",
    ),
    rows_per_page=3,
    columns=[
        table.DatetimeColumn(
            data_column="last_dividend_date",
            formatting=formatting.DateTimeFormatting(
                time_unit=formatting.DateTimeUnit.DATETIME
            ),
        ),
        table.TextColumn(
            data_column="symbol", styling=table.CountryFlagStyling(data_column="code")
        ),
        table.Header(
            label="Information",
            columns=[
                table.NumberColumn(data_column="market_cap"),
                table.NumberColumn(
                    data_column="price",
                    formatting=formatting.NumberFormatting(prefix="$", decimals=2),
                ),
                table.TextColumn(data_column="sector"),
                table.LineChartColumn(
                    data_column="price_10_days",
                    data_key="values",
                    styling=table.LineChartStyling(
                        data_key="colors",
                        color_spec=color.DiscreteMap(
                            color.DiscreteMapIntervalItem(
                                color=color.Palette.RUBI_RED,
                                min_value=-100,
                                max_value=0,
                                exclude_max=True,
                            ),
                            color.DiscreteMapValueItem(
                                value=0, color=color.Palette.COCONUT_GREY
                            ),
                            color.DiscreteMapIntervalItem(
                                color=color.Palette.OCEAN_BLUE,
                                min_value=0,
                                max_value=100,
                                exclude_min=True,
                            ),
                        ),
                    ),
                ),
            ],
        ),
    ],
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
[
  {
    "symbol": "AAPL",
    "code": "US",
    "last_dividend_date": 1683849600000,
    "market_cap": 3068669460480,
    "price": 193.73,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        190.7, 188.6, 188.1, 189.8, 190.5, 190.7, 194.0, 193.7, 195.1, 194.6
      ],
      "colors": [0, -2.1, -2.6, -0.9, -0.2, 0.0, 3.3, 3.0, 4.4, 3.9]
    }
  },
  {
    "symbol": "SHEL",
    "code": "GB",
    "last_dividend_date": 1699621202000,
    "market_cap": 212379702647,
    "price": 27.435,
    "sector": "Energy Minerals",
    "price_10_days": {
      "values": [27.7, 27.7, 27.6, 27.5, 27.5, 27.3, 27.2, 27.2, 27.1, 27.1],
      "colors": [0, 0.0, -0.1, -0.2, -0.2, -0.4, -0.5, -0.5, -0.6, -0.6]
    }
  },
  {
    "symbol": "JPM",
    "code": "US",
    "last_dividend_date": 1688515200000,
    "market_cap": 448265912320,
    "price": 153.66,
    "sector": "Financial Services",
    "price_10_days": {
      "values": [
        144.3, 145.1, 147.4, 148.1, 148.9, 149.8, 153.4, 153.7, 154.2, 155.7
      ],
      "colors": [0, 0.8, 3.1, 3.8, 4.6, 5.5, 9.1, 9.4, 9.9, 11.4]
    }
  },
  {
    "symbol": "TCEHY",
    "code": "CN",
    "last_dividend_date": 1699621202000,
    "market_cap": 366822713221,
    "price": 690.33,
    "sector": "Technology",
    "price_10_days": {
      "values": [
        706.6, 701.5, 698.3, 697.8, 689.1, 686.8, 683.1, 682.6, 678.9, 678.5
      ],
      "colors": [0, -5.1, -8.3, -8.8, -17.5, -19.8, -23.5, -24.0, -27.7, -28.1]
    }
  },
  {
    "symbol": "JNJ",
    "code": "US",
    "last_dividend_date": 1684713600000,
    "market_cap": 412522414080,
    "price": 159.06,
    "sector": "Healthcare",
    "price_10_days": {
      "values": [
        159.2, 159.5, 158.6, 158.1, 158.8, 159.9, 159.1, 159.1, 158.7, 167.9
      ],
      "colors": [0, 0.3, -0.6, -1.1, -0.4, 0.7, -0.1, -0.1, -0.5, 8.7]
    }
  }
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from engineai.sdk.dashboard import dashboard
from widgets.table import table_widget

dashboard.Dashboard(
    slug="new_dashboard",
    app_slug="<app-slug>",
    workspace_slug="<workspace-slug>",
    content=[
        table_widget,
    ],
)

If you publish the dashboard now, you'll notice the color modifications in price_10_days columns and the country flag in symbol column.

engineai dashboard publish

Result

Next Steps#

In the next section, we’ll introduce the timeseries widget, and how to format, customize, and style it.