0
# Advanced Customization
1

2
The rc-pagination component provides extensive customization capabilities including custom renderers, icons, size options, and advanced display controls for sophisticated pagination implementations.
3

4
## Import
5

6
```typescript
7
import Pagination from 'rc-pagination';
8
import type { PaginationProps } from 'rc-pagination';
9
```
10

11
## Custom Renderers
12

13
### Item Renderer
14

15
The `itemRender` prop allows complete customization of pagination elements including page numbers, navigation buttons, and jump controls.
16

17
```typescript { .api }
18
/**
19
 * Custom item renderer function
20
 * @param page - Page number or current page for navigation items
21
 * @param type - Type of pagination item being rendered
22
 * @param element - Default element that would be rendered
23
 * @returns Custom rendered element or null to hide the item
24
 */
25
type ItemRender = (
26
  page: number,
27
  type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
28
  element: React.ReactNode,
29
) => React.ReactNode;
30
```
31

32
#### Item Types
33
- **'page'**: Individual page number buttons
34
- **'prev'**: Previous page button
35
- **'next'**: Next page button  
36
- **'jump-prev'**: Jump to previous group button (...)
37
- **'jump-next'**: Jump to next group button (...)
38

39
### Size Changer Renderer
40

41
The `sizeChangerRender` prop enables complete customization of the page size selector component.
42

43
The `sizeChangerRender` function receives an info object with the following properties:
44

45
```typescript { .api }
46
/**
47
 * Size changer render function parameters
48
 */
49
interface SizeChangerRenderInfo {
50
  disabled: boolean;                                    // Whether the size changer is disabled
51
  size: number;                                        // Current page size
52
  onSizeChange: (value: string | number) => void;     // Handler for size changes
53
  'aria-label': string;                               // ARIA label for accessibility
54
  className: string;                                  // CSS class name
55
  options: {                                          // Available size options
56
    label: string;                                    // Display label for the option
57
    value: string | number;                          // Value for the option
58
  }[];
59
}
60

61
/**
62
 * Size changer render function type (exported from rc-pagination)
63
 */
64
export type SizeChangerRender = (info: SizeChangerRenderInfo) => React.ReactNode;
65
```
66

67
## Icon Customization
68

69
### Icon Properties
70

71
```typescript { .api }
72
interface IconProps {
73
  prevIcon?: React.ComponentType | React.ReactNode;
74
  nextIcon?: React.ComponentType | React.ReactNode;
75
  jumpPrevIcon?: React.ComponentType | React.ReactNode;
76
  jumpNextIcon?: React.ComponentType | React.ReactNode;
77
}
78
```
79

80
Each icon prop can accept:
81
- **React.ReactNode**: Static icon element (SVG, span, etc.)
82
- **React.ComponentType**: Dynamic icon component that receives pagination props
83

84
## Usage Examples
85

86
### Custom Page Item Renderer
87

88
```typescript
89
import React from 'react';
90
import Pagination from 'rc-pagination';
91

92
function CustomPageItems() {
93
  const itemRender = (page, type, element) => {
94
    switch (type) {
95
      case 'page':
96
        return (
97
          <a 
98
            className="custom-page-item"
99
            style={{
100
              padding: '8px 12px',
101
              margin: '0 2px',
102
              border: '1px solid #d9d9d9',
103
              borderRadius: '4px',
104
              textDecoration: 'none',
105
              color: '#333',
106
            }}
107
          >
108
            {page}
109
          </a>
110
        );
111
      
112
      case 'prev':
113
        return (
114
          <a className="custom-prev">
115
            ← Previous
116
          </a>
117
        );
118
      
119
      case 'next':
120
        return (
121
          <a className="custom-next">
122
            Next →
123
          </a>
124
        );
125
      
126
      case 'jump-prev':
127
        return (
128
          <a className="custom-jump-prev" title="Previous 5 pages">
129
            ⋯
130
          </a>
131
        );
132
      
133
      case 'jump-next':
134
        return (
135
          <a className="custom-jump-next" title="Next 5 pages">
136
            ⋯
137
          </a>
138
        );
139
      
140
      default:
141
        return element;
142
    }
143
  };
144

145
  return (
146
    <Pagination
147
      current={5}
148
      total={500}
149
      itemRender={itemRender}
150
      onChange={(page) => console.log('Page:', page)}
151
    />
152
  );
153
}
154
```
155

156
### Custom Size Changer
157

158
```typescript
159
import React from 'react';
160
import Pagination from 'rc-pagination';
161

162
function CustomSizeChanger() {
163
  const sizeChangerRender = (info) => {
164
    const { disabled, size, onSizeChange, options } = info;
165
    
166
    return (
167
      <div className="custom-size-changer">
168
        <span>Show: </span>
169
        <select
170
          value={size}
171
          disabled={disabled}
172
          onChange={(e) => onSizeChange(e.target.value)}
173
          style={{
174
            padding: '4px 8px',
175
            border: '1px solid #d9d9d9',
176
            borderRadius: '4px',
177
            marginLeft: '4px',
178
          }}
179
        >
180
          {options.map(option => (
181
            <option key={option.value} value={option.value}>
182
              {option.label}
183
            </option>
184
          ))}
185
        </select>
186
        <span> entries</span>
187
      </div>
188
    );
189
  };
190

191
  return (
192
    <Pagination
193
      current={1}
194
      total={1000}
195
      showSizeChanger
196
      sizeChangerRender={sizeChangerRender}
197
      pageSizeOptions={[10, 25, 50, 100]}
198
      onChange={(page, pageSize) => {
199
        console.log(`Page: ${page}, Size: ${pageSize}`);
200
      }}
201
    />
202
  );
203
}
204
```
205

206
### Custom Icons with SVG
207

208
```typescript
209
import React from 'react';
210
import Pagination from 'rc-pagination';
211

212
const ChevronLeft = () => (
213
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
214
    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
215
  </svg>
216
);
217

218
const ChevronRight = () => (
219
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
220
    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
221
  </svg>
222
);
223

224
const DoubleChevronLeft = () => (
225
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
226
    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
227
    <path d="M22.41 7.41L21 6l-6 6 6 6 1.41-1.41L17.83 12z"/>
228
  </svg>
229
);
230

231
const DoubleChevronRight = () => (
232
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
233
    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
234
    <path d="M3 6L1.59 7.41 6.17 12l-4.58 4.59L3 18l6-6z"/>
235
  </svg>
236
);
237

238
function CustomIconPagination() {
239
  return (
240
    <Pagination
241
      current={5}
242
      total={500}
243
      prevIcon={<ChevronLeft />}
244
      nextIcon={<ChevronRight />}
245
      jumpPrevIcon={<DoubleChevronLeft />}
246
      jumpNextIcon={<DoubleChevronRight />}
247
      onChange={(page) => console.log('Page:', page)}
248
    />
249
  );
250
}
251
```
252

253
### Dynamic Icon Components
254

255
```typescript
256
import React from 'react';
257
import Pagination from 'rc-pagination';
258

259
// Icon component that receives pagination props
260
const DynamicPrevIcon = (props) => {
261
  const isFirstPage = props.current === 1;
262
  return (
263
    <span style={{ opacity: isFirstPage ? 0.5 : 1 }}>
264
      ◀ Back
265
    </span>
266
  );
267
};
268

269
const DynamicNextIcon = (props) => {
270
  const isLastPage = props.current === 50; // Assuming 50 total pages
271
  return (
272
    <span style={{ opacity: isLastPage ? 0.5 : 1 }}>
273
      Forward ▶
274
    </span>
275
  );
276
};
277

278
function DynamicIconPagination() {
279
  return (
280
    <Pagination
281
      current={1}
282
      total={500}
283
      prevIcon={DynamicPrevIcon}
284
      nextIcon={DynamicNextIcon}
285
      onChange={(page) => console.log('Page:', page)}
286
    />
287
  );
288
}
289
```
290

291
## Advanced Size Options
292

