Data Table

Basic Data Table

Example of basic data table.

Search:

Name	Email	Phone	Joining Date	Status
Korrie O'Crevy Nuclear Power Engineer	kocrevy0@thetimes.co.uk	+1 080-123-4567	09/23/2021	active
Bailie Coulman VP Quality Control	bcoulman1@yolasite.com	+1 080-123-4567	05/20/2021	active
Stella Ganderton Operator	sganderton2@tuttocitta.it	+1 080-123-4567	03/24/2021	inactive
Dorolice Crossman Cost Accountant	dcrossman3@google.co.jp	+1 080-123-4567	12/03/2021	active
Harmonia Nisius Senior Cost Accountant	hnisius4@gnu.org	+1 080-123-4567	08/25/2021	reassigned
Genevra Honeywood Geologist	ghoneywood5@narod.ru	+1 080-123-4567	06/01/2021	active
Eileen Diehn Environmental Specialist	ediehn6@163.com	+1 080-123-4567	10/15/2021	inactive
Richardo Aldren Senior Sales Associate	raldren7@mtv.com	+1 080-123-4567	11/05/2021	inactive
Allyson Moakler Safety Technician	amoakler8@shareasale.com	+1 080-123-4567	12/29/2021	inactive
Merline Penhalewick Junior Executive	mpenhalewick9@php.net	+1 080-123-4567	04/19/2021	reassigned

Showing 1 to 10 of 100 entries

Show code

<table id="datatable-simple" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Post</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Joining Date</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
    import DataTable from '../components/data-table';

    const dataTableSimple = document.querySelector('#datatable-simple');

    if (dataTableSimple) {
        loadTable(dataTableSimple)
            .then(table => new DataTable(table))
            .catch(error => console.log(error));
    }

    async function loadTable(table) {
        const tbody = table.querySelector('tbody');

        if (tbody) {
            const response = await fetch('/json/table-datatable.json');
            const results = await response.json();
            const records = results.data;

            if (records.length) {
                records.forEach(record => {
                    tbody.innerHTML += `
                  <tr>
                    <td>
                      <div class="flex items-center gap-4">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="${record.avatar}" alt="${record.name}">
                        </div>
                        <div>
                          <p class="text-sm font-medium">${record.name}</p>
                          <span class="text-xs text-slate-400">${record.post}</span>
                        </div>
                      </div>
                    </td>
                    <td>${record.email}</td>
                    <td>${record.phone}</td>
                    <td>${record.joining_date}</td>
                    <td>
                      <div class="badge badge-soft-${{active: 'success', inactive: 'danger', reassigned: 'warning'}[record.status]} capitalize">
                        ${record.status}
                      </div>
                    </td>
                  </tr>
              `;
                });
            }
        }

        return table;
    }
</script>

Data Table With Column Filter

Example of data table with column filter.

Search:

Name	Email	Phone	Joining Date	Status

Korrie O'Crevy Nuclear Power Engineer	kocrevy0@thetimes.co.uk	+1 080-123-4567	09/23/2021	active
Bailie Coulman VP Quality Control	bcoulman1@yolasite.com	+1 080-123-4567	05/20/2021	active
Stella Ganderton Operator	sganderton2@tuttocitta.it	+1 080-123-4567	03/24/2021	inactive
Dorolice Crossman Cost Accountant	dcrossman3@google.co.jp	+1 080-123-4567	12/03/2021	active
Harmonia Nisius Senior Cost Accountant	hnisius4@gnu.org	+1 080-123-4567	08/25/2021	reassigned
Genevra Honeywood Geologist	ghoneywood5@narod.ru	+1 080-123-4567	06/01/2021	active
Eileen Diehn Environmental Specialist	ediehn6@163.com	+1 080-123-4567	10/15/2021	inactive
Richardo Aldren Senior Sales Associate	raldren7@mtv.com	+1 080-123-4567	11/05/2021	inactive
Allyson Moakler Safety Technician	amoakler8@shareasale.com	+1 080-123-4567	12/29/2021	inactive
Merline Penhalewick Junior Executive	mpenhalewick9@php.net	+1 080-123-4567	04/19/2021	reassigned

Showing 1 to 10 of 100 entries

Show code

<table id="datatable-filter" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Post</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Joining Date</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
    import DataTable from '../components/data-table';

    const dataTableFilter = document.querySelector('#datatable-filter');

    if (dataTableFilter) {
        loadTable(dataTableFilter)
            .then(table => new DataTable(table, {
                tableRender: (_data, table, type) => {
                    if (type === "print") {
                        return table
                    }
                    const tHead = table.childNodes[0]
                    const filterHeaders = {
                        nodeName: "TR",
                        childNodes: tHead.childNodes[0].childNodes.map(
                            (_th, index) => ({
                                nodeName: "TD",
                                childNodes: [{
                                    nodeName: "INPUT",
                                    attributes: {
                                        class: "datatable-input input",
                                        type: "search",
                                        "data-columns": `[${index}]`
                                    }
                                }]
                            })
                        )
                    }
                    tHead.childNodes.push(filterHeaders)
                    return table
                }
            }))
            .catch(error => console.log(error));
    }

    async function loadTable(table) {
        const tbody = table.querySelector('tbody');

        if (tbody) {
            const response = await fetch('/json/table-datatable.json');
            const results = await response.json();
            const records = results.data;

            if (records.length) {
                records.forEach(record => {
                    tbody.innerHTML += `
              <tr>
                <td>
                  <div class="flex items-center gap-4">
                    <div class="avatar avatar-circle">
                      <img class="avatar-img" src="${record.avatar}" alt="${record.name}">
                    </div>
                    <div>
                      <p class="text-sm font-medium">${record.name}</p>
                      <span class="text-xs text-slate-400">${record.post}</span>
                    </div>
                  </div>
                </td>
                <td>${record.email}</td>
                <td>${record.phone}</td>
                <td>${record.joining_date}</td>
                <td>
                  <div class="badge badge-soft-${{active: 'success', inactive: 'danger', reassigned: 'warning'}[record.status]} capitalize">
                    ${record.status}
                  </div>
                </td>
              </tr>
            `;
                });
            }
        }

        return table;
    }
</script>

New order received

High CPU usage

Your order has been shipped

Something went wrong

Your order has been shipped

Data Table

Basic Data Table

Data Table With Column Filter

Recent Searches