Jl-datatable NPM

capture

🚀 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

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.