AG Grid React: строки, столбцы и рабочая таблица

AG Grid отображает массив объектов через описание столбцов. Для первого примера достаточно Community: функции Enterprise, включая отдельные расширенные сценарии группировки, требуют отдельной проверки лицензии.

Установка и модуль

npm install ag-grid-react ag-grid-community

Пакеты AG Grid должны быть совместимых версий. Современная документация использует модули и Theming API; старые пути dist/styles не следует смешивать с новой схемой.

import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
import { AgGridReact } from "ag-grid-react";

ModuleRegistry.registerModules([AllCommunityModule]);

const rowData = [
  { name: "Иван", age: 25 },
  { name: "Анна", age: 30 },
];
const columnDefs = [
  { field: "name", headerName: "Имя", filter: true },
  { field: "age", headerName: "Возраст", sortable: true },
];

export function PeopleGrid() {
  return (
    <div style={{ height: 320 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} />
    </div>
  );
}

Если таблица пустая

• Проверьте высоту родительского блока: у сетки должно быть место для отображения.
• Имена field должны совпадать с ключами объектов, включая регистр.
• Проверьте, зарегистрирован ли используемый модуль.
• При загрузке через API различайте загрузку, пустой ответ и ошибку; серверные данные сначала нужно получить и передать в rowData.

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