Загрузка ag grid - Загрузка исходного кода ag grid

ag grid

Другой исходный код

Скачать

Сетка данных JavaScript | Таблица JavaScript

Логотип AG Grid

? Веб-сайт • ? Документация • ?️ Сообщество

Форки GitHub

AG Grid — это полнофункциональная и настраиваемая таблица данных JavaScript. Он обеспечивает выдающуюся производительность , не имеет сторонних зависимостей и поддерживает Реагировать , Угловой и Вю .

Обзор

Оглавление

Сетка данных JavaScript | Таблица JavaScript

Корпоративная поддержка
Отчеты об ошибках
Вопросы
Содействие
Инструменты и расширения
Витрина
Звездочеты
Пользовательские компоненты
Темы
Пользовательские темы
Установка
Настраивать
Семенные проекты
Функции
Примеры
? Обзор
⚡️ Быстрый старт
?️ Настройки
? Сообщество
? Поддерживать
⚠️
Лицензия

AG Grid доступен в двух версиях: Community и Enterprise.

ag-grid-community бесплатен, доступен по лицензии MIT и включает в себя все основные функции, ожидаемые от сетки данных JavaScript, включая сортировку, фильтрацию, разбивку на страницы, редактирование, пользовательские компоненты, оформление тем и многое другое.
ag-grid-enterprise доступен по коммерческой лицензии и включает в себя расширенные функции, такие как встроенные диаграммы, группировку строк, агрегирование, поворот, основные/детали, модель строк на стороне сервера и экспорт, а также специальную поддержку со стороны нашей команды инженеров.

Функции

Особенность	Сообщество AG Grid	АГ Грид Энтерпрайз
Фильтрация	✅	✅ (Продвинутый)
Сортировка	✅	✅
Редактирование ячеек	✅	✅
CSV-экспорт	✅	✅
Перетаскивание	✅	✅
Темы и стили	✅	✅
Выбор	✅	✅
Доступность	✅	✅
Бесконечная прокрутка	✅	✅
Пагинация	✅	✅
Серверные данные	✅	✅ (Продвинутый)
Пользовательские компоненты	✅	✅
Интегрированные диаграммы	❌	✅
Выбор диапазона	❌	✅
Группировка и агрегирование строк	❌	✅
Поворот	❌	✅
Экспорт в Excel	❌	✅
Операции с буфером обмена	❌	✅
Мастер/Деталь	❌	✅
Данные дерева	❌	✅
Меню столбца	❌	✅
Контекстное меню	❌	✅
Панели инструментов	❌	✅
Поддерживать	❌	✅

ℹ️ Примечание:
Посетите страницу цен для полного сравнения.

Примеры

Мы создали несколько демонстраций, чтобы продемонстрировать богатый набор функций AG Grid в различных вариантах использования. Посмотрите их в действии ниже или пообщайтесь с ними на нашей демо-странице.

Финансовая демо-версия

Пример финансовых данных с динамическими обновлениями и спарклайнами:

Живая демонстрация • Исходный код

Демо-инвентарь

Пример данных инвентаризации для просмотра продуктов и управления ими:

Живая демонстрация • Исходный код

HR-демо

Пример данных отдела кадров, показывающий иерархические данные о сотрудниках:

Живая демонстрация • Исходный код

⚡️ Быстрый старт

AG Grid легко настроить: все, что вам нужно сделать, это предоставить данные и определить структуру столбцов. Прочтите инструкции по установке стандартного JavaScript или обратитесь к нашим руководствам для конкретной платформы. Реагировать , Угловой и Вуэ.

Установка

 $ npm install --save ag-grid-community

Настраивать

1. Предоставьте контейнер

Загрузите библиотеку AG Grid и создайте контейнер-div. Элемент div должен иметь высоту, поскольку Data Grid заполнит размер родительского контейнера:

 <html lang="en"> <head> <!-- Включает все JS и CSS для таблицы данных JavaScript --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- Ваш контейнер Data Grid --> <div id="myGrid" style="height: 500 пикселей"></div> </body></html>

2. Создание экземпляра сетки данных JavaScript

Создайте сетку данных внутри контейнера div, используя createGrid .

 // Параметры сетки: содержит все конфигурации сетки данныхconstgridOptions = {};//Ваш код Javascript для создания сетки данныхconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement,gridOptions);

3. Определите строки и столбцы

 // Параметры сетки: содержит все конфигурации сетки данных. constgridOptions = { // Данные строки: данные, которые будут отображаться.    rowData: [ { марка: «Tesla», модель: «Модель Y», цена: 64950, электрический: true }, { марка: «Ford», модель: «F-Series», цена: 33850, электрический: false }, { make: 'Toyota', модель: 'Corolla', цена: 29600, electric: false }, ], // Определения столбцов: определяет столбцы, которые будут отображается.    columnsDefs: [{ поле: 'производить' }, { поле: 'модель' }, { поле: 'цена' }, { поле: 'электрический' }],};

ℹ️ Примечание:
Дополнительную информацию о построении таблиц данных с помощью AG Grid см. в нашей документации.

Семенные проекты

