table

Column

from dara.components.common.table import Column

class Column(BaseModel)

Internal representation of a Table column, required for serialization to work correctly

A column at minimum can be created by defining a col_ids:

from dara.components.common import Table
Table.column(
    col_id='col1',
)

A column with various formatting options like align can be created via:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    align='center',
)

A column which is set a width and can be made to stick to either the "left" or "right" of the table:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    width='250px',
    sticky='left',
)

A column with the an adaptive precision formatter that returns a string of the value with a pre-defined precision:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.ADAPTIVE_PRECISION,
    },
)

A column with a badge formatter that returns a cell with a badge corresponding to the badges defined:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.BADGE,
        'badges': {
            'val1': {'color': '`5f5f5f`', 'label': 'Label 1'},
            'val2': {'color': '`3f6f2f`', 'label': 'Label 2'}
        }
    },
)

A column with a code formatter that displays the cell contents as highlighted code:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.CODE,
        'language': 'Python',
    },
),

A column with a compare formatter that returns a green colored cell text if the value pass the condition relative to the target, else returns a red colored cell text:

from dara.components.common import Table
from dara.components.common.table.table import TableFormatterCompareCondition

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.COMPARE,
        'condition': TableFormatterCompareCondition.EQUAL,
        'target': 20,
    },
),

A column with a formatted text formatter that returns the value in a pre tag to keep it's original styling:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.FORMATTED_TEXT,
    },
),

A column with a number formatter that returns a string of the value at the given numerical precision:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.NUMBER,
        'precision': 1,
    },
),

A column with advanced number formatter, passed arguments which will directly be passed into the Intl.NumberFormat constructor. Example below formats numbers as dollars with 2 decimal places ('11.29' -> '$11.29')

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.NUMBER_INTL,
        'locales': 'en-US',
        'options': {
            style: "currency",
            currency: "USD",
            maximumFractionDigits: 2
        }
    },
),

A column with a percent formatter that returns an adaptive precision value string with percentage sign attached:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.PERCENT,
        'precision': 1,
    },
),

A column with a link formatter that pulls an associated href off the row and creates a link with the cell value as the text in the link, the link has to be defined in each row by assigning the link to href. Please note that the links must be in a column labeled href in your DataFrame.

from pandas import DataFrame
from dara.components.common import Table
from dara.core import DataVariable

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.LINK,
    },
),

data = DataFrame([
    {
        'col1': 'Google',
        'col2': 'val1',
        'col3': 'val2',
        .
        .
        .
        'href': 'http://www.google.com',
    },
    .
    .
    .
])
data_var = DataVariable(data)

A column with a threshold formatter that returns a colored cell for numbers within the thresholds:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    formatter={
        'type': Table.TableFormatterType.THRESHOLD,
        'thresholds': [
            {
                'color': '`6e3f8f`,
                'bounds': (0, 1),
            },
            {
                'color': '`3e1f2f`,
                'bounds': (1, 10),
            },
            {
                'color': '`5e7f4f`,
                'bounds': (10, 100),
            },
        ],
    },
),

A column with a date formatter that shows the date in the given format, the format used follows that defined by date-fns

from dara.components.common import Table

Table.column(
        col_id='col1',
        label='Col 1',
        filter=Table.TableFilter.DATETIME,
        formatter={'type': Table.TableFormatterType.DATETIME, 'format': 'dd/MM/yyyy'},
),

A filter can be applied to allow filtering a column of a given type:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    filter=Table.TableFilter.TEXT
),

A column may have a tooltip to show when hovering over the column's header:

from dara.components.common import Table

Table.column(
    col_id='col1',
    label='Col 1',
    tooltip='This is some tooltip explaining col1'
),

Arguments:

• align: The align setting for the column
• col_id: The id of the column
• label: The label of the column
• filter: Optional filter to enable for the column
• unique_items: If chosen filter is categorical, this must be provided as a list of unique strings which are used to define the categories for the filter
• formatter: Dictionary formatter for the column
• width: The width of the column
• align: The alignment of text in the column's cells
• sticky: Pinning the column to left or right
• tooltip: The tooltip to show when hovering over the column's header
• type: Optional prop to specify type of column, used to determine e.g. filter type. If not specified, inferred from formatters

Attributes

• align: Optional[str]
• col_id: str
• unique_items: Optional[List[str]]
• filter: Optional[TableFilter]
• formatter: Optional[dict]
• label: Optional[str]
• sticky: Optional[str]
• tooltip: Optional[str]
• width: Optional[Union[int, str]]
• type: Optional[Union[, , ]]

Methods

vaildate_formatter_dict

@field_validator('formatter')
@classmethod
def vaildate_formatter_dict(cls, formatter)

Validate that the formatter dict of a column is correct

validate_sticky

@field_validator('sticky')
@classmethod
def validate_sticky(cls, sticky)

Validate that the sticky string has the correct values

validate_unique_items

@field_validator('filter')
@classmethod
def validate_unique_items(cls, filter, info: ValidationInfo)

Validate that for categorical filters unique_items is provided

Table

from dara.components.common.table import Table

class Table(ContentComponent)

A Table Component for drawing a simple table into a document. Table's can be created by passing data as a DataVariable or a DerivedDataVariable. Columns can be passed as lists of dicts, where the col_id of the cols must match the column name in the dataframe. Alternatively they can be Variables/DerivedVariables, and if left undefined it will be inferred from the data passed.

The list of columns can be a mix of dicts and strings. If a string is passed then it will be used as the col_id and label for the column whereas, passing a dict allows more control over the options. The available options for columns are as follows (see Column class for more detail):

