en-US

All configurations can be customized through dCustomRender.

zh-CN

通过 dCustomRender 可自定义所有配置。

import { DPagination } from '@react-devui/ui';

export default function Demo() {
  return (
    <DPagination
      dTotal={200}
      dCompose={['total', 'pages', 'page-size', 'jump']}
      dCustomRender={{
        total: (range) => `${range[0]}-${range[1]} of 200`,
        prev: 'Prev',
        page: (page) => <span style={{ padding: '0 8px' }}>{`P${page}`}</span>,
        next: 'Next',
        pageSize: (pageSize) => `N:${pageSize}`,
        jump: (input) => (
          <>
            <span style={{ marginRight: 8 }}>To</span> {input}
          </>
        ),
      }}
    ></DPagination>
  );
}