Skip to content

Commit c8b8fe2

Browse files
ChayanDassChayanDass
committed
frontend: table: Add row-per-page persist and update URL
- Persist rows-per-page in localStorage (key tables_rows_per_page) when the user changes it; value is restored on reload or when switching views/tabs. - Call setTablesRowsPerPage on pagination change so the preference is saved from the main Table component. - Default page size to lowest option (storeRowsPerPageOptions[0]); remove getTablesRowsPerPage useMemo and unused import from Table. - ResourceTable: default reflectInURL to true (no prefix) so page/perPage in the URL stay short; using the table id would make the URL too long. Why: Users expect their chosen table density to persist across reloads and navigation; storing the value in localStorage avoids losing the selection and keeps the UI consistent.
1 parent 51c2b8b commit c8b8fe2

File tree

4 files changed

+390
-10
lines changed

4 files changed

+390
-10
lines changed

‎frontend/src/components/common/Resource/ResourceTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
328328
hideColumns = [],
329329
filterFunction,
330330
errorMessage,
331-
reflectInURL,
331+
reflectInURL = true,
332332
data,
333333
defaultGlobalFilter,
334334
actions,

‎frontend/src/components/common/Table/Table.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import { MRT_Localization_ZH_HANS } from 'material-react-table/locales/zh-Hans';
4848
import { MRT_Localization_ZH_HANT } from 'material-react-table/locales/zh-Hant';
4949
import { memo, ReactNode, useEffect, useMemo, useState } from 'react';
5050
import { useTranslation } from 'react-i18next';
51-
import { getTablesRowsPerPage } from '../../../helpers/tablesRowsPerPage';
51+
import { setTablesRowsPerPage } from '../../../helpers/tablesRowsPerPage';
5252
import { useShortcut } from '../../../lib/useShortcut';
5353
import { useURLState } from '../../../lib/util';
5454
import { useSettings } from '../../App/Settings/hook';
@@ -203,9 +203,8 @@ export default function Table<RowItem extends Record<string, any>>({
203203

204204
const storeRowsPerPageOptions = useSettings('tableRowsPerPageOptions');
205205
const rowsPerPageOptions = rowsPerPage || storeRowsPerPageOptions;
206-
const defaultRowsPerPage = useMemo(() => getTablesRowsPerPage(rowsPerPageOptions[0]), []);
207206
const [pageSize, setPageSize] = useURLState(shouldReflectInURL ? 'perPage' : '', {
208-
defaultValue: defaultRowsPerPage,
207+
defaultValue: storeRowsPerPageOptions[0],
209208
prefix,
210209
});
211210

@@ -272,6 +271,7 @@ export default function Table<RowItem extends Record<string, any>>({
272271
const pagination = updater({ pageIndex: Number(page) - 1, pageSize: Number(pageSize) });
273272
setPage(pagination.pageIndex + 1);
274273
setPageSize(pagination.pageSize);
274+
setTablesRowsPerPage(pagination.pageSize);
275275
},
276276
onGlobalFilterChange: setGlobalFilter,
277277
renderToolbarInternalActions: props => {

‎frontend/src/components/common/Table/__snapshots__/Table.ReflectInURL.stories.storyshot‎

Lines changed: 203 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,206 @@
420420
4
421421
</td>
422422
</tr>
423+
<tr
424+
class="css-1ospngb"
425+
data-selected="false"
426+
>
427+
<td
428+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
429+
>
430+
Name 5
431+
</td>
432+
<td
433+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
434+
>
435+
Namespace 5
436+
</td>
437+
<td
438+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
439+
>
440+
5
441+
</td>
442+
</tr>
443+
<tr
444+
class="css-1ospngb"
445+
data-selected="false"
446+
>
447+
<td
448+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
449+
>
450+
Name 6
451+
</td>
452+
<td
453+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
454+
>
455+
Namespace 6
456+
</td>
457+
<td
458+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
459+
>
460+
6
461+
</td>
462+
</tr>
463+
<tr
464+
class="css-1ospngb"
465+
data-selected="false"
466+
>
467+
<td
468+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
469+
>
470+
Name 7
471+
</td>
472+
<td
473+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
474+
>
475+
Namespace 7
476+
</td>
477+
<td
478+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
479+
>
480+
7
481+
</td>
482+
</tr>
483+
<tr
484+
class="css-1ospngb"
485+
data-selected="false"
486+
>
487+
<td
488+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
489+
>
490+
Name 8
491+
</td>
492+
<td
493+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
494+
>
495+
Namespace 8
496+
</td>
497+
<td
498+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
499+
>
500+
8
501+
</td>
502+
</tr>
503+
<tr
504+
class="css-1ospngb"
505+
data-selected="false"
506+
>
507+
<td
508+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
509+
>
510+
Name 9
511+
</td>
512+
<td
513+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
514+
>
515+
Namespace 9
516+
</td>
517+
<td
518+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
519+
>
520+
9
521+
</td>
522+
</tr>
523+
<tr
524+
class="css-1ospngb"
525+
data-selected="false"
526+
>
527+
<td
528+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
529+
>
530+
Name 10
531+
</td>
532+
<td
533+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
534+
>
535+
Namespace 10
536+
</td>
537+
<td
538+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
539+
>
540+
10
541+
</td>
542+
</tr>
543+
<tr
544+
class="css-1ospngb"
545+
data-selected="false"
546+
>
547+
<td
548+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
549+
>
550+
Name 11
551+
</td>
552+
<td
553+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
554+
>
555+
Namespace 11
556+
</td>
557+
<td
558+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
559+
>
560+
11
561+
</td>
562+
</tr>
563+
<tr
564+
class="css-1ospngb"
565+
data-selected="false"
566+
>
567+
<td
568+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
569+
>
570+
Name 12
571+
</td>
572+
<td
573+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
574+
>
575+
Namespace 12
576+
</td>
577+
<td
578+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
579+
>
580+
12
581+
</td>
582+
</tr>
583+
<tr
584+
class="css-1ospngb"
585+
data-selected="false"
586+
>
587+
<td
588+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
589+
>
590+
Name 13
591+
</td>
592+
<td
593+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
594+
>
595+
Namespace 13
596+
</td>
597+
<td
598+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
599+
>
600+
13
601+
</td>
602+
</tr>
603+
<tr
604+
class="css-1ospngb"
605+
data-selected="false"
606+
>
607+
<td
608+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
609+
>
610+
Name 14
611+
</td>
612+
<td
613+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
614+
>
615+
Namespace 14
616+
</td>
617+
<td
618+
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
619+
>
620+
14
621+
</td>
622+
</tr>
423623
</tbody>
424624
</table>
425625
<div
@@ -455,14 +655,14 @@
455655
role="combobox"
456656
tabindex="0"
457657
>
458-
5
658+
15
459659
</div>
460660
<input
461661
aria-hidden="true"
462662
aria-invalid="false"
463663
class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
464664
tabindex="-1"
465-
value="5"
665+
value="15"
466666
/>
467667
<svg
468668
aria-hidden="true"
@@ -480,7 +680,7 @@
480680
<span
481681
class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-htm6yz-MuiTypography-root"
482682
>
483-
1-5 of 50
683+
1-15 of 50
484684
</span>
485685
<div
486686
class="MuiBox-root css-192dx0w"

0 commit comments

Comments
 (0)