Skip to content

frontend:table: fix the rows-per-page settings persist among views #4668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ChayanDass wants to merge 1 commit into
base: main
Choose a base branch
from
+390 −10
Open

frontend:table: fix the rows-per-page settings persist among views #4668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/common/Resource/ResourceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,7 +328,7 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
hideColumns = [],
filterFunction,
errorMessage,
reflectInURL,
reflectInURL = true,
data,
defaultGlobalFilter,
actions,
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/common/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import { MRT_Localization_ZH_HANS } from 'material-react-table/locales/zh-Hans';
import { MRT_Localization_ZH_HANT } from 'material-react-table/locales/zh-Hant';
import { memo, ReactNode, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getTablesRowsPerPage } from '../../../helpers/tablesRowsPerPage';
import { setTablesRowsPerPage } from '../../../helpers/tablesRowsPerPage';
import { useShortcut } from '../../../lib/useShortcut';
import { useURLState } from '../../../lib/util';
import { useSettings } from '../../App/Settings/hook';
Expand Down Expand Up @@ -203,9 +203,8 @@ export default function Table<RowItem extends Record<string, any>>({

const storeRowsPerPageOptions = useSettings('tableRowsPerPageOptions');
const rowsPerPageOptions = rowsPerPage || storeRowsPerPageOptions;
const defaultRowsPerPage = useMemo(() => getTablesRowsPerPage(rowsPerPageOptions[0]), []);
const [pageSize, setPageSize] = useURLState(shouldReflectInURL ? 'perPage' : '', {
defaultValue: defaultRowsPerPage,
defaultValue: storeRowsPerPageOptions[0],
prefix,
});

Expand Down Expand Up @@ -272,6 +271,7 @@ export default function Table<RowItem extends Record<string, any>>({
const pagination = updater({ pageIndex: Number(page) - 1, pageSize: Number(pageSize) });
setPage(pagination.pageIndex + 1);
setPageSize(pagination.pageSize);
setTablesRowsPerPage(pagination.pageSize);
},
onGlobalFilterChange: setGlobalFilter,
renderToolbarInternalActions: props => {
Expand Down
206 changes: 203 additions & 3 deletions frontend/src/components/common/Table/__snapshots__/Table.ReflectInURL.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,206 @@
4
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 5
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 5
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
5
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 6
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 6
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
6
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 7
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 7
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
7
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 8
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 8
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
8
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 9
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 9
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
9
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 10
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 10
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
10
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 11
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 11
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
11
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 12
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 12
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
12
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 13
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 13
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
13
</td>
</tr>
<tr
class="css-1ospngb"
data-selected="false"
>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1574zbf-MuiTableCell-root"
>
Name 14
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2wxm0s-MuiTableCell-root"
>
Namespace 14
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1qzqemr-MuiTableCell-root"
>
14
</td>
</tr>
</tbody>
</table>
<div
Expand Down Expand Up @@ -455,14 +655,14 @@
role="combobox"
tabindex="0"
>
5
15
</div>
<input
aria-hidden="true"
aria-invalid="false"
class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
tabindex="-1"
value="5"
value="15"
/>
<svg
aria-hidden="true"
Expand All @@ -480,7 +680,7 @@
<span
class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-htm6yz-MuiTypography-root"
>
1-5 of 50
1-15 of 50
</span>
<div
class="MuiBox-root css-192dx0w"
Expand Down
Loading
Loading