Svelte-Tables-Tailwind

Svelte Tables Tailwind

(Svelte + Tailwind) Table Package which can render and Change the Data Type Format of the given data into the other Data Type Formats.

#sveltejs #svelte #tailwindcss #tables #table #js
Demo Download

Svelte-Tailwind-Table


NPM downloads

npm i svelte-tables-tailwind


npm

Svelte-Tailwind-Table









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

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes