{"name":"table","title":"Table","description":"A responsive table component.","installCommand":"bunx marko-ui add table -y","usageTags":"<Table>, <TableHeader>, <TableBody>, <TableFooter>, <TableRow>, <TableHead>, <TableCell>, <TableCaption>","importSnippet":"import Table from \"@/components/ui/table/table.marko\";\nimport TableHeader from \"@/components/ui/table/header.marko\";\nimport TableBody from \"@/components/ui/table/body.marko\";\nimport TableFooter from \"@/components/ui/table/footer.marko\";\nimport TableRow from \"@/components/ui/table/row.marko\";\nimport TableHead from \"@/components/ui/table/head.marko\";\nimport TableCell from \"@/components/ui/table/cell.marko\";\nimport TableCaption from \"@/components/ui/table/caption.marko\";","usageSnippet":"<Table>\n  <TableCaption>A list of your recent invoices.</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Status</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>INV001</TableCell>\n      <TableCell>Paid</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>","tags":["Table","TableBody","TableCaption","TableCell","TableFooter","TableHead","TableHeader","TableRow"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"table-demo","title":"Basic","source":"import Table from \"@marko-ui/shadcn/ui/table/table.marko\";\nimport TableHeader from \"@marko-ui/shadcn/ui/table/header.marko\";\nimport TableBody from \"@marko-ui/shadcn/ui/table/body.marko\";\nimport TableFooter from \"@marko-ui/shadcn/ui/table/footer.marko\";\nimport TableRow from \"@marko-ui/shadcn/ui/table/row.marko\";\nimport TableHead from \"@marko-ui/shadcn/ui/table/head.marko\";\nimport TableCell from \"@marko-ui/shadcn/ui/table/cell.marko\";\nimport TableCaption from \"@marko-ui/shadcn/ui/table/caption.marko\";\n\nstatic const invoices = [\n  { invoice: \"INV001\", status: \"Paid\", method: \"Credit Card\", amount: \"$250.00\" },\n  { invoice: \"INV002\", status: \"Pending\", method: \"PayPal\", amount: \"$150.00\" },\n  { invoice: \"INV003\", status: \"Unpaid\", method: \"Bank Transfer\", amount: \"$350.00\" },\n  { invoice: \"INV004\", status: \"Paid\", method: \"Credit Card\", amount: \"$450.00\" },\n  { invoice: \"INV005\", status: \"Paid\", method: \"PayPal\", amount: \"$550.00\" },\n];\n\n<Table>\n  <TableCaption>A list of your recent invoices.</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead class=\"w-[100px]\">Invoice</TableHead>\n      <TableHead>Status</TableHead>\n      <TableHead>Method</TableHead>\n      <TableHead class=\"text-right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <for|invoice| of=invoices>\n      <TableRow>\n        <TableCell class=\"font-medium\">${invoice.invoice}</TableCell>\n        <TableCell>${invoice.status}</TableCell>\n        <TableCell>${invoice.method}</TableCell>\n        <TableCell class=\"text-right\">${invoice.amount}</TableCell>\n      </TableRow>\n    </for>\n  </TableBody>\n  <TableFooter>\n    <TableRow>\n      <TableCell colspan=\"3\">Total</TableCell>\n      <TableCell class=\"text-right\">$1,750.00</TableCell>\n    </TableRow>\n  </TableFooter>\n</Table>","description":"A full table built from `TableCaption`, `TableHeader`, `TableBody`, and `TableFooter`, with `TableRow` holding `TableHead` or `TableCell` children."},{"id":"table-footer","title":"Footer","source":"import Table from \"@marko-ui/shadcn/ui/table/table.marko\";\nimport TableHeader from \"@marko-ui/shadcn/ui/table/header.marko\";\nimport TableBody from \"@marko-ui/shadcn/ui/table/body.marko\";\nimport TableFooter from \"@marko-ui/shadcn/ui/table/footer.marko\";\nimport TableRow from \"@marko-ui/shadcn/ui/table/row.marko\";\nimport TableHead from \"@marko-ui/shadcn/ui/table/head.marko\";\nimport TableCell from \"@marko-ui/shadcn/ui/table/cell.marko\";\nimport TableCaption from \"@marko-ui/shadcn/ui/table/caption.marko\";\n\nstatic const invoices = [\n  { invoice: \"INV001\", status: \"Paid\", method: \"Credit Card\", amount: \"$250.00\" },\n  { invoice: \"INV002\", status: \"Pending\", method: \"PayPal\", amount: \"$150.00\" },\n  { invoice: \"INV003\", status: \"Unpaid\", method: \"Bank Transfer\", amount: \"$350.00\" },\n];\n\n<Table>\n  <TableCaption>A list of your recent invoices.</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead class=\"w-[100px]\">Invoice</TableHead>\n      <TableHead>Status</TableHead>\n      <TableHead>Method</TableHead>\n      <TableHead class=\"text-right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <for|invoice| of=invoices>\n      <TableRow>\n        <TableCell class=\"font-medium\">${invoice.invoice}</TableCell>\n        <TableCell>${invoice.status}</TableCell>\n        <TableCell>${invoice.method}</TableCell>\n        <TableCell class=\"text-right\">${invoice.amount}</TableCell>\n      </TableRow>\n    </for>\n  </TableBody>\n  <TableFooter>\n    <TableRow>\n      <TableCell colspan=\"3\">Total</TableCell>\n      <TableCell class=\"text-right\">$2,500.00</TableCell>\n    </TableRow>\n  </TableFooter>\n</Table>","description":"Add a `TableFooter` after `TableBody` for a summary row — it renders a `<tfoot>` styled to match the header."},{"id":"table-actions","title":"Actions","source":"import Table from \"@marko-ui/shadcn/ui/table/table.marko\";\nimport TableHeader from \"@marko-ui/shadcn/ui/table/header.marko\";\nimport TableBody from \"@marko-ui/shadcn/ui/table/body.marko\";\nimport TableRow from \"@marko-ui/shadcn/ui/table/row.marko\";\nimport TableHead from \"@marko-ui/shadcn/ui/table/head.marko\";\nimport TableCell from \"@marko-ui/shadcn/ui/table/cell.marko\";\nimport DropdownMenu from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\nimport type { DropdownMenuItem } from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\nstatic const ITEMS = [\n  { value: \"edit\", label: \"Edit\" },\n  { value: \"duplicate\", label: \"Duplicate\" },\n  { type: \"separator\" },\n  { value: \"delete\", label: \"Delete\", variant: \"destructive\" },\n] satisfies DropdownMenuItem[];\n\nstatic const products = [\n  { name: \"Wireless Mouse\", price: \"$29.99\" },\n  { name: \"Mechanical Keyboard\", price: \"$129.99\" },\n  { name: \"USB-C Hub\", price: \"$49.99\" },\n];\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Product</TableHead>\n      <TableHead>Price</TableHead>\n      <TableHead class=\"text-right\">Actions</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <for|product| of=products>\n      <TableRow>\n        <TableCell class=\"font-medium\">${product.name}</TableCell>\n        <TableCell>${product.price}</TableCell>\n        <TableCell class=\"text-right\">\n          <DropdownMenu items=ITEMS>\n            <@trigger|triggerProps|>\n              <Button type=\"button\" variant=\"ghost\" size=\"icon\" class=\"size-8\" ...triggerProps>\n                <Icon name=\"MoreHorizontal\"/>\n                <span class=\"sr-only\">Open menu</span>\n              </Button>\n            </@trigger>\n          </DropdownMenu>\n        </TableCell>\n      </TableRow>\n    </for>\n  </TableBody>\n</Table>","description":"A table showing per-row actions using a `DropdownMenu` in the last cell."},{"id":"table-selected-row","title":"Selected row","source":"import Table from \"@marko-ui/shadcn/ui/table/table.marko\";\nimport TableHeader from \"@marko-ui/shadcn/ui/table/header.marko\";\nimport TableBody from \"@marko-ui/shadcn/ui/table/body.marko\";\nimport TableRow from \"@marko-ui/shadcn/ui/table/row.marko\";\nimport TableHead from \"@marko-ui/shadcn/ui/table/head.marko\";\nimport TableCell from \"@marko-ui/shadcn/ui/table/cell.marko\";\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Status</TableHead>\n      <TableHead class=\"text-right\">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow data-state=\"selected\">\n      <TableCell class=\"font-medium\">INV001</TableCell>\n      <TableCell>Paid</TableCell>\n      <TableCell class=\"text-right\">$250.00</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell class=\"font-medium\">INV002</TableCell>\n      <TableCell>Pending</TableCell>\n      <TableCell class=\"text-right\">$150.00</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>","description":"Add `data-state=\"selected\"` to a `TableRow` to highlight it — the row's `hover:bg-muted` and `data-[state=selected]:bg-muted` styles handle the rest."},{"id":"table-rtl","title":"RTL","source":"import Table from \"@marko-ui/shadcn/ui/table/table.marko\";\nimport TableHeader from \"@marko-ui/shadcn/ui/table/header.marko\";\nimport TableBody from \"@marko-ui/shadcn/ui/table/body.marko\";\nimport TableFooter from \"@marko-ui/shadcn/ui/table/footer.marko\";\nimport TableRow from \"@marko-ui/shadcn/ui/table/row.marko\";\nimport TableHead from \"@marko-ui/shadcn/ui/table/head.marko\";\nimport TableCell from \"@marko-ui/shadcn/ui/table/cell.marko\";\nimport TableCaption from \"@marko-ui/shadcn/ui/table/caption.marko\";\n\nstatic const invoices = [\n  { invoice: \"INV001\", status: \"مدفوع\", method: \"بطاقة ائتمانية\", amount: \"$250.00\" },\n  { invoice: \"INV002\", status: \"قيد الانتظار\", method: \"PayPal\", amount: \"$150.00\" },\n  { invoice: \"INV003\", status: \"غير مدفوع\", method: \"تحويل بنكي\", amount: \"$350.00\" },\n  { invoice: \"INV004\", status: \"مدفوع\", method: \"بطاقة ائتمانية\", amount: \"$450.00\" },\n  { invoice: \"INV005\", status: \"مدفوع\", method: \"PayPal\", amount: \"$550.00\" },\n  { invoice: \"INV006\", status: \"قيد الانتظار\", method: \"تحويل بنكي\", amount: \"$200.00\" },\n  { invoice: \"INV007\", status: \"غير مدفوع\", method: \"بطاقة ائتمانية\", amount: \"$300.00\" },\n];\n\n<Table dir=\"rtl\">\n  <TableCaption>قائمة بفواتيرك الأخيرة.</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead class=\"w-[100px]\">الفاتورة</TableHead>\n      <TableHead>الحالة</TableHead>\n      <TableHead>الطريقة</TableHead>\n      <TableHead class=\"text-right\">المبلغ</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <for|invoice| of=invoices>\n      <TableRow>\n        <TableCell class=\"font-medium\">${invoice.invoice}</TableCell>\n        <TableCell>${invoice.status}</TableCell>\n        <TableCell>${invoice.method}</TableCell>\n        <TableCell class=\"text-right\">${invoice.amount}</TableCell>\n      </TableRow>\n    </for>\n  </TableBody>\n  <TableFooter>\n    <TableRow>\n      <TableCell colspan=\"3\">المجموع</TableCell>\n      <TableCell class=\"text-right\">$2,500.00</TableCell>\n    </TableRow>\n  </TableFooter>\n</Table>","description":"`Table` and its parts restyle for right-to-left reading direction with no extra markup — set `dir=\"rtl\"` on the `Table` root."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{},"nativeAttributes":"div","subcomponents":[{"name":"body","props":[],"body":{},"nativeAttributes":"tbody"},{"name":"caption","props":[],"body":{},"nativeAttributes":"caption"},{"name":"cell","props":[],"body":{},"nativeAttributes":"td"},{"name":"footer","props":[],"body":{},"nativeAttributes":"tfoot"},{"name":"head","props":[],"body":{},"nativeAttributes":"th"},{"name":"header","props":[],"body":{},"nativeAttributes":"thead"},{"name":"row","props":[],"body":{},"nativeAttributes":"tr"}]}