From e7f8cd4566357f4ed01d4c6edbddd642be2f65bd Mon Sep 17 00:00:00 2001 From: Cyrus Zei Date: Wed, 26 Feb 2025 17:47:23 +0100 Subject: [PATCH] chore(www): update the user info to use example instead (#6766) --- apps/www/app/(app)/examples/mail/data.tsx | 4 ++-- apps/www/components/cards/data-table.tsx | 8 ++++---- apps/www/public/r/styles/default/data-table-demo.json | 2 +- apps/www/public/r/styles/new-york/data-table-demo.json | 2 +- apps/www/registry/default/examples/data-table-demo.tsx | 10 +++++----- .../www/registry/new-york/examples/data-table-demo.tsx | 10 +++++----- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/apps/www/app/(app)/examples/mail/data.tsx b/apps/www/app/(app)/examples/mail/data.tsx index 2807a4a24e..1c9699f252 100644 --- a/apps/www/app/(app)/examples/mail/data.tsx +++ b/apps/www/app/(app)/examples/mail/data.tsx @@ -186,7 +186,7 @@ export const accounts = [ }, { label: "Alicia Koch", - email: "alicia@gmail.com", + email: "alicia@example.com", icon: ( Gmail @@ -199,7 +199,7 @@ export const accounts = [ }, { label: "Alicia Koch", - email: "alicia@me.com", + email: "alicia@example.com", icon: ( iCloud diff --git a/apps/www/components/cards/data-table.tsx b/apps/www/components/cards/data-table.tsx index e91e296395..c59de7313c 100644 --- a/apps/www/components/cards/data-table.tsx +++ b/apps/www/components/cards/data-table.tsx @@ -48,25 +48,25 @@ const data: Payment[] = [ id: "m5gr84i9", amount: 316, status: "success", - email: "ken99@yahoo.com", + email: "ken99@example.com", }, { id: "3u1reuv4", amount: 242, status: "success", - email: "Abe45@gmail.com", + email: "Abe45@example.com", }, { id: "derv1ws0", amount: 837, status: "processing", - email: "Monserrat44@gmail.com", + email: "Monserrat44@example.com", }, { id: "bhqecj4p", amount: 721, status: "failed", - email: "carmella@hotmail.com", + email: "carmella@example.com", }, ] diff --git a/apps/www/public/r/styles/default/data-table-demo.json b/apps/www/public/r/styles/default/data-table-demo.json index 100e7b83ba..bcf28503cf 100644 --- a/apps/www/public/r/styles/default/data-table-demo.json +++ b/apps/www/public/r/styles/default/data-table-demo.json @@ -9,7 +9,7 @@ "files": [ { "path": "examples/data-table-demo.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@yahoo.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@gmail.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@gmail.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@gmail.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@hotmail.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@example.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@example.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@example.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@example.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@example.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/data-table-demo.json b/apps/www/public/r/styles/new-york/data-table-demo.json index 5836ee8b5a..09c47cbf6d 100644 --- a/apps/www/public/r/styles/new-york/data-table-demo.json +++ b/apps/www/public/r/styles/new-york/data-table-demo.json @@ -9,7 +9,7 @@ "files": [ { "path": "examples/data-table-demo.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@yahoo.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@gmail.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@gmail.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@gmail.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@hotmail.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@example.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@example.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@example.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@example.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@example.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/registry/default/examples/data-table-demo.tsx b/apps/www/registry/default/examples/data-table-demo.tsx index 05ea35b1d6..7ad0c5a05e 100644 --- a/apps/www/registry/default/examples/data-table-demo.tsx +++ b/apps/www/registry/default/examples/data-table-demo.tsx @@ -41,31 +41,31 @@ const data: Payment[] = [ id: "m5gr84i9", amount: 316, status: "success", - email: "ken99@yahoo.com", + email: "ken99@example.com", }, { id: "3u1reuv4", amount: 242, status: "success", - email: "Abe45@gmail.com", + email: "Abe45@example.com", }, { id: "derv1ws0", amount: 837, status: "processing", - email: "Monserrat44@gmail.com", + email: "Monserrat44@example.com", }, { id: "5kma53ae", amount: 874, status: "success", - email: "Silas22@gmail.com", + email: "Silas22@example.com", }, { id: "bhqecj4p", amount: 721, status: "failed", - email: "carmella@hotmail.com", + email: "carmella@example.com", }, ] diff --git a/apps/www/registry/new-york/examples/data-table-demo.tsx b/apps/www/registry/new-york/examples/data-table-demo.tsx index fb8f1fe7ee..62db99ecde 100644 --- a/apps/www/registry/new-york/examples/data-table-demo.tsx +++ b/apps/www/registry/new-york/examples/data-table-demo.tsx @@ -41,31 +41,31 @@ const data: Payment[] = [ id: "m5gr84i9", amount: 316, status: "success", - email: "ken99@yahoo.com", + email: "ken99@example.com", }, { id: "3u1reuv4", amount: 242, status: "success", - email: "Abe45@gmail.com", + email: "Abe45@example.com", }, { id: "derv1ws0", amount: 837, status: "processing", - email: "Monserrat44@gmail.com", + email: "Monserrat44@example.com", }, { id: "5kma53ae", amount: 874, status: "success", - email: "Silas22@gmail.com", + email: "Silas22@example.com", }, { id: "bhqecj4p", amount: 721, status: "failed", - email: "carmella@hotmail.com", + email: "carmella@example.com", }, ]