JL Datatable

A datatable server side rendering mode made with Vue JS 3 ⚙️

🚀 There is an online demo:

Front End 👉 Repository Github

Backend with Laravel 👉 Repository Github

Basic usage

<jl-datatable
    :url='http://localhost/api/users'
    :columns="[
        {
            label: 'ID',
            data: 'id'
        },   
        {
            label: 'Name',
            data: 'name' 
        },
        {
            label: 'Last Name',
            data: 'last_name'
        },    
    ]"  
/>

Installing

Install the JlDatatable package:

npm install jl-datatable
# or
yarn add jl-datatable

Register it as you usually would:

import {createApp } from 'vue'
import App from './App.vue'

import JlDatatable from 'jl-datatable'

const app = createApp(App)

app.component('jl-datatable', JlDatatable)

app.mount('#app')

Props - General

Property Name	Type	Required	Default Value	Description
url	String	Yes	NULL	URL to get entries.
requestOptions	Object	No	{method: 'GET'}	Allows to add more parameters in the request to be made to the server.
columns	Array Object	Yes	[]	An array of objects that specifies how to render each column.
pageLength	Integer	No	10	Length of records shown in the table.
lengthMenu	Array Integer	No	[10, 25, 50, 100]	List of lengths for the menu to display in the table.
order	Object	No	{ column: 0, dir: 'ASC'}	Sort the records, for sort you have two options of ascending (ASC) and descending (DESC) sorting.
reset	String	No	NULL	Reset the data from the datatable. Only a random string different from the previous one should be sent.

Prop: columns

Property Name	Type	Required	Default Value	Description
label	String	Yes	NULL	Is what is shown in the table header.
data	String	Yes	NULL	Allows to identify the data to be obtained by means of key and value.
orderable	Boolean	No	True	If true, sorting is activated for the column.
searchable	Boolean	No	True	If true, the search for the column is activated.
component	Object	No	NULL	Allows you to add a component, e.g. edit and delete buttons.

Events

Name	Return	Description
gettingEntries	Object	Returns the request to be made to the server.
entriesFetched	Object	Returns the request made to the server and the data.

License

MIT