How Can I Add Paging On The Antd Select ? Because Getting Data From The Interface Is Huge. So I Want To Implement Paging

How can I add paging on the Select of Antd ? Because getting data from the interface is huge. So I want to implement paging. But the document api don't support it. import { Select}

Solution 1:

If you have huge data, avoid showing in dropdown. But still you like to implement what you want, here is the crude form of dropdown with pagination.

Implementation: CodeSandBox Link

importReactfrom"react";
importReactDOM from"react-dom";
import"antd/dist/antd.css";
import"./index.css";
import { Select, Icon, Divider, Pagination, Button } from"antd";
import faker from"faker";

constOption = Select.Option;
let names = [];
const count = 100;
const pageSize = 5;
for (let i = 0; i < count; i++) {
  names.push(faker.name.firstName());
}

constgetNames = pageNumber => {
  let toSendNames = [];
  for (let i = (pageNumber - 1) * pageSize; i < pageNumber * pageSize; i++) {
    toSendNames.push(names[i]);
  }
  console.log(toSendNames);
  return toSendNames;
};

classTestextendsReact.Component {
  state = {
    isOpen: false,
    currentPage: 1
  };

  paginationRef = React.createRef();

  render = () => {
    return (
      <div><Selectstyle={{width:250 }}
          onFocus={() => {
            this.setState({ isOpen: true });
          }}
          open={this.state.isOpen}
          dropdownRender={menu => (
            <div>
              {menu}
              <Dividerstyle={{margin: "4px0" }} /><divstyle={{padding: "8px", textAlign: "center" }}><Paginationsimplecurrent={this.state.currentPage}total={count}onChange={pageIndex => {
                    this.setState({
                      currentPage: pageIndex
                    });
                  }}
                />
                <br /><Buttontype="ghost"style={{width: "100%", borderColor: "red" }}
                  size="small"onClick={() =>
                    this.setState({
                      isOpen: false
                    })
                  }
                >
                  Close
                </Button></div></div>
          )}
        >
          {getNames(this.state.currentPage).map(item => {
            return <Optionvalue={item}>{item}</Option>;
          })}
        </Select></div>
    );
  };
}

ReactDOM.render(<Test />, document.getElementById("container"));

i hope this would help.