@@ -85,6 +85,7 @@ export function Table({
85
85
autoResetFilters = false ,
86
86
autoResetExpanded = false ,
87
87
withPagination = false ,
88
+ showTotalPages = false ,
88
89
controlledState = { } ,
89
90
renderGroupHead,
90
91
initialState = { } ,
@@ -103,10 +104,10 @@ export function Table({
103
104
...customProps
104
105
} ) {
105
106
// preserve column order to override default grouping behaviour
106
- const columnOrder = useMemo ( ( ) => controlledState . columnOrder || columns . map ( ( { id } ) => id ) , [
107
- columns ,
108
- controlledState . columnOrder ,
109
- ] )
107
+ const columnOrder = useMemo (
108
+ ( ) => controlledState . columnOrder || columns . map ( ( { id } ) => id ) ,
109
+ [ columns , controlledState . columnOrder ]
110
+ )
110
111
111
112
const reactTableHooks = layoutType === "block" ? blockTableHooks : tableHooks
112
113
@@ -182,11 +183,10 @@ export function Table({
182
183
return rows
183
184
} , [ groupBy , groupsOrderSettings , rows ] )
184
185
185
- const tableRows = useMemo ( ( ) => ( withPagination ? page : orderedRows ) , [
186
- withPagination ,
187
- page ,
188
- orderedRows ,
189
- ] )
186
+ const tableRows = useMemo (
187
+ ( ) => ( withPagination ? page : orderedRows ) ,
188
+ [ withPagination , page , orderedRows ]
189
+ )
190
190
191
191
const showPagination = withPagination && pageCount > 1
192
192
const goToPreviousPage = useCallback ( ( ) => {
@@ -263,7 +263,10 @@ export function Table({
263
263
disabled = { ! canPreviousPage }
264
264
onClick = { goToPreviousPage }
265
265
/>
266
- < Text color = "textDescription" > { pageIndex + 1 } </ Text >
266
+ < Text color = "textDescription" >
267
+ { pageIndex + 1 }
268
+ { showTotalPages && ` / ${ pageCount } ` }
269
+ </ Text >
267
270
< Icon
268
271
name = "chevron_left"
269
272
color = "text"
0 commit comments