Card mode for tables.

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>;