Memoize table data

src/apps/dashboard/routes/activity/index.tsx

@@ -61,7 +61,13 @@ export const Component = () => {
         hasUserId: activityView !== ActivityView.All ? activityView === ActivityView.User : undefined
     }), [activityView, pagination.pageIndex, pagination.pageSize]);
 
-    const { data: logEntries, isLoading: isLogEntriesLoading } = useLogEntries(activityParams);
+    const { data, isLoading: isLogEntriesLoading } = useLogEntries(activityParams);
+    const logEntries = useMemo(() => (
+        data?.Items || []
+    ), [ data ]);
+    const rowCount = useMemo(() => (
+        data?.TotalRecordCount || 0
+    ), [ data ]);
 
     const isLoading = isUsersLoading || isLogEntriesLoading;
 
@@ -154,7 +160,7 @@ export const Component = () => {
         ...DEFAULT_TABLE_OPTIONS,
 
         columns,
-        data: logEntries?.Items || [],
+        data: logEntries,
 
         // State
         initialState: {
@@ -168,7 +174,7 @@ export const Component = () => {
         // Server pagination
         manualPagination: true,
         onPaginationChange: setPagination,
-        rowCount: logEntries?.TotalRecordCount || 0,
+        rowCount,
 
         // Custom toolbar contents
         renderTopToolbarCustomActions: () => (

src/apps/dashboard/routes/keys/index.tsx

@@ -10,7 +10,7 @@ import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table'
 import React, { useCallback, useMemo } from 'react';
 
 import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
-import TablePage from 'apps/dashboard/components/table/TablePage';
+import TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/table/TablePage';
 import { useApiKeys } from 'apps/dashboard/features/keys/api/useApiKeys';
 import { useRevokeKey } from 'apps/dashboard/features/keys/api/useRevokeKey';
 import { useCreateKey } from 'apps/dashboard/features/keys/api/useCreateKey';
@@ -21,7 +21,10 @@ import globalize from 'lib/globalize';
 
 export const Component = () => {
     const { api } = useApi();
-    const { data: keys, isLoading } = useApiKeys();
+    const { data, isLoading } = useApiKeys();
+    const keys = useMemo(() => (
+        data?.Items || []
+    ), [ data ]);
     const revokeKey = useRevokeKey();
     const createKey = useCreateKey();
 
@@ -47,26 +50,15 @@ export const Component = () => {
     ], []);
 
     const table = useMaterialReactTable({
+        ...DEFAULT_TABLE_OPTIONS,
+
         columns,
-        data: keys?.Items || [],
+        data: keys,
 
         state: {
             isLoading
         },
 
-        rowCount: keys?.TotalRecordCount || 0,
-
-        enableColumnPinning: true,
-        enableColumnResizing: true,
-
-        enableStickyFooter: true,
-        enableStickyHeader: true,
-        muiTableContainerProps: {
-            sx: {
-                maxHeight: 'calc(100% - 7rem)' // 2 x 3.5rem for header and footer
-            }
-        },
-
         // Enable (delete) row actions
         enableRowActions: true,
         positionActionsColumn: 'last',