2.0.1 • Published 3 years ago

vue-laravel-tablewind v2.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

vue-laravel-tablewind

Laravel datatable wrapper with Vue JS and Tailwind CSS.

This package required Vue 3 to work, please refer here if you use Vue 2

This package is no longer maintain by the owner.

Please visit laravel-vue-datatables for the new package.

Installation

Install using package manager:

npm install vue-laravel-tablewind

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <LaravelTablewind
    data-uri="https:://mydomain.com/table"
    v-model:columns="columns"
  />
</template>

<script>
import LaravelTablewind from 'vue-laravel-tablewind';
require('vue-laravel-tablewind/dist/vue-laravel-tablewind.css');

export default {
  name: 'MyComponent',
  components: {
    LaravelTablewind,
  },
  ...
}
</script>

Usage

v-model

<template>
  <LaravelTablewind
    data-uri="https:://mydomain.com/table"
    v-model:columns="columns"
  />
</template>

Please refer to columns props for detailed usage and explanation.

<template>
  <LaravelTablewind
    data-uri="https:://mydomain.com/table"
    v-model:columns="columns"
    with-select
    v-model:checked="yourCheckedModel"
    selected-key="isSelected"
  />
</template>

Used for get selected row if you use with-select props.

Props

Table Props

[]

query="foo=bar&hello=world"
:query='[ "foo=bar", "hello=world" ]'
:query='{ "foo": "bar", "hello": "world" }'

Generate table caption with <caption> tag

