---
title: Table with edit and delete
category: Application
paid: true
isActive: true
ltr: {"react":{"jsxTail":[{"code":"export default () => {\n\n    const tableItems = [\n        {\n            name: \"Liam James\",\n            email: \"liamjames@example.com\",\n            position: \"Software engineer\",\n            salary: \"$100K\"\n        },\n        {\n            name: \"Olivia Emma\",\n            email: \"oliviaemma@example.com\",\n            position: \"Product designer\",\n            salary: \"$90K\"\n        },\n        {\n            name: \"William Benjamin\",\n            email: \"william.benjamin@example.com\",\n            position: \"Front-end developer\",\n            salary: \"$80K\"\n        },\n        {\n            name: \"Henry Theodore\",\n            email: \"henrytheodore@example.com\",\n            position: \"Laravel engineer\",\n            salary: \"$120K\"\n        },\n        {\n            name: \"Amelia Elijah\",\n            email: \"amelia.elijah@example.com\",\n            position: \"Open source manager\",\n            salary: \"$75K\"\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                        Team members\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 member\n                    </a>\n                </div>\n            </div>\n            <div className=\"mt-12 shadow-sm border rounded-lg overflow-x-auto\">\n                <table className=\"w-full table-auto text-sm text-left\">\n                    <thead className=\"bg-gray-50 text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"py-3 px-6\">Username</th>\n                            <th className=\"py-3 px-6\">Email</th>\n                            <th className=\"py-3 px-6\">Position</th>\n                            <th className=\"py-3 px-6\">Salary</th>\n                            <th className=\"py-3 px-6\"></th>\n\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=\"px-6 py-4 whitespace-nowrap\">{item.name}</td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.email}</td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.position}</td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.salary}</td>\n                                    <td className=\"text-right px-6 whitespace-nowrap\">\n                                        <a href=\"javascript:void()\" className=\"py-2 px-3 font-medium text-indigo-600 hover:text-indigo-500 duration-150 hover:bg-gray-50 rounded-lg\">\n                                            Edit\n                                        </a>\n                                        <button href=\"javascript:void()\" className=\"py-2 leading-none px-3 font-medium text-red-600 hover:text-red-500 duration-150 hover:bg-gray-50 rounded-lg\">\n                                            Delete\n                                        </button>\n                                    </td>\n                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}","label":"App.jsx"}],"jsxCss":[]},"html":{"htmlTail":[]},"vue":{"vueTail":[],"vueCss":[]},"preview":"function App() {\n\n    const tableItems = [\n        {\n            name: \"Liam James\",\n            email: \"liamjames@example.com\",\n            position: \"Software engineer\",\n            salary: \"$100K\"\n        },\n        {\n            name: \"Olivia Emma\",\n            email: \"oliviaemma@example.com\",\n            position: \"Product designer\",\n            salary: \"$90K\"\n        },\n        {\n            name: \"William Benjamin\",\n            email: \"william.benjamin@example.com\",\n            position: \"Front-end developer\",\n            salary: \"$80K\"\n        },\n        {\n            name: \"Henry Theodore\",\n            email: \"henrytheodore@example.com\",\n            position: \"Laravel engineer\",\n            salary: \"$120K\"\n        },\n        {\n            name: \"Amelia Elijah\",\n            email: \"amelia.elijah@example.com\",\n            position: \"Open source manager\",\n            salary: \"$75K\"\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                        Team members\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 member\n                    </a>\n                </div>\n            </div>\n            <div className=\"mt-12 shadow-sm border rounded-lg overflow-x-auto\">\n                <table className=\"w-full table-auto text-sm text-left\">\n                    <thead className=\"bg-gray-50 text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"py-3 px-6\">Username</th>\n                            <th className=\"py-3 px-6\">Email</th>\n                            <th className=\"py-3 px-6\">Position</th>\n                            <th className=\"py-3 px-6\">Salary</th>\n                            <th className=\"py-3 px-6\"></th>\n\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=\"px-6 py-4 whitespace-nowrap\">{item.name}</td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.email}</td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.position}</td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.salary}</td>\n                                    <td className=\"text-right px-6 whitespace-nowrap\">\n                                        <a href=\"javascript:void()\" className=\"py-2 px-3 font-medium text-indigo-600 hover:text-indigo-500 duration-150 hover:bg-gray-50 rounded-lg\">\n                                            Edit\n                                        </a>\n                                        <button href=\"javascript:void()\" className=\"py-2 leading-none px-3 font-medium text-red-600 hover:text-red-500 duration-150 hover:bg-gray-50 rounded-lg\">\n                                            Delete\n                                        </button>\n                                    </td>\n                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}"}
slug: /tables
id: dea6640b-34ed-4eab-b145-5304dcf25d65
created_at: 1668951860018
---

<FUITableWithEditAndDelete />