TailwindCSS instead Bootstrap

[mtzrmzia]

Is not an issue, but i have a question.
I know there is an option to override the bootstrap classes, but i really dont understand this part, where should i put the mixins/tailwind.js? i already working with tailwindCSS in my project.
is there another way to make it less laborious?

[jamesdordoy]

Hey @IsidroMar95,

It's funny you bring this up. I had the exact same issue earlier working on my portfolio.

I agree it is laborious to create a mixin with each style defined on the table but i'm not sure there is a better approach at the moment as you are currently also able to dynamically change the column/table/row styles during events as they are props.

My approach was to create a wrapper component:

<template>
    <data-table
        theme="dark"
        :url="url"
        :classes="classes"
        :columns="columns">
    </data-table>
</template>

export default {
    props: {
        url: {

        },
        columns: {

        },
    },
    data() {
        return {
            classes: { 
                'table-container': {
                    'justify-center': true,
                    'w-full': true,
                    'flex': true,
                    'rounded': true,
                    'mb-6': true,
                    'shadow-md': true,
                },
                table: {
                    'text-left': true,
                    'w-full': true,
                    'border-collapse': true,
                },
                't-head': {
                    'text-grey-dark': true,
                    'bg-black': true,
                    'border-grey-light': true,
                    'py-4': true,
                    'px-6': true,
                },
                "t-body": {
                    'bg-grey-darkest': true,
                    
                },
                "t-head-tr": {
                    
                },
                "t-body-tr": {
                    'stripped-table': true,
                    'bg-grey-darkest': true,
                },
                "td": {
                    'py-4': true,
                    'px-6': true,
                    'border-b': true,
                    'border-grey-light': true,
                    'text-grey-light': true,
                },
                "th": {
                    'py-4': true,
                    'px-6': true,
                    'font-bold': true,
                    'uppercase': true,
                    'text-sm': true,
                    'text-grey-dark': true,
                    'border-b': true,
                    'border-grey-light': true,
                },
            }
        };
    },
}

That way the classes and props are segregated to a single component. Ideally i would love to add themes for different css frameworks but this is not something i'm familia with.

Apologies if this doesn't help.

[mtzrmzia]

yes, it's easier as you put it, but how can I customize the pagination, the search input and also the dropdown?
here's what I've been able to customize so far:

but I'd like it to look more or less like this:

i would live to override the whole component, I don't know how to customize input, dropdown or pagination.

[jamesdordoy]

Ahh, here is a full example with everything:

Table

<template>
    <data-table
       :url="url"
        :classes="classes"
        :columns="columns">
        <span slot="filters" slot-scope="{ tableData, perPage }">
            <data-table-filters
                :classes="classes"
                :table-data="tableData"
                :per-page="perPage">
            </data-table-filters>
        </span>
    </data-table>
</template>

export default {
    props: {
        url: {

        },
        columns: {

        },
    },
    data() {
        return {
            classes: { 
                'table-container': {
                    'justify-center': true,
                    'w-full': true,
                    'flex': true,
                    'rounded': true,
                    'mb-6': true,
                    'shadow-md': true,
                },
                table: {
                    'text-left': true,
                    'w-full': true,
                    'border-collapse': true,
                },
                't-head': {
                    'text-grey-dark': true,
                    'bg-black': true,
                    'border-grey-light': true,
                    'py-4': true,
                    'px-6': true,
                },
                "t-body": {
                    'bg-grey-darkest': true,
                    
                },
                "t-head-tr": {
                    
                },
                "t-body-tr": {
                    'stripped-table': true,
                    'bg-grey-darkest': true,
                },
                "td": {
                    'py-4': true,
                    'px-6': true,
                    'border-b': true,
                    'border-grey-light': true,
                    'text-grey-light': true,
                },
                "th": {
                    'py-4': true,
                    'px-6': true,
                    'font-bold': true,
                    'uppercase': true,
                    'text-sm': true,
                    'text-grey-dark': true,
                    'border-b': true,
                    'border-grey-light': true,
                },
            }
        };
    },
}

Filters

