---
title: Table with bordered column
category: Application
paid: false
isActive: true
ltr: {"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 className=\"divide-x\">\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} className=\"divide-x\">\n                                    <td className=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-6\">\n                                        <span>{idx + 1}</span>\n                                        {item.name}\n                                    </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}","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=\"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 className=\"divide-x\">\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} className=\"divide-x\">\n                                    <td className=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-6\">\n                                        <span>{idx + 1}</span>\n                                        {item.name}\n                                    </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}","label":"App.jsx"}],"jsxCss":[]},"html":{"htmlTail":[{"code":"<div x-data=\"{\n    tableItems: [\n        { name: 'Liam James', email: 'liamjames@example.com', position: 'Software engineer', salary: '$100K' },\n        { name: 'Olivia Emma', email: 'oliviaemma@example.com', position: 'Product designer', salary: '$90K' },\n        { name: 'William Benjamin', email: 'william.benjamin@example.com', position: 'Front-end developer', salary: '$80K' },\n        { name: 'Henry Theodore', email: 'henrytheodore@example.com', position: 'Laravel engineer', salary: '$120K' },\n        { name: 'Amelia Elijah', email: 'amelia.elijah@example.com', position: 'Open source manager', salary: '$75K' }\n    ]\n}\" 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 class=\"divide-x\">\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 class=\"divide-x\">\n                        <td class=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-6\">\n                            <span x-text=\"idx + 1\"></span>\n                            <span x-text=\"item.name\"></span>\n                        </td>\n                        <td class=\"px-6 py-4 whitespace-nowrap\" x-text=\"item.email\"></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","label":"index.html"}]},"vue":{"vueCss":[],"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\">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-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 class=\"divide-x\">\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\" class=\"divide-x\">\n            <td class=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-6\">\n              <span>{{ idx + 1 }}</span>\n              {{ item.name }}\n            </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        { name: 'Liam James', email: 'liamjames@example.com', position: 'Software engineer', salary: '$100K' },\n        { name: 'Olivia Emma', email: 'oliviaemma@example.com', position: 'Product designer', salary: '$90K' },\n        { name: 'William Benjamin', email: 'william.benjamin@example.com', position: 'Front-end developer', salary: '$80K' },\n        { name: 'Henry Theodore', email: 'henrytheodore@example.com', position: 'Laravel engineer', salary: '$120K' },\n        { name: 'Amelia Elijah', email: 'amelia.elijah@example.com', position: 'Open source manager', salary: '$75K' }\n      ]\n    };\n  }\n};\n</script>","label":"App.vue"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n    let tableItems = [\n        { name: 'Liam James', email: 'liamjames@example.com', position: 'Software engineer', salary: '$100K' },\n        { name: 'Olivia Emma', email: 'oliviaemma@example.com', position: 'Product designer', salary: '$90K' },\n        { name: 'William Benjamin', email: 'william.benjamin@example.com', position: 'Front-end developer', salary: '$80K' },\n        { name: 'Henry Theodore', email: 'henrytheodore@example.com', position: 'Laravel engineer', salary: '$120K' },\n        { name: 'Amelia Elijah', email: 'amelia.elijah@example.com', position: 'Open source manager', salary: '$75K' }\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\">\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 class=\"divide-x\">\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 class=\"divide-x\">\n                    <td class=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-6\">\n                        <span>{idx + 1}</span>\n                        {item.name}\n                    </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>"}]}}
slug: /tables
id: 8145501d-9bc9-4019-8fb3-7ac34fe1bc83
created_at: 1668952684301
---

<FUITableWithBorderedColumn />