npm i svelte-tables-tailwind

---

---

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

		DATA TYPES
✅Checkbox	✍️Input	🔤String	🌐URL	✉️Mail
☎️Phone	[ , ] list	🖼Image	🔽Dropdown	🔢Number
⌨Code	<HTML/>	🗓Date	🕘Time	🏷Tag

---

Props

Prop	About	Default Value	Formal
colname	JSON of Headers of Table with dataTypes as Keys	{ "string" : "Column1" , "number" : "0" }	{ "DataType" : "Header" , ...}
rowdata	List of Lists of row's Data of Table	[ [ "String1" , "1" ] , [ "String2" , "2" ] ]	[ [] , ... ]
url	Link to Redirect when Clicked on Table Data	NA	String
click	Call a Function when Clicked on Table Data	NA	() => {}

---

Steps To Use thus Plugin:

• 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