WEBEXP
Docs Report a Bug
DataTableLight.js

Example 1: Simple

const mockData = [
    {
        product: 'Lorem ipsum',
        price: 15,
        discount: 'Yes'
    },
    {
        product: 'Consequuntur soluta',
        price: 25,
        discount: 'No'
    },
    {
        product: 'Laborum a neque',
        price: 35,
        discount: 'Yes'
    },
    {
        product: 'Natus asperiores',
        price: 40,
        discount: 'No'
    },
    {
        product: 'Rerum, eius',
        price: 45,
        discount: 'No'
    },
]
                            
new DataTableLight({
    tableId: '#test_table',
    tHead: ['product','price','discount'],
    data: mockData
})

Example 2: Custom fields

Set data fields to output

const mockData = [
    {
        product: 'Lorem ipsum',
        price: 15,
        discount: 'Yes'
    },
    {
        product: 'Consequuntur soluta',
        price: 25,
        discount: 'No'
    },
    {
        product: 'Laborum a neque',
        price: 35,
        discount: 'Yes'
    },
    {
        product: 'Natus asperiores',
        price: 40,
        discount: 'No'
    },
    {
        product: 'Rerum, eius',
        price: 45,
        discount: 'No'
    },
]
                            
new DataTableLight({
    tableId: '#test_table',
    tHead: ['#','first','second'],
    index: true,
    data: {
            output: mockData,
            // output only this and in this order
            fields: ['price','product'] 
        }
})

Example 3: Async

Ajax or fetch

const dataTableLight = new DataTableLight({
    tableId: '#test_table',
    tHead: ['#','User ID', 'title'],
    index: true,
})

const getData = () => new Promise((resolve, reject) => {
    const request = new XMLHttpRequest()
    request.addEventListener('readystatechange', (e) => {
    if (e.target.readyState === 4 && e.target.status === 200) {
        const data = JSON.parse(e.target.responseText)
            resolve(data)
        } else if (e.target.readyState === 4) {
            reject('An error has taken place')
        }
    })
    request.open('GET', `https://jsonplaceholder.typicode.com/albums/`)
    request.send()
})                              
                                                                
getData().then((data) => {
    // REDRAW TABLE WITH NEW DATA
    dataTableLight.new({
            output: data,
            // output only this and in this order
            fields: ['userId', 'title'] 
        })
}, (err) => {
    console.log(`Error: ${err}`)
})

Example 4: Templates

Custom template

const template = `
    <tr>
        <td>{{ index }}</td>
        <td>{{ albumId }}</td>
        <td>{{ title }}</td>
        <td>
            <a href="{{ thumbnailUrl }}" target="_blank">
                <img src="{{ thumbnailUrl }}" width="50" />
            </a>
        </td>
    </tr>
`

const dataTableLight = new DataTableLight({
    tableId: '#test_table',
    tHead: ['#','Album ID', 'Title', 'Link'],
    trTemplate: template
})

const getData = () => new Promise((resolve, reject) => {
    const request = new XMLHttpRequest()
    request.addEventListener('readystatechange', (e) => {
    if (e.target.readyState === 4 && e.target.status === 200) {
        const data = JSON.parse(e.target.responseText)
            resolve(data)
        } else if (e.target.readyState === 4) {
            reject('An error has taken place')
        }
    })
    request.open('GET', `https://jsonplaceholder.typicode.com/photos/`)
    request.send()
})                              
                                                                
getData().then((data) => {
    // REDRAW TABLE WITH NEW DATA
    dataTableLight.new(data)
}, (err) => {
    console.log(`Error: ${err}`)
})

Example 5: Responsive

Responsive

const dataTableLight = new DataTableLight({
                ...
                  responsive: true,
                ...
                })
                
const dataTableLight = new DataTableLight({
                ...
                  responsive: false,
                ...
                })