@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/x/table-x.tsx

@@ -0,0 +1,574 @@
+/**import { TableCaption ,Table, TableHeader,TableRow,TableHead,TableBody, TableCell, TableFooter   } from "../primitives"
+
+
+
+const TableDemo = () => {
+  return (
+    <Table>
+      <TableCaption>Default table.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className='w-25'>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+const TableBorderDemo = () => {
+  return (
+    <Table className='border'>
+      <TableCaption>Bordered table.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className='w-25'>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+const TableRoundedCornerDemo = () => {
+  return (
+    <div className='w-full'>
+      <div className='overflow-hidden rounded-md border'>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className='w-25'>Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className='text-right'>Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invoices.map(invoice => (
+              <TableRow key={invoice.invoice}>
+                <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+                <TableCell>{invoice.paymentStatus}</TableCell>
+                <TableCell>{invoice.paymentMethod}</TableCell>
+                <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell className='text-right'>$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Rounded corner table</p>
+    </div>
+  )
+}
+
+const TableWithVerticalLinesDemo = () => {
+  return (
+    <Table>
+      <TableCaption>Table with vertical lines.</TableCaption>
+      <TableHeader>
+        <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+          <TableHead className='w-25'>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow key={invoice.invoice} className='*:border-border [&>:not(:last-child)]:border-r'>
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+const TableWithOutBorderDemo = () => {
+  return (
+    <Table>
+      <TableCaption>Table without border.</TableCaption>
+      <TableHeader>
+        <TableRow className='bg-muted/50 border-none'>
+          <TableHead className='w-25'>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow key={invoice.invoice} className='border-none'>
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter className='border-none'>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+const StripedRowsTableDemo = () => {
+  return (
+    <Table>
+      <TableCaption>Striped rows table.</TableCaption>
+      <TableHeader>
+        <TableRow className='hover:bg-transparent'>
+          <TableHead className='w-25'>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow key={invoice.invoice} className='odd:bg-muted/50 odd:hover:bg-muted/50 hover:bg-transparent'>
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter className='bg-transparent'>
+        <TableRow className='hover:bg-transparent'>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+const StrippedColumnTableDemo = () => {
+  return (
+    <Table>
+      <TableCaption>Striped columns table.</TableCaption>
+      <TableHeader>
+        <TableRow className='[&_th]:even:bg-muted/50 hover:bg-transparent'>
+          <TableHead className='w-25'>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow key={invoice.invoice} className='[&_td]:even:bg-muted/50 hover:bg-transparent'>
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter className='bg-transparent'>
+        <TableRow className='hover:bg-transparent'>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+const TableHighlightedRowDemo = () => {
+  return (
+    <Table>
+      <TableCaption>Highlight row table.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className='w-25'>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow
+            key={invoice.invoice}
+            className='nth-3:bg-sky-600/10 nth-3:hover:bg-sky-600/20 nth-3:dark:bg-sky-400/10 nth-3:dark:hover:bg-sky-400/20'
+          >
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+const OverflowScrollTableDemo = () => {
+  return (
+    <div className='w-full'>
+      <div className='grid [&>div]:max-h-70 [&>div]:rounded-sm [&>div]:border'>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className='w-25'>Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className='text-right'>Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invoices.map(invoice => (
+              <TableRow key={invoice.invoice}>
+                <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+                <TableCell>{invoice.paymentStatus}</TableCell>
+                <TableCell>{invoice.paymentMethod}</TableCell>
+                <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell className='text-right'>$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Overflow scroll table</p>
+    </div>
+  )
+}
+
+const StickyHeaderTableDemo = () => {
+  return (
+    <div className='w-full'>
+      <div className='[&>div]:max-h-70 [&>div]:rounded-sm [&>div]:border'>
+        <Table>
+          <TableHeader>
+            <TableRow className='bg-background sticky top-0'>
+              <TableHead className='w-25'>Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className='text-right'>Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invoices.map(invoice => (
+              <TableRow key={invoice.invoice}>
+                <TableCell className='font-medium'>{invoice.invoice}</TableCell>
+                <TableCell>{invoice.paymentStatus}</TableCell>
+                <TableCell>{invoice.paymentMethod}</TableCell>
+                <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell className='text-right'>$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Sticky header table</p>
+    </div>
+  )
+}
+
+const StickyColumnTableDemo = () => {
+  return (
+    <div className='w-full'>
+      <div className='mx-auto max-w-2xl [&>div]:rounded-sm [&>div]:border'>
+        <Table>
+          <TableHeader>
+            <TableRow className='hover:bg-transparent'>
+              <TableHead className='bg-background sticky left-0'>ID</TableHead>
+              <TableHead className='bg-background sticky left-7.5'>Name</TableHead>
+              <TableHead>Occupation</TableHead>
+              <TableHead>Employer</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Location</TableHead>
+              <TableHead>Last Access</TableHead>
+              <TableHead>Salary</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invoices.map(invoice => (
+              <TableRow key={invoice.id} className='hover:bg-transparent'>
+                <TableCell className='bg-background sticky left-0 font-medium'>{invoice.id}</TableCell>
+                <TableCell className='bg-background sticky left-7.5'>{invoice.name}</TableCell>
+                <TableCell>{invoice.occupation}</TableCell>
+                <TableCell>{invoice.employer}</TableCell>
+                <TableCell>{invoice.email}</TableCell>
+                <TableCell>{invoice.location}</TableCell>
+                <TableCell>{invoice.lastaccess}</TableCell>
+                <TableCell>{invoice.salary}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Sticky column table</p>
+    </div>
+  )
+}
+
+const VerticalTableDemo = () => {
+  return (
+    <div className='mx-auto w-full max-w-lg'>
+      <div className='overflow-hidden rounded-md border'>
+        <Table>
+          <TableBody>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Product Name</TableCell>
+              <TableCell className='py-2'>Iphone 16 PRO</TableCell>
+            </TableRow>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Serial Number</TableCell>
+              <TableCell className='py-2'>DF121543309KU</TableCell>
+            </TableRow>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Category</TableCell>
+              <TableCell className='py-2'>Smartphone</TableCell>
+            </TableRow>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Purchase Date</TableCell>
+              <TableCell className='py-2'>15/06/205</TableCell>
+            </TableRow>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Warranty Expiry</TableCell>
+              <TableCell className='py-2'>15/06/2026</TableCell>
+            </TableRow>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Origin</TableCell>
+              <TableCell className='py-2'>China</TableCell>
+            </TableRow>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Assign User</TableCell>
+              <TableCell className='py-2'>Alice Johnson</TableCell>
+            </TableRow>
+            <TableRow className='*:border-border [&>:not(:last-child)]:border-r'>
+              <TableCell className='bg-muted/50 py-2 font-medium'>Value</TableCell>
+              <TableCell className='py-2'>$1,120.0</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Vertical table</p>
+    </div>
+  )
+}
+
+const TableWithAvatarDemo = () => {
+  return (
+    <div className='w-full'>
+      <div className='[&>div]:rounded-sm [&>div]:border'>
+        <Table>
+          <TableHeader>
+            <TableRow className='hover:bg-transparent'>
+              <TableHead>Name</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Location</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className='text-right'>Balance</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.map(item => (
+              <TableRow key={item.id}>
+                <TableCell>
+                  <div className='flex items-center gap-3'>
+                    <Avatar>
+                      <AvatarImage src={item.src} alt={item.fallback} />
+                      <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>
+                    </Avatar>
+                    <div className='font-medium'>{item.name}</div>
+                  </div>
+                </TableCell>
+                <TableCell>{item.email}</TableCell>
+                <TableCell>{item.location}</TableCell>
+                <TableCell>{item.status}</TableCell>
+                <TableCell className='text-right'>{item.balance}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Table with avatar</p>
+    </div>
+  )
+}
+
+const TableSelectableRowDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='w-full'>
+      <div className='overflow-hidden rounded-md border'>
+        <Table>
+          <TableHeader>
+            <TableRow className='hover:bg-transparent'>
+              <TableHead>
+                <Checkbox id={id} aria-label='select-all' />
+              </TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Location</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className='text-right'>Balance</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.map(item => (
+              <TableRow key={item.id} className='has-data-[state=checked]:bg-muted/50'>
+                <TableCell>
+                  <Checkbox id={`table-checkbox-${item.id}`} aria-label={`user-checkbox-${item.id}`} />
+                </TableCell>
+                <TableCell className='font-medium'>{item.name}</TableCell>
+                <TableCell>{item.email}</TableCell>
+                <TableCell>{item.location}</TableCell>
+                <TableCell>{item.status}</TableCell>
+                <TableCell className='text-right'>{item.balance}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter className='bg-transparent'>
+            <TableRow className='hover:bg-transparent'>
+              <TableCell colSpan={5}>Total</TableCell>
+              <TableCell className='text-right'>$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Table with row selection</p>
+    </div>
+  )
+}
+
+const ProductTableDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='w-full'>
+      <div className='[&>div]:rounded-sm [&>div]:border'>
+        <Table>
+          <TableHeader>
+            <TableRow className='hover:bg-transparent'>
+              <TableHead>
+                <Checkbox id={id} aria-label='select-all' />
+              </TableHead>
+              <TableHead>Product</TableHead>
+              <TableHead>Color</TableHead>
+              <TableHead>Category</TableHead>
+              <TableHead>Price</TableHead>
+              <TableHead className='w-0'>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.map(item => (
+              <TableRow key={item.id} className='has-data-[state=checked]:bg-muted/50'>
+                <TableCell>
+                  <Checkbox id={`table-checkbox-${item.id}`} aria-label={`product-checkbox-${item.id}`} />
+                </TableCell>
+                <TableCell>
+                  <div className='flex items-center gap-3'>
+                    <Avatar className='rounded-sm'>
+                      <AvatarImage src={item.src} alt={item.model} />
+                      <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className='font-medium'>{item.productName}</div>
+                      <span className='text-muted-foreground mt-0.5 text-xs'>{item.model}</span>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>{item.color}</TableCell>
+                <TableCell>{item.category}</TableCell>
+                <TableCell>{item.price}</TableCell>
+                <TableCell className='flex items-center gap-1'>
+                  <Button variant='ghost' size='icon' className='rounded-full' aria-label={`product-${item.id}-edit`}>
+                    <PencilIcon />
+                  </Button>
+                  <Button variant='ghost' size='icon' className='rounded-full' aria-label={`product-${item.id}-remove`}>
+                    <Trash2Icon />
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    className='rounded-full'
+                    aria-label={`product-${item.id}-archive`}
+                  >
+                    <ArchiveIcon />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Product Table</p>
+    </div>
+  )
+} */