---
title: Table with manage button
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxTail":[{"code":"export default () => {\n\n    const tableItems = [\n        {\n            name: \"Solo learn app\",\n            date: \"Oct 9, 2023\",\n            status: \"Active\",\n            price: \"$35.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Window wrapper\",\n            date: \"Oct 12, 2023\",\n            status: \"Active\",\n            price: \"$12.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Unity loroin\",\n            date: \"Oct 22, 2023\",\n            status: \"Archived\",\n            price: \"$20.000\",\n            plan: \"Annually subscription\"\n        },\n        {\n            name: \"Background remover\",\n            date: \"Jan 5, 2023\",\n            status: \"Active\",\n            price: \"$5.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Colon tiger\",\n            date: \"Jan 6, 2023\",\n            status: \"Active\",\n            price: \"$9.000\",\n            plan: \"Annually subscription\"\n        },\n    ]\n\n\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n            <div className=\"items-start justify-between md:flex\">\n                <div className=\"max-w-lg\">\n                    <h3 className=\"text-gray-800 text-xl font-bold sm:text-2xl\">\n                        All products\n                    </h3>\n                    <p className=\"text-gray-600 mt-2\">\n                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                    </p>\n                </div>\n                <div className=\"mt-3 md:mt-0\">\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"inline-block px-4 py-2 text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n                    >\n                        Add product\n                    </a>\n                </div>\n            </div>\n            <div className=\"mt-12 relative h-max overflow-auto\">\n                <table className=\"w-full table-auto text-sm text-left\">\n                    <thead className=\"text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"py-3 pr-6\">name</th>\n                            <th className=\"py-3 pr-6\">date</th>\n                            <th className=\"py-3 pr-6\">status</th>\n                            <th className=\"py-3 pr-6\">Purchase</th>\n                            <th className=\"py-3 pr-6\">price</th>\n                            <th className=\"py-3 pr-6\"></th>\n                        </tr>\n                    </thead>\n                    <tbody className=\"text-gray-600 divide-y\">\n                        {\n                            tableItems.map((item, idx) => (\n                                <tr key={idx}>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.name}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.date}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">\n                                        <span className={`px-3 py-2 rounded-full font-semibold text-xs ${item.status == \"Active\" ? \"text-green-600 bg-green-50\" : \"text-blue-600 bg-blue-50\"}`}>\n                                            {item.status}\n                                        </span>\n                                    </td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.plan}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.price}</td>\n                                    <td className=\"text-right whitespace-nowrap\">\n                                        <a href=\"javascript:void()\" className=\"py-1.5 px-3 text-gray-600 hover:text-gray-500 duration-150 hover:bg-gray-50 border rounded-lg\">\n                                            Manage\n                                        </a>\n                                    </td>\n                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}","label":"App.jsx"}],"jsxCss":[]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ tableItems: [\n    {\n        name: 'Solo learn app',\n        date: 'Oct 9, 2023',\n        status: 'Active',\n        price: '$35.000',\n        plan: 'Monthly subscription'\n    },\n    {\n        name: 'Window wrapper',\n        date: 'Oct 12, 2023',\n        status: 'Active',\n        price: '$12.000',\n        plan: 'Monthly subscription'\n    },\n    {\n        name: 'Unity loroin',\n        date: 'Oct 22, 2023',\n        status: 'Archived',\n        price: '$20.000',\n        plan: 'Annually subscription'\n    },\n    {\n        name: 'Background remover',\n        date: 'Jan 5, 2023',\n        status: 'Active',\n        price: '$5.000',\n        plan: 'Monthly subscription'\n    },\n    {\n        name: 'Colon tiger',\n        date: 'Jan 6, 2023',\n        status: 'Active',\n        price: '$9.000',\n        plan: 'Annually subscription'\n    }\n] }\" class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n\n    <div class=\"items-start justify-between md:flex\">\n        <div class=\"max-w-lg\">\n            <h3 class=\"text-gray-800 text-xl font-bold sm:text-2xl\">All products</h3>\n            <p class=\"text-gray-600 mt-2\">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>\n        </div>\n        <div class=\"mt-3 md:mt-0\">\n            <a href=\"javascript:void(0)\" class=\"inline-block px-4 py-2 text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\">Add product</a>\n        </div>\n    </div>\n    <div class=\"mt-12 relative h-max overflow-auto\">\n        <table class=\"w-full table-auto text-sm text-left\">\n            <thead class=\"text-gray-600 font-medium border-b\">\n                <tr>\n                    <th class=\"py-3 pr-6\">name</th>\n                    <th class=\"py-3 pr-6\">date</th>\n                    <th class=\"py-3 pr-6\">status</th>\n                    <th class=\"py-3 pr-6\">Purchase</th>\n                    <th class=\"py-3 pr-6\">price</th>\n                    <th class=\"py-3 pr-6\"></th>\n                </tr>\n            </thead>\n            <tbody class=\"text-gray-600 divide-y\">\n                <template x-for=\"(item, idx) in tableItems\" :key=\"idx\">\n                    <tr>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\" x-text=\"item.name\"></td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\" x-text=\"item.date\"></td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\">\n                            <span :class=\"`px-3 py-2 rounded-full font-semibold text-xs ${item.status === 'Active' ? 'text-green-600 bg-green-50' : 'text-blue-600 bg-blue-50'}`\" x-text=\"item.status\"></span>\n                        </td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\" x-text=\"item.plan\"></td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\" x-text=\"item.price\"></td>\n                        <td class=\"text-right whitespace-nowrap\">\n                            <a href=\"javascript:void(0)\" class=\"py-1.5 px-3 text-gray-600 hover:text-gray-500 duration-150 hover:bg-gray-50 border rounded-lg\">Manage</a>\n                        </td>\n                    </tr>\n                </template>\n            </tbody>\n        </table>\n    </div>\n</div>"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n    let tableItems = [\n        {\n            name: \"Solo learn app\",\n            date: \"Oct 9, 2023\",\n            status: \"Active\",\n            price: \"$35.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Window wrapper\",\n            date: \"Oct 12, 2023\",\n            status: \"Active\",\n            price: \"$12.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Unity loroin\",\n            date: \"Oct 22, 2023\",\n            status: \"Archived\",\n            price: \"$20.000\",\n            plan: \"Annually subscription\"\n        },\n        {\n            name: \"Background remover\",\n            date: \"Jan 5, 2023\",\n            status: \"Active\",\n            price: \"$5.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Colon tiger\",\n            date: \"Jan 6, 2023\",\n            status: \"Active\",\n            price: \"$9.000\",\n            plan: \"Annually subscription\"\n        },\n    ];\n</script>\n\n<div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"items-start justify-between md:flex\">\n        <div class=\"max-w-lg\">\n            <h3 class=\"text-gray-800 text-xl font-bold sm:text-2xl\">All products</h3>\n            <p class=\"text-gray-600 mt-2\">\n                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n            </p>\n        </div>\n        <div class=\"mt-3 md:mt-0\">\n            <a href=\"javascript:void(0)\" class=\"inline-block px-4 py-2 text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\">\n                Add product\n            </a>\n        </div>\n    </div>\n    <div class=\"mt-12 relative h-max overflow-auto\">\n        <table class=\"w-full table-auto text-sm text-left\">\n            <thead class=\"text-gray-600 font-medium border-b\">\n                <tr>\n                    <th class=\"py-3 pr-6\">name</th>\n                    <th class=\"py-3 pr-6\">date</th>\n                    <th class=\"py-3 pr-6\">status</th>\n                    <th class=\"py-3 pr-6\">Purchase</th>\n                    <th class=\"py-3 pr-6\">price</th>\n                    <th class=\"py-3 pr-6\"></th>\n                </tr>\n            </thead>\n            <tbody class=\"text-gray-600 divide-y\">\n                {#each tableItems as item, idx}\n                    <tr>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\">{item.name}</td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\">{item.date}</td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\">\n                            <span class={`px-3 py-2 rounded-full font-semibold text-xs ${item.status === 'Active' ? 'text-green-600 bg-green-50' : 'text-blue-600 bg-blue-50'}`}>\n                                {item.status}\n                            </span>\n                        </td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\">{item.plan}</td>\n                        <td class=\"pr-6 py-4 whitespace-nowrap\">{item.price}</td>\n                        <td class=\"text-right whitespace-nowrap\">\n                            <a href=\"javascript:void(0)\" class=\"py-1.5 px-3 text-gray-600 hover:text-gray-500 duration-150 hover:bg-gray-50 border rounded-lg\">\n                                Manage\n                            </a>\n                        </td>\n                    </tr>\n                {/each}\n            </tbody>\n        </table>\n    </div>\n</div>"}]},"preview":"function App() {\n\n    const tableItems = [\n        {\n            name: \"Solo learn app\",\n            date: \"Oct 9, 2023\",\n            status: \"Active\",\n            price: \"$35.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Window wrapper\",\n            date: \"Oct 12, 2023\",\n            status: \"Active\",\n            price: \"$12.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Unity loroin\",\n            date: \"Oct 22, 2023\",\n            status: \"Archived\",\n            price: \"$20.000\",\n            plan: \"Annually subscription\"\n        },\n        {\n            name: \"Background remover\",\n            date: \"Jan 5, 2023\",\n            status: \"Active\",\n            price: \"$5.000\",\n            plan: \"Monthly subscription\"\n        },\n        {\n            name: \"Colon tiger\",\n            date: \"Jan 6, 2023\",\n            status: \"Active\",\n            price: \"$9.000\",\n            plan: \"Annually subscription\"\n        },\n    ]\n\n\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 py-16 md:px-8\">\n            <div className=\"items-start justify-between md:flex\">\n                <div className=\"max-w-lg\">\n                    <h3 className=\"text-gray-800 text-xl font-bold sm:text-2xl\">\n                        All products\n                    </h3>\n                    <p className=\"text-gray-600 mt-2\">\n                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                    </p>\n                </div>\n                <div className=\"mt-3 md:mt-0\">\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"inline-block px-4 py-2 text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n                    >\n                        Add product\n                    </a>\n                </div>\n            </div>\n            <div className=\"mt-12 relative h-max overflow-auto\">\n                <table className=\"w-full table-auto text-sm text-left\">\n                    <thead className=\"text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"py-3 pr-6\">name</th>\n                            <th className=\"py-3 pr-6\">date</th>\n                            <th className=\"py-3 pr-6\">status</th>\n                            <th className=\"py-3 pr-6\">Purchase</th>\n                            <th className=\"py-3 pr-6\">price</th>\n                            <th className=\"py-3 pr-6\"></th>\n                        </tr>\n                    </thead>\n                    <tbody className=\"text-gray-600 divide-y\">\n                        {\n                            tableItems.map((item, idx) => (\n                                <tr key={idx}>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.name}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.date}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">\n                                        <span className={`px-3 py-2 rounded-full font-semibold text-xs ${item.status == \"Active\" ? \"text-green-600 bg-green-50\" : \"text-blue-600 bg-blue-50\"}`}>\n                                            {item.status}\n                                        </span>\n                                    </td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.plan}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.price}</td>\n                                    <td className=\"text-right whitespace-nowrap\">\n                                        <a href=\"javascript:void()\" className=\"py-1.5 px-3 text-gray-600 hover:text-gray-500 duration-150 hover:bg-gray-50 border rounded-lg\">\n                                            Manage\n                                        </a>\n                                    </td>\n                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}","vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"items-start justify-between md:flex\">\n      <div class=\"max-w-lg\">\n        <h3 class=\"text-gray-800 text-xl font-bold sm:text-2xl\">All products</h3>\n        <p class=\"text-gray-600 mt-2\">\n          Lorem Ipsum is simply dummy text of the printing and typesetting\n          industry.\n        </p>\n      </div>\n      <div class=\"mt-3 md:mt-0\">\n        <a\n          href=\"javascript:void(0)\"\n          class=\"inline-block px-4 py-2 text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n          >Add product</a\n        >\n      </div>\n    </div>\n    <div class=\"mt-12 relative h-max overflow-auto\">\n      <table class=\"w-full table-auto text-sm text-left\">\n        <thead class=\"text-gray-600 font-medium border-b\">\n          <tr>\n            <th class=\"py-3 pr-6\">name</th>\n            <th class=\"py-3 pr-6\">date</th>\n            <th class=\"py-3 pr-6\">status</th>\n            <th class=\"py-3 pr-6\">Purchase</th>\n            <th class=\"py-3 pr-6\">price</th>\n            <th class=\"py-3 pr-6\"></th>\n          </tr>\n        </thead>\n        <tbody class=\"text-gray-600 divide-y\">\n          <tr v-for=\"(item, idx) in tableItems\" :key=\"idx\">\n            <td class=\"pr-6 py-4 whitespace-nowrap\">{{ item.name }}</td>\n            <td class=\"pr-6 py-4 whitespace-nowrap\">{{ item.date }}</td>\n            <td class=\"pr-6 py-4 whitespace-nowrap\">\n              <span\n                :class=\"`px-3 py-2 rounded-full font-semibold text-xs ${item.status === 'Active' ? 'text-green-600 bg-green-50' : 'text-blue-600 bg-blue-50'}`\"\n                >{{ item.status }}</span\n              >\n            </td>\n            <td class=\"pr-6 py-4 whitespace-nowrap\">{{ item.plan }}</td>\n            <td class=\"pr-6 py-4 whitespace-nowrap\">{{ item.price }}</td>\n            <td class=\"text-right whitespace-nowrap\">\n              <a\n                href=\"javascript:void(0)\"\n                class=\"py-1.5 px-3 text-gray-600 hover:text-gray-500 duration-150 hover:bg-gray-50 border rounded-lg\"\n                >Manage</a\n              >\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      tableItems: [\n        {\n          name: \"Solo learn app\",\n          date: \"Oct 9, 2023\",\n          status: \"Active\",\n          price: \"$35.000\",\n          plan: \"Monthly subscription\",\n        },\n        {\n          name: \"Window wrapper\",\n          date: \"Oct 12, 2023\",\n          status: \"Active\",\n          price: \"$12.000\",\n          plan: \"Monthly subscription\",\n        },\n        {\n          name: \"Unity loroin\",\n          date: \"Oct 22, 2023\",\n          status: \"Archived\",\n          price: \"$20.000\",\n          plan: \"Annually subscription\",\n        },\n        {\n          name: \"Background remover\",\n          date: \"Jan 5, 2023\",\n          status: \"Active\",\n          price: \"$5.000\",\n          plan: \"Monthly subscription\",\n        },\n        {\n          name: \"Colon tiger\",\n          date: \"Jan 6, 2023\",\n          status: \"Active\",\n          price: \"$9.000\",\n          plan: \"Annually subscription\",\n        },\n      ],\n    };\n  },\n};\n</script>","label":"App.vue"}],"vueCss":[]}}
slug: /tables
id: a7830030-0706-442c-a7fb-26d85d4a0cc6
created_at: 1668952231315
---

<FUITableWithManageButton />