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.
MIT License
Downloads
8
Stars
11
npm i svelte-tables-tailwind
| DATA TYPES | ||||
|---|---|---|---|---|
| ✅Checkbox | ✍️Input | 🔤String | 🌐URL | ✉️Mail |
| ☎️Phone | [ , ] list | 🖼Image | 🔽Dropdown | 🔢Number |
| ⌨Code | <HTML/> | 🗓Date | 🕘Time | 🏷Tag |
| 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 | () => {} |
<!-- index.html file -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
npm i svelte-tailwind-table
// in .js file where you want to use this component
import Tables from "svelte-tailwind-table";
// 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",
"[email protected]",
"+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
Package Rankings
Top 38.75% on Npmjs.org