Render children for data tables.

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

@@ -18,6 +18,10 @@ export function WebsitesDataTable({
 }) {
   const queryResult = useWebsites({ teamId });
 
+  if (!queryResult?.result?.data?.length) {
+    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,