<template>
    <div class="flex w-full mt-4">
        <div class="flex  w-1/2">
            <div class="inline-block relative w-32">
                <select
                    @change="getData()"
                    v-model="tableData.length"
                    class="input-generic focus:outline-none focus:bg-white">
                    <option
                        :key="index"
                        :value="records"
                        v-for="(records, index) in perPage">{{records}}</option>
                </select>
                <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 pb-3 text-grey-darker">
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="flex w-1/2 justify-end">
            <div class="flex w-1/2 justify-end"></div>
            <div class="flex w-1/2 justify-end">
                <text-input
                    name="name"
                    @input="getData()"
                    v-model="tableData.search"
                    placeholder="Search Table">
                </text-input>
            </div>
        </div>
    </div>
</template>

export default {
    methods: {
        getData() {
            this.$emit("getData");
        }
    },
    props: [
        "tableData", "perPage"
    ]
}

I don't have a pagination example as i use custom components but you can easily implement your own pagination using the links provided by Laravel. The url is watched by the datatable component so if you make changes to the pagination, filters, etc. you are able to reload the table

[jamesdordoy]

I will provided a full example for you in the morning otherwise based on your table.

[mtzrmzia]

wow thanks, i'll give it a try and i will let you know, this is the closest package that's let me use tailwindcss in the front.

[jamesdordoy]

Hey @IsidroMar95,

You can find a Tailwind example here on the docs.

It may require a little tweaking style-wise but hopefully is enough to get started with how you wanted the table to look.

Let me know if can help anymore.

[mtzrmzia]

thanks @jamesdordoy i'll check it out and i'll let you know, but so far seems what is i'm looking for.

[mtzrmzia]

@jamesdordoy is working super cool. Thank you for your time and for example, it has been helpful to me, one last doubt:

1. Can the pagination [10,25,50] dropdown also be customized? how can I integrate it in TailwindDataTable component?
2. which icon are u using for the DataTableDropdownCell component.

here's what I've been able to customize so far:

can i send you an email ?

[jamesdordoy]

@IsidroMar95 Awesome, i'm glad it helped.

1: Your filters slot can also take the perPage slot scope e.g.

<div slot="filters" class="flex" slot-scope="{ tableData = {}, perPage = [] }">

You can then loop over the values and set a v-model directive on the on tableData.length to adjust the length of the table e.g.:

<div class="relative">
    <select
        v-model="tableData.length"
        class="block appearance-none w-full border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
        <option
            :key="index"
            :value="records"
            v-for="(records, index) in perPage">{{records}}</option>
    </select>
    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
    </div>
</div>

To adjust the values in the perPage array, you can add a prop per-page to the datatable and specify your own. You can find out more here.

2: This one :) https://fontawesome.com/icons/ellipsis-v?style=solid

[jamesdordoy]

I've slightly updated the example on the docs to accommodate the table length.

Can be found here.

Hopefully the you don't have the same issue with them.

[mtzrmzia]

Thank @jamesdordoy now works as expected except for one thing, i dont know why the th dont show the order icon, it need an extra config to show them?

anyway set them up in vue (app.js)

require("./bootstrap");

window.Vue = require("vue");
import DataTable from 'laravel-vue-datatable';
import { library } from '@fortawesome/fontawesome-svg-core'
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
import { faSort } from '@fortawesome/free-solid-svg-icons'
import { faSortDown } from '@fortawesome/free-solid-svg-icons'
import { faSortUp } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

Vue.use(DataTable);
library.add(faEllipsisV)
library.add(faSort)
library.add(faSortDown)
library.add(faSortUp)


Vue.component('tailwind-data-table', require('./components/TDataTable/TailwindDataTable.vue').default)
Vue.component('font-awesome-icon', FontAwesomeIcon)

const app = new Vue({
    el: "#app"
});

But they don't show up

[jamesdordoy]

The column sort icons are really hard coded divs with styles attached so there should be no need for additional icon includes.

Ironically, i cannot get them to show up either on my personal projects. I don't know why they aren't showing but ill try and get this corrected tomorrow as well.

[mtzrmzia]

Thank you so much, I’ll wait to tomorrow ✌🏾. You don’t have any idea how much you helped me 🙏🏾
pd: i sent you an email @jamesdordoy