https://github.com/arshdeepsahni/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.
https://github.com/arshdeepsahni/svelte-tables-tailwind

js svelte sveltejs table tables tailwindcss

Last synced: 23 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/arshdeepsahni/svelte-tables-tailwind
• Owner: ArshdeepSahni
• License: mit
• Created: 2021-07-09T11:26:24.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-19T08:09:11.000Z (over 3 years ago)
• Last Synced: 2024-10-14T19:21:51.612Z (23 days ago)
• Topics: js, svelte, sveltejs, table, tables, tailwindcss
• Language: Svelte
• Homepage: https://www.npmjs.com/package/svelte-tables-tailwind
• Size: 45.9 KB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  






```

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
 


```html

```



  




 2. Install
 


```bash

npm i svelte-tailwind-table

```








 3. Import
 


```javascript

// in .js file where you want to use this component

import Tables from "svelte-tailwind-table";

```



  




 4. Using Component
 


```javascript

// in the same.js file where you want to use this component outside  tag

HTML Hr tag
",

    "2020-09-09",

    "09:21:45",

    "#tag",

    ],

// For more Rows Keep on providing list similar to 1st Content Row

  ]}

/>

```




  










  













```diff

+ Developed with ❤️ by Arshdeep Singh

```