293
### Custom Page Size Configuration
294

295
```typescript
296
import React, { useState } from 'react';
297
import Pagination from 'rc-pagination';
298

299
function AdvancedSizeOptions() {
300
  const [pageSize, setPageSize] = useState(25);
301
  
302
  // Custom size options with labels
303
  const customSizeOptions = [5, 10, 25, 50, 100, 200];
304
  
305
  const buildOptionText = (value) => {
306
    if (value === 200) return '200 (All)';
307
    return `${value} per page`;
308
  };
309

310
  return (
311
    <Pagination
312
      current={1}
313
      total={1500}
314
      pageSize={pageSize}
315
      pageSizeOptions={customSizeOptions}
316
      buildOptionText={buildOptionText}
317
      showSizeChanger
318
      totalBoundaryShowSizeChanger={20} // Show size changer when total > 20
319
      onChange={(page, size) => {
320
        console.log(`Page: ${page}, Size: ${size}`);
321
        setPageSize(size);
322
      }}
323
      onShowSizeChange={(current, size) => {
324
        console.log(`Size changed to ${size} on page ${current}`);
325
      }}
326
    />
327
  );
328
}
329
```
330

331
### Conditional Size Changer Display
332

333
```typescript
334
import React from 'react';
335
import Pagination from 'rc-pagination';
336

337
function ConditionalSizeChanger() {
338
  const totalItems = 1000;
339
  const showSizeChangerThreshold = 50;
340
  
341
  return (
342
    <Pagination
343
      current={1}
344
      total={totalItems}
345
      pageSize={10}
346
      
347
      // Show size changer only when total exceeds threshold
348
      showSizeChanger={totalItems > showSizeChangerThreshold}
349
      
350
      // Alternative: use built-in boundary
351
      totalBoundaryShowSizeChanger={showSizeChangerThreshold}
352
      
353
      pageSizeOptions={[10, 20, 50, 100]}
354
      onChange={(page, pageSize) => {
355
        console.log(`Page: ${page}, Size: ${pageSize}`);
356
      }}
357
    />
358
  );
359
}
360
```
361

362
## Quick Jumper Customization
363

364
### Custom Quick Jumper with Go Button
365

366
```typescript
367
import React from 'react';
368
import Pagination from 'rc-pagination';
369

370
function CustomQuickJumper() {
371
  return (
372
    <Pagination
373
      current={5}
374
      total={1000}
375
      
376
      // Enable quick jumper with custom go button
377
      showQuickJumper={{
378
        goButton: 'Jump'
379
      }}
380
      
381
      onChange={(page) => {
382
        console.log('Jumped to page:', page);
383
      }}
384
    />
385
  );
386
}
387
```
388

389
### Advanced Quick Jumper
390

391
```typescript
392
import React from 'react';
393
import Pagination from 'rc-pagination';
394

395
function AdvancedQuickJumper() {
396
  return (
397
    <Pagination
398
      current={10}
399
      total={2000}
400
      pageSize={20}
401
      
402
      showQuickJumper={{
403
        goButton: (
404
          <button 
405
            type="button"
406
            style={{
407
              marginLeft: '8px',
408
              padding: '4px 12px',
409
              border: '1px solid #1890ff',
410
              borderRadius: '4px',
411
              background: '#1890ff',
412
              color: 'white',
413
              cursor: 'pointer',
414
            }}
415
          >
416
            Go →
417
          </button>
418
        )
419
      }}
420
      
421
      onChange={(page) => {
422
        console.log('Navigated to page:', page);
423
      }}
424
    />
425
  );
426
}
427
```
428

429
## Layout and Styling Customization
430

431
### CSS Class Customization
432

