引入 @ag-grid-community/react
在使用 @ag-grid-community/react 之前，需要先安装这个 npm 包，使用以下命令：
npm install --save ag-grid-community ag-grid-react
AgGridReact 组件
AgGridReact 是一个可以用于 React 应用中的组件，它可以展示来自服务器的数据，用户可以进行排序、筛选和分页等操作。
在使用 AgGridReact 组件之前，需要在应用中引入这个组件：
import { AgGridReact } from 'ag-grid-react';
之后就可以在应用中使用这个组件了。
配置列
在 AgGridReact 组件中，可以根据数据的需求来配置列。每个列都有一个键（key），用于匹配数据中的 key，以及一个 headerName，用于显示列标题。
const columnDefs = [ { headerName: 'Name', field: 'name' }, { headerName: 'Age', field: 'age' }, { headerName: 'Email', field: 'email' } ];
给组件传递数据
在 AgGridReact 组件中，需要使用 rowData 属性来传递数据，rowData 属性接受一个数组，每个元素代表一条数据记录。
const rowData = [ { name: 'John', age: 30, email: 'john@example.com' }, { name: 'Mary', age: 25, email: 'mary@example.com' }, { name: 'Paul', age: 40, email: 'paul@example.com' } ];
通过组件显示数据
通过 AgGridReact 组件来显示数据，需要将数据以及列配置传递给 AgGridReact 组件。
-- -------------------- ---- ------- ----- ----------------- ------- --------- - -------- - ------ - ---- -------- ------- ------- --- ------------ ----------------------- ----------------- -- ------ -- - -展开代码
指定组件属性
除了使用 rowData 和 columnDefs 属性来传递数据和列配置，还可以使用其他属性来定制 AgGridReact 组件的行为。
pagination
pagination 属性用于控制是否显示分页控件。
<AgGridReact rowData={rowData} columnDefs={columnDefs} pagination={true} />
enableSorting
enableSorting 属性用于控制是否允许排序。
<AgGridReact rowData={rowData} columnDefs={columnDefs} enableSorting={true} />
enableFilter
enableFilter 属性用于控制是否允许筛选。
<AgGridReact rowData={rowData} columnDefs={columnDefs} enableFilter={true} />
示例代码
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ----------- - ---- ---------------- ------ -------------------------------------------- ------ ---------------------------------------------------- ----- ----------------- ------- --------- - ------------------ - ------------- ---------- - - ----------- - - ----------- ------- ------ ------ -- - ----------- ------ ------ ----- -- - ----------- -------- ------ ------- - -- -------- - - ----- ------- ---- --- ------ ------------------ -- - ----- ------- ---- --- ------ ------------------ -- - ----- ------- ---- --- ------ ------------------ - - -- - -------- - ------ - ---- -------- ------- ------- --- ------------ ---------------------------------- ---------------------------- ----------------- -------------------- ------------------- -- ------ -- - -展开代码
总结
通过本文的介绍，你了解了如何使用 @ag-grid-community/react npm 包来在 React 应用中展示表格数据。你学习了如何控制分页、排序和筛选等行为，以及如何配置列和传递数据。现在你可以使用 AgGridReact 组件来快速地实现数据表格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc89b5cbfe1ea0611a1a
