Вступ до Dash AG Grid

Створення дашбордів з Dash і Plotly

Alex Scriven

Data Scientist

Що таке Dash AG Grid?

Тег HTML-таблиці (доступний у 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 стовпцями та чотирма рядками з даними зі знайомого набору 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"}
]
# Додайте до layout як раніше

Формат вихідних чисел

Акуратне форматування ✨

Тая ж таблиця, що на попередньому слайді. Проте в стовпці Total Sales значення тепер із префіксом $ і округлені до 2 десяткових. Повна таблиця має 3 стовпці й чотири рядки з даними зі знайомого набору e-commerce. Заголовки: "Major Category", "Total Sales ($)" і "Sales Volume" з цілими числами

Додаємо сортування

Сортування увімкнено за замовчуванням ⭐

# Вимкнути глобально
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}
)

Підтримує фільтри за значенням і за умовою

GIF із базовою таблицею: під заголовком додано рядок із порожнім полем. Спершу фільтрується перший стовпець за Cloth, далі другий через випадач "Greater than", відфільтровуючи таблицю.

Пагінація

Використовуйте пагінацію для довгих таблиць 💡

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

GIF тієї ж базової таблиці, але лише з двома рядками; праворуч унизу — перемикач сторінок зі стрілками та лічильником сторінок (2) і поточної.

Сортування й фільтрування діють на всю таблицю 📌

Давайте потренуємось!

Створення дашбордів з Dash і Plotly