The documentation about to use pagination on Table is confuse

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Better understanding about the documentation.

What does the proposed API look like?

Add a better documentation about how to use Table with Pagination.

Based on the documentation I thought that it would be possible to create an external custom Pagination component and then hook it up into Table but it seems that this is not possible:

<Table
          columns={columns}
          dataSource={clients}
          pagination={<ConnectedPagination />} or pagination={ConnectedPagination} 
        />

[FullStackDeveloper2020]

“You can directly set pagination={false} and customize table component”. How can i add my own custom pagination to antd Table. i didn’t understand that…

[EugenEistrach]

@FullStackDeveloper2020 I created the following hook (keep in mind this is typescript)

import { Dispatch, SetStateAction, useState } from "react";

const usePagination = <T>(
  data: T[],
  initialSize = 10,
  initialPage = 1
): [
  T[],
  number,
  Dispatch<SetStateAction<number>>,
  number,
  Dispatch<SetStateAction<number>>
] => {
  const [pageSize, setPageSize] = useState(initialSize);
  const [currentPage, setCurrentPage] = useState(initialPage);

  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    (currentPage - 1) * pageSize + pageSize
  ) as T[];

  return [paginatedData, currentPage, setCurrentPage, pageSize, setPageSize];
};

export default usePagination;

And am using it like this:

const PublisherPage = () => {
  const dispatch = useDispatch();
  const publishers = usePublishers();
  const isFetching = useIsFetchingPublisher();
  const [
    paginatedPublishers,
    currentPage,
    setCurrentPage,
    pageSize
  ] = usePagination(publishers);

  useEffect(() => {
    dispatch(getAllPublishersAsync());
  }, []);

  return (
    <>
      <PageHeader
        title="Publisher"
        subTitle="Manage all publishers"
        extra={[
          <Pagination
            key={"pagination"}
            current={currentPage}
            onChange={setCurrentPage}
            pageSize={pageSize}
            total={publishers.length}
            size="small"
          />
        ]}
      />

      <Table
        css={tableCss}
        dataSource={paginatedPublishers}
        columns={columns}
        rowKey="id"
        size="small"
        bordered
        pagination={false}
        tableLayout="fixed"
        loading={isFetching}
      />
    </>
  );
};