Dash AG Grid परिचय

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

Alex Scriven

Data Scientist

Dash AG Grid क्या है?

HTML table टैग (Dash में उपलब्ध)
html.Table स्थिर → सीमित

Dash AG Grid - डायनेमिक और इंटरएक्टिव
- फ़िल्टरिंग, हाइडिंग, एक्सपोर्टिंग, स्टाइलिंग

बेसिक टेबल

from dash_ag_grid import AgGrid

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)"},
    {"field": "Sales Volume"},
]

grid = AgGrid(
columnDefs=column_defs,

rowData=major_cat_tb.to_dict("records"))

app.layout = [grid]

3 कॉलम और 4 पंक्तियों वाली एक तालिका, परिचित e-commerce डेटासेट से. कॉलम हेडर हैं "Major Category" (नीचे टेक्स्ट), "Total Sales ($)" (नीचे मान), और "Sales Volume" (नीचे पूर्णांक).

नंबर फ़ॉर्मेट करें

समस्या: वित्तीय नंबर फ़ॉर्मेटिंग
- समाधान: valueFormatter लगाएँ
- JavaScript फ़ॉर्मेटिंग फंक्शन

money_fmt = {
"function": (
    """params.value.toLocaleString(
    'en-US', {style: 'currency', currency: 'USD'})"""
)}

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)", "valueFormatter": money_fmt},
    {"field": "Sales Volume"}
]
# Add to layout as before

आउटपुट नंबर फ़ॉर्मेट करें

सुंदर फ़ॉर्मेटेड ✨

पिछली स्लाइड वाली वही तालिका. अब "Total Sales" कॉलम में मान डॉलर साइन के साथ हैं और 2 दशमलव तक राउंड किए गए हैं. पूरी तालिका में 3 कॉलम और 4 पंक्तियाँ हैं: "Major Category", "Total Sales ($)", और "Sales Volume" (पूर्णांक).

सॉर्टिंग जोड़ें

सॉर्टिंग डिफ़ॉल्ट रूप से चालू ⭐

# Globally बंद करें
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# किसी कॉलम के लिए निर्दिष्ट करें
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # चालू करें
{"field": "Sales Volume"
 , "sortable": False} # बंद करें
]

$$ पहली स्लाइड की बेसिक टेबल का GIF; हेडर पर क्लिक करने पर पंक्तियाँ सॉर्ट होती हैं

फ़िल्टरिंग जोड़ें

grid = AgGrid(
defaultColDef={
  "filter": True
  , "floatingFilter": True}
)

value और condition फ़िल्टर सपोर्टेड

बेसिक टेबल का GIF; अब हेडर के नीचे खाली बॉक्स वाली पंक्ति है. GIF पहले पहले कॉलम को Cloth पर फ़िल्टर करता है, फिर दूसरे को Greater than ड्रॉपडाउन से, और तालिका फ़िल्टर होती है.

Pagination

लंबी टेबल के लिए pagination इस्तेमाल करें 💡

grid = AgGrid(
    dashGridOptions={
    "pagination": True,        
    "paginationPageSize": 2
    }

उसी बेसिक टेबल का GIF; अब केवल दो पंक्तियाँ दिखती हैं और नीचे-दाईं ओर pagination टॉगल है, जिसमें बाएँ-दाएँ एरो और पेज काउंटर (2) हैं.

सॉर्ट और फ़िल्टर पूरी टेबल पर लागू होते हैं 📌

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

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