433
```typescript
434
import React from 'react';
435
import Pagination from 'rc-pagination';
436
import './custom-pagination.css'; // Your custom styles
437

438
function StyledPagination() {
439
  return (
440
    <Pagination
441
      current={1}
442
      total={500}
443
      
444
      // Custom CSS classes
445
      className="my-pagination"
446
      prefixCls="custom-pagination"
447
      selectPrefixCls="custom-select"
448
      
449
      // Apply styles
450
      style={{
451
        marginTop: '20px',
452
        textAlign: 'center',
453
        padding: '16px',
454
        borderRadius: '8px',
455
        backgroundColor: '#f5f5f5',
456
      }}
457
      
458
      onChange={(page) => console.log('Page:', page)}
459
    />
460
  );
461
}
462
```
463

464
### Alignment Options
465

466
```typescript
467
import React from 'react';
468
import Pagination from 'rc-pagination';
469

470
function AlignmentExamples() {
471
  return (
472
    <div>
473
      {/* Left aligned (default) */}
474
      <Pagination
475
        current={1}
476
        total={100}
477
        align="start"
478
        onChange={() => {}}
479
      />
480
      
481
      {/* Center aligned */}
482
      <Pagination
483
        current={1}
484
        total={100}
485
        align="center"
486
        onChange={() => {}}
487
      />
488
      
489
      {/* Right aligned */}
490
      <Pagination
491
        current={1}
492
        total={100}
493
        align="end"
494
        onChange={() => {}}
495
      />
496
    </div>
497
  );
498
}
499
```
500

501
## Advanced Display Options
502

503
### Compact Layout
504

505
```typescript
506
import React from 'react';
507
import Pagination from 'rc-pagination';
508

509
function CompactPagination() {
510
  return (
511
    <Pagination
512
      current={10}
513
      total={1000}
514
      
515
      // Show fewer page items for compact display
516
      showLessItems={true}
517
      
518
      // Hide some elements for minimal UI
519
      showPrevNextJumpers={false}
520
      showTitle={false}
521
      
522
      // Custom compact styling
523
      style={{ fontSize: '12px' }}
524
      
525
      onChange={(page) => console.log('Page:', page)}
526
    />
527
  );
528
}
529
```
530

531
### Mobile-Optimized Simple Mode
532

533
```typescript
534
import React, { useState, useEffect } from 'react';
535
import Pagination from 'rc-pagination';
536

537
function MobileOptimizedPagination() {
538
  const [isMobile, setIsMobile] = useState(false);
539
  
540
  useEffect(() => {
541
    const checkMobile = () => {
542
      setIsMobile(window.innerWidth < 768);
543
    };
544
    
545
    checkMobile();
546
    window.addEventListener('resize', checkMobile);
547
    
548
    return () => window.removeEventListener('resize', checkMobile);
549
  }, []);
550

551
  return (
552
    <Pagination
553
      current={5}
554
      total={500}
555
      
556
      // Switch to simple mode on mobile
557
      simple={isMobile}
558
      
559
      // Hide advanced features on mobile
560
      showSizeChanger={!isMobile}
561
      showQuickJumper={!isMobile}
562
      showLessItems={isMobile}
563
      
564
      onChange={(page, pageSize) => {
565
        console.log(`Page: ${page}, Size: ${pageSize}`);
566
      }}
567
    />
568
  );
569
}
570
```
571

572
## Accessibility Enhancements
573

574
### Enhanced Accessibility
575

576
```typescript
577
import React from 'react';
578
import Pagination from 'rc-pagination';
579

580
function AccessiblePagination() {
581
  return (
582
    <Pagination
583
      current={3}
584
      total={500}
585
      
586
      // ARIA attributes
587
      role="navigation"
588
      aria-label="Data table pagination"
589
      
590
      // Show titles for screen readers
591
      showTitle={true}
592
      
593
      // Custom item renderer with enhanced accessibility
594
      itemRender={(page, type, element) => {
595
        const ariaLabels = {
596
          'page': `Go to page ${page}`,
597
          'prev': 'Go to previous page',
598
          'next': 'Go to next page',
599
          'jump-prev': 'Go to previous 5 pages',
600
          'jump-next': 'Go to next 5 pages',
601
        };
602
        
603
        return React.cloneElement(element, {
604
          'aria-label': ariaLabels[type],
605
          title: ariaLabels[type],
606
        });
607
      }}
608
      
609
      onChange={(page) => {
610
        // Announce page change to screen readers
611
        const announcement = `Page ${page} selected`;
612
        const ariaLive = document.createElement('div');
613
        ariaLive.setAttribute('aria-live', 'polite');
614
        ariaLive.setAttribute('aria-atomic', 'true');
615
        ariaLive.style.position = 'absolute';
616
        ariaLive.style.left = '-10000px';
617
        ariaLive.textContent = announcement;
618
        document.body.appendChild(ariaLive);
619
        
620
        setTimeout(() => {
621
          document.body.removeChild(ariaLive);
622
        }, 1000);
623
      }}
624
    />
625
  );
626
}
627
```
628

