---
title: Table with checkbox
category: Application
paid: false
isActive: true
ltr: {"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=\"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=\"#\" 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=\"text-gray-600 font-medium border-b\">\n          <tr>\n            <th class=\"py-3 px-6 flex items-center gap-x-4\">\n              <div>\n                <input type=\"checkbox\" v-model=\"areAllChecked\" @click=\"handleCheckboxItems\" />\n                Username\n              </div>\n            </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=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-4\">\n              <input type=\"checkbox\" v-model=\"checkboxItems[`checkbox${idx}`]\" @click=\"handleCheckboxChange(idx)\" />\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            <td class=\"text-right px-6 whitespace-nowrap\">\n              <a href=\"#\" class=\"py-2 px-3 font-medium text-indigo-600 hover:text-indigo-500 duration-150 hover:bg-gray-50 rounded-lg\">Edit</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\">Delete</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        { 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      areAllChecked: false,\n      checkboxItems: {}\n    };\n  },\n   mounted() {\n    let initialCheckboxItems = {};\n    this.tableItems.forEach((_, idx) => {\n      initialCheckboxItems[`checkbox${idx}`] = false;\n    });\n    this.checkboxItems = initialCheckboxItems;\n  },\n  methods: {\n    handleCheckboxItems() {\n      this.areAllChecked = !this.areAllChecked;\n      let updatedCheckboxItems = { ...this.checkboxItems };\n      this.tableItems.forEach((_, idx) => {\n        updatedCheckboxItems[`checkbox${idx}`] = this.areAllChecked;\n      });\n      this.checkboxItems = updatedCheckboxItems;\n    },\n    handleCheckboxChange(idx) {\n      this.checkboxItems = {\n        ...this.checkboxItems,\n        [`checkbox${idx}`]: !this.checkboxItems[`checkbox${idx}`]\n      };\n      if (Object.values(this.checkboxItems).every(val => val)) {\n        this.areAllChecked = true;\n      } else {\n        this.areAllChecked = false;\n      }\n    }\n  }\n};\n</script>\n"}]},"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\n  let areAllChecked = false;\n  let checkboxItems = {};\n\n  tableItems.forEach((_, idx) => {\n    checkboxItems[`checkbox${idx}`] = false;\n  });\n\n  function handleCheckboxItems() {\n    areAllChecked = !areAllChecked;\n    for (let idx in tableItems) {\n      checkboxItems[`checkbox${idx}`] = areAllChecked;\n    }\n    checkboxItems = { ...checkboxItems }; // To trigger reactive update\n  }\n\n  function handleCheckboxChange(event, idx) {\n    areAllChecked = false;\n    checkboxItems[`checkbox${idx}`] = event.target.checked;\n    if (Object.values(checkboxItems).every(val => val === true)) areAllChecked = true;\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\">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>\n        </div>\n        <div class=\"mt-3 md:mt-0\">\n            <a href=\"#\" 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\">Add member</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=\"text-gray-600 font-medium border-b\">\n                <tr>\n                    <th class=\"py-3 px-6 flex items-center gap-x-4\">\n                        <div>\n                            <input id=\"checkbox-all-items\" type=\"checkbox\" bind:checked={areAllChecked} on:click={handleCheckboxItems} class=\"checkbox-item peer hidden\" />\n                            <label for=\"checkbox-all-items\" class=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"></label>\n                        </div>\n                        Username\n                    </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 (idx)}\n                    <tr class=\"odd:bg-gray-50 even:bg-white\">\n                        <td class=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-4\">\n                            <div>\n                                <input type=\"checkbox\" id={'checkbox-' + idx} bind:checked={checkboxItems[`checkbox${idx}`]} on:click={e => handleCheckboxChange(e, idx)} class=\"checkbox-item peer hidden\" />\n                                <label for={'checkbox-' + idx} class=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"></label>\n                            </div>\n                            <span>{item.name}</span>\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                        <td class=\"text-right px-6 whitespace-nowrap\">\n                            <a href=\"#\" class=\"py-2 px-3 font-medium text-indigo-600 hover:text-indigo-500 duration-150 hover:bg-gray-50 rounded-lg\">Edit</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\">Delete</button>\n                        </td>\n                    </tr>\n                {/each}\n            </tbody>\n        </table>\n    </div>\n</div>\n"}]},"html":{"htmlTail":[{"code":"<div x-data=\"dataHandler()\" 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\">\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-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=\"text-gray-600 font-medium border-b\">\n                <tr>\n                    <th class=\"py-3 px-6 flex items-center gap-x-4\">\n                        <div>\n                            <input type=\"checkbox\" id=\"checkbox-all-items\" class=\"checkbox-item peer hidden\"\n                                   x-model=\"areAllChecked\"\n                                   @click=\"handleCheckboxItems\">\n                            <label for=\"checkbox-all-items\" class=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"></label>\n                        </div>\n                        Username\n                    </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 class=\"odd:bg-gray-50 even:bg-white\">\n                        <td class=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-4\">\n                            <div>\n                                <input type=\"checkbox\" :id=\"'checkbox-' + idx\" :name=\"'checkbox-' + idx\" class=\"checkbox-item peer hidden\"\n                                       :checked=\"checkboxItems[`checkbox${idx}`]\"\n                                       @click=\"handleCheckboxChange($event, idx)\">\n                                <label :for=\"'checkbox-' + idx\" class=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"></label>\n                            </div>\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                        <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\">Edit</a>\n                            <button href=\"javascript:void(0)\" class=\"py-2 leading-none px-3 font-medium text-red-600 hover:text-red-500 duration-150 hover:bg-gray-50 rounded-lg\">Delete</button>\n                        </td>\n                    </tr>\n                </template>\n            </tbody>\n        </table>\n    </div>\n</div>\n\n<script>\n    function dataHandler() {\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            areAllChecked: false,\n            checkboxItems: {},\n            handleCheckboxItems() {\n                this.areAllChecked = !this.areAllChecked;\n                this.tableItems.forEach((_, idx) => {\n                    this.checkboxItems[`checkbox${idx}`] = this.areAllChecked;\n                });\n            },\n            handleCheckboxChange(e, idx) {\n                this.areAllChecked = false;\n                this.checkboxItems[`checkbox${idx}`] = e.target.checked;\n                if (Object.values(this.checkboxItems).every(val => val === true)) this.areAllChecked = true;\n            },\n            init() {\n                this.tableItems.forEach((_, idx) => {\n                    this.checkboxItems[`checkbox${idx}`] = false;\n                });\n            }\n        };\n    }\n</script>\n","label":"index.html"}]},"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    const [areAllChecked, setAllChecked] = useState(false)\n    let [checkboxItems, setCheckboxItem] = useState({})\n\n    // set or unset all checkbox items\n    const handleCheckboxItems = () => {\n        setAllChecked(!areAllChecked)\n        tableItems.forEach((item, idx) => {\n            checkboxItems[`checkbox${idx}`] = !areAllChecked\n            setCheckboxItem({ ...checkboxItems })\n        })\n    }\n\n    // Update checked value\n    const handleCheckboxChange = (e, idx) => {\n        setAllChecked(false)\n        setCheckboxItem({ ...checkboxItems, [`checkbox${idx}`]: e.target.checked })\n    }\n\n    useEffect(() => {\n        // Set properties with false value\n        tableItems.forEach((item, idx) => {\n            checkboxItems[`checkbox${idx}`] = false\n            setCheckboxItem({ ...checkboxItems })\n        })\n    }, [])\n\n    useEffect(() => {\n        // Check if all checkbox items are checked and update setAllChecked state\n        const checkboxItemsVal = Object.values(checkboxItems)\n        const checkedItems = checkboxItemsVal.filter(item => item == true)\n        if (checkedItems.length == tableItems.length) setAllChecked(true)\n    }, [checkboxItems])\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=\"text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"py-3 px-6 flex items-center gap-x-4\">\n                                <div>\n                                    <input type=\"checkbox\" id=\"checkbox-all-items\" className=\"checkbox-item peer hidden\"\n                                        checked={areAllChecked}\n                                        onChange={handleCheckboxItems}\n                                    />\n                                    <label\n                                        htmlFor=\"checkbox-all-items\"\n                                        className=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"\n                                    >\n                                    </label>\n                                </div>\n                                Username\n                            </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} className=\"odd:bg-gray-50 even:bg-white\">\n                                    <td className=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-4\">\n                                        <div>\n                                            <input type=\"checkbox\" id={`checkbox-${idx}`} name={`checkbox-${idx}`} className=\"checkbox-item peer hidden\"\n                                                checked={checkboxItems[`checkbox${idx}`]}\n                                                onChange={(e) => handleCheckboxChange(e, idx)}\n                                            />\n                                            <label\n                                                htmlFor={`checkbox-${idx}`}\n                                                className=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"\n                                            >\n                                            </label>\n                                        </div>\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                                    <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":{"jsxCss":[],"jsxTail":[{"code":"import { useEffect, useState } from \"react\"\n\nexport 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    const [areAllChecked, setAllChecked] = useState(false)\n    let [checkboxItems, setCheckboxItem] = useState({})\n\n    // set or unset all checkbox items\n    const handleCheckboxItems = () => {\n        setAllChecked(!areAllChecked)\n        tableItems.forEach((item, idx) => {\n            checkboxItems[`checkbox${idx}`] = !areAllChecked\n            setCheckboxItem({ ...checkboxItems })\n        })\n    }\n\n    // Update checked value\n    const handleCheckboxChange = (e, idx) => {\n        setAllChecked(false)\n        setCheckboxItem({ ...checkboxItems, [`checkbox${idx}`]: e.target.checked })\n    }\n\n    useEffect(() => {\n        // Set properties with false value\n        tableItems.forEach((item, idx) => {\n            checkboxItems[`checkbox${idx}`] = false\n            setCheckboxItem({ ...checkboxItems })\n        })\n    }, [])\n\n    useEffect(() => {\n        // Check if all checkbox items are checked and update setAllChecked state\n        const checkboxItemsVal = Object.values(checkboxItems)\n        const checkedItems = checkboxItemsVal.filter(item => item == true)\n        if (checkedItems.length == tableItems.length) setAllChecked(true)\n    }, [checkboxItems])\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=\"text-gray-600 font-medium border-b\">\n                        <tr>\n                            <th className=\"py-3 px-6 flex items-center gap-x-4\">\n                                <div>\n                                    <input type=\"checkbox\" id=\"checkbox-all-items\" className=\"checkbox-item peer hidden\"\n                                        checked={areAllChecked}\n                                        onChange={handleCheckboxItems}\n                                    />\n                                    <label\n                                        htmlFor=\"checkbox-all-items\"\n                                        className=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"\n                                    >\n                                    </label>\n                                </div>\n                                Username\n                            </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} className=\"odd:bg-gray-50 even:bg-white\">\n                                    <td className=\"px-6 py-4 whitespace-nowrap flex items-center gap-x-4\">\n                                        <div>\n                                            <input type=\"checkbox\" id={`checkbox-${idx}`} name={`checkbox-${idx}`} className=\"checkbox-item peer hidden\"\n                                                checked={checkboxItems[`checkbox${idx}`]}\n                                                onChange={(e) => handleCheckboxChange(e, idx)}\n                                            />\n                                            <label\n                                                htmlFor={`checkbox-${idx}`}\n                                                className=\"relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45\"\n                                            >\n                                            </label>\n                                        </div>\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                                    <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"}]}}
slug: /tables
id: e102cc33-93d0-4df3-b1bb-9513f502a160
created_at: 1668952310953
---

<FUITableWithCheckbox />