Skip to content

Commit 01177a0

Browse files
mlmoravekmlmoravek
authored
feat(table): add paginationRangeBefore and paginationRangeAfter prop (#1320)
1 parent 645354c commit 01177a0

File tree

6 files changed

+18
-4
lines changed

6 files changed

+18
-4
lines changed

‎packages/docs/components/Pagination.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ The **Pagination** component is responsive and flexible way to indicate a series
4141
| order | Buttons order | "centered" \| "left" \| "right" | `centered`, `right`, `left` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;order: "right"<br>}</code> |
4242
| override | Override existing theme classes completely | boolean | - | |
4343
| perPage | Items count for each page | number \| string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;perPage: 20<br>}</code> |
44-
| rangeAfter | Number of pagination items to show after current page. | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
45-
| rangeBefore | Number of pagination items to show before current page. | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
44+
| rangeAfter | Number of pagination items to show after current page | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
45+
| rangeBefore | Number of pagination items to show before current page | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
4646
| rounded | Enable rounded button style | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;rounded: false<br>}</code> |
4747
| simple | Enable simple style | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;simple: false<br>}</code> |
4848
| size | Pagination size | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |

‎packages/docs/components/Table.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@ It allows tabular data to be displayed in a responsive way with special case cel
8484
| paginated | Adds pagination to the table | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginated: false<br>}</code> |
8585
| paginationOrder | Pagination buttons order (if paginated) | "centered" \| "left" \| "right" | `centered`, `right`, `left` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginationOrder: undefined<br>}</code> |
8686
| paginationPosition | Pagination position (if paginated) | "both" \| "bottom" \| "top" | `bottom`, `top`, `both` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginationPosition: "bottom"<br>}</code> |
87+
| paginationRangeAfter | Number of pagination items to show after current page | number | - | |
88+
| paginationRangeBefore | Number of pagination items to show before current page | number | - | |
8789
| paginationRounded | Enable rounded pagination buttons (if paginated) | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginationRounded: false<br>}</code> |
8890
| paginationSimple | Enable simple style pagination (if paginated) | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginationSimple: false<br>}</code> |
8991
| paginationSize | Size of pagination (if paginated) | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginationSize: "small"<br>}</code> |

‎packages/oruga/src/components/pagination/props.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ export type PaginationProps = {
99
perPage?: number | string;
1010
/** Current page number, use v-model:current to make it two-way binding */
1111
current?: number;
12-
/** Number of pagination items to show before current page. */
12+
/** Number of pagination items to show before current page */
1313
rangeBefore?: number;
14-
/** Number of pagination items to show after current page. */
14+
/** Number of pagination items to show after current page */
1515
rangeAfter?: number;
1616
/**
1717
* Pagination size

‎packages/oruga/src/components/table/Table.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,8 @@ const props = withDefaults(defineProps<TableProps<T>>(), {
120120
paginationRounded: () => getDefault("table.paginationRounded", false),
121121
paginationSimple: () => getDefault("table.paginationSimple", false),
122122
paginationOrder: () => getDefault("table.paginationOrder"),
123+
paginationRangeBefore: undefined,
124+
paginationRangeAfter: undefined,
123125
backendFiltering: () => getDefault("table.backendFiltering", false),
124126
filtersIcon: () => getDefault("table.filterIcon"),
125127
filtersPlaceholder: () => getDefault("table.filterPlaceholder"),
@@ -1225,6 +1227,8 @@ defineExpose({ rows: tableRows, sort: sortByField });
12251227
:size="paginationSize"
12261228
:order="paginationOrder"
12271229
:simple="paginationSimple"
1230+
:range-before="paginationRangeBefore"
1231+
:range-after="paginationRangeAfter"
12281232
:icon-pack="iconPack"
12291233
:aria-next-label="ariaNextLabel"
12301234
:aria-previous-label="ariaPreviousLabel"
@@ -1739,6 +1743,8 @@ defineExpose({ rows: tableRows, sort: sortByField });
17391743
:size="paginationSize"
17401744
:order="paginationOrder"
17411745
:simple="paginationSimple"
1746+
:range-before="paginationRangeBefore"
1747+
:range-after="paginationRangeAfter"
17421748
:icon-pack="iconPack"
17431749
:aria-next-label="ariaNextLabel"
17441750
:aria-previous-label="ariaPreviousLabel"

‎packages/oruga/src/components/table/examples/pagination.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,8 @@ const perPage = ref(3);
263263
:per-page="perPage"
264264
:pagination-simple="isPaginationSimple"
265265
:pagination-position="paginationPosition"
266+
:pagination-range-before="2"
267+
:pagination-range-after="2"
266268
:sort-icon="sortIcon"
267269
:sort-icon-size="sortIconSize"
268270
:default-sort-direction="defaultSortDirection"

‎packages/oruga/src/components/table/props.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,10 @@ export type TableProps<T> = {
135135
paginationRounded?: boolean;
136136
/** Enable simple style pagination (if paginated) */
137137
paginationSimple?: boolean;
138+
/** Number of pagination items to show before current page */
139+
paginationRangeBefore?: number;
140+
/** Number of pagination items to show after current page */
141+
paginationRangeAfter?: number;
138142
/**
139143
* Pagination buttons order (if paginated)
140144
* @values centered, right, left

0 commit comments

Comments
 (0)