[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Ftable-2":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":329,"links":330,"dates":378},"\u002Fexamples\u002Fcomponents\u002Ftable-2","collection","components",true,{"example_count":9,"app_count":10},260,149,{"id":12,"title":13,"description":14},248,"Table","See how interfaces organize records into rows and columns. Explore how headers, cells, selection controls, and row actions fit within a data table component.",{"title":16,"description":17,"og_image":18},"Table UI examples - Nicelydone","Table UI design examples from SaaS apps. See how interfaces organize records into rows and columns. Explore how headers, cells, selection controls, and row…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffbdcd7b9-178c-41c9-aa41-70548cbd7564.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Table UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Table UI design examples from SaaS apps. See how interfaces organize records into rows and columns. Explore how headers, cells, selection controls, and row actions fit within a data table component.",[32],{"title":33,"description":14,"links":34},"About Table",[],[36],"260 UI components",[38,72,98,122,149,172,190,220,240,258,280,300],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"f0575866-197b-4b8c-8540-a053641b3667","Inference UI component","A webpage displaying a list of large language models with deployment options and pricing.","\u002Fexamples\u002Fapps\u002Finference\u002Fcomponents",2758,1902,"UI component from Inference","component",[48],{"id":12,"title":13,"slug":49},"table-2",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[56,60,64,68],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},16,"Monitoring","monitoring",{"id":65,"title":66,"slug":67},37,"Developer APIs","developer-apis",{"id":69,"title":70,"slug":71},80,"Artificial Intelligence","artificial-intelligence",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"b44e3988-e298-479e-ac38-f3a40bb3f3b9","Origin Financial UI component","A financial transaction table displaying expenses and income with categorization, search, and filtering options.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff97ddc69-fc42-47b8-a9e6-ce347bac0f0f.png",2785,1701,"UI component from Origin Financial",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[89,93,97],{"id":90,"title":91,"slug":92},36,"Finance","finance",{"id":94,"title":95,"slug":96},56,"Accounting","accounting",{"id":69,"title":70,"slug":71},{"uuid":99,"title":100,"description":101,"canonical_path":102,"image":103,"width":104,"height":105,"image_alt":106,"kind":46,"categories":107,"app":109},"532bc2d1-bfbf-4e89-af1c-69862bd9a6a0","Steel UI component","A user interface displaying a list of invited members with their roles and actions, featuring tab navigation.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff2624270-30b7-43b5-9a9b-524a10fd4a47.png",2560,781,"UI component from Steel",[108],{"id":12,"title":13,"slug":49},{"slug":110,"title":111,"logo":112,"baseline":113,"categories":114},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[115,116,117,118],{"id":57,"title":58,"slug":59},{"id":69,"title":70,"slug":71},{"id":65,"title":66,"slug":67},{"id":119,"title":120,"slug":121},45,"Open Source","open-source",{"uuid":123,"title":124,"description":125,"canonical_path":126,"image":127,"width":128,"height":129,"image_alt":130,"kind":46,"categories":131,"app":133},"86e3e899-703e-4bc6-87f4-6cf1952f0d7d","Axiom UI component","A data management interface displaying a list of datasets with filtering options in a two-column layout.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F51e4bf9f-25cf-4ef2-af7a-784bfe34ed0e.png",3024,736,"UI component from Axiom",[132],{"id":12,"title":13,"slug":49},{"slug":134,"title":135,"logo":136,"baseline":137,"categories":138},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[139,143,147,148],{"id":140,"title":141,"slug":142},46,"Analytics","analytics",{"id":144,"title":145,"slug":146},57,"Big data","big-data",{"id":61,"title":62,"slug":63},{"id":57,"title":58,"slug":59},{"uuid":150,"title":151,"description":152,"canonical_path":153,"image":154,"width":155,"height":156,"image_alt":157,"kind":46,"categories":158,"app":160},"8e15114d-b5f6-46c1-a4f1-03381d62ac3d","Lithic UI component","A user interface displaying a data table with search, filter, and pagination controls for managing rules.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4fade038-b8f7-48eb-a2a7-6b866d370ec6.png",2618,619,"UI component from Lithic",[159],{"id":12,"title":13,"slug":49},{"slug":161,"title":162,"logo":163,"baseline":164,"categories":165},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[166,167,171],{"id":90,"title":91,"slug":92},{"id":168,"title":169,"slug":170},39,"Payments","payments",{"id":65,"title":66,"slug":67},{"uuid":173,"title":174,"description":175,"canonical_path":176,"image":177,"width":178,"height":179,"image_alt":180,"kind":46,"categories":181,"app":183},"3119f2e7-6837-4543-88ba-c4579896afb5","Visitors UI component","A comparison table displaying features of various analytics tools, highlighting one product.","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F709fdb9a-397c-4a99-88fb-c70fd82ae7e6.png",2223,1876,"UI component from Visitors",[182],{"id":12,"title":13,"slug":49},{"slug":184,"title":185,"logo":186,"baseline":187,"categories":188},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[189],{"id":140,"title":141,"slug":142},{"uuid":191,"title":192,"description":193,"canonical_path":194,"image":195,"width":196,"height":197,"image_alt":198,"kind":46,"categories":199,"app":201},"1807b6c0-a4e1-4793-8733-e4348231d252","Bloom UI component","A product listing page displaying a table of products with search, filter, and pagination controls, along with actions like export, import, and create.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffd7f7253-9cd3-4655-bfd9-360f717c180f.png",2008,1213,"UI component from Bloom",[200],{"id":12,"title":13,"slug":49},{"slug":202,"title":203,"logo":204,"baseline":205,"categories":206},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[207,208,212,216],{"id":69,"title":70,"slug":71},{"id":209,"title":210,"slug":211},3,"Shopping","shopping",{"id":213,"title":214,"slug":215},7,"Web Development","web-development",{"id":217,"title":218,"slug":219},96,"No code","no-code",{"uuid":221,"title":222,"description":223,"canonical_path":224,"image":225,"width":226,"height":227,"image_alt":228,"kind":46,"categories":229,"app":231},"bc30210d-4569-4d0b-a905-b7a72a21bd76","Appwrite UI component","A data management interface displaying tabular data with navigation tabs and controls for rows and columns.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F515d2d33-6688-458f-94da-f3775e8be405.png",2484,1498,"UI component from Appwrite",[230],{"id":12,"title":13,"slug":49},{"slug":232,"title":233,"logo":234,"baseline":235,"categories":236},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[237,238,239],{"id":57,"title":58,"slug":59},{"id":65,"title":66,"slug":67},{"id":119,"title":120,"slug":121},{"uuid":241,"title":242,"description":243,"canonical_path":244,"image":245,"width":246,"height":247,"image_alt":248,"kind":46,"categories":249,"app":251},"a49701eb-96c2-4189-9f4a-335449a038d7","Assets Debts Summary Card","Displays total assets and debts values with a dual-line trend chart and time range selector","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9aa8851d-157a-473a-a3dd-f76781da1984.png",1787,1610,"Assets Debts Summary Card from Copilot",[250],{"id":12,"title":13,"slug":49},{"slug":252,"title":253,"logo":254,"baseline":255,"categories":256},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[257],{"id":90,"title":91,"slug":92},{"uuid":259,"title":260,"description":261,"canonical_path":262,"image":263,"width":104,"height":264,"image_alt":265,"kind":46,"categories":266,"app":268},"85cb146b-0a83-47cb-a558-2556586ce181","Spend Breakdown Table","Displays filtered API usage pricing breakdown with line items, quantities, and totals","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd10b0fc3-3865-4bfa-bf00-5490913aa7f5.png",1245,"Spend Breakdown Table from Exa",[267],{"id":12,"title":13,"slug":49},{"slug":269,"title":270,"logo":271,"baseline":272,"categories":273},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[274,278,279],{"id":275,"title":276,"slug":277},55,"Search engine","search-engine",{"id":69,"title":70,"slug":71},{"id":65,"title":66,"slug":67},{"uuid":281,"title":282,"description":283,"canonical_path":284,"image":285,"width":286,"height":287,"image_alt":288,"kind":46,"categories":289,"app":291},"62a08e30-9ac1-4728-9adc-dcb019258e86","Sessions Data Table","Filterable table displaying completed browser automation sessions with status, ID, timing and region columns","\u002Fexamples\u002Fapps\u002Fbrowserbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdf22dfe2-3ca8-4e1a-a1ba-f7d32717a8df.png",2489,501,"Sessions Data Table from Browserbase",[290],{"id":12,"title":13,"slug":49},{"slug":292,"title":293,"logo":294,"baseline":295,"categories":296},"browserbase","Browserbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3a57506b-6fe4-4f0c-85bc-b70ea12d0216.png","Give your agents access to the whole web.",[297,298,299],{"id":57,"title":58,"slug":59},{"id":69,"title":70,"slug":71},{"id":65,"title":66,"slug":67},{"uuid":301,"title":302,"description":303,"canonical_path":304,"image":305,"width":128,"height":306,"image_alt":307,"kind":46,"categories":308,"app":310},"105aee94-f67b-4efc-927c-3f0b88b5e939","Pricing tiers comparison","Displays and compares five individual subscription plans with pricing, features, and CTAs","\u002Fexamples\u002Fapps\u002Ftown\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1c7d5382-b874-4af5-9446-ec5b8624b144.png",2314,"Pricing tiers comparison from Town",[309],{"id":12,"title":13,"slug":49},{"slug":311,"title":312,"logo":313,"baseline":314,"categories":315},"town","Town","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb6cf707d-df49-4190-b803-766b8914df89.png","The AI assistant that manages your inbox, schedules meetings, and handles busywork.",[316,317,321,325],{"id":69,"title":70,"slug":71},{"id":318,"title":319,"slug":320},30,"Productivity","productivity",{"id":322,"title":323,"slug":324},92,"Email","email",{"id":326,"title":327,"slug":328},101,"Calendar","calendar",[],[331,334,336,339,342,345,348,351,354,357,360,363,366,369,372,375],{"label":332,"to":333},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":13,"to":335},"\u002Fexamples\u002Fscreens\u002Ftable",{"label":337,"to":338},"Dashboard","\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":340,"to":341},"Landing Page","\u002Fexamples\u002Fpages\u002Flanding-page",{"label":343,"to":344},"Inference design examples","\u002Fexamples\u002Fapps\u002Finference",{"label":346,"to":347},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":349,"to":350},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":352,"to":353},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":355,"to":356},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":358,"to":359},"Visitors design examples","\u002Fexamples\u002Fapps\u002Fvisitors",{"label":361,"to":362},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":364,"to":365},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":367,"to":368},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":370,"to":371},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":373,"to":374},"Browserbase design examples","\u002Fexamples\u002Fapps\u002Fbrowserbase",{"label":376,"to":377},"Town design examples","\u002Fexamples\u002Fapps\u002Ftown",{"published_at":379,"updated_at":380},"2022-08-22T11:57:46.000Z","2026-09-17T10:44:16.000Z"]