获取一定数量的信息到 antd 表

Question

i'm new react hooks developer, i dont know much about classes, started with hooks since everybody suggested, here i have antd table(took it from their page, everything is coded using react classes, i somehow converted it to hooks), here i want to give user possibility to choose how many informtion he/she wants in a page. when user clicks that, it should give dropdown list (10 / page, 20 / page, 50 / page, 100 / page ) from dropdown user can choose how many he wants to be visible... so i want that functionality as it is in the picture

how to have functionality like that with react hooks?

here my code:

 import React from "react"; import { EventTable } from "./EventTable"; const eventsData = [ { key: "1", title: "John Brown", age: 32, address: "New York No. 1 Lake Park", }, { key: "2", title: "Joe Black", age: 42, address: "London No. 1 Lake Park", }, { key: "3", title: "Jim Green", age: 32, address: "Sidney No. 1 Lake Park", }, { key: "4", title: "Jim Red", age: 32, address: "London No. 2 Lake Park", }, { key: "5", title: "Jim Red", age: 32, address: "London No. 2 Lake Park", }, ]; function App() { return ( <div className="App"> <EventTable eventsData={eventsData} /> </div> ); } export default App;

 import React, { useState, useEffect } from "react"; import { Table } from "antd"; import "antd/dist/antd.css"; const EventTable = ({ eventsData }) => { const allColumns = [ { title: "ID", dataIndex: "key", key: "id", }, { title: "Title", dataIndex: "title", key: "title", }, { title: "Address", dataIndex: "address", key: "address", }, { title: "Age", dataIndex: "age", key: "age", }, ]; const [tableColumns, setTableColumns] = useState(allColumns); return ( <Table dataSource={eventsData} columns={tableColumns} pagination={true} /> ); }; export { EventTable };

Answer 1

You can read the code used for the example, there's a code tab under each component variant, there's also a link to a sandbox, they are really helpful.

I can see that you are sending a boolean to the pagination flag. What about sending an object like they do?

const pagination = { 
    defaultPageSize: 3,
    current: 1,
    pageSizeOptions: ['3', '6', '9']
}

And then sending it to the Table .

<Table dataSource={eventsData} columns={tableColumns} pagination={pagination} />

Another detail, you are a React developer , hooks allow us to use Class components features, inside functional components, we can also write our own custom hooks, but they are they are just a feature, you are not a "React Hook dev" .

React Hooks