• col_id - the id of the column (required)
• label - the label to show at the top of the column
• filter - an instance of a filter class (e.g. Table.TableFilter.DATETIME)
• unique_items - a list of unique items that categorical filter can filter from
• formatter - an instance of a formatter class (e.g. Table.Formatter.NUMBER)
• width - the width of the column as a number of pixels or a percentage string
• align - The alignment of text in the columns cells

A simple table component constructed with columns passed as a list of strings and data passed as list of dicts:

from pandas import DataFrame
from dara.components.common import Table
from dara.core import DataVariable

data = DataVariable(
    DataFrame([
        {
            'col1': 1,
            'col2': 2,
        },
        {
            'col1': 3,
            'col2': 4,
        },
    ])
)

Table(
    columns=['col1', 'col2'],
    data=data
)

A table component using a list of dict for columns with column width, it takes all the options that the Column class takes:

from pandas import DataFrame
from dara.components.common import Table
from dara.core import DataVariable

data = DataVariable(
    DataFrame([
        {
            'col1': 1,
            'col2': 2,
        },
        {
            'col1': 3,
            'col2': 4,
        },
    ])
)

columns=[
    {
        'col_id': 'col1',
        'label': 'Col 1',
        'width': '200px',
    },
    {
        'col_id': 'col2',
        'label': 'Col 2',
        'width': '250px',
    },
]

Table(
    columns=columns,
    data=data
)

A table component that has clickable rows and multiple rows can be selected:

from pandas import DataFrame
from dara.components.common import Table
from dara.core import DataVariable, Variable

data = DataVariable(
    DataFrame([
        {
            'col1': 1,
            'col2': 2,
        },
        {
            'col1': 3,
            'col2': 4,
        },
    ])
)

selected_rows = Variable([])

Table(
    columns=['col1', 'col2'],
    data=data,
    selected_indices=selected_rows,
    multi_select=True
)

A table component that is searchable:

The columns may have filters set, this is done on a column by column basis with the Table.column's filter param. You can also set which columns are searchable with the Table's search_columns param, only columns present here are searchable. A column may both be searchable and have a filter.

from pandas import DataFrame
from dara.components.common import Table
from dara.core import DataVariable

data = DataVariable(
    DataFrame([
        {
            'col1': 1,
            'col2': 'a',
            'col3': 'cat'
        },
        {
            'col1': 3,
            'col2': 'b',
            'col3': 'dog'
        },
    ])
)

Table(
    columns=['col1', 'col2', 'col3'],
    data=data,
    searchable=True,
    search_columns=['col3'],
)

A table component rendered from a panda dataframe including the index column:

import pandas
from dara.components.common import Table
from dara.core import DataVariable

data = [{
    'age': 27,
    'name': 'Sam',
    'surname': 'Smith'
}, {
    'age': 29,
    'name': 'Tim',
    'surname': 'Smith'
}]
df = pandas.DataFrame(data, columns=['age', 'name', 'surname'])
df.reset_index()
Table(data=DataVariable(df), columns=[{'col_id': 'age', 'label': 'Age'}, 'index'])

A table component containing all four available filters:

from pandas import DataFrame
from dara.components.common import Table
from dara.core import DataVariable

data = DataVariable(
    DataFrame(
        [
            {
                'col1': 'a',
                'col2': 1,
                'col3': 'F',
                'col4': '1990-02-12T00:00:00.000Z',
            },
            {
                'col1': 'b',
                'col2': 2,
                'col3': 'M',
                'col4': '1991-02-12T00:00:00.000Z',
            },
        ]
    )
)

columns = [
    Table.column(col_id='col1', label='Col 1', filter=Table.TableFilter.TEXT),
    Table.column(col_id='col2', label='Col 2', filter=Table.TableFilter.NUMERIC),
    Table.column(col_id='col3', label='Col 3', filter=Table.TableFilter.CATEGORICAL, unique_items=['M', 'F']),
    Table.column(
        col_id='col4',
        label='Col 4',
        filter=Table.TableFilter.DATETIME,
        formatter={'type': Table.TableFormatterType.DATETIME, 'format': 'dd/MM/yyyy'},
    ),
]

Table(
    columns=columns, data=data
)

Arguments:

• columns: The table's columns, this can be a list, a Variable/DerivedVariable or if left undefined it will be inferred from the data
• data: The table's data, must be a DataVariable or DerivedDataVariable
• multi_select: Whether to allow selection of multiple rows, works with onclick_row and defaults to False
• show_checkboxes: Whether to show or hide checkboxes column when onclick_row is set. Defaults to True
• onclick_row: An action handler for when a row is clicked on the table
• selected_indices: Optional variable to store the selected rows indices, must be a list of numbers. Note that these indices are the sequential indices of the rows as accepted by DataFrame.iloc, not the row.index value. If you would like the selection to persist over page reloads, you must set persist_value=True on the variable.
• search_columns: Optional list defining the columns to be searched, only the columns passed are searchable
• searchable: Boolean, if True table can be searched via Input and will only render matching rows
• include_index: Boolean, if True the table will render the index column(s), defaults to True
• max_rows: if specified, table height will be fixed to accommodate the specified number of rows

Attributes

• columns: Optional[Union[Sequence[Union[Column, dict, str]], NonDataVariable]]
• data: AnyDataVariable
• multi_select: bool
• show_checkboxes: bool
• onclick_row: Optional[Action]
• selected_indices: Optional[Union[List[int], UrlVariable, Variable]]
• search_columns: Optional[List[str]]
• searchable: bool
• include_index: bool
• max_rows: Optional[int]

Methods

add_column

def add_column(col: Union[str, dict, Column])

Adds a new column to the data

column

@staticmethod
def column(*args, **kwargs) -> Column

Helper function to create a column via the class rather than the dict