Responsive DataTable with svelte and tailwindcss

Responsive data-table built with svelte and tailwindcss

Installation

    $npm i @fouita/data-table -D

Simple usage

To fill out the table you can add a simple json data and a head attribute to specify what to display.

<script>
    import DataTable from '@fouita/data-table'

    const data = [
          {
            "first_name": "Wynn",
            "last_name": "Donovan",
            "company": "EMTRAK",
            "email": "wynn.donovan@emtrak.io",
            "phone": "+1 (809) 577-3968",
            "address": "555 Freeman Street, Winesburg, New Jersey, 8986"
          },
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            "email": "arlene.cooley@xumonk.us",
            "phone": "+1 (926) 459-2880",
            "address": "659 Dupont Street, Lynn, West Virginia, 7173"
          },
          {
            "first_name": "Jewell",
            "last_name": "Sellers",
            "company": "TECHADE",
            "email": "jewell.sellers@techade.info",
            "phone": "+1 (957) 456-2432",
            "address": "955 Beekman Place, Waikele, Northern Mariana Islands, 341"
          }
    ]

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        email: 'Email',
        phone: 'Phone',
        company: 'Company',
    }


</script>


<DataTable {head} rows={data} hover />

The above example does not show the attribute address because it's not included in the head. You can add a list of selection and update the head list dynamically if you want.

By adding hover we tell the table to change the background of the row when hovering.

Stripped

by adding a stripped prop the table becames like the following

<DataTable {head} rows={data} stripped />

Customizing Header

We can customize the alignement of text, the background/text color of all/some columns.

By adding _class attribute inside the head we can change the style easily

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        email: 'Email',
        phone: 'Phone',
        company: 'Company',
        _class: 'bg-red-200 text-red-700'
    }

To update the entire column we can attribute _class to the specific head property like the following

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        email: 'Email',
        phone: {value: 'Phone', _class: 'text-right bg-blue-200 text-blue-900'},
        company: {value: 'Company', _class: 'text-left'},
        _class: 'bg-red-200 text-red-700'
    }

This will override the global head class style.

Customizing rows/cells

We can customize rows and cells by also adding _class attribute inside the data

    const data = [
          // ... 
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            "email": "arlene.cooley@xumonk.us",
            "phone": "+1 (926) 459-2880",
            "address": "659 Dupont Street, Lynn, West Virginia, 7173",
            _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          // ...
    ]

It goes the same for specific cells like the follwing

    const data = [
          // ... 
           {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            "email": "arlene.cooley@xumonk.us",
            "phone": {
                    value: "+1 (926) 459-2880", 
                    _class: 'text-white bg-green-600 p-5 border-2 border-red-600 text-center'
                },
            "address": "659 Dupont Street, Lynn, West Virginia, 7173",
                _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          // ...
    ]

Sort, Search and Pagination

To keep things simple, the sorting and pagination functions are custom depending on how you are planning to use the DataTable (with preloaded data or you prefer doing server request).

this is an example on how to use them.

Data Sorting

<script>
    import DataTable from '@fouita/data-table'

    let rows = [
          {
            "first_name": "Wynn",
            "last_name": "Donovan",
            "company": "EMTRAK"
          },
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          {
            "first_name": "Jewell",
            "last_name": "Sellers",
            "company": "TECHADE"
          }
    ]

    // define your sort function (call API if you like), it should return an object with 'asc' and 'desc' methods
    const sortFn = (label) => {
        return {
            asc: () => {
                rows = rows.sort((a,b) => a[label]>b[label] ? 1:-1)
            },
            desc: () => {
                rows = rows.sort((a,b) => a[label]<b[label] ? 1:-1)
            }
        }
    }

    // add sort attribute in the column head and call the sort function
    let head= {
        first_name: {
            value: 'First Name', 
            sort: sortFn('first_name')
        },
        last_name: {
            value: 'Last Name', 
            sort: sortFn('last_name')
        },
        company: 'Company',
    }



</script>


<DataTable {head} {rows} hover />

Data search

For the search we can add an input that filter the data rows and return a filtred list, no big deal!

We can create a Search.svelte component like the following

<script>
    export let search = ''
    import {SearchIcon} from 'svelte-feather-icons'
</script>


<div class="flex flex-row" >
    <div class="text-gray-600 border border-gray-400 flex flex-row rounded max-w-xs my-3 bg-white" >
        <input type="search" bind:value={search} placeholder="Search..." class="h-10 w-64 rounded text-sm focus:outline-none px-3">
        <button class="m-3 focus:outline-none" >
            <SearchIcon class="w-4 h-4" />
        </button>
    </div>
</div>

And then use it with the search function, we can use Fuse for simple search

<script>
    import DataTable from '@fouita/data-table'
    import Fuse from 'fuse.js/dist/fuse.min.js';
    import Search from './Search.svelte'

    const users = [
          {
            "first_name": "Wynn",
            "last_name": "Donovan",
            "company": "EMTRAK"
          },
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          {
            "first_name": "Jewell",
            "last_name": "Sellers",
            "company": "TECHADE"
          }
    ]

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        company: 'Company'
    }

    let rows = users
    let keywords = ''
    const options = {
      keys: ['first_name', 'last_name', 'company']
    }
    const fuse = new Fuse(rows, options)

    let keywords=''

    $: if(keywords){
        // Call server here if you need server request
        let result = fuse.search(keywords)
        rows = result.map(r => r.item)
    }

    $: if(keywords==''){
        rows = users
    }
</script>

<Search />
<DataTable {head} {rows} />

Pagination

for the pagination you can checkout Fouita Pagination and update the data each time you navigate (it's very simple!)

Source code

Svelte and tailwindcss DataTable

Blog

DataTable with Svelte and Tailwind

haynajjar