laravel-vue-datatable Tailwind Templates

Laravel Vue Datatable

Laravel datatable wrapper with Vue JS and Tailwind CSS

#laravel #vuejs #tailwindcss #table #tailwind #tailwind-css #vue #datatables
Download

laravel-vue-datatables

Laravel datatable wrapper with Vue JS and Tailwind CSS.



Example

DEMO on codesandbox



Table of Contents



Installation

Install using package manager:

npm install laravel-vue-datatables

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
  />
  
  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
  />

  -->
</template>

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

export default {
  name: 'MyComponent',
  components: {
    LaravelVueDatatables,
  },
  data() {
    return {
      columns: [
        {
          uniqid: 'firstName',
          label: 'Full Name',
          field: 'first_name',
          visible: true,
          sortable: true,
          sortOrder: 'asc',
          align: 'center',
          format: (val, row) => `${val} ${row.last_name}`,
          classes: 'py-2 font-bold text-blue-600',
          headerClass: 'py-4',
        },
        ...
      ]
    }
  }
  ...
}
</script>



Usage

v-model

Name Type Mandatory Description
columns Array Yes 
<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
  />

  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
  />
  
  -->
</template>

Please refer to columns props for detailed usage and explanation.
checked Array Optional 
<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
    with-select
    v-model:checked="yourCheckedModel"
    selected-key="isSelected"
  />

  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
    with-select
    :checked.sync="yourCheckedModel"
    selected-key="isSelected"
  />
  
  -->
</template>

Your v-model to get selected row if you use with-select props.
loading Boolean Optional 
<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
    v-model:loading="yourLoadingModel"
  />

  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
    :loading.sync="yourLoadingModel"
  />
  
  -->
</template>

Get loading state from datatable



Props


Table Props

Name Type Mandatory Default Value Description
route String Yes Enter your laravel uri for laravel-vue-datatables to get data from.
query [ String, Array, Object ] Optional

[]

 Add your custom query parameters before get data from your laravel server.



Example as string:

query="foo=bar&hello=world"

Example as array:

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

Example as object:

:query='{ "foo": "bar", "hello": "world" }'
title String Optional

Generate table title.

Note: This props will be rendered above search field, if you want to add above the table use after.data-table slot.
caption String Optional

Generate table caption with <caption> tag
table-class [ String, Array, Object ] Optional 
[
  "w-full",
  "table-auto",
  "border-collapse",
]

Example as string:

"font-bold text-blue-400"

Example as array:

[
  "font-bold",
  "text-blue-400"
]

Example as object:

{
  "font-bold": true,
  "text-blue-400": true
}
table-style [ String, Array, Object ] Optional

Example as string:

"background-color: red"

Example as array:

[
  "background-color: red",
  "color: blue"
]

Example as object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
thead-class [ String, Array, Object ] Optional 
[
  "bg-gray-300",
]

Example as string:

"font-bold text-blue-400"

Example as array:

[
  "font-bold",
  "text-blue-400"
]

Example as object:

{
  "font-bold": true,
  "text-blue-400": true
}
thead-style [ String, Array, Object ] Optional

Example as string:

"background-color: red"

Example as array:

[
  "background-color: red",
  "color: blue"
]

Example as object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
hoverable Boolean Optional

true

 Table row hover
hover-class [ String, Array, Object ] Optional 
[
  "group-hover:bg-gray-200"
]

Example as String

"group-hover:font-bold group-hover:text-blue-400"

Example as Array

[
  "group-hover:font-bold",
  "group-hover:text-blue-400"
]

Example as Object

{
  "group-hover:font-bold": true,
  "group-hover:text-blue-400": true
}

Note: If you use tailwind css please use group-hover state
disable-loader Boolean Optional

false

 Disable table loading message
loader-type String Optional

false

Accept 'block', 'bar', 'dual'

'block' will show loading message top of datatable

'bar' will show loading bar on top of datatable

'dual' will show loading bar and loading message on top of datatable

loading-bar-class [ String, Array, Object ] Optional 
[
  "bg-blue-400",
]

Example as String:

"bg-red-400"

Example as Array:

[
  "bg-red-400",
]

Example as Object:

{
  "bg-red-400": true
}
loading-bar-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red"
]

Example as Object:

{
  "backgroundColor": "red"
}
disable-skeleton-loader Boolean Optional

false

 Disable skeleton loader on loading state
no-data-label String Optional

'No records found.'

 No data label text
no-result-label String Optional

'No records matching your criteria'

 No result text



Checkbox Props

Name Type Mandatory Default Value Description
with-select String Optional

false

 Show checkbox on first column of your datatable
selected-key String Optional

'isSelected'

 Datatable selected field.

