Updated data table render check.

package.json

@@ -71,7 +71,7 @@
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.28.6",
     "@umami/prisma-client": "^0.14.0",
-    "@umami/redis-client": "^0.20.0",
+    "@umami/redis-client": "^0.21.0",
     "chalk": "^4.1.1",
     "chart.js": "^4.4.2",
     "chartjs-adapter-date-fns": "^3.0.0",

src/app/(main)/reports/ReportsDataTable.tsx

@@ -1,16 +1,23 @@
 import { useReports } from 'components/hooks';
 import ReportsTable from './ReportsTable';
 import DataTable from 'components/common/DataTable';
+import { ReactNode } from 'react';
 
 export default function ReportsDataTable({
   websiteId,
   teamId,
+  children,
 }: {
   websiteId?: string;
   teamId?: string;
+  children?: ReactNode;
 }) {
   const queryResult = useReports({ websiteId, teamId });
 
+  if (queryResult?.result?.data?.length === 0) {
+    return children;
+  }
+
   return (
     <DataTable queryResult={queryResult}>
       {({ data }) => <ReportsTable data={data} showDomain={!websiteId} />}

src/app/(main)/settings/teams/TeamsDataTable.tsx

@@ -1,17 +1,24 @@
 import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import { useLogin, useTeams } from 'components/hooks';
+import { ReactNode } from 'react';
 
 export function TeamsDataTable({
   allowEdit,
   showActions,
+  children,
 }: {
   allowEdit?: boolean;
   showActions?: boolean;
+  children?: ReactNode;
 }) {
   const { user } = useLogin();
   const queryResult = useTeams(user.id);
 
+  if (queryResult?.result?.data?.length === 0) {
+    return children;
+  }
+
   return (
     <DataTable queryResult={queryResult}>
       {({ data }) => {

src/app/(main)/settings/users/UsersDataTable.tsx

@@ -1,10 +1,21 @@
 import DataTable from 'components/common/DataTable';
 import { useUsers } from 'components/hooks';
 import UsersTable from './UsersTable';
+import { ReactNode } from 'react';
 
-export function UsersDataTable({ showActions }: { showActions?: boolean }) {
+export function UsersDataTable({
+  showActions,
+  children,
+}: {
+  showActions?: boolean;
+  children?: ReactNode;
+}) {
   const queryResult = useUsers();
 
+  if (queryResult?.result?.data?.length === 0) {
+    return children;
+  }
+
   return (
     <DataTable queryResult={queryResult}>
       {({ data }) => <UsersTable data={data} showActions={showActions} />}

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -18,6 +18,10 @@ export function WebsitesDataTable({
 }) {
   const queryResult = useWebsites({ teamId });
 
+  if (queryResult?.result?.data?.length === 0) {
+    return children;
+  }
+
   return (
     <DataTable queryResult={queryResult}>
       {({ data }) => (
@@ -27,9 +31,7 @@ export function WebsitesDataTable({
           showActions={showActions}
           allowEdit={allowEdit}
           allowView={allowView}
-        >
-          {children}
-        </WebsitesTable>
+        />
       )}
     </DataTable>
   );

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -23,6 +23,10 @@ export function WebsitesTable({
   const breakpoint = useBreakpoint();
   const { renderTeamUrl } = useTeamUrl();
 
+  if (!data?.length) {
+    return children;
+  }
+
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
@@ -55,7 +59,6 @@ export function WebsitesTable({
           }}
         </GridColumn>
       )}
-      {children}
     </GridTable>
   );
 }

src/components/common/DataTable.module.css

@@ -1,22 +1,8 @@
-.table {
-  grid-template-rows: repeat(auto-fit, max-content);
-}
-
-.table td {
-  align-items: center;
-  max-height: max-content;
-}
-
 .search {
   max-width: 300px;
   margin: 20px 0;
 }
 
-.action {
-  justify-content: flex-end;
-  gap: 5px;
-}
-
 .body {
   display: flex;
   flex-direction: column;

src/components/common/DataTable.tsx

@@ -4,8 +4,8 @@ import { Banner, Loading, SearchField } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
-import styles from './DataTable.module.css';
 import { FilterQueryResult } from 'lib/types';
+import styles from './DataTable.module.css';
 
 const DEFAULT_SEARCH_DELAY = 600;
 

src/components/hooks/queries/useRealtime.ts

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { RealtimeData } from 'lib/types';
-import { useApi } from 'components/hooks';
+import { useApi } from './useApi';
 import { REALTIME_INTERVAL, REALTIME_RANGE } from 'lib/constants';
 import { startOfMinute, subMinutes } from 'date-fns';
 import { percentFilter } from 'lib/filters';

src/components/hooks/queries/useWebsiteValues.ts

@@ -1,4 +1,4 @@
-import { useApi } from 'components/hooks';
+import { useApi } from './useApi';
 
 export function useWebsiteValues({
   websiteId,

yarn.lock

@@ -2899,10 +2899,10 @@
     chalk "^4.1.2"
     debug "^4.3.4"
 
-"@umami/redis-client@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@umami/redis-client/-/redis-client-0.20.0.tgz#93b4598d68983b1ad266a0a527c56533c6248bf2"
-  integrity sha512-ACpoO+M/J2eLWEtusjbslhR4le+rPN4h9x7TXjaVJ905icVE0Qgu5y+A7nxXjcYvlgkHk+8HPeVeeaw5P+rxqw==
+"@umami/redis-client@^0.21.0":
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/@umami/redis-client/-/redis-client-0.21.0.tgz#96426b28860b8b06fae8825fc2f2d9575b64e863"
+  integrity sha512-PpdJunvT4sAsVWIeEl+cHU6iSV2r/Df9dof2gdUwSigfD88ACsVs1/BvlWERxk/T93rTgVJWSpLvdw/oMYvkcw==
   dependencies:
     debug "^4.3.4"
     redis "^4.5.1"
@@ -9532,7 +9532,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9605,7 +9614,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10366,7 +10382,7 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10384,6 +10400,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"