Merge pull request #433 from algorandfoundation/feat/store-page-sizes

feat: store data table page sizes

Author: neilcampbell

src/features/accounts/components/account-applications.tsx

@@ -18,5 +18,5 @@ const applicationsTableColumns: ColumnDef<ApplicationSummary>[] = [
 ]
 
 export function AccountApplications({ applications }: Props) {
-  return <DataTable columns={applicationsTableColumns} data={applications} />
+  return <DataTable columns={applicationsTableColumns} data={applications} dataContext="application" />
 }

src/features/accounts/components/account-assets-created.tsx

@@ -36,5 +36,5 @@ const assetsCreatedTableColumns: ColumnDef<AccountAssetSummary>[] = [
 ]
 
 export function AccountAssetsCreated({ assetsCreated }: Props) {
-  return <DataTable columns={assetsCreatedTableColumns} data={assetsCreated} />
+  return <DataTable columns={assetsCreatedTableColumns} data={assetsCreated} dataContext="asset" />
 }

src/features/accounts/components/account-assets-held.tsx

@@ -7,5 +7,5 @@ type Props = {
 }
 
 export function AccountAssetsHeld({ assetsHeld }: Props) {
-  return <DataTable columns={accountAssetHoldingsTableColumns} data={assetsHeld} />
+  return <DataTable columns={accountAssetHoldingsTableColumns} data={assetsHeld} dataContext="asset" />
 }

src/features/accounts/components/account-assets-opted.tsx

@@ -7,5 +7,5 @@ type Props = {
 }
 
 export function AccountAssetsOpted({ assetsOpted }: Props) {
-  return <DataTable columns={accountAssetHoldingsTableColumns} data={assetsOpted} />
+  return <DataTable columns={accountAssetHoldingsTableColumns} data={assetsOpted} dataContext="asset" />
 }

src/features/accounts/components/account-transaction-history.tsx

@@ -17,7 +17,12 @@ export function AccountTransactionHistory({ address }: Props) {
 
   return (
     <div>
-      <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+      <LazyLoadDataTable
+        columns={transactionsTableColumns}
+        getSubRows={getSubRows}
+        createLoadablePage={createLoadablePage}
+        dataContext="transaction"
+      />
       <ListingOrderLabel oldestToNewest={false} />
     </div>
   )

src/features/app-interfaces/components/edit/app-specs-table.tsx

@@ -81,7 +81,7 @@ export function AppSpecsTable({ appInterface, refreshAppInterface }: Props) {
         <h2 className="pb-0">{appSpecsLabel}</h2>
         <AddAppSpecButton applicationId={appInterface.applicationId} onSuccess={refreshAppInterface} />
       </div>
-      <DataTable ariaLabel={appSpecsLabel} columns={tableColumns} data={appInterface.appSpecVersions} />
+      <DataTable ariaLabel={appSpecsLabel} columns={tableColumns} data={appInterface.appSpecVersions} dataContext="appSpec" />
     </div>
   )
 }

src/features/applications/components/application-box-details-dialog.tsx

@@ -47,7 +47,12 @@ function InternalDialogContent({ application, boxDescriptor }: { application: Ap
   return (
     <RenderLoadable loadable={loadableApplicationBox}>
       {(applicationBox) => (
-        <DataTable columns={boxTableColumns} data={[{ boxDescriptor, boxValue: applicationBox }]} hidePagination={true} />
+        <DataTable
+          columns={boxTableColumns}
+          data={[{ boxDescriptor, boxValue: applicationBox }]}
+          hidePagination={true}
+          dataContext="applicationState"
+        />
       )}
     </RenderLoadable>
   )

src/features/applications/components/application-boxes.tsx

@@ -14,7 +14,7 @@ export function ApplicationBoxes({ application }: Props) {
   const createLoadablePage = useMemo(() => createLoadableApplicationBoxesPage(application), [application])
   const tableColumns = useMemo(() => createTableColumns(application), [application])
 
-  return <LazyLoadDataTable columns={tableColumns} createLoadablePage={createLoadablePage} />
+  return <LazyLoadDataTable columns={tableColumns} createLoadablePage={createLoadablePage} dataContext="applicationState" />
 }
 
 const createTableColumns = (application: Application): ColumnDef<BoxDescriptor>[] => {

src/features/applications/components/application-global-state-table.tsx

@@ -12,9 +12,9 @@ type Props = {
 export function ApplicationGlobalStateTable({ application }: Props) {
   const component = useMemo(() => {
     if (application.globalState?.every((state) => 'type' in state)) {
-      return <DataTable columns={rawTableColumns} data={application.globalState ?? []} />
+      return <DataTable columns={rawTableColumns} data={application.globalState ?? []} dataContext="applicationState" />
     }
-    return <DataTable columns={decodedTableColumns} data={application.globalState ?? []} />
+    return <DataTable columns={decodedTableColumns} data={application.globalState ?? []} dataContext="applicationState" />
   }, [application.globalState])
 
   return component

src/features/applications/components/application-transaction-history.tsx

@@ -26,7 +26,12 @@ export function ApplicationTransactionHistory({ applicationId }: Props) {
 
   return (
     <div>
-      <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+      <LazyLoadDataTable
+        columns={transactionsTableColumns}
+        getSubRows={getSubRows}
+        createLoadablePage={createLoadablePage}
+        dataContext="transaction"
+      />
       <ListingOrderLabel />
     </div>
   )