1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[974],{7676:(e,n,t)=>{Promise.resolve().then(t.bind(t,43738))},43738:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>X});var a=t(95155),o=t(67396),l=t(12115),r=t(73312),s=t(84858),i=t(57485);let d=e=>{let n=[{accessorKey:"name_4603829743",header:"Name"},{accessorKey:"name_0878515932",header:"Age"},{accessorKey:"name_0706064476",header:"Gender"},{accessorKey:"name_6646786819",header:"Email"}];return(e.edit||e.delete)&&n.push({id:"actions",cell:n=>{let{row:t,table:o}=n,l=t.original,{onEdit:d,onDelete:c}=o.options.meta;return d||c?(0,a.jsxs)(i.rI,{children:[(0,a.jsx)(i.ty,{asChild:!0,children:(0,a.jsxs)(r.$,{variant:"ghost",className:"h-8 w-8 p-0",children:[(0,a.jsx)("span",{className:"sr-only",children:"Open menu"}),(0,a.jsx)(s.A,{className:"h-4 w-4"})]})}),(0,a.jsxs)(i.SQ,{align:"end",children:[(0,a.jsx)(i.lp,{children:"Actions"}),e.edit&&d&&(0,a.jsx)(i._2,{onClick:()=>d(l),children:"Edit"}),e.delete&&c&&(0,a.jsx)(i._2,{onClick:()=>c(l.id),children:"Delete"})]})]}):null}}),n};var c=t(89789),m=t(19083),u=t(72508),p=t(33900),h=t(2291),g=t(11553),f=t(28424),x=t(99577);function b(e){var n,t,o;let{columns:s,data:d,onAdd:b,onEdit:y,onDelete:w,onmultiDelete:j,config:D}=e,[v,C]=(0,l.useState)([]),[N,S]=(0,l.useState)([]),[F,M]=(0,l.useState)({}),[T,_]=(0,l.useState)({}),R=(0,c.N4)({data:d,columns:s,getCoreRowModel:(0,m.HT)(),getPaginationRowModel:D.pagination?(0,m.kW)():void 0,onSortingChange:C,getSortedRowModel:D.sorting?(0,m.h5)():void 0,onColumnFiltersChange:S,getFilteredRowModel:D.search?(0,m.hM)():void 0,onRowSelectionChange:M,onColumnVisibilityChange:_,state:{sorting:v,columnFilters:N,rowSelection:F,columnVisibility:T},meta:{onEdit:y,onDelete:w}});return(0,a.jsxs)("div",{className:"space-y-4 py-4 rounded-lg",children:[(0,a.jsx)("h4",{children:"Table Preview"}),(0,a.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[D.search&&(0,a.jsx)(p.p,{placeholder:"Filter usernames...",value:null!==(o=null===(n=R.getColumn("name_4603829743"))||void 0===n?void 0:n.getFilterValue())&&void 0!==o?o:"",onChange:e=>{var n;return null===(n=R.getColumn("name_4603829743"))||void 0===n?void 0:n.setFilterValue(e.target.value)},className:"max-w-sm"}),(0,a.jsxs)("div",{className:"flex items-center gap-4",children:[D.multiDelete&&Object.keys(F).length>0&&(0,a.jsxs)(r.$,{onClick:()=>{j(R.getFilteredSelectedRowModel().rows.map(e=>e.original))},variant:"destructive",children:["Delete Selected (",Object.keys(F).length,")"]}),D.create&&(0,a.jsx)(r.$,{onClick:b,children:"Add User"}),(0,a.jsxs)(i.rI,{children:[(0,a.jsx)(i.ty,{asChild:!0,children:(0,a.jsx)(r.$,{variant:"outline",children:"Columns"})}),(0,a.jsx)(i.SQ,{align:"end",children:R.getAllColumns().filter(e=>e.getCanHide()).map(e=>(0,a.jsx)(i.hO,{className:"capitalize",checked:e.getIsVisible(),onCheckedChange:n=>e.toggleVisibility(!!n),children:e.id},e.id))})]})]})]}),(0,a.jsx)("div",{className:"rounded-b-md border",children:(0,a.jsxs)(u.XI,{children:[(0,a.jsx)(u.A0,{className:"bg-secondary",children:R.getHeaderGroups().map(e=>(0,a.jsxs)(u.Hj,{children:[D.multiDelete&&(0,a.jsx)(u.nd,{className:"w-[50px]",children:(0,a.jsx)(h.S,{checked:R.getIsAllPageRowsSelected(),onCheckedChange:e=>R.toggleAllPageRowsSelected(!!e),"aria-label":"Select all"})}),e.headers.map(e=>(0,a.jsx)(u.nd,{children:e.isPlaceholder?null:(0,a.jsxs)("div",{className:"flex items-center",children:[(0,c.Kv)(e.column.columnDef.header,e.getContext()),D.sorting&&e.column.getCanSort()&&(0,a.jsx)(r.$,{variant:"ghost",onClick:e.column.getToggleSortingHandler(),children:e.column.getIsSorted()?"desc"===e.column.getIsSorted()?(0,a.jsx)(g.A,{className:"ml-2 h-4 w-4"}):(0,a.jsx)(f.A,{className:"ml-2 h-4 w-4"}):(0,a.jsx)(x.A,{className:"ml-2 h-4 w-4"})})]})},e.id))]},e.id))}),(0,a.jsx)(u.BF,{children:(null===(t=R.getRowModel().rows)||void 0===t?void 0:t.length)?R.getRowModel().rows.map(e=>(0,a.jsxs)(u.Hj,{"data-state":e.getIsSelected()&&"selected",children:[D.multiDelete&&(0,a.jsx)(u.nA,{className:"w-[50px]",children:(0,a.jsx)(h.S,{checked:e.getIsSelected(),onCheckedChange:n=>e.toggleSelected(!!n),"aria-label":"Select row"})}),e.getVisibleCells().map(e=>(0,a.jsx)(u.nA,{className:"text-xs",children:(0,c.Kv)(e.column.columnDef.cell,e.getContext())},e.id))]},e.id)):(0,a.jsx)(u.Hj,{children:(0,a.jsx)(u.nA,{colSpan:s.length,className:"h-24 text-center",children:"No results."})})})]})}),D.pagination&&(0,a.jsxs)("div",{className:"flex items-center justify-end space-x-2",children:[(0,a.jsx)(r.$,{variant:"outline",size:"sm",onClick:()=>R.previousPage(),disabled:!R.getCanPreviousPage(),children:"Previous"}),(0,a.jsx)(r.$,{variant:"outline",size:"sm",onClick:()=>R.nextPage(),disabled:!R.getCanNextPage(),children:"Next"})]})]})}var y=t(30814),w=t(69606),j=t(85060),D=t(43415),v=t(53886),C=t(91014),N=t(51719),S=t(91902),F=t(98867),M=t(21567);let T=C.bL;C.YJ;
1let _=C.WT,R=l.forwardRef((e,n)=>{let{className:t,children:o,...l}=e;return(0,a.jsxs)(C.l9,{ref:n,className:(0,M.cn)("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",t),...l,children:[o,(0,a.jsx)(C.In,{asChild:!0,children:(0,a.jsx)(N.A,{className:"h-4 w-4 opacity-50"})})]})});R.displayName=C.l9.displayName;let I=l.forwardRef((e,n)=>{let{className:t,...o}=e;return(0,a.jsx)(C.PP,{ref:n,className:(0,M.cn)("flex cursor-default items-center justify-center py-1",t),...o,children:(0,a.jsx)(S.A,{className:"h-4 w-4"})})});I.displayName=C.PP.displayName;let k=l.forwardRef((e,n)=>{let{className:t,...o}=e;return(0,a.jsx)(C.wn,{ref:n,className:(0,M.cn)("flex cursor-default items-center justify-center py-1",t),...o,children:(0,a.jsx)(N.A,{className:"h-4 w-4"})})});k.displayName=C.wn.displayName;let A=l.forwardRef((e,n)=>{let{className:t,children:o,position:l="popper",...r}=e;return(0,a.jsx)(C.ZL,{children:(0,a.jsxs)(C.UC,{ref:n,className:(0,M.cn)("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2","popper"===l&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",t),position:l,...r,children:[(0,a.jsx)(I,{}),(0,a.jsx)(C.LM,{className:(0,M.cn)("p-1","popper"===l&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:o}),(0,a.jsx)(k,{})]})})});A.displayName=C.UC.displayName,l.forwardRef((e,n)=>{let{className:t,...o}=e;return(0,a.jsx)(C.JU,{ref:n,className:(0,M.cn)("px-2 py-1.5 text-sm font-semibold",t),...o})}).displayName=C.JU.displayName;let z=l.forwardRef((e,n)=>{let{className:t,children:o,...l}=e;return(0,a.jsxs)(C.q7,{ref:n,className:(0,M.cn)("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",t),...l,children:[(0,a.jsx)("span",{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:(0,a.jsx)(C.VF,{children:(0,a.jsx)(F.A,{className:"h-4 w-4"})})}),(0,a.jsx)(C.p4,{children:o})]})});z.displayName=C.q7.displayName,l.forwardRef((e,n)=>{let{className:t,...o}=e;return(0,a.jsx)(C.wv,{ref:n,className:(0,M.cn)("-mx-1 my-1 h-px bg-muted",t),...o})}).displayName=C.wv.displayName;let P=D.Ik({id:D.Yj().optional(),name_4603829743:D.Yj().min(2,{message:"Name must be at least 2 characters"}),name_0878515932:D.au.number().min(0,{message:"Age must be a positive number"}),name_0706064476:D.Yj().optional(),name_6646786819:D.Yj().email({message:"Invalid email address"})});function U(e){let{onSubmit:n,initialData:t}=e,o=(0,w.mN)({resolver:(0,j.u)(P),defaultValues:t||{name_4603829743:"",name_0878515932:0,name_0706064476:"",name_6646786819:""}});return(0,a.jsx)(v.lV,{...o,children:(0,a.jsxs)("form",{onSubmit:o.handleSubmit(function(e){console.log(e);try{n(e),o.reset(),y.oR.success("User data submitted successfully!")}catch(e){console.error("Form submission error",e),y.oR.error("Failed to submit the form. Please try again.")}}),className:"space-y-8 max-w-3xl mx-auto py-10",children:[(0,a.jsxs)("div",{className:"grid grid-cols-12 gap-4",children:[(0,a.jsx)("div",{className:"col-span-6",children:(0,a.jsx)(v.zB,{control:o.control,name:"name_4603829743",render:e=>{let{field:n}=e;return(0,a.jsxs)(v.eI,{children:[(0,a.jsx)(v.lR,{children:"Name"}),(0,a.jsx)(v.MJ,{children:(0,a.jsx)(p.p,{placeholder:"shadcn",type:"text",...n})}),(0,a.jsx)(v.Rr,{children:"This is your public display name."}),(0,a.jsx)(v.C5,{})]})}})}),(0,a.jsx)("div",{className:"col-span-6",children:(0,a.jsx)(v.zB,{control:o.control,name:"name_0878515932",render:e=>{let{field:n}=e;return(0,a.jsxs)(v.eI,{children:[(0,a.jsx)(v.lR,{children:"Age"}),(0,a.jsx)(v.MJ,{children:(0,a.jsx)(p.p,{placeholder:"shadcn",type:"number",...n})}),(0,a.jsx)(v.Rr,{children:"This is your public display name."}),(0,a.jsx)(v.C5,{})]})}})})]}),(0,a.jsxs)("div",{className:"grid grid-cols-12 gap-4",children:[(0,a.jsx)("div",{className:"col-span-6",children:(0,a.jsx)(v.zB,{control:o.control,name:"name_0706064476",render:e=>{let{field:n}=e;return(0,a.jsxs)(v.eI,{children:[(0,a.jsx)(v.lR,{children:"Gender"}),(0,a.jsxs)(T,{onValueChange:n.onChange,defaultValue:n.value,children:[(0,a.jsx)(v.MJ,{children:(0,a.jsx)(R,{children:(0,a.jsx)(_,{placeholder:"Select a gender to display"})})}),(0,a.jsxs)(A,{children:[(0,a.jsx)(z,{value:"male",children:"Male"}),(0,a.jsx)(z,{value:"female",children:"Female"}),(0,a.jsx)(z,{value:"others",children:"Others"})]})]}),(0,a.jsx)(v.Rr,{children:"You can manage gender in settings."}),(0,a.jsx)(v.C5,{})]})}})}),(0,a.jsx)("div",{className:"col-span-6",children:(0,a.jsx)(v.zB,{control:o.control,name:"name_6646786819",render:e=>{let{field:n}=e;return(0,a.jsxs)(v.eI,{children:[(0,a.jsx)(v.lR,{children:"Email"}),(0,a.jsx)(v.MJ,{children:(0,a.jsx)(p.p,{placeholder:"shadcn",type:"email",...n})}),(0,a.jsx)(v.Rr,{children:"This is your public display name."}),(0,a.jsx)(v.C5,{})]})}})})]}
1),(0,a.jsx)(r.$,{type:"submit",children:t?"Update":"Create"})]})})}var B=t(51344);let O=[{id:"2",name_4603829743:"Jane Doe",name_0878515932:30,name_0706064476:"female",name_6646786819:"[email protected]"},{id:"3",name_4603829743:"Alice Smith",name_0878515932:28,name_0706064476:"female",name_6646786819:"[email protected]"},{id:"4",name_4603829743:"Bob Johnson",name_0878515932:35,name_0706064476:"male",name_6646786819:"[email protected]"},{id:"5",name_4603829743:"Charlie Brown",name_0878515932:22,name_0706064476:"male",name_6646786819:"[email protected]"},{id:"6",name_4603829743:"Diana Prince",name_0878515932:29,name_0706064476:"female",name_6646786819:"[email protected]"}];function E(e){let{config:n}=e,[t,o]=(0,l.useState)(O),[r,s]=(0,l.useState)(null),[i,c]=(0,l.useState)(!1),m=(0,l.useMemo)(()=>d(n),[n]);return(0,a.jsxs)("div",{className:"py-4",children:[(0,a.jsx)(B.lG,{open:i,onOpenChange:c,children:(0,a.jsxs)(B.Cf,{children:[(0,a.jsxs)(B.c7,{children:[(0,a.jsx)(B.L3,{children:r?"Edit":"Create New"}),(0,a.jsxs)(B.rr,{children:["Please fill out the form below to"," ",r?"update the data":"create a new data","."]})]}),(0,a.jsx)("div",{children:(0,a.jsx)(U,{onSubmit:r?e=>{o(t.map(n=>n.id===e.id?e:n)),c(!1),s(null)}:e=>{let n={...e,id:String(t.length+1)};o([...t,n]),c(!1)},initialData:r})})]})}),(0,a.jsx)(b,{columns:m,data:t,config:n,onAdd:()=>{s(null),c(!0)},onEdit:e=>{s(e),c(!0)},onDelete:e=>{o(t.filter(n=>n.id!==e))},onmultiDelete:e=>{let n=new Set(e.map(e=>e.id));o(t.filter(e=>!n.has(e.id)))}})]})}var H=t(66261),V=t(10757);function L(e){let{tableCode:n,columnCode:t,pageCode:o}=e;return(0,a.jsx)("div",{className:"container px-0 py-4",children:(0,a.jsx)(V.q,{steps:[{title:"Copy and paste the form code from ShadCN-Form-Builder into your project.",description:"The code will be look like this initially.",code:'"use client"\nimport {\n useState\n} from "react"\nimport {\n toast\n} from "sonner"\nimport {\n useForm\n} from "react-hook-form"\nimport {\n zodResolver\n} from "@hookform/resolvers/zod"\nimport * as z from "zod"\nimport {\n cn\n} from "@/lib/utils"\nimport {\n Button\n} from "@/components/ui/button"\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from "@/components/ui/form"\nimport {\n Input\n} from "@/components/ui/input"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue\n} from "@/components/ui/select"\n\nconst formSchema = z.object({\n name_4603829743: z.string(),\n name_0878515932: z.number(),\n name_0706064476: z.string().optional(),\n name_6646786819: z.string()\n});\n\nexport default function MyForm() {\n\n const form = useForm < z.infer < typeof formSchema >> ({\n resolver: zodResolver(formSchema),\n\n })\n\n function onSubmit(values: z.infer < typeof formSchema > ) {\n try {\n console.log(values);\n toast(\n <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">\n <code className="text-white">{JSON.stringify(values, null, 2)}</code>\n </pre>\n );\n } catch (error) {\n console.error("Form submission error", error);\n toast.error("Failed to submit the form. Please try again.");\n }\n }\n\n return (\n <Form {...form}>\n <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-3xl mx-auto py-10">\n \n <div className="grid grid-cols-12 gap-4">\n \n <div className="col-span-6">\n \n <FormField\n control={form.control}\n name="name_4603829743"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Name</FormLabel>\n <FormControl>\n <Input \n placeholder="shadcn"\n \n type="text"\n {...field} />\n </FormControl>\n <FormDescription>This is your public display name.</FormDescription>\n <FormMessage />\n </FormItem>\n )}\n />\n </div>
1\n \n <div className="col-span-6">\n \n <FormField\n control={form.control}\n name="name_0878515932"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Age</FormLabel>\n <FormControl>\n <Input \n placeholder="shadcn"\n \n type="number"\n {...field} />\n </FormControl>\n <FormDescription>This is your public display name.</FormDescription>\n <FormMessage />\n </FormItem>\n )}\n />\n </div>\n \n </div>\n \n <div className="grid grid-cols-12 gap-4">\n \n <div className="col-span-6">\n \n <FormField\n control={form.control}\n name="name_0706064476"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Gender</FormLabel>\n <Select onValueChange={field.onChange} defaultValue={field.value}>\n <FormControl>\n <SelectTrigger>\n <SelectValue placeholder="Select a verified email to display" />\n </SelectTrigger>\n </FormControl>\n <SelectContent>\n <SelectItem value="[email protected]">[email protected]</SelectItem>\n <SelectItem value="[email protected]">[email protected]</SelectItem>\n <SelectItem value="[email protected]">[email protected]</SelectItem>\n </SelectContent>\n </Select>\n <FormDescription>You can manage email addresses in your email settings.</FormDescription>\n <FormMessage />\n </FormItem>\n )}\n />\n </div>\n \n <div className="col-span-6">\n \n <FormField\n control={form.control}\n name="name_6646786819"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Email</FormLabel>\n <FormControl>\n <Input \n placeholder="shadcn"\n \n type="email"\n {...field} />\n </FormControl>\n <FormDescription>This is your public display name.</FormDescription>\n <FormMessage />\n </FormItem>\n )}\n />\n </div>\n \n </div>\n <Button type="submit">Submit</Button>\n </form>\n </Form>\n )\n}',language:"typescript",filename:"form.tsx"},{title:"Align Import Paths with Project Structure and Update `form.tsx`",description:"Ensure that the import paths align with your project's directory structure and naming conventions. Additionally, verify that all required packages are installed. Once these steps are completed, proceed to update the `form.tsx` file as outlined below.",code:'\n // Update import paths\n import { MyFormData } from "@types/table";\n ...\n\n // update formSchema as per requirement add id as optional\n const formSchema = z.object({\n id: z.string().optional(),\n name_4603829743: z.string().min(2, { message: "Name must be at least 2 characters" }),\n name_0878515932: z.coerce.number().min(0, { message: "Age must be a positive number" }),\n name_0706064476: z.string().optional(),\n name_6646786819: z.string().email({ message: "Invalid email address" }),\n });\n\n // Add an interface for user form props\n interface MyFormProps {\n onSubmit: (data: MyFormData) => void;\n initialData?: MyFormData | null;\n }\n\n // Define the MyForm component with enhanced functionality\n export function MyForm({ onSubmit, initialData }: MyFormProps) {\n ...\n\n // Set default values for the form\n const form = useForm<z.infer<typeof formSchema>>({\n resolver: zodResolver(formSchema),\n defaultValues: initialData || {\n name_4603829743: "",\n name_0878515932: 0,\n name_0706064476: "",\n name_6646786819: "",\n },\n })\n\n //Add onSubmit on HandleSubmit function\n function handleSubmit(values: z.infer<typeof formSchema>) {\n try {\n onSubmit(values as MyFormData)\n form.reset()\n toast.success("User data submitted successfully!")\n } catch (error) {\n console.error("Form submission error", error)\n toast.error("Failed to submit the form. Please try again.")\n }\n }\n\n // update onsubmit in form\n return (\n <Form {...form}>\n <form\n onSubmit={form.handleSubmit(handleSubmit)}\n className="space-y-8 ...\n\n // Include a dynamic button for creating or updating user data\n <Button type="submit">{initialData ? "Update" : "Create"}</Button>\n ',language:"typescript",filename:"form.tsx"},{title:"Define a TypeScript Interface for Form Data",description:"Create a TypeScript interface to define the structure of form data, specifying field names and their respective data types for better type safety and maintainability.",code:"export interface MyFormData {\n id: string;\n name_4603829743: string;\n name_0878515932: number;\n name_0706064476: string;\n name_6646786819: string;\n}",language:"typescript",filename:"table.ts"},{title:"Create a Column Component with React Table",description:"Implement a column component using `@tanstack/react-table` to display and manage structured data. Leverage the `MyFormData` type to define column configurations, ensuring clarity and type safety.",code:"".concat(t),language:"typescript",filename:"column.tsx"},{title:"Build a Data Table Component",description:"Develop a data-table component to display structured data effectively. Integrate column definitions and data handling to create an interactive and user-friendly table.",code:"".concat(n),language:"typescript",filename:"data-table.tsx"},{title:"Develop a Page Component",description:"Implement a page component that combines and renders the form and data-table components to create a cohesive user interface.",code:"".concat(o),laguage:"typescript",filename:"page.tsx"}]})})}var G=t(27257),J=t(9040);let K=[{id:1,name:"components",type:"folder",parent:null},{id:3,name:"form.tsx",type:"file",parent:1},{id:4,name:"data-table.tsx",type:"file",parent:1},{id:5,name:"column.tsx",type:"file",parent:1},{id:6,name:"types",type:"folder",parent:null},{id:7,name:"table.ts",type:"file",parent:6}];function W(){let e=function(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return K.filter(e=>e.parent===n).map(n=>(0,a.jsxs)("div",{style:{marginLeft:"".concat(16*t,"px")},children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:["folder"===n.type?(0,a.jsx)(G.A,{size:16}):(0,a.jsx)(J.A,{size:16}),n.name]}),"folder"===n.type&&e(n.id,t+1)]},n.id))};return(0,a.jsx)("div",{className:"font-mono",children:e()})}let $=e=>{let n=['"use client";
1',"","import { useState".concat(e.sorting?", useMemo":"",' } from "react";'),'import { createColumns } from "./column";','import { DataTable } from "./data-table";','import { MyFormData } from "./types";'];(e.create||e.edit)&&(n.push('import { UserForm } from "./form";'),n.push('import {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from "@/components/ui/dialog";'));let t=[];(e.create||e.edit)&&(t.push(" const [editingUser, setEditingUser] = useState<MyFormData | null>(null);"),t.push(" const [isDialogOpen, setIsDialogOpen] = useState(false);"));let a=[];e.create&&a.push('\n const handleCreate = (newRecord: Omit<MyFormData, "id">) => {\n const record = { ...newRecord, id: String(data.length + 1) };\n setData([...data, record]);\n setIsDialogOpen(false);\n };'),e.edit&&a.push("\n const handleUpdate = (updatedUser: MyFormData) => {\n setData(data.map((record) => (record.id === updatedUser.id ? updatedUser : record)));\n setIsDialogOpen(false);\n setEditingUser(null);\n };"),e.delete&&a.push("\n const handleDelete = (id: string) => {\n setData(data.filter((record) => record.id !== id));\n };"),e.multiDelete&&a.push("\n const handlemultiDelete = (users: MyFormData[]) => {\n const userIds = new Set(users.map((record) => record.id));\n setData(data.filter((record) => !userIds.has(record.id)));\n };"),e.edit&&a.push("\n const handleEdit = (record: MyFormData) => {\n setEditingUser(record);\n setIsDialogOpen(true);\n };"),e.create&&a.push("\n const openCreateDialog = () => {\n setEditingUser(null);\n setIsDialogOpen(true);\n };");let o=e.create&&e.edit?'<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>{editingUser ? "Edit" : "Create New"}</DialogTitle>\n <DialogDescription>\n Please fill out the form below to {editingUser ? "update the data" : "create a new data"}.\n </DialogDescription>\n </DialogHeader>\n <div>\n <UserForm\n onSubmit={editingUser ? handleUpdate : handleCreate}\n initialData={editingUser}\n />\n </div>\n </DialogContent>\n </Dialog>':e.create?'<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>{"Create New"}</DialogTitle>\n <DialogDescription>\n Please fill out the form below to create a new data.\n </DialogDescription>\n </DialogHeader>\n <div>\n <UserForm\n onSubmit={handleCreate}\n initialData={editingUser}\n />\n </div>\n </DialogContent>\n </Dialog>':e.edit?'<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>{"Edit"}</DialogTitle>\n <DialogDescription>\n Please fill out the form below to update the data.\n </DialogDescription>\n </DialogHeader>\n <div>\n <UserForm\n onSubmit={handleUpdate}\n initialData={editingUser}\n />\n </div>\n </DialogContent>\n </Dialog>':"",l=["columns={columns}","data={data}"];return e.create&&l.push("onAdd={openCreateDialog}"),e.edit&&l.push("onEdit={handleEdit}"),e.delete&&l.push("onDelete={handleDelete}"),e.multiDelete&&l.push("onmultiDelete={handlemultiDelete}"),[...n,'\nconst initialData: MyFormData[] = [\n {\n id: "1",\n name_4603829743: "Jane Doe",\n name_0878515932: 30,\n name_0706064476: "female",\n name_6646786819: "[email protected]",\n },\n];',"\nexport default function TablePage() {\n const [data, setData] = useState<MyFormData[]>(initialData);",...t,"const columns = createColumns();",...a,"return (",'\n <div className="container mx-auto py-10">\n '.concat(o,"\n <DataTable\n ").concat(l.join("\n "),"\n />\n </div>\n );\n}")].join("\n")},Y=e=>{let n=['"use client";',"",'import { ColumnDef } from "@tanstack/react-table";'];return(e.edit||e.delete)&&n.push('import { Button } from "@/components/ui/button";',"import { MoreHorizontal } from 'lucide-react';","import {"," DropdownMenu,"," DropdownMenuContent,"," DropdownMenuItem,"," DropdownMenuLabel,"," DropdownMenuTrigger,",'} from "@/components/ui/dropdown-menu";'),n.push('import { MyFormData } from "./types";'),[...n,e.edit||e.delete?"\n interface ColumnActions {\n ".concat(e.edit?"onEdit?: (data: MyFormData) => void;":"","\n ").concat(e.delete?"onDelete?: (id: string) => void;":"","\n }"):"",'\n export const createColumns = (): ColumnDef<MyFormData>[] => {\n const columns: ColumnDef<MyFormData>[] = [\n {\n accessorKey: "name_4603829743",\n header: "Name",\n },\n {\n accessorKey: "name_0878515932",\n header: "Age",\n },\n {\n accessorKey: "name_0706064476",\n header: "Gender",\n },\n {\n accessorKey: "name_6646786819",\n header: "Email",\n },\n ];',e.edit||e.delete?'\n columns.push({\n id: "actions",\n cell: ({ row, table }) =>
1 {\n const record = row.original;\n const { '.concat(e.edit?"onEdit":"").concat(e.edit&&e.delete?", ":"").concat(e.delete?"onDelete":"",' } = table.options.meta as ColumnActions;\n \n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant="ghost" className="h-8 w-8 p-0">\n <span className="sr-only">Open menu</span>\n <MoreHorizontal className="h-4 w-4" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align="end">\n <DropdownMenuLabel>Actions</DropdownMenuLabel>\n ').concat(e.edit?"\n {onEdit && <DropdownMenuItem onClick={() => onEdit(record)}>\n Edit\n </DropdownMenuItem>}":"","\n ").concat(e.delete?"\n {onDelete && <DropdownMenuItem onClick={() => onDelete(record.id)}>\n Delete\n </DropdownMenuItem>}":"","\n </DropdownMenuContent>\n </DropdownMenu>\n );\n },\n });"):"","\n return columns;\n };"].join("\n")},q=e=>{let n=['"use client";',"",'import { useState } from "react";',"import {"," ColumnDef,"," flexRender,"," ColumnFiltersState,"," getCoreRowModel,"," getFilteredRowModel,"," getPaginationRowModel,"," useReactTable,"," SortingState,"," getSortedRowModel,",'} from "@tanstack/react-table";',"import {"," Table,"," TableBody,"," TableCell,"," TableHead,"," TableHeader,"," TableRow,",'} from "@/components/ui/table";','import { Button } from "@/components/ui/button";'];e.search&&n.push('import { Input } from "@/components/ui/input";'),e.sorting&&n.push('import { ArrowDownUp, ArrowDownWideNarrow, ArrowUpNarrowWide } from "lucide-react";'),e.multiDelete&&n.push('import { Checkbox } from "@/components/ui/checkbox";');let t=[];e.sorting&&(t.push(" SortingState,"),t.push(" getSortedRowModel,")),e.search&&(t.push(" ColumnFiltersState,"),t.push(" getFilteredRowModel,")),e.pagination&&t.push(" getPaginationRowModel,"),t.length>0&&(n[3]=n[3].replace("}"," ".concat(t.join("\n "),"\n}")));let a=["columns: ColumnDef<TData, TValue>[];","data: TData[];"];e.create&&a.push("onAdd: () => void;"),e.edit&&a.push("onEdit: (data: TData) => void;"),e.delete&&a.push("onDelete: (id: string) => void;"),e.multiDelete&&a.push("onmultiDelete: (data: TData[]) => void;");let o="\ninterface DataTableProps<TData, TValue> {\n ".concat(a.join("\n "),"\n}"),l="\nexport function DataTable<TData, TValue>({\n columns,\n data,\n ".concat(e.create?"onAdd,":"","\n ").concat(e.edit?"onEdit,":"","\n ").concat(e.delete?"onDelete,":"","\n ").concat(e.multiDelete?"onmultiDelete,":"","\n}: DataTableProps<TData, TValue>) {"),r=[];e.sorting&&r.push("const [sorting, setSorting] = useState<SortingState>([]);"),e.search&&r.push("const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);"),e.multiDelete&&r.push("const [rowSelection, setRowSelection] = useState({});");let s=[" data,"," columns,"," getCoreRowModel: getCoreRowModel(),"];e.pagination&&s.push(" getPaginationRowModel: getPaginationRowModel(),"),e.sorting&&(s.push(" onSortingChange: setSorting,"),s.push(" getSortedRowModel: getSortedRowModel(),")),e.search&&(s.push(" onColumnFiltersChange: setColumnFilters,"),s.push(" getFilteredRowModel: getFilteredRowModel(),")),e.multiDelete&&s.push(" onRowSelectionChange: setRowSelection,");let i=[];e.sorting&&i.push("sorting,"),e.search&&i.push("columnFilters,"),e.multiDelete&&i.push("rowSelection,"),i.length>0&&s.push(" state: {\n ".concat(i.join("\n "),"\n },")),(e.edit||e.delete)&&s.push(" meta: {\n ".concat(e.edit?"onEdit,":"","\n ").concat(e.delete?"onDelete,":"","\n },"));let d="\n const table = useReactTable({\n".concat(s.join("\n"),"\n });"),c=e.multiDelete?"\n const handlemultiDelete = () => {\n const selectedItems = table\n .getFilteredSelectedRowModel()\n .rows.map((row) => row.original as TData);\n onmultiDelete(selectedItems);\n };":"",m=e.search?'\n <Input\n placeholder="Filter..."\n // value={(table.getColumn("name_4603829743")?.getFilterValue() as string) ?? ""}
1\n // onChange={(event) =>\n // table.getColumn("name_4603829743")?.setFilterValue(event.target.value)\n // }\n className="max-w-sm"\n />':"",u=e.multiDelete?'\n {Object.keys(rowSelection).length > 0 && (\n <Button onClick={handlemultiDelete} variant="destructive">\n Delete Selected ({Object.keys(rowSelection).length})\n </Button>\n )}':"",p=e.create?"\n <Button onClick={onAdd}>Add Item</Button>":"",h="\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n ".concat(e.multiDelete?'\n <TableHead className="w-[50px]">\n <Checkbox\n checked={table.getIsAllPageRowsSelected()}\n onCheckedChange={(value) =>\n table.toggleAllPageRowsSelected(!!value)\n }\n aria-label="Select all"\n />\n </TableHead>':"","\n {headerGroup.headers.map((header) =>
1 (\n <TableHead key={header.id}>\n {header.isPlaceholder\n ? null\n :").concat(e.sorting?'<div className="flex items-center">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n {header.column.getCanSort() && (\n <Button\n variant="ghost"\n onClick={header.column.getToggleSortingHandler()}\n >\n {header.column.getIsSorted() ? (\n header.column.getIsSorted() === "desc" ? (\n <ArrowDownWideNarrow className="ml-2 h-4 w-4" />\n ) : (\n <ArrowUpNarrowWide className="ml-2 h-4 w-4" />\n )\n ) : (\n <ArrowDownUp className="ml-2 h-4 w-4" />\n )}\n </Button>\n )}\n </div>}\n ':" flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}","\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>"),g='\n <TableBody>\n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && "selected"}\n >\n '.concat(e.multiDelete?'\n <TableCell className="w-[50px]">\n <Checkbox\n checked={row.getIsSelected()}\n onCheckedChange={(value) => row.toggleSelected(!!value)}\n aria-label="Select row"\n />\n </TableCell>':"",'\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : (\n <TableRow>\n <TableCell\n colSpan={columns.length}\n className="h-24 text-center"\n >\n No results.\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>'),f=e.pagination?'\n <div className="flex items-center justify-end space-x-2 py-4">\n <Button\n variant="outline"\n size="sm"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n </Button>\n <Button\n variant="outline"\n size="sm"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n </Button>\n </div>':"";return[...n,o,l,...r,d,c,'\n return (\n <div className="space-y-4">\n <div className="flex items-center justify-between">\n '.concat(m,'\n <div className="flex items-center gap-4">\n ').concat(u,"\n ").concat(p,'\n </div>\n </div>\n <div className="rounded-md border">\n ').concat(h,"\n ").concat(g,"\n </div>\n ").concat(f,"\n </div>\n );\n}")].join("\n")};var Q=t(15157);function X(){let[e,n]=(0,l.useState)({pagination:!0,sorting:!1,create:!1,edit:!1,delete:!1,multiDelete:!1,search:!0}),t=e=>{n(n=>({...n,[e]:!n[e]}))},s=$(e),i=Y(e),d=q(e);return(0,a.jsxs)("div",{className:"container mx-auto py-8",children:[(0,a.jsxs)("section",{className:"h-[80vh] flex items-start justify-center md:justify-end flex-col",children:[(0,a.jsxs)("h1",{className:"text-3xl md:text-5xl lg:text-7xl mb-8 font-bold",children:["Build Dynamic ",(0,a.jsx)("span",{className:"text-rose-600",children:"Tables"})," in Minutes!"]}),(0,a.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,a.jsxs)("p",{className:"text-muted-foreground text-sm",children:["Simplify your workflow with our Next.js table-building tool powered by the "," ",(0,a.jsx)(o.default,{href:"https://ui.shadcn.com/",target:"_blank",className:"font-semibold underline",children:"ShadCN"})," "," design library. Quickly scaffold essential features like search, pagination, sorting, create, edit, and delete. With seamless integration of ",(0,a.jsx)(o.default,{href:"https://www.shadcn-form.com/playground",target:"_blank",className:"font-semibold underline",children:"ShadCN Form Builder"})," , you can customize forms effortlessly and have a fully functional table ready in no time."]}),(0,a.jsx)("p",{className:"text-muted-foreground text-sm",children:"Whether you're a beginner or an experienced developer, our tool accelerates development while keeping it flexible and intuitive. Get started today and transform the way you build tables!"}),(0,a.jsx)(r.$,{variant:"outline",size:"icon",className:"rounded-full",onClick:()=>{window.scrollBy({top:.9*window.innerHeight,behavior:"smooth"})},children:(0,a.jsx)(H.A,{size:20,className:"animate-bounce"})})]})]}),(0,a.jsxs)("section",{children:[(0,a.jsxs)("div",{className:"w-full h-screen flex items-center justify-center gap-4 flex-col md:flex-row",children:[(0,a.jsx)("div",{className:"w-full md:w-36",children:(0,a.jsx)("div",{className:"flex flex-row flex-wrap md:flex-col gap-4",children:Object.entries(e).map(e=>{let[n,o]=e;return(0,a.jsxs)("div",{onClick:()=>t(n),className:"\n relative cursor-pointer px-3 py-1 rounded-full transition-all duration-300\n flex items-center gap-2 w-fit\n ".concat(o?"bg-primary text-white dark:text-black":"bg-secondary hover:bg-gray-300/20","\n "),children:[(0,a.jsx)("span",{className:"capitalize text-sm",children:n}),o&&(0,a.jsx)(F.A,{size:16,strokeWidth:3})]},n)})})}),(0,a.jsx)("div",{className:"w-full md:flex-1",children:(0,a.jsx)(E,{config:e})})]}),(0,a.jsx)(Q.w,{className:"mb-4"}),(0,a.jsx)(W,{}),(0,a.jsx)(L,{tableCode:d,columnCode:i,pageCode:s})]})]})}},10757:(e,n,t)=>{"use strict";t.d(n,{q:()=>m});var a=t(95155),o=t(98867),l=t(23920),r=t(12115),s=t(64566),i=t(10410);
1function d(e){let{code:n,language:t="typescript",filename:d}=e,[c,m]=(0,r.useState)(!1),u=async()=>{await navigator.clipboard.writeText(n),m(!0),setTimeout(()=>m(!1),2e3)};return(0,a.jsxs)("div",{className:"relative rounded-lg bg-card max-h-96 overflow-auto",children:[d&&(0,a.jsx)("div",{className:"flex items-center justify-between border-b border-zinc-800 px-4 py-2 bg-gray-600",children:(0,a.jsx)("span",{className:"text-sm text-white/80",children:d})}),(0,a.jsxs)("div",{children:[(0,a.jsx)("button",{onClick:u,className:"absolute right-2 top-2 rounded-md p-2 hover:bg-zinc-800",children:c?(0,a.jsx)(o.A,{className:"h-4 w-4 text-green-500"}):(0,a.jsx)(l.A,{className:"h-4 w-4 text-zinc-400"})}),(0,a.jsx)(s.A,{language:t,style:i.A,customStyle:{margin:0,borderRadius:d?"0 0 0.5rem 0.5rem":"0.5rem",padding:"1.5rem"},children:n})]})]})}var c=t(15157);function m(e){let{steps:n}=e;return(0,a.jsxs)("div",{className:"space-y-8",children:[(0,a.jsx)(c.w,{className:"mb-4"}),n.map((e,n)=>(0,a.jsx)("div",{className:"relative",children:(0,a.jsxs)("div",{className:"flex items-start gap-4 flex-col md:flex-row",children:[(0,a.jsx)("div",{className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-medium",children:n+1}),(0,a.jsxs)("div",{className:"space-y-4 w-full",children:[(0,a.jsx)("h3",{className:"font-semibold leading-none tracking-tight",children:e.title}),e.description&&(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:e.description}),e.code&&(0,a.jsx)("div",{className:"mt-4",children:(0,a.jsx)(d,{code:e.code,language:e.language||"typescript",filename:e.filename})})]})]})},n))]})}},15157:(e,n,t)=>{"use strict";t.d(n,{w:()=>s});var a=t(95155),o=t(12115),l=t(90434),r=t(21567);let s=o.forwardRef((e,n)=>{let{className:t,orientation:o="horizontal",decorative:s=!0,...i}=e;return(0,a.jsx)(l.b,{ref:n,decorative:s,orientation:o,className:(0,r.cn)("shrink-0 bg-border","horizontal"===o?"h-[1px] w-full":"h-full w-[1px]",t),...i})});s.displayName=l.b.displayName}},e=>{var n=n=>e(e.s=n);e.O(0,[501,839,97,789,314,216,596,210,441,517,358],()=>n(7676)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.