Assembling...
npx arkitekton add UI-001High-performance data grid with virtual scrolling, column resizing, sorting, filtering, row grouping, and CSV/Excel export. Built on TanStack Table.
Community construct — compliance mapping available after certification
No dependencies required. Fully standalone.
Pre-built solutions that include this construct. Deploy a complete application to Studio.
Broker Portal
Full-featured broker and agency management portal with Book of Business (client 360), commission tracking, plan comparison, quoting tools, and SEP verification. Built for insurance brokers managing ACA and ancillary enrollment.
Clinical Trial Management
End-to-end clinical trial management with patient recruitment via automated eligibility matching, eCRF data capture, adverse event tracking, regulatory submission workflows, and site management dashboards.
Pharmacy Benefits Platform
Pharmacy benefit management platform with drug formulary lookup, prior authorization automation, drug interaction checking, e-prescribing workflows, and cost optimization through generic substitution recommendations.
Population Health Dashboard
Population health analytics dashboard with risk stratification, care gap identification, quality measure tracking (HEDIS/Stars), and social determinants of health mapping. Real-time cohort analysis across patient populations.
Revenue Cycle Management
Healthcare revenue cycle platform with patient registration, eligibility verification, charge capture, automated coding (ICD-10/CPT), claims submission, denial management, and accounts receivable analytics.
Lab Information System
Laboratory information system with specimen tracking, test ordering, result reporting via HL7/FHIR, quality control dashboards, and automated reflex testing rules. Supports clinical and reference lab workflows.
Accounting Platform
Cloud accounting platform with double-entry bookkeeping, bank reconciliation, invoicing, expense management, financial reporting, and multi-entity consolidation with real-time dashboards.
Invoice Management
Automated invoice processing with OCR-based data extraction, three-way matching (PO/receipt/invoice), automated approval routing, payment scheduling, and vendor ledger reconciliation.
Asset Management
Enterprise asset management with lifecycle tracking, depreciation schedules, maintenance scheduling, barcode/QR scanning, check-in/check-out workflows, and asset compliance reporting.
Procurement Portal
End-to-end procurement platform with requisition workflows, vendor catalog management, purchase order automation, three-way matching, budget tracking, and spend analytics dashboards.
Vendor Management
Vendor lifecycle management with onboarding workflows, risk assessments, contract management, performance scorecards, compliance monitoring, and diversity reporting for third-party vendors.
Student Information System
Student information management with enrollment tracking, attendance recording, grade management, transcript generation, parent portal, and state reporting compliance with FERPA data protections.
E-Commerce Platform
Full-stack e-commerce platform with product catalog, shopping cart, checkout flow, multi-PSP payment processing, inventory management, order fulfillment, customer accounts, and personalized recommendations.
Marketplace Platform
Two-sided marketplace with seller onboarding, product listings, search and discovery, shopping cart, payment splitting, review system, dispute resolution, and seller analytics dashboards.
Supply Chain Management
End-to-end supply chain visibility with supplier management, purchase order tracking, inventory optimization, demand forecasting, shipment tracking, and supply chain analytics dashboards.
Warehouse Management
Warehouse management system with receiving, put-away optimization, pick/pack/ship workflows, cycle counting, barcode scanning, zone management, and labor productivity analytics.
These constructs have compatible ports for seamless integration.
The variant system is a game-changer. Being able to swap between compact and full versions without code changes is brilliant.
Meets all our compliance requirements. Passed our SOC 2 audit without any flags related to this construct.
Clean architecture and zero unnecessary dependencies. This is how every construct should be built.
Dependable and performant. Our p99 latency dropped by 15ms after switching to this from our custom implementation.
Excellent construct, integrated seamlessly into our production pipeline. Documentation is top-notch and the TypeScript types saved us hours of debugging.
ark add UI-001Source Code
TanStack/table
const DATA = [{id:1,name:"Project Alpha",owner:"Sarah K.",status:"Active",updated:"Mar 12"},{id:2,name:"Project Beta",owner:"Mike R.",status:"Active",updated:"Mar 11"},{id:3,name:"Campaign Delta",owner:"Lisa M.",status:"Paused",updated:"Mar 10"},{id:4,name:"Sprint Gamma",owner:"Tom W.",status:"Active",updated:"Mar 09"},{id:5,name:"Release Epsilon",owner:"Amy L.",status:"Completed",updated:"Mar 08"},{id:6,name:"Task Zeta",owner:"Sam P.",status:"Active",updated:"Mar 07"}];
const SC: Record<string,string> = {Active:"#10B981",Paused:"#F59E0B",Completed:"#EA580C"};
export function SortableGrid({ accentColor = "#2563EB" }: {accentColor?:string}) {
const [query,setQuery]=useState(""); const [sortKey,setSortKey]=useState("name");
const filtered=DATA.filter(d=>d.name.toLowerCase().includes(query.toLowerCase()));
return (<div className="p-4 space-y-3"><div className="flex justify-between items-center"><h2 className="text-sm font-semibold">Data Grid</h2><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search..." className="px-3 py-1.5 rounded-lg border text-xs w-48" /></div><div className="border rounded-lg overflow-hidden"><table className="w-full text-xs"><thead className="bg-gray-50"><tr>{["Name","Owner","Status","Updated"].map(h=><th key={h} onClick={()=>setSortKey(h.toLowerCase())} className="px-3 py-2 text-left font-semibold text-gray-600 cursor-pointer hover:text-gray-900">{h} {sortKey===h.toLowerCase()?"↑":""}</th>)}</tr></thead><tbody>{filtered.map(d=><tr key={d.id} className="border-t hover:bg-gray-50"><td className="px-3 py-2 font-medium">{d.name}</td><td className="px-3 py-2 text-gray-500">{d.owner}</td><td className="px-3 py-2"><span className="px-2 py-0.5 rounded-full text-[10px] font-medium text-white" style={{backgroundColor:SC[d.status]}}>{d.status}</span></td><td className="px-3 py-2 text-gray-500">{d.updated}</td></tr>)}</tbody></table></div></div>);
}Showing: Sortable Grid (standard)
No code variants available yet
Variants for Data Grid Pro are coming soon