Search code examples
javascriptnode.jsreactjspaginationantd

How can I customize pagination of antd?

I am working on adding pagination to a table using antd. This is the following code

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    width: 150
  },
  {
    title: "Age",
    dataIndex: "age",
    width: 150
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`
  });
}
const App = () => (
  <Table
    columns={columns}
    dataSource={data}
    pagination={{
      pageSizeOptions: [5, 10, 15, 20],
      defaultPageSize: 5
    }}
  />
);

I want 5/page(as shown in the image attached) to be customized to 5people/page. The 5/page comes by default but how I customize it to my requirement? I checked the properties of pagination but I am not sure what to do.

enter image description here

Solution

  • This is one of the way it can be done, other than the way shared by Stasdes.

    pagination={{
      pageSizeOptions: [5, 10, 15, 20],
      defaultPageSize: 5
      locale: {items_per_page: "people / page"}
}}