Dash AG Grid इंटरएक्टिविटी

Dash और Plotly के साथ डैशबोर्ड बनाना

Alex Scriven

Data Scientist

सभी AG Grid सेल स्टाइल करें

style का उपयोग नहीं कर सकते ❌
इसके बजाय cellStyle उपयोग करें ✅

grid = AgGrid(
defaultColDef={
    "cellStyle": 
    {"textAlign": "right"}}
)

पिछले पाठ की टेबल के पहले दो कॉलम. हेडर "Major Category" और "Total Sales ($)" हैं, चार रो हैं. सभी सेल का टेक्स्ट दाएँ संरेखित है.

कुछ AG Grid सेल स्टाइल करें

column_defs = [
{"field": "Major Category"
, "cellStyle": {"textAlign": "center"}},
{"field": "Total Sales ($)"
, "valueFormatter": money_fmt
, "cellStyle": {"textAlign": "right"}}
]

पिछली स्लाइड वाली वही टेबल; लेकिन "Major Category" कॉलम का टेक्स्ट सेंटर-अलाइन है और "Total Sales ($)" कॉलम का टेक्स्ट राइट-अलाइन है.

और स्टाइलिंग उदाहरण

स्टाइलिंग के लिए अन्य CSS उपयोग करें ✨

grid = AgGrid(
# Other setup
defaultColDef={
"cellStyle": {
  "backgroundColor": "black",
   "color": "white"}
})

वही टेबल, लेकिन सेल का बैकग्राउंड काला है और टेक्स्ट सफेद है

सेल चुनना

cellClicked प्रॉपर्टी का उपयोग करें
क्लिक की गई सेल की जानकारी प्रिंट करने के लिए कॉलबैक

@callback(
    Output("test_text", "children"),
    Input("my_grid", "cellClicked")
)
def show_cell_info(cell_data):
    return str(cell_data)

उसी टेबल का GIF. टेबल के नीचे एक डिक्शनरी है जो किसी सेल पर क्लिक होते ही उसकी डिटेल दिखाने के लिए अपडेट होती है.

रो चुनना

rowSelection को "single" या "multiple" पर सेट करें

grid = AgGrid(
# Other parts
dashGridOptions={
"rowSelection": "single"}
)

@callback(
Output("test_text", "children"),
Input("my_grid", "selectedRows")
)

उसी टेबल का GIF. टेबल के नीचे एक ग्रे टेक्स्ट एरिया है जो चयनित रो की पूरी डिक्शनरी के साथ अपडेट होता है.

अभ्यास करते हैं!

Dash और Plotly के साथ डैशबोर्ड बनाना