skip to Main Content

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 –

enter image description here

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?

enter image description here

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;

2

Answers


  1. You can use css for it.

    Apply the following property.

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

    enter image description here

    Login or Signup to reply.
  2. enter image description here

    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 }}
        />
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search