4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:Te55,"use client" import * as React from "react" import { Badge, BadgeDot } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { createDataTableColumns, DataTable, DataTableColumnHeader, DataTableContent, DataTablePagination, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableToolbar, DataTableViewOptions, useDataTable, } from "@/components/ui/data-table" type Payment = { id: string email: string status: "paid" | "pending" | "failed" amount: number method: string country: string date: string } const statuses = ["paid", "pending", "failed"] as const const methods = ["Card", "PayPal", "Bank", "Apple Pay"] const countries = ["United States", "Germany", "India", "Japan", "Brazil"] const names = ["olivia", "jackson", "isabella", "william", "sofia", "liam"] function makePayments(count: number): Payment[] { return Array.from({ length: count }, (_, index) => ({ id: `pay_${String(index + 1).padStart(4, "0")}`, email: `${names[index % names.length]}.${Math.floor(index / names.length) + 1}@example.com`, status: statuses[(index * 7) % 3], amount: Math.round(((index * 7919) % 100000) / 10) / 10 + 5, method: methods[index % methods.length], country: countries[(index * 3) % countries.length], date: `2026-${String((index % 9) + 1).padStart(2, "0")}-${String((index % 27) + 1).padStart(2, "0")}`, })) } const payments = makePayments(5) const currency = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }) const statusVariant = { paid: "success", pending: "warning", failed: "destructive", } as const const helper = createDataTableColumns() const columns = helper.columns([ helper.display({ id: "select", header: ({ table }) => , cell: ({ row }) => , enableSorting: false, enableHiding: false, }), helper.accessor("email", { header: ({ column }) => ( ), }), helper.accessor("status", { header: ({ column }) => ( ), cell: ({ getValue }) => { const status = getValue() return ( {status} ) }, }), helper.accessor("method", { header: "Method" }), helper.accessor("country", { header: "Country" }), helper.accessor("date", { header: ({ column }) => ( ), }), helper.accessor("amount", { header: ({ column }) => ( ), cell: ({ getValue }) => currency.format(getValue()), meta: { align: "end" }, }), ]) export function DataTableLoading() { const [loading, setLoading] = React.useState(true) const table = useDataTable({ data: payments, columns, getRowId: (row) => row.id, }) return (

) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/badge.json","https://hextaui.com/r/button.json","https://hextaui.com/r/data-table.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/examples/data-table/loading.tsx","content":"$51","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]