Skip to content

Grid#

Grid #

Grid(*items: Union[LayoutItem, Row, FluidRow])

Organize dashboard content with vertical grid structure.

The Grid class is component in a dashboard layout, allowing users to organize content using a vertical grid structure. It provides a way to arrange widgets, rows, and selectable sections.

Constructor for Grid.

Parameters:

Name Type Description Default
items Union[LayoutItem, Row, FluidRow]

items to add to grid. Can be widgets, rows or selectable sections (e.g tabs).

 ()

Examples:#

Create Grid with widget 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(select.Select(data)),
)
Create Grid with multiple widgets 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(select.Select(data), toggle.Toggle(data)),
)
Create Grid with Tab Section and Card 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(
        layout.TabSection(layout.Tab(label="tab", content=select.Select(data))),
        layout.Card(header=layout.Header(title="Card"), content=toggle.Toggle(data)),
    ),
)

Row #

Row(
    *items: Union[LayoutItem, Column],
    height: Optional[Union[int, float]] = None
)

Organize and group content horizontally within a vertical grid layout.

The Row class represents a row within a vertical grid layout, allowing users to organize and group content horizontally.

Constructor for Row.

Parameters:

Name Type Description Default
*items Union[LayoutItem, Column]

Content that is going to be added inside the Row, if the item is a Column, it will be added to the row, if the item is a Widget or a Grid, it will be added to a Column.

 ()
height Optional[Union[int, float]]

Custom height for the row.

 None

Examples:#

Create Row with widget 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(layout.Row(select.Select(data))),
)
Create Row with multiple widgets 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(
        layout.Row(
            select.Select(data),
            toggle.Toggle(data),
        )
    ),
)
Create Row with Tab Section and Card 
 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
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(
        layout.Row(
            layout.TabSection(
                layout.Tab(
                    label="tab",
                    content=select.Select(data),
                )
            ),
            layout.Card(
                header=layout.Header(title="Card"),
                content=toggle.Toggle(data),
            ),
        )
    ),
)

Column #

Column(*, content: LayoutItem, width: Optional[int] = None)

Organize and group content vertically within a vertical grid layout.

The Column class represents a column within a vertical grid layout, providing a way to organize and group content vertically.

Constructor for Column.

Parameters:

Name Type Description Default
content LayoutItem

Representing the base class for items in a dashboard layout. It's a common type that other layout-related classes inherit from.

 required
width Optional[int]

Sets the column width, value between 3 and 12. If value is None the width will be set automatically based on the number of columns in the row.

 None

Examples:#

Create Column with widget 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(layout.Row(layout.Column(content=select.Select(data)))),
)
Columns with default Width 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(
        layout.Row(
            layout.Column(content=select.Select(data)),
            layout.Column(content=toggle.Toggle(data)),
        )
    ),
)
Columns with custom Width 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(
        layout.Row(
            layout.Column(content=select.Select(data)),
            layout.Column(content=toggle.Toggle(data)),
        )
    ),
)

FluidRow #

FluidRow(
    *items: Widget,
    vertical_alignment: VerticalAlignment = VerticalAlignment.TOP,
    horizontal_alignment: FluidHorizontalAlignment = HorizontalAlignment.CENTER
)

Enables flexible and responsive content alignment in a vertical grid layout.

The FluidRow class represents a fluid row within a vertical grid layout, allowing for flexible and responsive content alignment.

Constructor for FluidRow.

Parameters:

Name Type Description Default
items Widget

item within the FluidRow must be compatible.

 ()
vertical_alignment VerticalAlignment

Fluid Row vertical alignment option. TOP, MIDDLE or BOTTOM, available.

 TOP
horizontal_alignment FluidHorizontalAlignment

Fluid Row horizontal alignment option. LEFT, CENTER, RIGHT or STRETCH available.

 CENTER

Examples:#

Create Fluid Row with widget 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(layout.FluidRow(select.Select(data))),
)
Create FluidRow with multiple Widgets 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(
        layout.FluidRow(
            select.Select(data),
            toggle.Toggle(data),
        )
    ),
)
Create FluidRow with left alignment 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard import layout
from engineai.sdk.dashboard.enum import align
from engineai.sdk.dashboard.widgets import select
from engineai.sdk.dashboard.widgets import toggle

data = pd.DataFrame({"id": [1, 2, 3]})

dashboard.Dashboard(
    app_slug="engineai-docs-steps",
    workspace_slug="engineai-docs-steps",
    content=layout.Grid(
        layout.FluidRow(
            select.Select(data),
            toggle.Toggle(data),
            horizontal_alignment=align.FluidHorizontalAlignment.LEFT,
        )
    ),
)

LayoutItem module-attribute #

LayoutItem = Union[
    WidgetInterface,
    CardInterface,
    GridInterface,
    SelectableInterface,
]

Base class for items in dashboard layout; inherited by other layout-related classes.

The LayoutItem class is a module attribute, representing the base class for items in a dashboard layout. It's a common type that other layout-related classes inherit from.