---
title: Basic Table
category: Application
paid: false
isActive: true
ltr: {"html":{"htmlTail":[{"label":"index.html","code":"<div\n  x-data=\"{ \n  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  class=\"max-w-screen-xl mx-auto px-4 md:px-8\"\n>\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-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        </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=\"px-6 py-4 whitespace-nowrap\" x-text=\"item.name\"></td>\n            <td\n              class=\"px-6 py-4 whitespace-nowrap\"\n              x-text=\"item.email\"\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          </tr>\n        </template>\n      </tbody>\n    </table>\n  </div>\n</div>"}]},"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=\"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\">Email</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=\"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                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}","vue":{"vueCss":[],"vueTail":[{"label":"App.vue","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\">Email</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=\"px-6 py-4 whitespace-nowrap\">{{ item.name }}</td>\n                        <td class=\"px-6 py-4 whitespace-nowrap\">{{ item.email }}</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                    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    }\n}\n</script>"}]},"react":{"jsxTail":[{"label":"App.jsx","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=\"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\">Email</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=\"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                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[]},"svelte":{"svelteTail":[{"code":"<script>\n    let 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</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\">Team members</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-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                </tr>\n            </thead>\n            <tbody class=\"text-gray-600 divide-y\">\n                {#each tableItems as item, idx}\n                    <tr key={idx}>\n                        <td class=\"px-6 py-4 whitespace-nowrap\">{item.name}</td>\n                        <td class=\"px-6 py-4 whitespace-nowrap\">{item.email}</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","label":"App.svelte"}]}}
slug: /tables
id: 050313ee-7086-4b90-b2d7-263cf08c1c36
created_at: 1668951590879
---

<FUIBasicTable />