Мы также предоставляем начальные проекты, которые помогут вам начать работу с распространенными конфигурациями:

Среда	Пакеты	Модули
Создать приложение React (CRA)	Пакеты	Модули
Вите	Пакеты	Модули
Вите — TypeScript	Пакеты	Модули
Веб-пакет 5 — TypeScript	Пакеты	Модули
Веб-пакет 5 — JavaScript	Пакеты	Модули
Угловой интерфейс командной строки	Пакеты	Модули
Нукст	Пакеты	Модули
Вите	Пакеты	Модули

Настройки

AG Grid полностью настраивается как по внешнему виду, так и по функциональности. Существует множество способов настройки сетки, и мы предоставляем набор инструментов, которые помогут создать такую настройку.

Пользовательские компоненты

Вы можете создавать свои собственные пользовательские компоненты, чтобы настроить поведение сетки. Например, вы можете настроить способ отображения ячеек, способ редактирования значений, а также создать свои собственные фильтры.

Существует несколько различных типов компонентов, которые вы можете добавить в сетку, в том числе:

Компонент ячейки: для настройки содержимого ячейки.
Компонент заголовка: для настройки заголовка столбца и групп столбцов.
Редактировать компонент: чтобы настроить редактирование ячейки.
Компонент фильтра: для настраиваемого фильтра столбцов, который появляется в меню столбца.
Плавающий фильтр: для настраиваемого плавающего фильтра столбца, который появляется в меню столбца.
Компонент даты: настройка компонента выбора даты в фильтре даты.
Загрузочный компонент: для настройки строки загрузочной ячейки при использовании модели строк на стороне сервера.
Компонент наложения: для настройки загрузки и отсутствия компонентов наложения строк.
Компонент строки состояния: для пользовательских компонентов строки состояния.
Компонент панели инструментов: для пользовательских компонентов панели инструментов.
Компонент подсказки: для пользовательских компонентов подсказки ячейки.
Компонент пункта меню: для настройки пунктов меню, отображаемых в столбцах и контекстных меню.

Чтобы предоставить в Grid пользовательский средство визуализации ячеек и компоненты фильтра, создайте прямую ссылку на свой компонент в gridOptions.columnDefs :

 GridOptions = {columnDefs: [ { field: 'country', // Столбец для добавления компонента в cellRenderer: CountryCellRenderer, // Ваш пользовательский фильтр компонента ячейки: CountryFilter, // Ваш пользовательский компонент фильтра }, ],};

Темы

AG Grid имеет 4 темы, каждая из которых доступна в light и dark режимах:

Кварц	Материал

Альпийский	Балхам

Пользовательские темы

Все темы AG Grid можно настроить с помощью Theming API, или вы можете создать новую тему с нуля с помощью нашего Theme Builder или Figma Design System.

Сообщество

Инструменты и расширения

У AG Grid есть большое и активное сообщество, создавшее экосистему сторонних инструментов, расширений и утилит, которые помогут вам создать свой следующий проект с помощью AG Grid, независимо от того, какой язык или платформу вы используете:

Реагировать • Угловой • TypeScript • Вю • Питон • Стройная • СолидJS • .СЕТЬ • Ржавчина • Ларавел

Витрина

AG Grid используют сотни тысяч разработчиков по всему миру практически из каждой отрасли. Хотя большинство этих проектов являются частными, мы курировали подборку проектов с открытым исходным кодом из различных отраслей, где известные имена используют AG Grid, включая JPMorgan , MongoDB и NASA . Посетите нашу страницу демонстрации сообщества, чтобы узнать больше.

Звездочеты

Компания AG Grid, основанная в 2016 году, демонстрирует устойчивый рост популярности и в настоящее время является лидером рынка Data Grids:

Поддерживать

Корпоративная поддержка

Клиенты AG Grid Enterprise имеют доступ к специализированной поддержке через ZenDesk, которую контролируют наши инженеры.

Отчеты об ошибках

Если вы обнаружили ошибку, сообщите об этом в разделе проблем этого репозитория.

Вопросы

Ищите подобные проблемы в StackOverflow, используя тег ag-grid . Если вам кажется, что ничего не связано, опубликуйте там новое сообщение. Пожалуйста, не используйте выпуски GitHub, чтобы задавать вопросы.

Содействие

AG Grid разработан командой разработчиков, расположенных в Лондоне. Если вы хотите присоединиться к команде, отправьте заявку на адрес [email protected].

⚠️ Лицензия

ag-grid-community лицензируется по лицензии MIT .

ag-grid-enterprise имеет коммерческую лицензию.

Дополнительную информацию смотрите в файле ЛИЦЕНЗИИ.

Графики AG

Если вы зашли так далеко, возможно, вас заинтересует наш последний проект: AG Charts — лучшая библиотека диаграмм JavaScript в мире.

Первоначально созданный для поддержки интегрированных диаграмм в AG Grid, мы открыли исходный код этого проекта в 2018 году. Видя устойчивый рост популярности с тех пор, мы решили инвестировать в AG Charts со специальной версией Enterprise ( ag-charts-enterprise ) в в дополнение к нашей постоянной поддержке ag-charts-community .