Skip to content

Commit b368c08

Browse files
NerivecNerivec
committed
fix: remove Table pagination
1 parent 15e9935 commit b368c08

File tree

6 files changed

+10
-86
lines changed

6 files changed

+10
-86
lines changed

‎src/components/settings-page/tabs/Frontend.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,7 @@ import { useEffect, useState } from "react";
22
import { useTranslation } from "react-i18next";
33
import store2 from "store2";
44
import LanguageSwitcher from "../../../i18n/LanguageSwitcher.js";
5-
import {
6-
DEVICE_TABLE_PAGE_SIZE_KEY,
7-
GROUP_TABLE_PAGE_SIZE_KEY,
8-
HOMEPAGE_KEY,
9-
I18NEXTLNG_KEY,
10-
MAX_ON_SCREEN_NOTIFICATIONS_KEY,
11-
OTA_TABLE_PAGE_SIZE_KEY,
12-
PERMIT_JOIN_TIME_KEY,
13-
THEME_KEY,
14-
} from "../../../localStoreConsts.js";
5+
import { HOMEPAGE_KEY, I18NEXTLNG_KEY, MAX_ON_SCREEN_NOTIFICATIONS_KEY, PERMIT_JOIN_TIME_KEY, THEME_KEY } from "../../../localStoreConsts.js";
156
import Button from "../../Button.js";
167
import ThemeSwitcher from "../../ThemeSwitcher.js";
178
import InputField from "../../form-fields/InputField.js";
@@ -39,9 +30,6 @@ export default function Frontend() {
3930
}, [maxOnScreenNotifications]);
4031

4132
const resetAll = () => {
42-
local.remove(DEVICE_TABLE_PAGE_SIZE_KEY);
43-
local.remove(OTA_TABLE_PAGE_SIZE_KEY);
44-
local.remove(GROUP_TABLE_PAGE_SIZE_KEY);
4533
local.remove(THEME_KEY);
4634
local.remove(HOMEPAGE_KEY);
4735
local.remove(PERMIT_JOIN_TIME_KEY);

‎src/components/table/Table.tsx‎

Lines changed: 5 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,24 @@
1-
import { faAnglesLeft, faAnglesRight, faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
2-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
31
import {
42
type ColumnDef,
53
type ColumnFiltersState,
64
flexRender,
75
getCoreRowModel,
86
getFilteredRowModel,
9-
getPaginationRowModel,
107
getSortedRowModel,
118
useReactTable,
129
} from "@tanstack/react-table";
13-
import { type ChangeEvent, useCallback, useState } from "react";
14-
import { useTranslation } from "react-i18next";
15-
import store2 from "store2";
16-
import Button from "../Button.js";
10+
import { useState } from "react";
1711
import TextFilter from "./TextFilter.js";
1812

1913
interface Props<T> {
2014
id: string;
2115
columns: ColumnDef<T, unknown>[];
2216
data: T[];
23-
pageSizeStoreKey?: string;
2417
visibleColumns?: Record<string, boolean>;
2518
}
2619

27-
// XXX: workaround typing
28-
const local = store2 as unknown as typeof store2.default;
29-
30-
const PAGE_SIZES = [10, 30, 50, 100];
31-
3220
export default function Table<T>(props: Props<T>) {
33-
const { id, columns, data, pageSizeStoreKey, visibleColumns } = props;
34-
const { t } = useTranslation("common");
21+
const { id, columns, data, visibleColumns } = props;
3522
const [columnVisibility] = useState<Record<string, boolean>>(visibleColumns ?? {});
3623
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
3724
const table = useReactTable({
@@ -41,34 +28,24 @@ export default function Table<T>(props: Props<T>) {
4128
state: {
4229
columnFilters,
4330
columnVisibility,
44-
},
45-
initialState: {
4631
pagination: {
4732
pageIndex: 0, // custom initial page index
48-
pageSize: pageSizeStoreKey ? local.get(pageSizeStoreKey, 10) : 10, // custom default page size
33+
pageSize: 500, // custom default page size
4934
},
5035
},
5136
onColumnFiltersChange: setColumnFilters,
5237
getCoreRowModel: getCoreRowModel(),
5338
getFilteredRowModel: getFilteredRowModel(), // client side filtering
5439
getSortedRowModel: getSortedRowModel(),
55-
getPaginationRowModel: getPaginationRowModel(),
40+
// getPaginationRowModel: getPaginationRowModel(),
41+
manualPagination: true,
5642
// debugTable: false,
5743
// debugHeaders: false,
5844
// debugColumns: false,
5945
// debugCells: false,
6046
// debugRows: false,
6147
// debugAll: false,
6248
});
63-
const onPageSizeChange = useCallback(
64-
(e: ChangeEvent<HTMLSelectElement>) => {
65-
const newSize = Number(e.target.value);
66-
67-
local.set(pageSizeStoreKey, newSize);
68-
table.setPageSize(newSize);
69-
},
70-
[pageSizeStoreKey, table.setPageSize],
71-
);
7249

7350
return (
7451
<div className="overflow-x-auto">
@@ -117,40 +94,6 @@ export default function Table<T>(props: Props<T>) {
11794
))}
11895
</tbody>
11996
</table>
120-
<div className="divider" />
121-
<div className="navbar bg-base-100">
122-
<div className="navbar-start" />
123-
<div className="navbar-center join">
124-
<Button className="btn btn-square join-item" onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()}>
125-
<FontAwesomeIcon icon={faAnglesLeft} />
126-
</Button>
127-
<Button className="btn btn-square join-item" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
128-
<FontAwesomeIcon icon={faChevronLeft} />
129-
</Button>
130-
<Button className="btn join-item pointer-events-none">
131-
{t("page")} {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
132-
</Button>
133-
<Button className="btn btn-square join-item" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
134-
<FontAwesomeIcon icon={faChevronRight} />
135-
</Button>
136-
<Button
137-
className="btn btn-square join-item"
138-
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
139-
disabled={!table.getCanNextPage()}
140-
>
141-
<FontAwesomeIcon icon={faAnglesRight} />
142-
</Button>
143-
</div>
144-
<div className="navbar-end">
145-
<select value={table.getState().pagination.pageSize} onChange={onPageSizeChange} className="select w-32 mx-1">
146-
{PAGE_SIZES.map((pageSize) => (
147-
<option key={pageSize} value={pageSize}>
148-
{t("show")} {pageSize}
149-
</option>
150-
))}
151-
</select>
152-
</div>
153-
</div>
15497
</div>
15598
);
15699
}

‎src/localStoreConsts.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@
22
export const TOKEN_KEY = "z2m-token-v2";
33
export const AUTH_FLAG_KEY = "z2m-auth-v2";
44

5-
//-- Tables
6-
export const DEVICE_TABLE_PAGE_SIZE_KEY = "device-table-page-size";
7-
export const OTA_TABLE_PAGE_SIZE_KEY = "ota-table-page-size";
8-
export const GROUP_TABLE_PAGE_SIZE_KEY = "group-table-page-size";
9-
105
//-- Theme
116
export const THEME_KEY = "theme";
127

‎src/pages/DevicesPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import ModelLink from "../components/value-decorators/ModelLink.js";
1515
import PowerSource from "../components/value-decorators/PowerSource.js";
1616
import VendorLink from "../components/value-decorators/VendorLink.js";
1717
import { useAppSelector } from "../hooks/useApp.js";
18-
import { DEVICES_HIDE_DISABLED_KEY, DEVICE_TABLE_PAGE_SIZE_KEY } from "../localStoreConsts.js";
18+
import { DEVICES_HIDE_DISABLED_KEY } from "../localStoreConsts.js";
1919
import type { AvailabilityState, Device, DeviceState } from "../types.js";
2020
import { convertLastSeenToDate, toHex } from "../utils.js";
2121

@@ -263,5 +263,5 @@ export default function DevicesPage(): JSX.Element {
263263
[bridgeConfig.advanced.last_seen, bridgeConfig.availability.enabled, data],
264264
);
265265

266-
return <Table id="all-devices" columns={columns} data={data} pageSizeStoreKey={DEVICE_TABLE_PAGE_SIZE_KEY} visibleColumns={visibleColumns} />;
266+
return <Table id="all-devices" columns={columns} data={data} visibleColumns={visibleColumns} />;
267267
}

