在AG-Grid React中，我们可以通过使用gridOptions属性来自定义分页器组件，以便添加下拉菜单和文本框来设置每页显示条目数和当前页。以下是代码示例：

// 定义页码组件
const CustomPager = (props) => {
  const { currentPage, pageSize, totalRecords, totalPages, setPage, setPageSize } = props;

  const handlePageSizeChange = (event) => {
    const newPageSize = Number(event.target.value);
    setPageSize(newPageSize);
    setPage(1); // 置为第一页以避免出现空白页
  };

  const handleCurrentPageChange = (event) => {
    const newPage = Number(event.target.value);
    setPage(newPage);
  };

  return (
    

      

        
          10 条/页
          20 条/页
          30 条/页
          40 条/页
          50 条/页
        
      
      

        第
        
        页，共 {totalPages} 页，{totalRecords} 条记录
      
    
  );
};

// AG-Grid React配置
const gridOptions = {
  // 其他配置省略
  pagination: true, // 开启分页
  paginationPageSize: 10, // 每页默认条目数
  suppressPaginationPanel: true, // 隐藏默认分页组件
  onPaginationChanged: (event) => {
    // 自定义分页组件会触发onPaginationChanged事件，我们需要在该事件中更新组件状态
    setCurrentPage(event.page);
    setPageSize(event.pageSize);
    setTotalPages(event.totalPages);
    setTotalRecords(event.totalRecords);
  },
  frameworkComponents: {
    agPagination: CustomPager,
    // 其他自定义组件
  },
};

// 渲染表格