[
  "w-full",
  "table-auto",
  "border-collapse",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
[
  "bg-gray-300",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

true

[
  "group-hover:bg-gray-200"
]
"group-hover:font-bold group-hover:text-blue-400"
[
  "group-hover:font-bold",
  "group-hover:text-blue-400"
]
{
  "group-hover:font-bold": true,
  "group-hover:text-blue-400": true
}

true

'No records found.'

Checkbox Props

false

'isSelected'

[
  "rounded-md",
  "w-6",
  "h-6",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

Grid Props

'responsive'

Accept: 'responsive', 'always' or 'never'

[
  "shadow-lg",
  "p-4",
  "border",
  "border-gray-400",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

6

Search Field Props

false

'Search...'

[
  "appearance-none",
  "border",
  "border-transparent",
  "bg-white",
  "text-black",
  "placeholder-gray-400",
  "shadow-md",
  "rounded-lg",
  "text-base",
  "focus:outline-none",
  "focus:ring-2",
  "focus:ring-indigo-400",
  "focus:border-transparent",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

Refresh Button Props

false

'Reload'

[
  "focus:outline-none",
  "w-32",
  "py-2",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

Pagination Props

false

false

false

false

[
  "appearance-none",
  "border",
  "border-transparent",
  "w-full",
  "pr-8",
  "bg-white",
  "text-black",
  "placeholder-gray-400",
  "shadow-md",
  "rounded-lg",
  "text-base",
  "focus:outline-none",
  "focus:ring-2",
  "focus:ring-indigo-400",
  "focus:border-transparent",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

'Rows per page:'

10

[
  "appearance-none",
  "border",
  "border-transparent",
  "w-full",
  "pr-8",
  "bg-white",
  "text-black",
  "placeholder-gray-400",
  "shadow-md",
  "rounded-lg",
  "text-base",
  "focus:outline-none",
  "focus:ring-2",
  "focus:ring-indigo-400",
  "focus:border-transparent",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

[ 10, 20, 50 ]

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]
"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}
"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

Columns Props

This props used to render columns and basic formating value, you can modified inside columns 

export default {
  ...
  data() {
    return {
      columns: [
        {
          uniqid: 'username',
          label: 'Username',
          field: 'username', // or use (row) => row.user.username
          visible: true,
          sortable: true,
          sortOrder: 'asc',
          align: 'center',
          format: (val, row) => `Username: ${val}`
          headerClass: 'py-4',
          classes: [
            'py-2',
            'font-bold',
            'text-blue-600'
          ],
        },
        {
          uniqid: 'fullName',
          label: 'Full Name',
          field: 'firstName',
          format: (val, row) => `${val} ${row.lastName}`
          headerClass: {
            'py-4': true
          },
        },
        ...
      ]
    }
  }
}
(row) => row.id

Row Object property to determine value for this column or function which maps to the required property.You can use

"field": "foo"

// or as function

"field": (row) => row.user.foo

true

false

'asc'

Sort column sort order.Accept: 'asc' or 'desc'

'left'

Horizontal alignment of cells in this column.Accept: 'left', 'center' or 'right'

(val, row) => `${val}`

Class for <th> tag

"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}

Style for <th> tag

"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

Class for <td> tag

"font-bold text-blue-400"
[
  "font-bold",
  "text-blue-400"
]
{
  "font-bold": true,
  "text-blue-400": true
}

Style for <td> tag

"background-color: red"
[
  "background-color: red",
  "color: blue"
]
{
  "backgroundColor": "red",
  "fontWeight": "bold"
}

Slots

Title of your table

<template #title>
  Insert your title here!
</template>

Used if you want to add content left of search field on tablet and desktop and top of search field on mobile

<template #beforeSearch>
  This will render on the left of search field
</template>

Slot for search field icon

<template #iconSearch>
  <svg class="w-4 h-4 absolute left-2.5 top-3.5 pointer-events-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </svg>
</template>

Used if you want to add content right of search field on tablet and desktop and bottom of search field on mobile

<template #afterSearch>
  This will render on the right of search field
</template>

Used if you want to add content left of reload button on tablet and desktop and top of reload button on mobile

<template #beforeButton>
  This will render on the left of reload button
</template>

Slot to customize label reload button

<template #labelReloadBtn>
  <div class="flex flex-row items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="current-stroke stroke-2 text-white" viewBox="0 0 16 16">
      <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
      <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
    </svg>
    <span>Refresh Data</span>
  </div>
</template>

Used if you want to add content right of reload button on tablet and desktop and bottom of reload button on mobile

<template #afterButton>
  This will render on the right of reload button
</template>

Used to customize text when no data found in table

<template #labelNoRecord>
  <p class="font-bold text-lg text-red-600">Oops, sorry we cannot find any matching data.</p>
</template>

Used to customize loader inside table

<template #loader>
  <div class="flex flex-row p-4 bg-white items-center shadow-md">
    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
    </svg>
    <span class="text-lg">Loading</span>
  </div>
</template>

Used if you want to add content left of pagination label on tablet and desktop and top of pagination label on mobile

<template #beforePaginationLabel>
  This will render on the left of pagination label
</template>

Used to show count of data in table.

from used to show first data,

to used to show last data, and

total used to show total data

<template #paginationLabel="{ from, to, total }">
  <span class="text-bold">Showing {{ from }} - {{ to }} from total {{ total }} data.</span>
</template>

Used if you want to add content right of pagination label on tablet and desktop and bottom of pagination label on mobile

<template #afterPaginationLabel>
  This will render on the right of pagination label
</template>

Used if you want to add content left of navigation button on tablet and desktop and top of navigation button on mobile

<template #beforeNavigation>
  This will render on the left of navigation bar
</template>

Used if you want to add content right of navigation button on tablet and desktop and bottom of navigation button on mobile

<template #afterNavigation>
  This will render on the right of navigation bar
</template>

Used to customize text data per page.

<template #labelRowsPerPage>
  <span class="text-bold">Data per page:</span>
</template>

Used to customize icon inside first page navigation button

<template #iconFirstNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z"/>
  </svg>
</template>

Used to customize icon inside previous page navigation button

<template #iconPrevNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
  </svg>
</template>

Used to customize icon inside next page navigation button

<template #iconNextNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
  </svg>
</template>

Used to customize icon inside last page navigation button

<template #iconLastNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/>
  </svg>
</template>

Footer content of your table

<template #footer>
  Insert your footer here!
</template>

Used to customize icon for ascending icon if you used sortable

<template #iconAscending>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="current-stroke stroke-2" viewBox="0 0 16 16">
    <path d="M3.5 3.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 12.293V3.5zm4 .5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z"/>
  </svg>
</template>

Used to customize icon for descending icon if you used sortable

<template #iconDescending>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="current-stroke stroke-2" viewBox="0 0 16 16">
    <path d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z"/>
  </svg>
</template>

Used to customize checkbox label inside grid header

<template #labelCheckboxGridHeader>
  <span class="text-lg font-bold">
    Selected
  </span>
</template>

Dynamic Slots

Used to customize label in table header for spesific cell identified by uniqid

uniqid is required as identity of cell header it must be unique, type of uniqid is string, uniqid based on passed data from controller

<template #cell-header-fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>

Used to customize cell value in table cell for spesific cell identified by uniqid

uniqid is required as identity of cell inside table it must be unique, type of uniqid is string, uniqid based on passed data from controller

This slot has 2 arguments:

value is data value has been formated.

row is data object

<template #cell-body-fullName="{ value, row }">
  <p class="text-blue-600 leading-5">Formatted Value: {{ value }}</p>
  <p class="text-blue-600 leading-5">Unformatted Value: {{ row.first_name }} {{ row.last_name }}</p>
</template>

Used to customize label for spesific header identified by uniqid

uniqid is required as identity of cell inside table it must be unique, type of uniqid is string, uniqid based on passed data from controller

<template #grid-header-fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>

Used to customize grid value for spesific row identified by uniqid

uniqid is required as identity of cell inside table it must be unique, type of uniqid is string, uniqid based on passed data from controller

This slot has 2 arguments:

value is data value has been formated.

row is data object

<template #grid-body-fullName="{ value, row }">
  <p class="text-blue-600 leading-5">Formatted Value: {{ value }}</p>
  <p class="text-blue-600 leading-5">Unformatted Value: {{ row.first_name }} {{ row.last_name }}</p>
</template>

Sent Request

Example sent request to your server:

[
  "search" => NULL,
  "page" => "1",
  "per_page" => "10",
  "sortOrder" => [
    [
      "column" => "first_name",
      "order" => "asc",
    ],
    [
      "column" => "email",
      "order" => "desc",
    ],
  ],
]

If you add :query='[ "foo=bar", "hello=world" ]' to your query props, it will send

[
  "search" => NULL,
  "page" => "1",
  "per_page" => "10",
  "sortOrder" => [
    [
      "column" => "carlicense",
      "order" => "asc",
    ],
    [
      "column" => "terid",
      "order" => "asc",
    ],
  ],
  "foo" => "bar",
  "hello" => "world",
]

Laravel Response

Expected Response example from your server:

{
    "current_page": 1,
    "data": [
        {
            "id": 1,
            "first_name": "John",
            "last_name": "Doe",
            "email": "john@example.com",
            "phone": "00990025196",
            "created_at": "2021-06-25 08:37:09",
            "updated_at": "2021-06-25 08:37:09",
            "isSelected": true,
            ...
        },
        ...
    ],
    "first_page_url": "http://example.com/table?page=1",
    "from": 1,
    "last_page": 17,
    "last_page_url": "http://example.com/table?page=17",
    "next_page_url": "http://example.com/table?page=2",
    "path": "http://example.com/table",
    "per_page": 10,
    "prev_page_url": null,
    "to": 10,
    "total": 163

}

Notes!!

You may use the withQueryString method if you would like to append all of the current request's query string values to the pagination links.

$users = User::paginate($request->input('per_page'))->withQueryString();

License

MIT

vuevue3laraveltabledatatabletailwindcss
lodash
2.0.1

3 years ago

1.0.0

3 years ago

2.0.0

3 years ago

1.0.0-beta.2

3 years ago

1.0.0-beta

3 years ago