HtmlTableAgGrid Module

class epyk.core.html.tables.HtmlTableAgGrid.Table(page: PageModel, records, width, height, html_code, options, profile)
add_column(field: str, title: Optional[str] = None, attrs: Optional[dict] = None)

Add a column to the column definition for the table.

Usage:

grid = page.ui.tables.aggrids.table()
grid.add_column("test", "Test Column")
Parameters:

  • field – The column attribute

  • title – Optional. The column title

  • attrs – Optional. The specific column properties

build(data: Optional[Union[str, JsDataModel, float, dict, list, bool]] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None, component_id: Optional[str] = None, stop_state: bool = True, dataflows: Optional[List[dict]] = None)

Common JavaScript function to add rows to the table.

Usage:

grid = page.ui.tables.aggrids.table()
grid.add_column("col1", "Column")
btn_aggrid = page.ui.button("Aggrid").click([
  grid.build([{"col1": "row %s" % i}for i in range(n)])
])
Parameters:

  • data – Optional.

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

  • component_id – Optional. The object reference ID

  • stop_state – Remove the top panel for the component state (error, loading…)

  • dataflows – Chain of data transformations

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False, data_ref: str = 'data')

The onclick event occurs when the user clicks on an element.

Usage:

div = page.ui.div()
div.click([
  page.js.alert("This is a test")
])

Related Pages:

Parameters:

  • js_funcs – A Javascript Python function

  • profile – Optional. Set to true to get the profile for the function on the Javascript console

  • source_event – Optional. The source target for the event

  • on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

  • data_ref – Optional. Data reference on the Js side

define(options: Optional[Union[str, JsDataModel, float, dict, list, bool]] = None, dataflows: Optional[List[dict]] = None)

Common JavaScript function to set the table definition. If options are defined the definition will be specific to the column definition.

Related Pages:

Parameters:

  • options – Optional. The table API attributes. If None return current definition.

  • dataflows – Chain of config transformations

property dom: JsHtmlAggrid

HTML Dom object.

get_column(by_field: Optional[str] = None, by_title: Optional[str] = None) → Column

Get the column from the underlying Tabulator object by field or by title. Pointing by field is recommended as the title might change quite easily.

This function will only get columns defined from the Python side.

Parameters:

  • by_field – Optional. The field reference for the column

  • by_title – Optional. The title reference for the column

get_columns() → Generator[Column, None, None]

Get a generator with all the columns defined for the table on the Python side.

This function will only return columns defined from the Python side.

headers(cols_def: Dict[str, dict])

Set columns definition.

Usage:

grid = page.ui.tables.aggrids.table()
grid.add_column("col1", "Column")
grid.headers({"col1": {"headerName": "Column 1"}})
Parameters:

cols_def – A dictionary with the columns definition

property js: AgGrid

Return the Javascript internal object.

Returns:

A Javascript object

property options: TableConfig

Ag Grid table options.

Usage:

grid = page.ui.tables.aggrids.table()
grid.options.paginationPageSize = 2
property style: Aggrid

Add internal CSS classes.

Usage:

grid = page.ui.tables.aggrids.table()
grid.style.strip({"color": "blue"})
property tableId: str

Return the Javascript variable of the chart.

Usage:

table.tableId
theme(name: str, custom_cls_name: bool = False, row_height: Optional[int] = None)

Define the theme to be used for the Aggrid table.

Related Pages:

Usage:

table = page.ui.tables.aggrids.table(rows=["athlete", "country", "sport", 'year'])
table.theme("balham")

table = page.ui.tables.aggrids.table(rows=["athlete", "country", "sport", 'year'])
table.theme("ag-theme-mycustomtheme", custom_cls_name=True)
Parameters:

  • name – Aggrid theme name or Custom CSS class name

  • custom_cls_name – Flag to specify if the theme is coming from the prdefined ones in Ag Grid

  • row_height – To change the row height value to match the new theme definition (35px)