‎src/pages/GroupsPage.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import InputField from "../components/form-fields/InputField.js";
1313
import { RenameGroupForm } from "../components/modal/components/RenameGroupModal.js";
1414
import Table from "../components/table/Table.js";
1515
import { useAppSelector } from "../hooks/useApp.js";
16-
import { GROUP_TABLE_PAGE_SIZE_KEY } from "../localStoreConsts.js";
1716
import type { Group } from "../types.js";
1817

1918
export default function GroupsPage() {
@@ -159,7 +158,7 @@ export default function GroupsPage() {
159158
</div>
160159
</div>
161160
</div>
162-
<Table id="all-groups" columns={columns} data={groups} pageSizeStoreKey={GROUP_TABLE_PAGE_SIZE_KEY} />
161+
<Table id="all-groups" columns={columns} data={groups} />
163162
</>
164163
);
165164
}

‎src/pages/OtaPage.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import OtaLink from "../components/value-decorators/OtaLink.js";
1515
import PowerSource from "../components/value-decorators/PowerSource.js";
1616
import VendorLink from "../components/value-decorators/VendorLink.js";
1717
import { useAppSelector } from "../hooks/useApp.js";
18-
import { OTA_TABLE_PAGE_SIZE_KEY } from "../localStoreConsts.js";
1918
import type { Device, DeviceState } from "../types.js";
2019

2120
type OtaTableData = {
@@ -290,5 +289,5 @@ export default function OtaPage() {
290289
],
291290
);
292291

293-
return <Table id="ota-devices" columns={columns} data={otaDevices} pageSizeStoreKey={OTA_TABLE_PAGE_SIZE_KEY} />;
292+
return <Table id="ota-devices" columns={columns} data={otaDevices} />;
294293
}

0 commit comments

Comments
 (0)