---
title: Table with avatars
category: Application
paid: false
isActive: true
ltr: {"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\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 industry.\n      </p>\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\">Phone number</th>\n            <th class=\"py-3 px-6\">Position</th>\n            <th class=\"py-3 px-6\">Salary</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          </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>\n","label":"App.vue"}],"vueCss":[]},"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=\"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 industry.\n    </p>\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\">Phone number</th>\n          <th class=\"py-3 px-6\">Position</th>\n          <th class=\"py-3 px-6\">Salary</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\" alt=\"{item.name}'s avatar\"/>\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          </tr>\n        {/each}\n      </tbody>\n    </table>\n  </div>\n</div>\n"}]},"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=\"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-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\">Phone number</th>\n                            <th className=\"py-3 px-6\">Position</th>\n                            <th className=\"py-3 px-6\">Salary</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=\"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                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}","react":{"jsxCss":[],"jsxTail":[{"label":"App.jsx","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=\"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-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\">Phone number</th>\n                            <th className=\"py-3 px-6\">Position</th>\n                            <th className=\"py-3 px-6\">Salary</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=\"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                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}"}]},"html":{"htmlTail":[{"code":"<div x-data=\"{ \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    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\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 industry.\n            </p>\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\">Phone number</th>\n                        <th class=\"py-3 px-6\">Position</th>\n                        <th class=\"py-3 px-6\">Salary</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=\"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\" x-text=\"item.name\"></span>\n                                    <span class=\"block text-gray-700 text-xs\" x-text=\"item.email\"></span>\n                                </div>\n                            </td>\n                            <td class=\"px-6 py-4 whitespace-nowrap\" x-text=\"item.phone_nimber\"></td>\n                            <td class=\"px-6 py-4 whitespace-nowrap\" x-text=\"item.position\"></td>\n                            <td class=\"px-6 py-4 whitespace-nowrap\" x-text=\"item.salary\"></td>\n                        </tr>\n                    </template>\n                </tbody>\n            </table>\n        </div>\n    </div>\n</div>\n","label":"index.html"}]}}
slug: /tables
id: a5ae314d-9cac-4a7d-91fb-ee6597e4652c
created_at: 1668952013140
---

<FUITableWithAvatars />