diff --git a/package-lock.json b/package-lock.json index e8643f95e..f11a14ee7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4341,6 +4341,12 @@ "json5": "^1.0.1" } }, + "local-storage": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/local-storage/-/local-storage-2.0.0.tgz", + "integrity": "sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw==", + "dev": true + }, "locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", diff --git a/package.json b/package.json index a2bd945aa..f42a73519 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "i18next-http-backend": "^1.3.1", "jszip": "^3.7.1", "line-reader": "^0.4.0", + "local-storage": "^2.0.0", "lodash": "^4.17.21", "mini-css-extract-plugin": "^2.4.2", "notyf": "^3.10.0", diff --git a/src/components/dashboard-page/DashboardFeatureWrapper.tsx b/src/components/dashboard-page/DashboardFeatureWrapper.tsx index a01a5311c..499260592 100644 --- a/src/components/dashboard-page/DashboardFeatureWrapper.tsx +++ b/src/components/dashboard-page/DashboardFeatureWrapper.tsx @@ -80,7 +80,6 @@ export const DashboardFeatureWrapper: FunctionComponent {icon &&
diff --git a/src/components/grid/ReactTableCom.tsx b/src/components/grid/ReactTableCom.tsx index f3def9ce3..333fe3af2 100644 --- a/src/components/grid/ReactTableCom.tsx +++ b/src/components/grid/ReactTableCom.tsx @@ -1,10 +1,14 @@ import React from "react"; -import { useTable, useSortBy, HeaderGroup, Column, useAsyncDebounce, useGlobalFilter } from 'react-table' +import { useTable, useSortBy, HeaderGroup, Column, useAsyncDebounce, useGlobalFilter, ActionType, TableInstance, TableState } from 'react-table' import cx from "classnames"; import { useTranslation } from "react-i18next"; +import { set, get } from "local-storage"; +import debounce from "lodash/debounce"; + interface Props { + id: string; columns: Array>; data: Array; } @@ -35,8 +39,22 @@ function GlobalFilter({ ) } -export const Table: React.FC = ({ columns, data }) => { +const persist = debounce((key: string, data: Record): void => { + set(key, data); +}) + + +const stateReducer = (newState: TableState, action: ActionType, previousState: TableState, instance?: TableInstance): TableState => { + if (instance) { + const { instanceId } = instance; + const { sortBy, globalFilter } = newState; + persist(instanceId, { sortBy, globalFilter }) + } + return newState; +}; +export const Table: React.FC = ({ columns, data, id }) => { + const initialState = get>>(id) || {}; const { getTableProps, getTableBodyProps, @@ -48,10 +66,13 @@ export const Table: React.FC = ({ columns, data }) => { setGlobalFilter, } = useTable( { + instanceId: id, + stateReducer, columns, data, autoResetSortBy: false, autoResetFilters: false, + initialState }, useGlobalFilter, useSortBy diff --git a/src/components/groups/index.tsx b/src/components/groups/index.tsx index c3ad536ee..5a96a4db4 100644 --- a/src/components/groups/index.tsx +++ b/src/components/groups/index.tsx @@ -107,7 +107,7 @@ export class GroupsPage extends Component
- +
diff --git a/src/components/ota-page/index.tsx b/src/components/ota-page/index.tsx index f8e23a631..c1f32356b 100644 --- a/src/components/ota-page/index.tsx +++ b/src/components/ota-page/index.tsx @@ -103,7 +103,7 @@ class OtaPage extends Component return
-
+
} diff --git a/src/components/touchlink-page/index.tsx b/src/components/touchlink-page/index.tsx index feb83c388..109affe2c 100644 --- a/src/components/touchlink-page/index.tsx +++ b/src/components/touchlink-page/index.tsx @@ -68,7 +68,7 @@ export class TouchlinkPage extends Component -
+
); } diff --git a/src/components/zigbee/index.tsx b/src/components/zigbee/index.tsx index 188a0567f..37abafe89 100644 --- a/src/components/zigbee/index.tsx +++ b/src/components/zigbee/index.tsx @@ -124,6 +124,7 @@ export class ZigbeeTable extends Component { }, { + id: 'friendly_name', Header: t('friendly_name') as string, accessor: ({ device }) => device.friendly_name, Cell: ({ row: { original: { device } } }) => {device.friendly_name} @@ -171,6 +172,7 @@ export class ZigbeeTable extends Component { return (