Note: Make sure this field is inside first level of your object otherwise it will return false.
checkbox-class [ String, Array, Object ] Optional 
[
  "rounded-md",
  "w-6",
  "h-6",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
checkbox-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Grid Props

Name Type Mandatory Default Value Description
grid String Optional

'responsive'

Accepted value: 'responsive', 'always' or 'never'

responsive: Only show grid on tablet or lower

always: Always show grid instead of table

never: Always show table on all device
grid-container-class [ String, Array, Object ] Optional 
[
  "shadow-lg",
  "p-4",
  "border",
  "border-gray-400",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
grid-container-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
grid-row-count [ Number, String ] Optional

6

 Numbers of grid column in grid view



Search Field Props

Name Type Mandatory Default Value Description
disable-search Boolean Optional

false

 Disable search input field
search-label String Optional

'Search...'

 search input field placeholder
search-class [ String, Array, Object ] Optional 
[
  "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",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
search-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Reload Button Props

Name Type Mandatory Default Value Description
disable-reload-button Boolean Optional

false

 Disable reload button
reload-button-label String Optional

'Reload'

 Reload button text
reload-button-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-32",
  "py-2",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
reload-button-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Reverse Props

Name Type Mandatory Default Value Description
reverse-head Boolean Optional

true

 Switch position on search field and reload button container.
reverse-navigation Boolean Optional

true

 Switch position on pagination label and navigation buttons container.



Pagination Props

Name Type Mandatory Default Value Description
disable-pagination Boolean Optional

false

 Disable pagination label, rows per page and navigation buttons
disable-pagination-label Boolean Optional

false

 Disable pagination label
disable-navigation Boolean Optional

false

 Disable navigation buttons
disable-goto-page Boolean Optional

false

 Disable go to page in navigation buttons
goto-page-class [ String, Array, Object ] Optional 
[
  "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",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
goto-page-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
rows-per-page-label String Optional

'Rows per page:'

 Rows per page label
rows-per-page [ Number, String ] Optional

10

 Numbers of rows for each page
disable-rows-per-page [ Boolean ] Optional

false

 Disable row per page options
rows-per-page-class [ String, Array, Object ] Optional 
[
  "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",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
rows-per-page-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
rows-per-page-options Array Optional

[ 10, 20, 50 ]

 Rows per page options
disable-first-page-button Boolean Optional

false

 Disable first page button in navigation buttons
first-page-button-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
first-page-button-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
disable-last-page-button Boolean Optional

false

 Disable last page button in navigation buttons
last-page-button-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
last-page-button-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
disable-previous-page-button Boolean Optional

false

 Disable previous page button in navigation buttons
previous-page-button-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
previous-page-button-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
disable-next-page-button Boolean Optional

false

 Disable next page button in navigation buttons
next-page-button-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
next-page-button-style [ String, Array, Object ] Optional

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "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
          },
        },
        ...
      ]
    }
  }
}

Name Type Mandatory Default Value Description
uniqid String Yes Table header, cell and grid unique identifier.
This props will used for naming slot for each header, cell and grid.
label String Yes Label for header column
field [ String, Function ] Optional 
(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
visible Boolean Optional

true

 This props will make column visible or not
sortable String Optional

false

 Make this column sortable and to data query sent to your server
sort-order String Optional

'asc'

Sort column sort order.
Accept: 'asc' or 'desc'
align Boolean Optional

'left'

Horizontal alignment of cells in this column.
Accept: 'left', 'center' or 'right'
format Function Optional 
(val, row) => `${val}`
Function to format your data. Accept two arguments `val` and `row`.
`val` contain value from `row` based on field props.
header-class [ String, Array, Object ] Optional

Class for <th> tag

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
header-style [ String, Array, Object ] Optional

Style for <th> tag

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
classes [ String, Array, Object ] Optional

Class for <td> tag

Example as String:

"font-bold text-blue-400"

Example as Array:

[
  "font-bold",
  "text-blue-400"
]

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}
styles [ String, Array, Object ] Optional

Style for <td> tag

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red",
  "color: blue"
]

Example as Object:

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Slots

#title

Title of your table

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

#before.data-table

Used to add content before the table

 
<template #before.data-table>
  <span>Text Before Table</span>
</template>

#after.data-table

Used to add content after the table

 
<template #after.data-table>
  <span>Text After Table</span>
</template>

#before.search

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

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

#icon.search

Slot for search field icon

 
<template #icon.search>
  <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>

#after.search

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

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

#before.reload-button

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

 
<template #before.reload-button>
  This will render on the left of reload button
</template>

#label.reload-button

Slot to customize label reload button

 
<template #label.reload-button>
  <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>

#after.reload-button

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

 
<template #after.reload-button>
  This will render on the right of reload button
</template>

#label.no-record

Used to customize text when no data found in table

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

#label.no-result

