Введение в 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 столбцами и четырьмя строками данных из знакомого набора данных об электронной торговле. Заголовки столбцов: «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 столбцов и четырёх строк с данными из набора об электронной торговле. Заголовки: «Major Category» — текст, «Total Sales ($)» и «Sales Volume» — целые числа

Добавление сортировки

Сортировка включена по умолчанию ⭐

# Turn off globally
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Specify for a column
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Turn on
{"field": "Sales Volume"
 , "sortable": False} # Turn off
]

$$ GIF с базовой таблицей: при нажатии на заголовки столбцов строки сортируются

Добавление фильтрации

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

Поддерживает фильтры по значению и условию

GIF с базовой таблицей: под заголовками появилась строка с пустыми полями. Сначала первый столбец фильтруется по значению «Cloth», затем второй — с использованием условия «Больше чем».

Пагинация

Используйте пагинацию для длинных таблиц 💡

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

GIF с базовой таблицей: отображаются только две строки данных, в правом нижнем углу — элемент управления пагинацией со стрелками и счётчиком страниц (2 страницы).

Сортировка и фильтрация применяются ко всей таблице 📌

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly