npm i svelte-tables-tailwind

---

Data Types in which the given data can be rendered or changed:

• 1. Import Tailwind via CDN

  
  

  <!-- index.html file -->
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">




• 2. Install

  
  

  npm i svelte-tailwind-table




• 3. Import

  
  

  // in .js file where you want to use this component
  import Tables from "svelte-tailwind-table";




• 4. Using Component

  
  

  // in the same.js file where you want to use this component outside <script></script> tag
  <Tables
  
  // Headers Row
    colname={{
      checkbox: "Checkbox",
      input: "Input",
      string: "String",
      url: "URL",
      mail: "Mail",
      phone: "Phone",
      list: "List",
      image: "Image",
      dropdown: "DropDown",
      number: "Number",
      code: "Code",
      html: "HTML",
      date: "Date",
      time: "Time",
      tag: "Tag",
    }}
    rowdata={[
  // 1st Content Row
      [
      "checked",
      "This is Input",
      "String",
      "URL",
      "you@example.com",
      "+911234567890",
      ["Item1", "Item2"],
      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
      ["Option1", "Option2"],
      "1",
      "this is Code",
      "<div>HTML Hr tag</div><hr/>",
      "2020-09-09",
      "09:21:45",
      "#tag",
      ],
  // For more Rows Keep on providing list similar to 1st Content Row
    ]}
  />

---

+ Developed with ❤️ by Arshdeep Singh