629
## Complete Customization Example
630

631
```typescript
632
import React, { useState } from 'react';
633
import Pagination from 'rc-pagination';
634

635
function FullyCustomizedPagination() {
636
  const [current, setCurrent] = useState(1);
637
  const [pageSize, setPageSize] = useState(20);
638
  
639
  const itemRender = (page, type, element) => {
640
    const baseStyle = {
641
      padding: '8px 12px',
642
      margin: '0 4px',
643
      border: '1px solid #d9d9d9',
644
      borderRadius: '6px',
645
      background: 'white',
646
      cursor: 'pointer',
647
      textDecoration: 'none',
648
      color: '#333',
649
      display: 'inline-flex',
650
      alignItems: 'center',
651
      fontSize: '14px',
652
    };
653
    
654
    const activeStyle = {
655
      ...baseStyle,
656
      background: '#1890ff',
657
      color: 'white',
658
      borderColor: '#1890ff',
659
    };
660
    
661
    switch (type) {
662
      case 'page':
663
        return (
664
          <a style={current === page ? activeStyle : baseStyle}>
665
            {page}
666
          </a>
667
        );
668
      
669
      case 'prev':
670
        return (
671
          <a style={baseStyle}>
672
            ← Prev
673
          </a>
674
        );
675
      
676
      case 'next':
677
        return (
678
          <a style={baseStyle}>
679
            Next →
680
          </a>
681
        );
682
        
683
      default:
684
        return element;
685
    }
686
  };
687
  
688
  const sizeChangerRender = (info) => (
689
    <div style={{ marginLeft: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
690
      <span>Show:</span>
691
      <select
692
        value={info.size}
693
        onChange={(e) => info.onSizeChange(e.target.value)}
694
        style={{
695
          padding: '4px 8px',
696
          border: '1px solid #d9d9d9',
697
          borderRadius: '4px',
698
        }}
699
      >
700
        {info.options.map(option => (
701
          <option key={option.value} value={option.value}>
702
            {option.label}
703
          </option>
704
        ))}
705
      </select>
706
    </div>
707
  );
708

709
  return (
710
    <div style={{ padding: '20px' }}>
711
      <Pagination
712
        current={current}
713
        total={1000}
714
        pageSize={pageSize}
715
        
716
        // Custom renderers
717
        itemRender={itemRender}
718
        sizeChangerRender={sizeChangerRender}
719
        
720
        // Display options
721
        showSizeChanger
722
        showQuickJumper={{ goButton: 'Jump' }}
723
        showTotal={(total, range) => (
724
          <div style={{ marginRight: '16px', color: '#666' }}>
725
            Showing {range[0]}-{range[1]} of {total} items
726
          </div>
727
        )}
728
        
729
        // Layout
730
        align="center"
731
        style={{
732
          padding: '16px',
733
          background: '#fafafa',
734
          borderRadius: '8px',
735
          border: '1px solid #f0f0f0',
736
        }}
737
        
738
        // Events
739
        onChange={(page, size) => {
740
          setCurrent(page);
741
          setPageSize(size);
742
          console.log(`Navigate to page ${page} with ${size} items per page`);
743
        }}
744
      />
745
    </div>
746
  );
747
}
748
```
749

750
This comprehensive customization example demonstrates how to combine multiple advanced features for a fully tailored pagination experience.