---
title: Table with avatars and edit delete
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n\n    const tableItems = [\n        {\n            avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Liam James\",\n            email: \"liamjames@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Software engineer\",\n            salary: \"$100K\"\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n            name: \"Olivia Emma\",\n            email: \"oliviaemma@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Product designer\",\n            salary: \"$90K\"\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n            name: \"William Benjamin\",\n            email: \"william.benjamin@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Front-end developer\",\n            salary: \"$80K\"\n        },\n        {\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n            name: \"Henry Theodore\",\n            email: \"henrytheodore@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Laravel engineer\",\n            salary: \"$120K\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1439911767590-c724b615299d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Amelia Elijah\",\n            email: \"amelia.elijah@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\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=\"flex items-center gap-x-3 py-3 px-6 whitespace-nowrap\">\n                                        <img src={item.avatar} className=\"w-10 h-10 rounded-full\" />\n                                        <div>\n                                            <span className=\"block text-gray-700 text-sm font-medium\">{item.name}</span>\n                                            <span className=\"block text-gray-700 text-xs\">{item.email}</span>\n                                        </div>\n                                    </td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.phone_nimber}</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}","react":{"jsxTail":[{"code":"export default () => {\n\n    const tableItems = [\n        {\n            avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Liam James\",\n            email: \"liamjames@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Software engineer\",\n            salary: \"$100K\"\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n            name: \"Olivia Emma\",\n            email: \"oliviaemma@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Product designer\",\n            salary: \"$90K\"\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n            name: \"William Benjamin\",\n            email: \"william.benjamin@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Front-end developer\",\n            salary: \"$80K\"\n        },\n        {\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n            name: \"Henry Theodore\",\n            email: \"henrytheodore@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Laravel engineer\",\n            salary: \"$120K\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1439911767590-c724b615299d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Amelia Elijah\",\n            email: \"amelia.elijah@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\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=\"flex items-center gap-x-3 py-3 px-6 whitespace-nowrap\">\n                                        <img src={item.avatar} className=\"w-10 h-10 rounded-full\" />\n                                        <div>\n                                            <span className=\"block text-gray-700 text-sm font-medium\">{item.name}</span>\n                                            <span className=\"block text-gray-700 text-xs\">{item.email}</span>\n                                        </div>\n                                    </td>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">{item.phone_nimber}</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":[]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n    let tableItems = [\n        {\n            avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Liam James\",\n            email: \"liamjames@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Software engineer\",\n            salary: \"$100K\"\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n            name: \"Olivia Emma\",\n            email: \"oliviaemma@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Product designer\",\n            salary: \"$90K\"\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n            name: \"William Benjamin\",\n            email: \"william.benjamin@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Front-end developer\",\n            salary: \"$80K\"\n        },\n        {\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n            name: \"Henry Theodore\",\n            email: \"henrytheodore@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Laravel engineer\",\n            salary: \"$120K\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1439911767590-c724b615299d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Amelia Elijah\",\n            email: \"amelia.elijah@example.com\",\n            phone_nimber: \"+1 (555) 000-000\",\n            position: \"Open source manager\",\n            salary: \"$75K\"\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\">Team members</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 member\n            </a>\n        </div>\n    </div>\n    <div class=\"mt-12 shadow-sm border rounded-lg overflow-x-auto\">\n        <table class=\"w-full table-auto text-sm text-left\">\n            <thead class=\"bg-gray-50 text-gray-600 font-medium border-b\">\n                <tr>\n                    <th class=\"py-3 px-6\">Username</th>\n                    <th class=\"py-3 px-6\">Email</th>\n                    <th class=\"py-3 px-6\">Position</th>\n                    <th class=\"py-3 px-6\">Salary</th>\n                    <th class=\"py-3 px-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=\"flex items-center gap-x-3 py-3 px-6 whitespace-nowrap\">\n                            <img src={item.avatar} class=\"w-10 h-10 rounded-full\" />\n                            <div>\n                                <span class=\"block text-gray-700 text-sm font-medium\">{item.name}</span>\n                                <span class=\"block text-gray-700 text-xs\">{item.email}</span>\n                            </div>\n                        </td>\n                        <td class=\"px-6 py-4 whitespace-nowrap\">{item.phone_nimber}</td>\n                        <td class=\"px-6 py-4 whitespace-nowrap\">{item.position}</td>\n                        <td class=\"px-6 py-4 whitespace-nowrap\">{item.salary}</td>\n                        <td class=\"text-right px-6 whitespace-nowrap\">\n                            <a href=\"javascript:void(0)\" class=\"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 class=\"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                {/each}\n            </tbody>\n        </table>\n    </div>\n</div>"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div\n  x-data=\"{ \n    tableItems: [\n        { avatar: 'https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', name: 'Liam James', email: 'liamjames@example.com', phone_nimber: '+1 (555) 000-000', position: 'Software engineer', salary: '$100K' },\n        { avatar: 'https://randomuser.me/api/portraits/men/86.jpg', name: 'Olivia Emma', email: 'oliviaemma@example.com', phone_nimber: '+1 (555) 000-000', position: 'Product designer', salary: '$90K' },\n        { avatar: 'https://randomuser.me/api/portraits/women/79.jpg', name: 'William Benjamin', email: 'william.benjamin@example.com', phone_nimber: '+1 (555) 000-000', position: 'Front-end developer', salary: '$80K' },\n        { avatar: 'https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg', name: 'Henry Theodore', email: 'henrytheodore@example.com', phone_nimber: '+1 (555) 000-000', position: 'Laravel engineer', salary: '$120K' },\n        { avatar: 'https://images.unsplash.com/photo-1439911767590-c724b615299d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', name: 'Amelia Elijah', email: 'amelia.elijah@example.com', phone_nimber: '+1 (555) 000-000', position: 'Open source manager', salary: '$75K' }\n    ]\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\">\n        Team members\n      </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 member</a\n      >\n    </div>\n  </div>\n  <div class=\"mt-12 shadow-sm border rounded-lg overflow-x-auto\">\n    <table class=\"w-full table-auto text-sm text-left\">\n      <thead class=\"bg-gray-50 text-gray-600 font-medium border-b\">\n        <tr>\n          <th class=\"py-3 px-6\">Username</th>\n          <th class=\"py-3 px-6\">Email</th>\n          <th class=\"py-3 px-6\">Position</th>\n          <th class=\"py-3 px-6\">Salary</th>\n          <th class=\"py-3 px-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\n              class=\"flex items-center gap-x-3 py-3 px-6 whitespace-nowrap\"\n            >\n              <img :src=\"item.avatar\" class=\"w-10 h-10 rounded-full\" />\n              <div>\n                <span\n                  class=\"block text-gray-700 text-sm font-medium\"\n                  x-text=\"item.name\"\n                ></span>\n                <span\n                  class=\"block text-gray-700 text-xs\"\n                  x-text=\"item.email\"\n                ></span>\n              </div>\n            </td>\n            <td\n              class=\"px-6 py-4 whitespace-nowrap\"\n              x-text=\"item.phone_nimber\"\n            ></td>\n            <td\n              class=\"px-6 py-4 whitespace-nowrap\"\n              x-text=\"item.position\"\n            ></td>\n            <td\n              class=\"px-6 py-4 whitespace-nowrap\"\n              x-text=\"item.salary\"\n            ></td>\n            <td class=\"text-right px-6 whitespace-nowrap\">\n              <a\n                href=\"javascript:void()\"\n                class=\"py-2 px-3 font-medium text-indigo-600 hover:text-indigo-500 duration-150 hover:bg-gray-50 rounded-lg\"\n                >Edit</a\n              >\n              <button\n                href=\"javascript:void()\"\n                class=\"py-2 leading-none px-3 font-medium text-red-600 hover:text-red-500 duration-150 hover:bg-gray-50 rounded-lg\"\n              >\n                Delete\n              </button>\n            </td>\n          </tr>\n        </template>\n      </tbody>\n    </table>\n  </div>\n</div>"}]},"vue":{"vueCss":[],"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\">Team members</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 member\n        </a>\n      </div>\n    </div>\n    <div class=\"mt-12 shadow-sm border rounded-lg overflow-x-auto\">\n      <table class=\"w-full table-auto text-sm text-left\">\n        <thead class=\"bg-gray-50 text-gray-600 font-medium border-b\">\n          <tr>\n            <th class=\"py-3 px-6\">Username</th>\n            <th class=\"py-3 px-6\">Email</th>\n            <th class=\"py-3 px-6\">Position</th>\n            <th class=\"py-3 px-6\">Salary</th>\n            <th class=\"py-3 px-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=\"flex items-center gap-x-3 py-3 px-6 whitespace-nowrap\">\n              <img :src=\"item.avatar\" class=\"w-10 h-10 rounded-full\" />\n              <div>\n                <span class=\"block text-gray-700 text-sm font-medium\">{{ item.name }}</span>\n                <span class=\"block text-gray-700 text-xs\">{{ item.email }}</span>\n              </div>\n            </td>\n            <td class=\"px-6 py-4 whitespace-nowrap\">{{ item.phone_nimber }}</td>\n            <td class=\"px-6 py-4 whitespace-nowrap\">{{ item.position }}</td>\n            <td class=\"px-6 py-4 whitespace-nowrap\">{{ item.salary }}</td>\n            <td class=\"text-right px-6 whitespace-nowrap\">\n              <a href=\"javascript:void(0)\" class=\"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 class=\"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        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      tableItems: [\n        {\n          avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n          name: \"Liam James\",\n          email: \"liamjames@example.com\",\n          phone_nimber: \"+1 (555) 000-000\",\n          position: \"Software engineer\",\n          salary: \"$100K\"\n        },\n        {\n          avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n          name: \"Olivia Emma\",\n          email: \"oliviaemma@example.com\",\n          phone_nimber: \"+1 (555) 000-000\",\n          position: \"Product designer\",\n          salary: \"$90K\"\n        },\n        {\n          avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n          name: \"William Benjamin\",\n          email: \"william.benjamin@example.com\",\n          phone_nimber: \"+1 (555) 000-000\",\n          position: \"Front-end developer\",\n          salary: \"$80K\"\n        },\n        {\n          avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n          name: \"Henry Theodore\",\n          email: \"henrytheodore@example.com\",\n          phone_nimber: \"+1 (555) 000-000\",\n          position: \"Laravel engineer\",\n          salary: \"$120K\"\n        },\n        {\n          avatar: \"https://images.unsplash.com/photo-1439911767590-c724b615299d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n          name: \"Amelia Elijah\",\n          email: \"amelia.elijah@example.com\",\n          phone_nimber: \"+1 (555) 000-000\",\n          position: \"Open source manager\",\n          salary: \"$75K\"\n        }\n      ]\n    }\n  }\n}\n</script>","label":"App.vue"}]}}
slug: /tables
id: 38309d90-79f1-44c7-bea7-4fc343d81b73
created_at: 1668952111704
---

<FUITableWithAvatarsAndEditDelete />