This guide will walk you through setting up a FastHTML application that renders a table using the Great Tables library.
-
Create a FastHTML App Instance and Route
Begin by creating an instance of the FastHTML app and defining a route:
app, rt = fast_app()
-
Create the
getEndpointIn FastHTML, specialized HTML tags like
DivandTitleare used to directly describe HTML, rather than relying on templating languages like Jinja in traditional web apps.First, define the
getendpoint, which will generate the HTML when users visit the/route. The endpoint will include three HTML tags:Title("FastHTML-GT Website"): Generates a<title>tag within the<head>section.Titled("Great Tables shown in FastHTML", style="text-align:center"): Creates a<title>tag and an<h1>tag within the<body>section.NotStr(sza_tbl().as_raw_html()): Renders a table generated byGT.as_raw_html()and wraps it with theNotStrcallable provided by FastHTML, allowing you to reuse Python code that returns HTML.
@cache def get_sza(): return pl.from_pandas(sza) @rt("/") def get(): """ https://docs.fastht.ml/tutorials/quickstart_for_web_devs.html#strings-and-conversion-order """ sza_pivot = ( get_sza() .filter((pl.col("latitude") == "20") & (pl.col("tst") <= "1200")) .select(pl.col("*").exclude("latitude")) .drop_nulls() .pivot(values="sza", index="month", on="tst", sort_columns=True) ) sza_gt = ( GT(sza_pivot, rowname_col="month") .data_color( domain=[90, 0], palette=["rebeccapurple", "white", "orange"], na_color="white", ) .tab_header( title="Solar Zenith Angles from 05:30 to 12:00", subtitle=html("Average monthly values at latitude of 20°N."), ) .sub_missing(missing_text="") ) return ( Title("FastHTML-GT Website"), H1("Great Tables shown in FastHTML", style="text-align:center"), NotStr(sza_gt.as_raw_html()), )
-
Run the Uvicorn Server
Finally, start the Uvicorn server and open your browser to view the rendered table:
uvicorn main:app --reload
You should now see the table displayed in your browser at http://127.0.0.1:8000.