-
@router.get("/customers/") output: [{"customerName":"Signal Gift Stores","customerNumber":112}, ...]
Thanks. |
Beta Was this translation helpful? Give feedback.
Answered by
fsmosca
Oct 30, 2023
Replies: 3 comments
-
|
One way is convert that list of dict to a pandas dataframe then dataframe to reactpy vdom using In one of my reactpy explorations blog, I created a component that converts a dataframe to a vdom. Dataframe to VDOM@component
def DataframeToVdom(df):
"""Converts a pandas dataframe into ReactPy VDOM."""
height = 400
html_rec = df.to_html(
index=False,
border=0,
justify='center',
classes=['table', 'text-nowrap', 'table-bordered',
'text-center', 'table-striped', 'table-hover',
'table-primary']
)
return html.div(
html.style(f"""
.table-fix-head {{
overflow-y: auto;
height: {height}px;
}}
.table-fix-head table {{
border-collapse: collapse;
width: 100%;
}}
.table-fix-head th,
.table-fix-head td {{
padding: 8px 16px;
}}
.table-fix-head th {{
position: sticky;
top: 0;
background: #97BDC4;
}}
"""),
html.div(
{'class': 'table-fix-head'},
utils.html_to_vdom(html_rec)
)
)Full sample code
"""Displays a dataframe to vdom html table
Dependencies:
pip install reactpy
pip install fastapi
pip install pandas
"""
from reactpy import component, html, utils
from reactpy.backend.fastapi import configure, Options
from fastapi import FastAPI
import pandas as pd
BOOTSTRAP_CSS = {
'rel': 'stylesheet',
'href': 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/'
'dist/css/bootstrap.min.css',
'integrity': 'sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80'
'zW1RWuH61DGLwZJEdK2Kadq2F9CUG65',
'crossorigin': 'anonymous'
}
def read_customers():
return [
{"customerName":"Signal Gift Stores","customerNumber":112},
{"customerName":"MMM ZZZ","customerNumber":100},
{"customerName":"BBB 451","customerNumber":250},
{"customerName":"VGR SQR","customerNumber":600},
{"customerName":"KKK RRR","customerNumber":120},
{"customerName":"BBB DGD","customerNumber":140},
{"customerName":"YYY BNB","customerNumber":130},
{"customerName":"WWW XXX","customerNumber":126},
{"customerName":"UUU MMM","customerNumber":142}
]
@component
def DataframeToVdom(df):
"""Converts a pandas dataframe into ReactPy VDOM."""
height = 400
html_rec = df.to_html(
index=False,
border=0,
justify='center',
classes=['table', 'text-nowrap', 'table-bordered',
'text-center', 'table-striped', 'table-hover',
'table-primary']
)
return html.div(
html.style(f"""
.table-fix-head {{
overflow-y: auto;
height: {height}px;
}}
.table-fix-head table {{
border-collapse: collapse;
width: 100%;
}}
.table-fix-head th,
.table-fix-head td {{
padding: 8px 16px;
}}
.table-fix-head th {{
position: sticky;
top: 0;
background: #97BDC4;
}}
"""),
html.div(
{'class': 'table-fix-head'},
utils.html_to_vdom(html_rec)
)
)
@component
def Root():
df = pd.DataFrame(read_customers())
return html.div(
{'class': 'container mt-3 w-50'},
DataframeToVdom(df)
)
app = FastAPI()
configure(
app,
Root,
options=Options(
head=html.head(
html.link(BOOTSTRAP_CSS)
)
)
)Command lineOutput
|
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
Archmonger
-
|
The other approach is to build a table using that list of dict as input. Here is a sample Table component that will take a list of dict as input. @component
def Table(data: list[dict]):
"""Generates table from a list of dict.
data = [{'u1': 'aaa', 'f1': 'bbb'}, {'u1': 'sss', 'f1': 'bnb'}]
"""
header = list(data[0].keys())
values = [list(d.values()) for d in data]
thead_tr = []
for row in [header]:
thead_tr.append(html.tr([html.th(col) for col in row]))
tbody_tr = []
for row in values:
tbody_tr.append(html.tr([html.td(col) for col in row]))
return html.div(
html.div(
html.table(
html.thead(*thead_tr),
html.tbody(*tbody_tr)
)
)
)And call that table in the Root. @component
def Root():
data = read_customers()
return html.div(
html.style(
"""
.content {
max-width: 500px;
margin: auto;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
"""
),
html.div(
{'class': 'content'},
Table(data)
)
)Output
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Another way is to convert the list of dict to an html list. @component
def CustomerList(data: list[dict]):
"""Generates html list from a list of dict.
data = [{'u1': 'aaa', 'f1': 'bbb'}, {'u1': 'sss', 'f1': 'bnb'}]
"""
ul = []
for row in data:
ul.append(html.li({'class': 'list-group-item'}, f"{str(row).replace('{', '').replace('}', '')}"))
return html.div(
html.ul(
{'class': 'list-group list-group-numbered'},
*ul
)
)
@component
def Root():
data = read_customers()
return html.div(
{'class': 'container'},
html.div(
html.h2('Customers list'),
CustomerList(data)
)
)Output
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
One way is convert that list of dict to a pandas dataframe then dataframe to reactpy vdom using
html_to_vdomfunction.In one of my reactpy explorations blog, I created a component that converts a dataframe to a vdom.
Dataframe to VDOM