DEV Community

Cover image for DataTable with Svelte and Tailwind
haynajjar
haynajjar

Posted on

DataTable with Svelte and Tailwind

Responsive DataTable with svelte and tailwindcss

Responsive data-table built with svelte and tailwindcss

Installation

    $npm i @fouita/data-table -D
Enter fullscreen mode Exit fullscreen mode

Simple usage

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

DataTable foutia

<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 />
Enter fullscreen mode Exit fullscreen mode

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 foutia

<DataTable {head} rows={data} stripped />
Enter fullscreen mode Exit fullscreen mode

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

DataTable foutia

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

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

DataTable foutia

    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'
    }
Enter fullscreen mode Exit fullscreen mode

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

DataTable foutia

    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'
          },
          // ...
    ]
Enter fullscreen mode Exit fullscreen mode

It goes the same for specific cells like the follwing

DataTable foutia

    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'
          },
          // ...
    ]
Enter fullscreen mode Exit fullscreen mode

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

DataTable foutia

<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 />
Enter fullscreen mode Exit fullscreen mode

Data search

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

DataTable foutia

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>
Enter fullscreen mode Exit fullscreen mode

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} />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)