I am using Table component from antd library. I want to pass pagination prop to the Table component. In the docs it says pass the pagination config object which refers to the Pagination component itself.

So I am passing the pagination object using Pagination component prop names as keys like <Table pagination={{pageSizeOptions : ['30', '40'], showPageSizeOptions : true}} {...otherProps} />

But when I inspect the Table component in react-inspector I don't see the pagination prop in component props but it is there in the component state and has default values.

How to use the pagination prop for Table component?

I am using Table component from antd library. I want to pass pagination prop to the Table component. In the docs it says pass the pagination config object which refers to the Pagination component itself.

So I am passing the pagination object using Pagination component prop names as keys like <Table pagination={{pageSizeOptions : ['30', '40'], showPageSizeOptions : true}} {...otherProps} />

But when I inspect the Table component in react-inspector I don't see the pagination prop in component props but it is there in the component state and has default values.

How to use the pagination prop for Table component?

• javascript
• reactjs
• pagination
• antd

• I am using antd 3.2.1 – gamedev90 Commented Mar 10, 2018 at 9:25
• I found this article very useful blog.emiketic.com/2018/… – Amol Wankhede Commented Dec 30, 2018 at 5:39

2 Answers 2

Replace "showPageSizeOptions" to "showSizeChanger".

i.e.

<Table pagination= { {pageSizeOptions: ['30', '40'], showSizeChanger: true}} rowSelection={rowSelection} columns={columns} dataSource={data} />

creating a pagination config object and using it with object spread syntax worked!

config = { 
    pagination : {
        pageSizeOptions : ['30', '40'], 
        showSizeChanger : true 
    }
}

<Table {...config} {...otherProps} />

It worked but don't understand the why and what is the difference between the two semantics of the two syntax.