stt

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.

Showing:

Popularity

Downloads/wk

9

GitHub Stars

10

Maintenance

Last Commit

2mos ago

Contributors

1

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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



PropAboutDefault ValueFormal
colnameJSON of Headers of Table with dataTypes as Keys{ "string" : "Column1" , "number" : "0" }{ "DataType" : "Header" , ...}
rowdataList of Lists of row's Data of Table[ [ "String1" , "1" ] , [ "String2" , "2" ] ][ [] , ... ]
urlLink to Redirect when Clicked on Table DataNAString
clickCall a Function when Clicked on Table DataNA() => {}







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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100