How to hide page numbers and shift the position of rows per page selection dropdown in Ant Design Table pagination?

Question

I am using the Ant Design (v5) Table component in my React project. Inside the Table component, I am using the pagination prop to show page details. However, the page numbers are displayed along with the currently selected page, like below -

I want to display only the previous and next icon buttons, like in MUI Datagrid (screenshot below). How can I achieve this?

While we are on the topic, I also want to shift the position of the 10/page selection box to the left of the 1-10 of 46 text, just like MUI Datagrid. How do I do that?

Please find my React code below -

import React, { useState } from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {title: 'Name', dataIndex: 'name'},
  {title: 'Age', dataIndex: 'age'},
  {title: 'Address', dataIndex: 'address'},
];

const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
  data.push({ key: i, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`});
}

const App: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [current, setCurrent] = useState(1);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = { selectedRowKeys, onChange: onSelectChange};

  return (
    <div>
      <Table 
      rowSelection={rowSelection} 
      columns={columns} 
      dataSource={data} 
      pagination={{
        current,
        hideOnSinglePage: true,
        defaultPageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: [5, 10, 20],
        showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
      }}
      />
    </div>
  );
};

export default App;

Answer 1

You can use css for it.

Apply the following property.

.ant-pagination-item {
  display: none !important;
}

For the second thing, you can again use css. You do have to make changes as per your need. Here is the example.

NOTE: If you're using react, do use a parent div's class name before making changes, as these can affect your overall application since you're using the class names provided by antd.

.ant-pagination {
  display: flex;
  justify-content: center;
}

.ant-pagination-item {
  display: none !important;
}

.ant-pagination-options {
  position: relative;
  right: 15rem;
}

Answer 2

If this style solves your problem, just set "simple" property of pagination to true as follows for your table component.

 <Table
      dataSource={dataSource}
      columns={columns}
      pagination={{ simple: true }}
    />