Used to render no result label

 
<template #label.no-result>
  <span>labelNoResult</span>
</template>

#loader

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>

#before.pagination-label

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

 
<template #before.pagination-label>
  This will render on the left of pagination label
</template>

#label.pagination

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 #label.pagination="{ from, to, total }">
  <span class="text-bold">Showing {{ from }} - {{ to }} from total {{ total }} data.</span>
</template>

#after.pagination-label

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

 
<template #after.pagination-label>
  This will render on the right of pagination label
</template>

#before.navigation

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

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

#after.navigation

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

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

#label.rows-per-page

Used to customize text data per page.

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

#icon.navigation.first-page-button

Used to customize icon inside first page navigation button

 
<template #icon.navigation.first-page-button>
  <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>

#icon.navigation.previous-page-button

Used to customize icon inside previous page navigation button

 
<template #icon.navigation.previous-page-button>
  <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>

#icon.navigation.next-page-button

Used to customize icon inside next page navigation button

 
<template #icon.navigation.next-page-button>
  <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>

#icon.navigation.last-page-button

Used to customize icon inside last page navigation button

 
<template #icon.navigation.last-page-button>
  <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

Footer content of your table

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

#icon.ascending

Used to customize icon for ascending icon if you used sortable

 
<template #icon.ascending>
  <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>

#icon.descending

Used to customize icon for descending icon if you used sortable

 
<template #icon.descending>
  <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>

#table.row.prepend

Used to prepend data in each rows of table

 
<template #table.row.prepend>
  <tr>
    <td>No</td>
    <td>Name</td>
    <td>Phone Number</td>
    <td>Address</td>
  </tr>
</template>

#table.row.append

Used to append data in each rows of table

 
<template #table.row.append>
  <tr>
    <td>No</td>
    <td>Name</td>
    <td>Phone Number</td>
    <td>Address</td>
  </tr>
</template>

#table.row.skeleton

Used to render skeleton loader per rows of table

 
<template #table.row.skeleton>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

#table.cell.skeleton.checkbox

Used to render skeleton loader checkbox in cell of table

 
<template #table.cell.skeleton.checkbox>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

#grid.content.header.checkbox

Used to customize checkbox label inside grid header

 
<template #grid.content.header.checkbox>
  <span class="text-lg font-bold">
    Selected
  </span>
</template>

#grid.prepend

Used to prepend content in grid view

 
<template #grid.prepend">
  <div class="flex flex-col space-y-2">
      Prepend Text
  </div>
</template>

<template #grid.prepend="{ item }">
  <div class="flex flex-col space-y-2">
    <span class="text-lg font-bold">
      Prepend List
    </span>
    <span class="text-lg font-bold">
    {{ item.carlicense }}
    </span>
  </div>
</template>

#grid.append

Used to append content in grid view

 
<template #grid.append">
  <div class="flex flex-col space-y-2">
      Append Data
  </div>
</template>

<template #grid.append="{ item }">
  <div class="flex flex-col space-y-2">
    <span class="text-lg font-bold">
      Append List
    </span>
    <span class="text-lg font-bold">
    {{ item.carlicense }}
    </span>
  </div>
</template>

#grid.skeleton.container

Used to render skeleton loader at container grid view

 
<template #grid.skeleton.container>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

#grid.skeleton.body.checkbox

Used to render skeleton loader at checkbox grid view

 
<template #grid.skeleton.body.checkbox>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

Dynamic Slots

#table.cell.header.[uniqid]

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 #table.cell.header.fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>

#table.cell.content.checkbox

Used to customize checkbox for checkbox column.

This slot has 1 arguments:

row is data object

 
<template #table.cell.content.checkbox="{ row }">
  <input type="checkbox" v-model="row.isSelected" class="form-tick appearance-none h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none">
</template>

#table.cell.content.[uniqid]

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 #table.cell.content.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>

#grid.content.header.[uniqid]

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.content.header.fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>

#grid.content.body.checkbox

Used to customize checkbox for checkbox line.

This slot has 1 arguments:

row is data object

 
<template #grid.content.body.checkbox="{ row }">
  <input type="checkbox" v-model="row.isSelected" class="form-tick appearance-none h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none">
</template>

#grid.content.body.[uniqid]

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.content.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>

#table.cell.skeleton.[col.uniqid]

Used to render skeleton loader for spesific column identified by col.uniqid

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

 
<template #table.cell.skeleton.carlicense="{ column }">
  <span>{{ column.label }}</span>
</template>

#grid.skeleton.body.[col.uniqid]

Used to render skeleton loader for spesific grid column identified by col.uniqid

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

 
<template #grid.skeleton.body.carlicense="{ column }">
  <span>{{ column.label }}</span>
</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": "[email protected]",
            "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

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes