4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 50:T1272,"use client" import * as React from "react" import { CodeBlock } from "@/components/ui/code-block" const longCode = `import * as React from "react" import { useEffect, useState, useCallback, useMemo } from "react" import { cn } from "@/lib/utils" interface DataItem { id: string name: string description: string status: "active" | "inactive" | "pending" createdAt: Date updatedAt: Date metadata: Record } interface DataTableProps { data: DataItem[] onSelect?: (item: DataItem) => void onDelete?: (id: string) => void onEdit?: (item: DataItem) => void className?: string loading?: boolean error?: Error | null } export function DataTable({ data, onSelect, onDelete, onEdit, className, loading = false, error = null, }: DataTableProps) { const [selectedIds, setSelectedIds] = useState>(new Set()) const [sortColumn, setSortColumn] = useState("name") const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc") const [filterText, setFilterText] = useState("") const filteredData = useMemo(() => { return data .filter((item) => item.name.toLowerCase().includes(filterText.toLowerCase()) || item.description.toLowerCase().includes(filterText.toLowerCase()) ) .sort((a, b) => { const aVal = a[sortColumn] const bVal = b[sortColumn] const modifier = sortDirection === "asc" ? 1 : -1 if (aVal < bVal) return -1 * modifier if (aVal > bVal) return 1 * modifier return 0 }) }, [data, filterText, sortColumn, sortDirection]) const handleSelectAll = useCallback(() => { if (selectedIds.size === filteredData.length) { setSelectedIds(new Set()) } else { setSelectedIds(new Set(filteredData.map((item) => item.id))) } }, [filteredData, selectedIds.size]) const handleSelectItem = useCallback((id: string) => { setSelectedIds((prev) => { const next = new Set(prev) if (next.has(id)) { next.delete(id) } else { next.add(id) } return next }) }, []) if (loading) { return

} if (error) { return

Error: {error.message}

} return (

setFilterText(e.target.value)} className="w-full px-3 py-2 border rounded-md" />

{filteredData.map((item) => ( ))}

	Name	Status	Actions
handleSelectItem(item.id)} />	{item.name}	{item.status}

) }` export default function CodeBlockExpandDemo() { return (

) } 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4d",null,{"registryDependencies":["@delta/code-block"]}]]}],["$","$L4e",null,{"sourceUrl":"https://deltacomponents.dev/r/code-block-expand-demo.json","proxyUrl":"https://shadcnregistry.com/r/delta/code-block-expand-demo","itemId":"@delta/code-block-expand-demo"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"examples/code-block-expand-demo.tsx","content":"$50","type":"registry:example"}]}]]}],"$L51"]}]

Code Block Expand Demo

Installation

Files

components

Styles