---
title: Table with tabs
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n\n    const tableItems = [\n        {\n            label: \"Pages\",\n            title: \"Top pages\",\n            items: [\n                {\n                    prop: \"https://www.google.com\",\n                    clicks: \"129\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"https://www.youtube.com\",\n                    clicks: \"798\",\n                    impression: \"Normal\"\n                },\n                {\n                    prop: \"https://www.github.com\",\n                    clicks: \"399\",\n                    impression: \"Great\"\n                },\n                {\n                    prop: \"https://www.farmui.com\",\n                    clicks: \"678\",\n                    impression: \"Bad\"\n                },\n            ]\n        },\n        {\n            label: \"Countries\",\n            title: \"Top countries\",\n            items: [\n                {\n                    prop: \"Mauritania\",\n                    clicks: \"203\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"United state america\",\n                    clicks: \"408\",\n                    impression: \"Great\"\n                },\n                {\n                    prop: \"France\",\n                    clicks: \"99\",\n                    impression: \"Bad\"\n                },\n                {\n                    prop: \"Germany\",\n                    clicks: \"320\",\n                    impression: \"Normal\"\n                },\n            ]\n        },\n        {\n            label: \"Devices\",\n            title: \"Top devices\",\n            items: [\n                {\n                    prop: \"Android\",\n                    clicks: \"360\",\n                    impression: \"Normal\"\n                },\n                {\n                    prop: \"Linux\",\n                    clicks: \"190\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"Macbook\",\n                    clicks: \"129\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"Windows\",\n                    clicks: \"50\",\n                    impression: \"Bad\"\n                },\n            ]\n        },\n    ]\n\n    const [selectedItem, setSelectedItem] = useState(0)\n    const labelColors = {\n        \"Good\": {\n            color: \"text-green-600 bg-green-50\",\n        },\n        \"Normal\": {\n            color: \"text-blue-600 bg-blue-50\",\n        },\n        \"Great\": {\n            color: \"text-pink-600 bg-pink-50\",\n        },\n        \"Bad\": {\n            color: \"text-red-600 bg-red-50\",\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                    Reports\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=\"text-sm mt-12 overflow-x-auto\">\n                <ul className=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n                    {\n                        tableItems.map((item, idx) => (\n                            <li key={idx} className={`py-2 border-b-2 ${selectedItem == idx ? \"border-indigo-600 text-indigo-600\" : \"border-white text-gray-500\"}`}>\n                                <button className=\"py-2.5 px-4 rounded-lg duration-150 hover:text-indigo-600 hover:bg-gray-50 active:bg-gray-100 font-medium\"\n                                    onClick={() => setSelectedItem(idx)}\n                                >\n                                    {item.label}\n                                </button>\n                            </li>\n                        ))\n                    }\n                </ul>\n                <table className=\"w-full table-auto text-left\">\n                    <thead className=\"text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"w-9/12 py-4 pr-6\">{tableItems[selectedItem].title}</th>\n                            <th className=\"py-4 pr-6\">Clicks</th>\n                            <th className=\"py-4 pr-6\">Impression</th>\n                        </tr>\n                    </thead>\n                    <tbody className=\"text-gray-600 divide-y\">\n                        {\n                            tableItems[selectedItem].items.map((item, idx) => (\n                                <tr key={idx}>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.prop}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap text-indigo-600\">{item.clicks}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">\n                                        <span className={`py-2 px-3 rounded-full font-semibold text-xs ${labelColors[item?.impression]?.color || \"\"}`}>{item.impression}</span>\n                                    </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\">Reports</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=\"text-sm mt-12 overflow-x-auto\">\n      <ul role=\"tablist\" class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n        <li\n          v-for=\"(item, idx) in tableItems\"\n          :key=\"idx\"\n          :class=\"['py-2 border-b-2', selectedItem === idx ? 'border-indigo-600 text-indigo-600' : 'border-white text-gray-500']\"\n        >\n          <button\n            role=\"tab\"\n            :aria-selected=\"selectedItem === idx\"\n            :aria-controls=\"'tabpanel-' + (idx + 1)\"\n            class=\"py-2.5 px-4 rounded-lg duration-150 hover:text-indigo-600 hover:bg-gray-50 active:bg-gray-100 font-medium\"\n            @click=\"setSelectedItem(idx)\"\n          >\n            {{ item.label }}\n          </button>\n        </li>\n      </ul>\n      <table class=\"w-full table-auto text-left\">\n        <thead class=\"text-gray-600 font-medium border-b\">\n          <tr>\n            <th class=\"w-9/12 py-4 pr-6\">{{ tableItems[selectedItem].title }}</th>\n            <th class=\"py-4 pr-6\">Clicks</th>\n            <th class=\"py-4 pr-6\">Impression</th>\n          </tr>\n        </thead>\n        <tbody class=\"text-gray-600 divide-y\">\n          <tr v-for=\"(item, idx) in tableItems[selectedItem].items\" :key=\"idx\">\n            <td class=\"pr-6 py-4 whitespace-nowrap\">{{ item.prop }}</td>\n            <td class=\"pr-6 py-4 whitespace-nowrap text-indigo-600\">{{ item.clicks }}</td>\n            <td class=\"pr-6 py-4 whitespace-nowrap\">\n              <span :class=\"['py-2 px-3 rounded-full font-semibold text-xs', labelColors[item.impression]]\">{{ item.impression }}</span>\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          label: \"Pages\",\n          title: \"Top pages\",\n          items: [\n            { prop: \"https://www.google.com\", clicks: \"129\", impression: \"Good\" },\n            { prop: \"https://www.youtube.com\", clicks: \"798\", impression: \"Normal\" },\n            { prop: \"https://www.github.com\", clicks: \"399\", impression: \"Great\" },\n            { prop: \"https://www.farmui.com\", clicks: \"678\", impression: \"Bad\" }\n          ]\n        },\n        {\n          label: \"Countries\",\n          title: \"Top countries\",\n          items: [\n            { prop: \"Mauritania\", clicks: \"203\", impression: \"Good\" },\n            { prop: \"United state america\", clicks: \"408\", impression: \"Great\" },\n            { prop: \"France\", clicks: \"99\", impression: \"Bad\" },\n            { prop: \"Germany\", clicks: \"320\", impression: \"Normal\" }\n          ]\n        },\n        {\n          label: \"Devices\",\n          title: \"Top devices\",\n          items: [\n            { prop: \"Android\", clicks: \"360\", impression: \"Normal\" },\n            { prop: \"Linux\", clicks: \"190\", impression: \"Good\" },\n            { prop: \"Macbook\", clicks: \"129\", impression: \"Good\" },\n            { prop: \"Windows\", clicks: \"50\", impression: \"Bad\" }\n          ]\n        }\n      ],\n      selectedItem: 0,\n      labelColors: {\n        Good: \"text-green-600 bg-green-50\",\n        Normal: \"text-blue-600 bg-blue-50\",\n        Great: \"text-pink-600 bg-pink-50\",\n        Bad: \"text-red-600 bg-red-50\"\n      }\n    };\n  },\n  methods: {\n    setSelectedItem(idx) {\n      this.selectedItem = idx;\n    }\n  }\n};\n</script>"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{\n    tableItems: [\n        { label: 'Pages', title: 'Top pages', items: [ { prop: 'https://www.google.com', clicks: '129', impression: 'Good' }, { prop: 'https://www.youtube.com', clicks: '798', impression: 'Normal' }, { prop: 'https://www.github.com', clicks: '399', impression: 'Great' }, { prop: 'https://www.farmui.com', clicks: '678', impression: 'Bad' } ] },\n        { label: 'Countries', title: 'Top countries', items: [ { prop: 'Mauritania', clicks: '203', impression: 'Good' }, { prop: 'United state america', clicks: '408', impression: 'Great' }, { prop: 'France', clicks: '99', impression: 'Bad' }, { prop: 'Germany', clicks: '320', impression: 'Normal' } ] },\n        { label: 'Devices', title: 'Top devices', items: [ { prop: 'Android', clicks: '360', impression: 'Normal' }, { prop: 'Linux', clicks: '190', impression: 'Good' }, { prop: 'Macbook', clicks: '129', impression: 'Good' }, { prop: 'Windows', clicks: '50', impression: 'Bad' } ] },\n    ],\n    selectedItem: 0,\n    labelColors: { 'Good': 'text-green-600 bg-green-50', 'Normal': 'text-blue-600 bg-blue-50', 'Great': 'text-pink-600 bg-pink-50', 'Bad': 'text-red-600 bg-red-50' }\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\">Reports</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=\"text-sm mt-12 overflow-x-auto\">\n            <ul role=\"tablist\" class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n                <template x-for=\"(item, idx) in tableItems\" :key=\"idx\">\n                    <li :class=\"`py-2 border-b-2 ${selectedItem == idx ? 'border-indigo-600 text-indigo-600' : 'border-white text-gray-500'}`\">\n                        <button role=\"tab\" :aria-selected=\"selectedItem == idx ? 'true' : 'false'\" :aria-controls=\"'tabpanel-' + (idx + 1)\" class=\"py-2.5 px-4 rounded-lg duration-150 hover:text-indigo-600 hover:bg-gray-50 active:bg-gray-100 font-medium\" @click=\"selectedItem = idx\">\n                            <span x-text=\"item.label\"></span>\n                        </button>\n                    </li>\n                </template>\n            </ul>\n            <table class=\"w-full table-auto text-left\">\n                <thead class=\"text-gray-600 font-medium border-b\">\n                    <tr>\n                        <th class=\"w-9/12 py-4 pr-6\" x-text=\"tableItems[selectedItem].title\"></th>\n                        <th class=\"py-4 pr-6\">Clicks</th>\n                        <th class=\"py-4 pr-6\">Impression</th>\n                    </tr>\n                </thead>\n                <tbody class=\"text-gray-600 divide-y\">\n                    <template x-for=\"(item, idx) in tableItems[selectedItem].items\" :key=\"idx\">\n                        <tr>\n                            <td class=\"pr-6 py-4 whitespace-nowrap\" x-text=\"item.prop\"></td>\n                            <td class=\"pr-6 py-4 whitespace-nowrap text-indigo-600\" x-text=\"item.clicks\"></td>\n                            <td class=\"pr-6 py-4 whitespace-nowrap\">\n                                <span :class=\"`py-2 px-3 rounded-full font-semibold text-xs ${labelColors[item.impression]}`\" x-text=\"item.impression\"></span>\n                            </td>\n                        </tr>\n                    </template>\n                </tbody>\n            </table>\n        </div>\n    </div>\n</div>\n"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n\tlet tableItems = [\n\t\t{\n\t\t\tlabel: \"Pages\",\n\t\t\ttitle: \"Top pages\",\n\t\t\titems: [\n\t\t\t\t{ prop: \"https://www.google.com\", clicks: \"129\", impression: \"Good\" },\n\t\t\t\t{ prop: \"https://www.youtube.com\", clicks: \"798\", impression: \"Normal\" },\n\t\t\t\t{ prop: \"https://www.github.com\", clicks: \"399\", impression: \"Great\" },\n\t\t\t\t{ prop: \"https://www.farmui.com\", clicks: \"678\", impression: \"Bad\" }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\tlabel: \"Countries\",\n\t\t\ttitle: \"Top countries\",\n\t\t\titems: [\n\t\t\t\t{ prop: \"Mauritania\", clicks: \"203\", impression: \"Good\" },\n\t\t\t\t{ prop: \"United state america\", clicks: \"408\", impression: \"Great\" },\n\t\t\t\t{ prop: \"France\", clicks: \"99\", impression: \"Bad\" },\n\t\t\t\t{ prop: \"Germany\", clicks: \"320\", impression: \"Normal\" }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\tlabel: \"Devices\",\n\t\t\ttitle: \"Top devices\",\n\t\t\titems: [\n\t\t\t\t{ prop: \"Android\", clicks: \"360\", impression: \"Normal\" },\n\t\t\t\t{ prop: \"Linux\", clicks: \"190\", impression: \"Good\" },\n\t\t\t\t{ prop: \"Macbook\", clicks: \"129\", impression: \"Good\" },\n\t\t\t\t{ prop: \"Windows\", clicks: \"50\", impression: \"Bad\" }\n\t\t\t]\n\t\t}\n\t];\n\n\tlet selectedItem = 0;\n\n\tconst labelColors = {\n\t\tGood: \"text-green-600 bg-green-50\",\n\t\tNormal: \"text-blue-600 bg-blue-50\",\n\t\tGreat: \"text-pink-600 bg-pink-50\",\n\t\tBad: \"text-red-600 bg-red-50\"\n\t};\n\n\tfunction setSelectedItem(idx) {\n\t\tselectedItem = idx;\n\t}\n</script>\n\n<div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n\t<div class=\"max-w-lg\">\n\t\t<h3 class=\"text-gray-800 text-xl font-bold sm:text-2xl\">Reports</h3>\n\t\t<p class=\"text-gray-600 mt-2\">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>\n\t</div>\n\t<div class=\"text-sm mt-12 overflow-x-auto\">\n\t\t<ul role=\"tablist\" class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n\t\t\t{#each tableItems as item, idx}\n\t\t\t\t<li class=\"py-2 border-b-2 {selectedItem === idx ? 'border-indigo-600 text-indigo-600' : 'border-white text-gray-500'}\">\n\t\t\t\t\t<button\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\taria-selected={selectedItem === idx}\n\t\t\t\t\t\taria-controls={`tabpanel-${idx + 1}`}\n\t\t\t\t\t\tclass=\"py-2.5 px-4 rounded-lg duration-150 hover:text-indigo-600 hover:bg-gray-50 active:bg-gray-100 font-medium\"\n\t\t\t\t\t\ton:click={() => setSelectedItem(idx)}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t{/each}\n\t\t</ul>\n\t\t<table class=\"w-full table-auto text-left\">\n\t\t\t<thead class=\"text-gray-600 font-medium border-b\">\n\t\t\t\t<tr>\n\t\t\t\t\t<th class=\"w-9/12 py-4 pr-6\">{tableItems[selectedItem].title}</th>\n\t\t\t\t\t<th class=\"py-4 pr-6\">Clicks</th>\n\t\t\t\t\t<th class=\"py-4 pr-6\">Impression</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody class=\"text-gray-600 divide-y\">\n\t\t\t\t{#each tableItems[selectedItem].items as item, idx}\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td class=\"pr-6 py-4 whitespace-nowrap\">{item.prop}</td>\n\t\t\t\t\t\t<td class=\"pr-6 py-4 whitespace-nowrap text-indigo-600\">{item.clicks}</td>\n\t\t\t\t\t\t<td class=\"pr-6 py-4 whitespace-nowrap\">\n\t\t\t\t\t\t\t<span class=\"py-2 px-3 rounded-full font-semibold text-xs {labelColors[item.impression]}\">{item.impression}</span>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t{/each}\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n</div>"}]},"react":{"jsxCss":[],"jsxTail":[{"code":"import { useState } from \"react\"\n\nexport default () => {\n\n    const tableItems = [\n        {\n            label: \"Pages\",\n            title: \"Top pages\",\n            items: [\n                {\n                    prop: \"https://www.google.com\",\n                    clicks: \"129\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"https://www.youtube.com\",\n                    clicks: \"798\",\n                    impression: \"Normal\"\n                },\n                {\n                    prop: \"https://www.github.com\",\n                    clicks: \"399\",\n                    impression: \"Great\"\n                },\n                {\n                    prop: \"https://www.farmui.com\",\n                    clicks: \"678\",\n                    impression: \"Bad\"\n                },\n            ]\n        },\n        {\n            label: \"Countries\",\n            title: \"Top countries\",\n            items: [\n                {\n                    prop: \"Mauritania\",\n                    clicks: \"203\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"United state america\",\n                    clicks: \"408\",\n                    impression: \"Great\"\n                },\n                {\n                    prop: \"France\",\n                    clicks: \"99\",\n                    impression: \"Bad\"\n                },\n                {\n                    prop: \"Germany\",\n                    clicks: \"320\",\n                    impression: \"Normal\"\n                },\n            ]\n        },\n        {\n            label: \"Devices\",\n            title: \"Top devices\",\n            items: [\n                {\n                    prop: \"Android\",\n                    clicks: \"360\",\n                    impression: \"Normal\"\n                },\n                {\n                    prop: \"Linux\",\n                    clicks: \"190\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"Macbook\",\n                    clicks: \"129\",\n                    impression: \"Good\"\n                },\n                {\n                    prop: \"Windows\",\n                    clicks: \"50\",\n                    impression: \"Bad\"\n                },\n            ]\n        },\n    ]\n\n    const [selectedItem, setSelectedItem] = useState(0)\n    const labelColors = {\n        \"Good\": {\n            color: \"text-green-600 bg-green-50\",\n        },\n        \"Normal\": {\n            color: \"text-blue-600 bg-blue-50\",\n        },\n        \"Great\": {\n            color: \"text-pink-600 bg-pink-50\",\n        },\n        \"Bad\": {\n            color: \"text-red-600 bg-red-50\",\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                    Reports\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=\"text-sm mt-12 overflow-x-auto\">\n                <ul rol=\"tablist\" className=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n                    {\n                        tableItems.map((item, idx) => (\n                            <li key={idx} className={`py-2 border-b-2 ${selectedItem == idx ? \"border-indigo-600 text-indigo-600\" : \"border-white text-gray-500\"}`}>\n                                <button\n                                    role=\"tab\"\n                                    aria-selected={selectedItem == idx ? true : false}\n                                    aria-controls={`tabpanel-${idx + 1}`}\n                                    className=\"py-2.5 px-4 rounded-lg duration-150 hover:text-indigo-600 hover:bg-gray-50 active:bg-gray-100 font-medium\"\n                                    onClick={() => setSelectedItem(idx)}\n                                >\n                                    {item.label}\n                                </button>\n                            </li>\n                        ))\n                    }\n                </ul>\n                <table className=\"w-full table-auto text-left\">\n                    <thead className=\"text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"w-9/12 py-4 pr-6\">{tableItems[selectedItem].title}</th>\n                            <th className=\"py-4 pr-6\">Clicks</th>\n                            <th className=\"py-4 pr-6\">Impression</th>\n                        </tr>\n                    </thead>\n                    <tbody className=\"text-gray-600 divide-y\">\n                        {\n                            tableItems[selectedItem].items.map((item, idx) => (\n                                <tr key={idx}>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">{item.prop}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap text-indigo-600\">{item.clicks}</td>\n                                    <td className=\"pr-6 py-4 whitespace-nowrap\">\n                                        <span className={`py-2 px-3 rounded-full font-semibold text-xs ${labelColors[item?.impression]?.color || \"\"}`}>{item.impression}</span>\n                                    </td>\n                                </tr>\n                            ))\n                        }\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    )\n}","label":"App.jsx"}]}}
slug: /tables
id: 326c07d7-8566-4c4f-b7e7-7f4565159e80
created_at: 1668952478996
---

<FUITableWithTabs />