Log Viewer

This will create the page object and add a predefined configuration to the page.body:

page = pk.Page()
template = page.body.add_template(defined_style="margins")
template.style.css.background = "white"

Add a date object:

dt = page.ui.texts.date("Y-0", html_code='date_from', width=(100, "%"))

Create a navbar with components:

page.ui.navigation.shortcut([
  page.ui.layouts.hr(),
  page.ui.titles.title("Dates"),
  page.ui.titles.bold("From:", align="left"),
  dt,
  page.ui.titles.bold("To:", align="left"),
  page.ui.texts.date(html_code='date_to', width=(100, "%"), options={"date_from_js": "COB"}),
  page.ui.layouts.hr(),
  page.ui.titles.title("Actions"),

Use html_Code on the components in order to get this alias when they are passed to services:

page.ui.input("GS", html_code="input"),
page.ui.buttons.refresh("Load", html_code="button"),
page.ui.icons.date(),
page.ui.div([
  page.ui.icons.awesome("far fa-file-pdf", width=15),
  page.ui.icons.awesome("fas fa-at", width=15),
]).css({"bottom": '10px', 'position': 'absolute', 'display': 'block'})
], size=(100, 'px'), options={"position": 'left'})

page.body.style.css.margin_left = 10
content = ""
title = page.ui.title(content, options={"markdown": True})
table = page.ui.tables.tabulators.figures(
  rows=["Date", "Name"], cols=["Low", "High", 'Open', 'Close', 'Volume', 'Adj Close'])

footer = page.ui.navigation.footer('@Data from pandas_datareader using yahoo as source.')

Create a click event on the page by finding the component from the page.components dictionary based on it html_code:

page.components['button'].click([
  page.components["button"].icon.dom.spin(True),

Define an AJAX post to an underlying service:

page.js.post("/viewer", {"button": 'Data 1'}, components=[page.components["input"],

Update the components:

page.components['date_from'], page.components['date_to']]).onSuccess([
title.build(pk.events.data["title"]),
table.build(pk.events.data["table"]),
page.components["button"].icon.dom.spin(False)
  ]),
])
page.components["input"].enter([page.components['button'].dom.events.trigger("click")])
footer.style.css.padding_left = 110

This example is available here

More example of the templates on Github