Card mode for tables.

src/app/(main)/App.tsx

@@ -28,9 +28,9 @@ export function App({ children }) {
   }
 
   return (
-    <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
-      <Row display={{ xs: 'flex', md: 'none' }} alignItems="center" gap></Row>
-      <Column display={{ xs: 'none', md: 'flex' }}>
+    <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
+      <Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap></Row>
+      <Column display={{ xs: 'none', lg: 'flex' }}>
         <SideNav />
       </Column>
       <Column alignItems="center" overflowY="auto" overflowX="hidden" position="relative">

src/app/(main)/links/LinksTable.tsx

@@ -1,23 +1,18 @@
 import Link from 'next/link';
-import { DataTable, DataColumn, Row } from '@umami/react-zen';
+import { DataTable, DataColumn, Row, DataTableProps } from '@umami/react-zen';
 import { useMessages, useNavigation, useSlug } from '@/components/hooks';
-import { Empty } from '@/components/common/Empty';
 import { DateDistance } from '@/components/common/DateDistance';
 import { ExternalLink } from '@/components/common/ExternalLink';
 import { LinkEditButton } from './LinkEditButton';
 import { LinkDeleteButton } from './LinkDeleteButton';
 
-export function LinksTable({ data = [] }) {
+export function LinksTable(props: DataTableProps) {
   const { formatMessage, labels } = useMessages();
   const { websiteId, renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('link');
 
-  if (data.length === 0) {
-    return <Empty />;
-  }
-
   return (
-    <DataTable data={data}>
+    <DataTable {...props}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
         {({ id, name }: any) => {
           return <Link href={renderUrl(`/links/${id}`)}>{name}</Link>;

src/app/(main)/pixels/PixelsTable.tsx

@@ -1,23 +1,18 @@
 import Link from 'next/link';
-import { DataTable, DataColumn, Row } from '@umami/react-zen';
+import { DataTable, DataColumn, Row, DataTableProps } from '@umami/react-zen';
 import { useMessages, useNavigation, useSlug } from '@/components/hooks';
-import { Empty } from '@/components/common/Empty';
 import { DateDistance } from '@/components/common/DateDistance';
 import { PixelEditButton } from './PixelEditButton';
 import { PixelDeleteButton } from './PixelDeleteButton';
 import { ExternalLink } from '@/components/common/ExternalLink';
 
-export function PixelsTable({ data = [] }) {
+export function PixelsTable(props: DataTableProps) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('pixel');
 
-  if (data.length === 0) {
-    return <Empty />;
-  }
-
   return (
-    <DataTable data={data}>
+    <DataTable {...props}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
         {({ id, name }: any) => {
           return <Link href={renderUrl(`/pixels/${id}`)}>{name}</Link>;

src/app/(main)/teams/TeamsTable.tsx

@@ -1,19 +1,17 @@
-import { DataColumn, DataTable } from '@umami/react-zen';
+import { DataColumn, DataTable, DataTableProps } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 import { ReactNode } from 'react';
 
-export function TeamsTable({
-  data = [],
-  renderLink,
-}: {
-  data: any[];
+export interface TeamsTableProps extends DataTableProps {
   renderLink?: (row: any) => ReactNode;
-}) {
+}
+
+export function TeamsTable({ renderLink, ...props }: TeamsTableProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <DataTable data={data}>
+    <DataTable {...props}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
         {renderLink}
       </DataColumn>

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

@@ -1,30 +1,22 @@
 import { ReactNode } from 'react';
-import { Icon, DataTable, DataColumn } from '@umami/react-zen';
+import { Icon, DataTable, DataColumn, DataTableProps } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SquarePen } from '@/components/icons';
-import { Empty } from '@/components/common/Empty';
 
-export function WebsitesTable({
-  data = [],
-  showActions,
-  renderLink,
-}: {
-  data: Record<string, any>[];
+export interface WebsitesTableProps extends DataTableProps {
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
   renderLink?: (row: any) => ReactNode;
-}) {
+}
+
+export function WebsitesTable({ showActions, renderLink, ...props }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl } = useNavigation();
 
-  if (data.length === 0) {
-    return <Empty />;
-  }
-
   return (
-    <DataTable data={data}>
+    <DataTable {...props}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
         {renderLink}
       </DataColumn>

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -1,6 +1,5 @@
-import { DataTable, DataColumn, Icon, Row, Text } from '@umami/react-zen';
+import { DataTable, DataColumn, Row, Text, DataTableProps, IconLabel } from '@umami/react-zen';
 import { useFormat, useMessages, useNavigation } from '@/components/hooks';
-import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
 import { Eye } from '@/components/icons';
@@ -8,35 +7,44 @@ import { Lightning } from '@/components/svg';
 import { DateDistance } from '@/components/common/DateDistance';
 import { TypeIcon } from '@/components/common/TypeIcon';
 
-export function EventsTable({ data = [] }) {
+export function EventsTable(props: DataTableProps) {
   const { formatMessage, labels } = useMessages();
   const { updateParams } = useNavigation();
   const { formatValue } = useFormat();
 
-  if (data.length === 0) {
-    return <Empty />;
-  }
-
   return (
-    <DataTable data={data}>
+    <DataTable {...props}>
       <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
         {(row: any) => {
           return (
-            <Row alignItems="center" gap="2">
-              <Link href={updateParams({ session: row.sessionId })}>
-                <Avatar seed={row.sessionId} size={32} />
-              </Link>
-              <Icon>{row.eventName ? <Lightning /> : <Eye />}</Icon>
-              <Text>
-                {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
-              </Text>
-              <Text weight="bold" style={{ maxWidth: '300px' }} truncate>
+            <Row alignItems="center" wrap="wrap" gap>
+              <Row>
+                <IconLabel
+                  icon={row.eventName ? <Lightning /> : <Eye />}
+                  label={formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
+                />
+              </Row>
+              <Text
+                weight="bold"
+                style={{ maxWidth: '300px' }}
+                title={row.eventName || row.urlPath}
+                truncate
+              >
                 {row.eventName || row.urlPath}
               </Text>
             </Row>
           );
         }}
       </DataColumn>
+      <DataColumn id="session" label={formatMessage(labels.session)} width="80px">
+        {(row: any) => {
+          return (
+            <Link href={updateParams({ session: row.sessionId })}>
+              <Avatar seed={row.sessionId} size={32} />
+            </Link>
+          );
+        }}
+      </DataColumn>
       <DataColumn id="location" label={formatMessage(labels.location)}>
         {(row: any) => (
           <TypeIcon type="country" value={row.country}>

src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx

@@ -8,7 +8,7 @@ export function SessionsDataTable({ websiteId }: { websiteId?: string; teamId?:
   return (
     <DataGrid query={queryResult} allowPaging allowSearch>
       {({ data }) => {
-        return <SessionsTable data={data} showDomain={!websiteId} />;
+        return <SessionsTable data={data} />;
       }}
     </DataGrid>
   );

src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx

@@ -1,17 +1,17 @@
 import Link from 'next/link';
-import { DataColumn, DataTable } from '@umami/react-zen';
+import { DataColumn, DataTable, DataTableProps } from '@umami/react-zen';
 import { useFormat, useMessages, useNavigation } from '@/components/hooks';
 import { Avatar } from '@/components/common/Avatar';
 import { TypeIcon } from '@/components/common/TypeIcon';
 import { DateDistance } from '@/components/common/DateDistance';
 
-export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
+export function SessionsTable(props: DataTableProps) {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
   const { updateParams } = useNavigation();
 
   return (
-    <DataTable data={data}>
+    <DataTable {...props}>
       <DataColumn id="id" label={formatMessage(labels.session)} width="100px">
         {(row: any) => (
           <Link href={updateParams({ session: row.id })}>

src/components/common/DataGrid.tsx

@@ -1,5 +1,12 @@
-import { ReactNode, useState, useCallback } from 'react';
-import { SearchField, Row, Column } from '@umami/react-zen';
+import {
+  ReactNode,
+  useState,
+  useCallback,
+  ReactElement,
+  cloneElement,
+  isValidElement,
+} from 'react';
+import { SearchField, Row, Column, useBreakpoint } from '@umami/react-zen';
 import { UseQueryResult } from '@tanstack/react-query';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Pager } from '@/components/common/Pager';
@@ -35,6 +42,8 @@ export function DataGrid({
   const { router, updateParams, query: queryParams } = useNavigation();
   const [search, setSearch] = useState(queryParams?.search || data?.search || '');
   const showPager = allowPaging && data && data.count > data.pageSize;
+  const breakpoint = useBreakpoint();
+  const displayMode = ['xs', 'sm', 'md', 'lg'].includes(breakpoint) ? 'cards' : undefined;
 
   const handleSearch = (value: string) => {
     if (value !== search) {
@@ -50,6 +59,8 @@ export function DataGrid({
     [search],
   );
 
+  const child = data ? (typeof children === 'function' ? children(data) : children) : null;
+
   return (
     <Column gap="4" minHeight="300px">
       {allowSearch && (
@@ -73,7 +84,11 @@ export function DataGrid({
       >
         {data && (
           <>
-            <Column>{typeof children === 'function' ? children(data) : children}</Column>
+            <Column>
+              {isValidElement(child)
+                ? cloneElement(child as ReactElement<any>, { displayMode })
+                : child}
+            </Column>
             {showPager && (
               <Row marginTop="6">
                 <Pager

src/components/common/PageBody.tsx

@@ -31,9 +31,9 @@ export function PageBody({
     <Column
       {...props}
       width="100%"
-      paddingBottom="9"
+      paddingBottom="6"
       maxWidth={maxWidth}
-      paddingX="4"
+      paddingX={{ xs: '3', md: '6' }}
       style={{ margin: '0 auto' }}
     >
       {children}

src/components/input/NavButton.tsx

@@ -61,6 +61,7 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
           borderRadius
           shadow="1"
           maxHeight="40px"
+          role="button"
           style={{ cursor: 'pointer', textWrap: 'nowrap', outline: 'none' }}
         >
           <Row alignItems="center" position="relative" gap maxHeight="40px">