From 5605c0ddad6a2b246fcee65d0e8c3e6ad8957414 Mon Sep 17 00:00:00 2001
From: Adam Laki <info@adamlaki.com>
Date: Sat, 4 Nov 2023 11:01:37 +0100
Subject: [PATCH] Customers list

---
 dist/account/index.html                       |   1 +
 dist/account/notifications/index.html         |   1 +
 dist/account/password/index.html              |   1 +
 dist/account/profile/index.html               |   1 +
 dist/categories/index.html                    |   1 +
 dist/customers/index.html                     | 147 ++++++-
 dist/index.html                               |   1 +
 dist/js/data/customers.js                     | 142 +++++++
 dist/orders/index.html                        |   1 +
 dist/password-reset/index.html                |   1 +
 dist/product/edit/index.html                  |   1 +
 dist/products/index.html                      |   1 +
 dist/settings/index.html                      |   1 +
 dist/sign-in/index.html                       |   1 +
 dist/sign-up/index.html                       |   1 +
 src/_data/customers.json                      | 243 ------------
 src/_data/orders.json                         | 367 ------------------
 src/_data/search.json                         |  32 --
 src/_includes/layout/base.html                |   1 +
 src/_includes/layout/customers.html           |   2 +-
 .../partial/data-table/customers.html         | 142 +++++++
 src/js/data/customers.js                      | 142 +++++++
 22 files changed, 587 insertions(+), 644 deletions(-)
 create mode 100644 dist/js/data/customers.js
 delete mode 100644 src/_data/customers.json
 delete mode 100644 src/_data/orders.json
 delete mode 100644 src/_data/search.json
 create mode 100644 src/_includes/partial/data-table/customers.html
 create mode 100644 src/js/data/customers.js

diff --git a/dist/account/index.html b/dist/account/index.html
index e859a5f..d8d8b48 100644
--- a/dist/account/index.html
+++ b/dist/account/index.html
@@ -698,6 +698,7 @@ <h3 class="app-card__title">Notifications</h3>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/account/notifications/index.html b/dist/account/notifications/index.html
index be17810..e005ec0 100644
--- a/dist/account/notifications/index.html
+++ b/dist/account/notifications/index.html
@@ -694,6 +694,7 @@ <h3>Notifications</h3>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/account/password/index.html b/dist/account/password/index.html
index 35ace66..bff47bd 100644
--- a/dist/account/password/index.html
+++ b/dist/account/password/index.html
@@ -648,6 +648,7 @@ <h3>Set up a new password</h3>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/account/profile/index.html b/dist/account/profile/index.html
index 4fe0291..8a3f7bd 100644
--- a/dist/account/profile/index.html
+++ b/dist/account/profile/index.html
@@ -671,6 +671,7 @@ <h3>Address</h3>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/categories/index.html b/dist/categories/index.html
index 3ce0523..e4a86d5 100644
--- a/dist/categories/index.html
+++ b/dist/categories/index.html
@@ -609,6 +609,7 @@ <h1 class="app-heading__title">Categories</h1>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/customers/index.html b/dist/customers/index.html
index 892a8c8..72cf2e1 100644
--- a/dist/customers/index.html
+++ b/dist/customers/index.html
@@ -592,7 +592,151 @@ <h1 class="app-heading__title">Customers</h1>
             </div>
             <div class="container">
                 <div class="app-body">
-                    [data-table]
+                    <div class="app-card" x-data="dataTable('customers', ['firstName', 'lastName'])" x-cloak>
+                        <div class="app-card__header">
+                            <div class="app-card__actions">
+                                <form class="search-form" @submit.prevent>
+                                    <span class="search-form__icon">
+                                        <svg aria-hidden='true' focusable='false' height='24' role='img' style='fill: currentColor' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
+                                            <path d='M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z'></path>
+                                        </svg>
+                                    </span>
+                                    <input x-model="search" class="search-form__control" type="text" placeholder="Search..." title="Search" />
+                                </form>
+                            </div>
+                        </div>
+                        <div class="app-card__body">
+                            <div class="data-table">
+                                <div class="alert alert--info data-table-alert" x-show="selectedItems.length">
+                                    <span x-text="`${selectedItems.length > total ? total : selectedItems.length} items are selected`"></span>
+                                    <div class="data-table-alert__actions">
+                                        <div class="data-table-alert__column">
+                                            <button @click="selectAllCheckbox($event);" class="btn btn--primary btn--sm" x-text="`Select all ${items.length > total ? total : items.length}`"></button>
+                                            <button @click="deselectAllCheckbox($event);" class="btn btn--primary btn--sm">
+                                                Deselect all
+                                            </button>
+                                        </div>
+                                        <div class="data-table-alert__column">
+                                            <select class="form-control form-control--sm" id="actions" aria-label="Actions">
+                                                <option value="bulk-edit">Bulk edit</option>
+                                                <option value="send-notification">Send notification</option>
+                                                <option value="publish">Publish</option>
+                                                <option value="delete">Delete</option>
+                                            </select>
+                                            <button class="btn btn--primary btn--sm">Run</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="table-responsive">
+                                    <table class="table table--hover">
+                                        <thead>
+                                            <tr>
+                                                <th style="inline-size: 3.25rem;">
+                                                    <span class="sr-only">Select</span>
+                                                    <label @click="toggleAllCheckbox($event);" aria-label="Select all item" class="form-check">
+                                                        <input class="form-check__control" type="checkbox" value="1" name="select-all" x-model="selectAll" />
+                                                    </label>
+                                                </th>
+                                                <th>Image</th>
+                                                <th>
+                                                    <button @click="sort('firstName')" class="sort-btn" type="button">
+                                                        First Name
+                                                        <svg aria-hidden='true' focusable='false' height='100%' viewBox='0 0 24 24' width='100%' xmlns='http://www.w3.org/2000/svg' class='sort-btn__icon'>
+                                                            <path d='M6,15l6,6l6,-6' style='fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:3px;'></path>
+                                                            <path d='M18,9l-6,-6l-6,6' style='fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:3px;'></path>
+                                                        </svg>
+                                                    </button>
+                                                </th>
+                                                <th>
+                                                    <button @click="sort('lastName')" class="sort-btn" type="button">
+                                                        Last Name
+                                                        <svg aria-hidden='true' focusable='false' height='100%' viewBox='0 0 24 24' width='100%' xmlns='http://www.w3.org/2000/svg' class='sort-btn__icon'>
+                                                            <path d='M6,15l6,6l6,-6' style='fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:3px;'></path>
+                                                            <path d='M18,9l-6,-6l-6,6' style='fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:3px;'></path>
+                                                        </svg>
+                                                    </button>
+                                                </th>
+                                                <th>Email</th>
+                                                <th>&nbsp;</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <template x-if="pagedItems.length === 0">
+                                                <tr>
+                                                    <td class="data-table__no-results" colspan="6">No results were found.</td>
+                                                </tr>
+                                            </template>
+                                            <template x-for="(item, index) in pagedItems" :key="item.id">
+                                                <tr>
+                                                    <td>
+                                                        <label class="form-check" :aria-label="`Select ${item.customer}`">
+                                                            <input :name="item.id" class="form-check__control" type="checkbox" value="1" x-model="item.selected" :change="updateSelectAllStatus()" />
+                                                        </label>
+                                                    </td>
+                                                    <td>
+                                                        <img class="data-table__image" :src="`${item.image}?random=${item.id}`" alt=" ">
+                                                    </td>
+                                                    <td x-text="item.firstName"></td>
+                                                    <td x-text="item.lastName"></td>
+                                                    <td x-text="item.email"></td>
+                                                    <td>
+                                                        <div class="data-table__actions">
+                                                            <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                                                <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
+                                                                    <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'></path>
+                                                                    <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'></path>
+                                                                </svg>
+                                                            </a>
+                                                            <a href="#" class="btn btn--delete btn--sm btn--icon" aria-label="Delete">
+                                                                <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
+                                                                    <polyline points='3 6 5 6 21 6'></polyline>
+                                                                    <path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path>
+                                                                    <line x1='10' y1='11' x2='10' y2='17'></line>
+                                                                    <line x1='14' y1='11' x2='14' y2='17'></line>
+                                                                </svg>
+                                                            </a>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            </template>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <div class="data-table__footer">
+                                    <div class="data-table__footer-column">
+                                        <div class="form-group">
+                                            <label class="sr-only" for="number-of-results">Number of results</label>
+                                            <select class="form-control form-control--sm" id="number-of-results" x-model="pageSize">
+                                                <option value="5">5</option>
+                                                <option value="10" selected>10</option>
+                                                <option value="20">20</option>
+                                                <option value="50">50</option>
+                                                <option value="100">100</option>
+                                            </select>
+                                        </div>
+                                        <p x-text="resultsCount"></p>
+                                    </div>
+                                    <nav x-show="pages().length > 1" class="pagination" aria-label="Posts pagination">
+                                        <ul class="pagination__links">
+                                            <li>
+                                                <button @click="previousPage" class="btn btn--sm btn--outline-primary" x-show="curPage > 1">Previous</button>
+                                            </li>
+                                            <template x-for="(page,index) in pages()" :key="index">
+                                                <li>
+                                                    <button @click="viewPage(index + 1)" class="btn btn--sm btn--outline-primary" type="button" :aria-current="curPage === index + 1 ? 'page' : null">
+                                                        <span x-text="index+1"></span>
+                                                    </button>
+                                                </li>
+                                            </template>
+                                            <li>
+                                                <button @click="nextPage" class="btn btn--sm btn--outline-primary" x-show="curPage < pages().length">Next</button>
+                                            </li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <footer class="app-footer">
@@ -609,6 +753,7 @@ <h1 class="app-heading__title">Customers</h1>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/index.html b/dist/index.html
index 9487843..79d836b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -680,6 +680,7 @@ <h2 class="app-card__title">Active Users</h2>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/js/data/customers.js b/dist/js/data/customers.js
new file mode 100644
index 0000000..1f3dc71
--- /dev/null
+++ b/dist/js/data/customers.js
@@ -0,0 +1,142 @@
+window.customers = [
+  {
+    id: "1",
+    firstName: "John",
+    lastName: "Doe",
+    email: "johndoe@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "2",
+    firstName: "Jane",
+    lastName: "Smith",
+    email: "janesmith@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "3",
+    firstName: "David",
+    lastName: "Johnson",
+    email: "davidjohnson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "4",
+    firstName: "Emily",
+    lastName: "Brown",
+    email: "emilybrown@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "5",
+    firstName: "Michael",
+    lastName: "Wilson",
+    email: "michaelwilson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "6",
+    firstName: "Olivia",
+    lastName: "Taylor",
+    email: "oliviataylor@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "7",
+    firstName: "James",
+    lastName: "Miller",
+    email: "jamesmiller@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "8",
+    firstName: "Sophia",
+    lastName: "Anderson",
+    email: "sophiaanderson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "9",
+    firstName: "Daniel",
+    lastName: "Thomas",
+    email: "danielthomas@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "10",
+    firstName: "Ava",
+    lastName: "Wilson",
+    email: "avawilson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "11",
+    firstName: "Matthew",
+    lastName: "Lee",
+    email: "matthewlee@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "12",
+    firstName: "Isabella",
+    lastName: "Harris",
+    email: "isabellaharris@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "13",
+    firstName: "Ethan",
+    lastName: "Roberts",
+    email: "ethanroberts@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "14",
+    firstName: "Mia",
+    lastName: "Clark",
+    email: "miaclark@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "15",
+    firstName: "Alexander",
+    lastName: "Lewis",
+    email: "alexanderlewis@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "16",
+    firstName: "Charlotte",
+    lastName: "King",
+    email: "charlotteking@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "17",
+    firstName: "William",
+    lastName: "Scott",
+    email: "williamscott@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "18",
+    firstName: "Grace",
+    lastName: "Baker",
+    email: "gracebaker@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "19",
+    firstName: "Benjamin",
+    lastName: "Wright",
+    email: "benjaminwright@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "20",
+    firstName: "Lily",
+    lastName: "Turner",
+    email: "lilyturner@example.com",
+    image: "https://i.pravatar.cc/150"
+  }
+];
diff --git a/dist/orders/index.html b/dist/orders/index.html
index aa1cfd8..a56c9e7 100644
--- a/dist/orders/index.html
+++ b/dist/orders/index.html
@@ -791,6 +791,7 @@ <h1 class="app-heading__title">Orders</h1>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/password-reset/index.html b/dist/password-reset/index.html
index 15536f7..9c49b68 100644
--- a/dist/password-reset/index.html
+++ b/dist/password-reset/index.html
@@ -157,6 +157,7 @@ <h1 class="auth-form__title">Password
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/product/edit/index.html b/dist/product/edit/index.html
index 3fd082a..59c3603 100644
--- a/dist/product/edit/index.html
+++ b/dist/product/edit/index.html
@@ -1598,6 +1598,7 @@ <h2 class="app-card__title">Settings</h2>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/products/index.html b/dist/products/index.html
index 2f6eee2..96f888a 100644
--- a/dist/products/index.html
+++ b/dist/products/index.html
@@ -840,6 +840,7 @@ <h2 class="app-widget__title">Best Selling</h2>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/settings/index.html b/dist/settings/index.html
index e66c1ac..a1a136c 100644
--- a/dist/settings/index.html
+++ b/dist/settings/index.html
@@ -667,6 +667,7 @@ <h2 class="app-card__title">Integrations</h2>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/sign-in/index.html b/dist/sign-in/index.html
index 2f2db34..84a5a64 100644
--- a/dist/sign-in/index.html
+++ b/dist/sign-in/index.html
@@ -186,6 +186,7 @@ <h1 class="auth-form__title">Sign In</h1>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/dist/sign-up/index.html b/dist/sign-up/index.html
index 5e29c3a..967dd70 100644
--- a/dist/sign-up/index.html
+++ b/dist/sign-up/index.html
@@ -197,6 +197,7 @@ <h1 class="auth-form__title">Sign Up</h1>
     <script defer src="/js/data/search.js"></script>
     <script defer src="/js/data/orders.js"></script>
     <script defer src="/js/data/products.js"></script>
+    <script defer src="/js/data/customers.js"></script>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/src/_data/customers.json b/src/_data/customers.json
deleted file mode 100644
index 15947af..0000000
--- a/src/_data/customers.json
+++ /dev/null
@@ -1,243 +0,0 @@
-[
-  {
-    "id": "1",
-    "first_name": "John",
-    "last_name": "Doe",
-    "email": "johndoe@example.com",
-    "phone": "+1 (555) 123-4567",
-    "country": "United States",
-    "city": "New York",
-    "postal_code": "10001",
-    "address": "123 Main Street",
-    "image": "https://i.pravatar.cc/150"
-
-  },
-  {
-    "id": "2",
-    "first_name": "Jane",
-    "last_name": "Smith",
-    "email": "janesmith@example.com",
-    "phone": "+44 20 1234 5678",
-    "country": "United Kingdom",
-    "city": "London",
-    "postal_code": "SW1A 1AA",
-    "address": "456 Park Lane",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "3",
-    "first_name": "David",
-    "last_name": "Johnson",
-    "email": "davidjohnson@example.com",
-    "phone": "+1 (555) 987-6543",
-    "country": "United States",
-    "city": "Los Angeles",
-    "postal_code": "90001",
-    "address": "789 Oak Avenue",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "4",
-    "first_name": "Emily",
-    "last_name": "Brown",
-    "email": "emilybrown@example.com",
-    "phone": "+44 20 5678 1234",
-    "country": "United Kingdom",
-    "city": "Manchester",
-    "postal_code": "M1 1AA",
-    "address": "321 Elm Street",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "5",
-    "first_name": "Michael",
-    "last_name": "Wilson",
-    "email": "michaelwilson@example.com",
-    "phone": "+1 (555) 567-8901",
-    "country": "United States",
-    "city": "Chicago",
-    "postal_code": "60601",
-    "address": "987 Oak Lane",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "6",
-    "first_name": "Olivia",
-    "last_name": "Taylor",
-    "email": "oliviataylor@example.com",
-    "phone": "+44 20 1234 5678",
-    "country": "United Kingdom",
-    "city": "Birmingham",
-    "postal_code": "B1 1AA",
-    "address": "654 Maple Avenue",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "7",
-    "first_name": "James",
-    "last_name": "Miller",
-    "email": "jamesmiller@example.com",
-    "phone": "+1 (555) 567-8901",
-    "country": "United States",
-    "city": "San Francisco",
-    "postal_code": "94101",
-    "address": "321 Pine Street",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "8",
-    "first_name": "Sophia",
-    "last_name": "Anderson",
-    "email": "sophiaanderson@example.com",
-    "phone": "+44 20 5678 1234",
-    "country": "United Kingdom",
-    "city": "Glasgow",
-    "postal_code": "G1 1AA",
-    "address": "789 Cedar Lane",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "9",
-    "first_name": "Daniel",
-    "last_name": "Thomas",
-    "email": "danielthomas@example.com",
-    "phone": "+1 (555) 123-4567",
-    "country": "United States",
-    "city": "Miami",
-    "postal_code": "33101",
-    "address": "456 Birch Street",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "10",
-    "first_name": "Ava",
-    "last_name": "Wilson",
-    "email": "avawilson@example.com",
-    "phone": "+44 20 1234 5678",
-    "country": "United Kingdom",
-    "city": "Edinburgh",
-    "postal_code": "EH1 1AA",
-    "address": "123 Oak Lane",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "11",
-    "first_name": "Matthew",
-    "last_name": "Lee",
-    "email": "matthewlee@example.com",
-    "phone": "+1 (555) 567-8901",
-    "country": "United States",
-    "city": "Houston",
-    "postal_code": "77001",
-    "address": "789 Maple Avenue",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "12",
-    "first_name": "Isabella",
-    "last_name": "Harris",
-    "email": "isabellaharris@example.com",
-    "phone": "+44 20 5678 1234",
-    "country": "United Kingdom",
-    "city": "Liverpool",
-    "postal_code": "L1 1AA",
-    "address": "321 Pine Street",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "13",
-    "first_name": "Ethan",
-    "last_name": "Roberts",
-    "email": "ethanroberts@example.com",
-    "phone": "+1 (555) 123-4567",
-    "country": "United States",
-    "city": "Dallas",
-    "postal_code": "75201",
-    "address": "987 Cedar Lane",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "14",
-    "first_name": "Mia",
-    "last_name": "Clark",
-    "email": "miaclark@example.com",
-    "phone": "+44 20 1234 5678",
-    "country": "United Kingdom",
-    "city": "Leeds",
-    "postal_code": "LS1 1AA",
-    "address": "654 Elm Street",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "15",
-    "first_name": "Alexander",
-    "last_name": "Lewis",
-    "email": "alexanderlewis@example.com",
-    "phone": "+1 (555) 567-8901",
-    "country": "United States",
-    "city": "Atlanta",
-    "postal_code": "30301",
-    "address": "123 Maple Avenue",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "16",
-    "first_name": "Charlotte",
-    "last_name": "King",
-    "email": "charlotteking@example.com",
-    "phone": "+44 20 5678 1234",
-    "country": "United Kingdom",
-    "city": "Bristol",
-    "postal_code": "BS1 1AA",
-    "address": "456 Pine Street",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "17",
-    "first_name": "William",
-    "last_name": "Scott",
-    "email": "williamscott@example.com",
-    "phone": "+1 (555) 123-4567",
-    "country": "United States",
-    "city": "Seattle",
-    "postal_code": "98101",
-    "address": "789 Elm Lane",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "18",
-    "first_name": "Grace",
-    "last_name": "Baker",
-    "email": "gracebaker@example.com",
-    "phone": "+44 20 1234 5678",
-    "country": "United Kingdom",
-    "city": "Cardiff",
-    "postal_code": "CF1 1AA",
-    "address": "321 Oak Street",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "19",
-    "first_name": "Benjamin",
-    "last_name": "Wright",
-    "email": "benjaminwright@example.com",
-    "phone": "+1 (555) 567-8901",
-    "country": "United States",
-    "city": "Boston",
-    "postal_code": "02101",
-    "address": "987 Pine Lane",
-    "image": "https://i.pravatar.cc/150"
-  },
-  {
-    "id": "20",
-    "first_name": "Lily",
-    "last_name": "Turner",
-    "email": "lilyturner@example.com",
-    "phone": "+44 20 5678 1234",
-    "country": "United Kingdom",
-    "city": "Oxford",
-    "postal_code": "OX1 1AA",
-    "address": "654 Maple Street",
-    "image": "https://i.pravatar.cc/150"
-  }
-]
diff --git a/src/_data/orders.json b/src/_data/orders.json
deleted file mode 100644
index c808f44..0000000
--- a/src/_data/orders.json
+++ /dev/null
@@ -1,367 +0,0 @@
-[
-  {
-    "id": "1",
-    "customer_name": "John Doe",
-    "order_total": 119.97,
-    "products": [
-      {
-        "product_name": "LuminoTech LED Desk Lamp",
-        "price": 39.99,
-        "quantity": 2
-      },
-      {
-        "product_name": "AquaWave Waterproof Bluetooth Speaker",
-        "price": 29.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "2",
-    "customer_name": "Jane Smith",
-    "order_total": 97.95,
-    "products": [
-      {
-        "product_name": "PowerBoost Portable Phone Charger",
-        "price": 19.99,
-        "quantity": 3
-      },
-      {
-        "product_name": "EcoCleanse Organic Laundry Detergent",
-        "price": 12.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "SnapFit Phone Camera Lens Kit",
-        "price": 24.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "3",
-    "customer_name": "David Johnson",
-    "order_total": 254.94,
-    "products": [
-      {
-        "product_name": "SwiftGear Wireless Earbuds",
-        "price": 79.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "LunaGlow Facial Cleansing Brush",
-        "price": 49.99,
-        "quantity": 2
-      },
-      {
-        "product_name": "TruSonic Ultrasonic Jewelry Cleaner",
-        "price": 34.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "4",
-    "customer_name": "Emily Davis",
-    "order_total": 149.95,
-    "products": [
-      {
-        "product_name": "ZephyrFit Fitness Tracker",
-        "price": 89.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "ChillBliss Cooling Weighted Blanket",
-        "price": 59.96,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "5",
-    "customer_name": "Michael Wilson",
-    "order_total": 174.97,
-    "products": [
-      {
-        "product_name": "InfinityPro Hair Straightener",
-        "price": 99.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "WonderGarden Indoor Herb Kit",
-        "price": 74.98,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "6",
-    "customer_name": "Sarah Thompson",
-    "order_total": 189.98,
-    "products": [
-      {
-        "product_name": "EnergiFlex Smart Power Strip",
-        "price": 49.99,
-        "quantity": 2
-      },
-      {
-        "product_name": "ZenTune Meditation Headphones",
-        "price": 69.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "7",
-    "customer_name": "Robert Martinez",
-    "order_total": 109.97,
-    "products": [
-      {
-        "product_name": "FrostyBrew Portable Coffee Maker",
-        "price": 54.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "PowerBoost Portable Phone Charger",
-        "price": 19.99,
-        "quantity": 2
-      }
-    ]
-  },
-  {
-    "id": "8",
-    "customer_name": "Jennifer Anderson",
-    "order_total": 79.98,
-    "products": [
-      {
-        "product_name": "SnapFit Phone Camera Lens Kit",
-        "price": 24.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "VitaBlend Nutrient Extractor",
-        "price": 54.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "9",
-    "customer_name": "Christopher Brown",
-    "order_total": 169.97,
-    "products": [
-      {
-        "product_name": "SwiftGear Wireless Earbuds",
-        "price": 79.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "LunaGlow Facial Cleansing Brush",
-        "price": 49.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "ZephyrFit Fitness Tracker",
-        "price": 39.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "10",
-    "customer_name": "Laura Davis",
-    "order_total": 109.97,
-    "products": [
-      {
-        "product_name": "PowerBoost Portable Phone Charger",
-        "price": 19.99,
-        "quantity": 3
-      },
-      {
-        "product_name": "EcoCleanse Organic Laundry Detergent",
-        "price": 12.99,
-        "quantity": 2
-      }
-    ]
-  },
-  {
-    "id": "11",
-    "customer_name": "Matthew Taylor",
-    "order_total": 144.97,
-    "products": [
-      {
-        "product_name": "LuminoTech LED Desk Lamp",
-        "price": 39.99,
-        "quantity": 2
-      },
-      {
-        "product_name": "FrostyBrew Portable Coffee Maker",
-        "price": 54.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "SnapFit Phone Camera Lens Kit",
-        "price": 24.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "12",
-    "customer_name": "Jessica Wilson",
-    "order_total": 189.97,
-    "products": [
-      {
-        "product_name": "AquaWave Waterproof Bluetooth Speaker",
-        "price": 29.99,
-        "quantity": 3
-      },
-      {
-        "product_name": "ChillBliss Cooling Weighted Blanket",
-        "price": 59.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "13",
-    "customer_name": "Daniel Johnson",
-    "order_total": 199.97,
-    "products": [
-      {
-        "product_name": "ZephyrFit Fitness Tracker",
-        "price": 89.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "LunaGlow Facial Cleansing Brush",
-        "price": 49.99,
-        "quantity": 2
-      },
-      {
-        "product_name": "EnergiFlex Smart Power Strip",
-        "price": 59.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "14",
-    "customer_name": "Sophia Anderson",
-    "order_total": 84.97,
-    "products": [
-      {
-        "product_name": "ZenTune Meditation Headphones",
-        "price": 69.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "PowerBoost Portable Phone Charger",
-        "price": 14.98,
-        "quantity": 2
-      }
-    ]
-  },
-  {
-    "id": "15",
-    "customer_name": "Alexander Smith",
-    "order_total": 144.97,
-    "products": [
-      {
-        "product_name": "FrostyBrew Portable Coffee Maker",
-        "price": 54.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "LuminoTech LED Desk Lamp",
-        "price": 39.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "EcoCleanse Organic Laundry Detergent",
-        "price": 49.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "16",
-    "customer_name": "Olivia Thompson",
-    "order_total": 89.99,
-    "products": [
-      {
-        "product_name": "SwiftGear Wireless Earbuds",
-        "price": 79.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "AquaWave Waterproof Bluetooth Speaker",
-        "price": 9.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "17",
-    "customer_name": "William Martinez",
-    "order_total": 119.98,
-    "products": [
-      {
-        "product_name": "LunaGlow Facial Cleansing Brush",
-        "price": 49.99,
-        "quantity": 1
-      },
-      {
-        "product_name": "SnapFit Phone Camera Lens Kit",
-        "price": 24.99,
-        "quantity": 2
-      }
-    ]
-  },
-  {
-    "id": "18",
-    "customer_name": "Ava Davis",
-    "order_total": 109.99,
-    "products": [
-      {
-        "product_name": "PowerBoost Portable Phone Charger",
-        "price": 19.99,
-        "quantity": 3
-      },
-      {
-        "product_name": "ChillBliss Cooling Weighted Blanket",
-        "price": 44.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "19",
-    "customer_name": "James Wilson",
-    "order_total": 99.99,
-    "products": [
-      {
-        "product_name": "InfinityPro Hair Straightener",
-        "price": 99.99,
-        "quantity": 1
-      }
-    ]
-  },
-  {
-    "id": "20",
-    "customer_name": "Mia Thompson",
-    "order_total": 134.97,
-    "products": [
-      {
-        "product_name": "EcoCleanse Organic Laundry Detergent",
-        "price": 49.99,
-        "quantity": 2
-      },
-      {
-        "product_name": "ZenTune Meditation Headphones",
-        "price": 84.98,
-        "quantity": 1
-      }
-    ]
-  }
-]
diff --git a/src/_data/search.json b/src/_data/search.json
deleted file mode 100644
index eaa724b..0000000
--- a/src/_data/search.json
+++ /dev/null
@@ -1,32 +0,0 @@
-[
-  {
-    "caption": "Shop / Products",
-    "url": "/products/",
-    "icon": "<path d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'></path><line x1='3' y1='6' x2='21' y2='6'></line><path d='M16 10a4 4 0 0 1-8 0'></path>"
-  },
-  {
-    "caption": "Shop / Orders",
-    "url": "/orders/",
-    "icon": "<circle cx='9' cy='21' r='1'></circle><circle cx='20' cy='21' r='1'></circle><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'></path>"
-  },
-  {
-    "caption": "Shop / Customers",
-    "url": "/customers/",
-    "icon": "<path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'></path><circle cx='9' cy='7' r='4'></circle><path d='M23 21v-2a4 4 0 0 0-3-3.87'></path><path d='M16 3.13a4 4 0 0 1 0 7.75'></path>"
-  },
-  {
-    "caption": "Shop / Categories",
-    "url": "/categories/",
-    "icon": "<polyline points='21 8 21 21 3 21 3 8'></polyline><rect x='1' y='3' width='22' height='5'></rect><line x1='10' y1='12' x2='14' y2='12'></line>"
-  },
-  {
-    "caption": "Account",
-    "url": "/account/",
-    "icon": null
-  },
-  {
-    "caption": "Settings",
-    "url": "/settings/",
-    "icon": null
-  }
-]
diff --git a/src/_includes/layout/base.html b/src/_includes/layout/base.html
index 7716860..84a6b2f 100644
--- a/src/_includes/layout/base.html
+++ b/src/_includes/layout/base.html
@@ -49,6 +49,7 @@
         <script defer src="/js/data/search.js"></script>
         <script defer src="/js/data/orders.js"></script>
         <script defer src="/js/data/products.js"></script>
+        <script defer src="/js/data/customers.js"></script>
         <script defer src="/js/data-table.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/src/_includes/layout/customers.html b/src/_includes/layout/customers.html
index 448926d..a91a640 100644
--- a/src/_includes/layout/customers.html
+++ b/src/_includes/layout/customers.html
@@ -18,7 +18,7 @@
             {% include "partial/heading.html" %}
             <div class="container">
                 <div class="app-body">
-                    [data-table]
+                    {% include 'partial/data-table/customers.html' %}
                 </div>
             </div>
             {% include "partial/footer.html" %}
diff --git a/src/_includes/partial/data-table/customers.html b/src/_includes/partial/data-table/customers.html
new file mode 100644
index 0000000..44f4a00
--- /dev/null
+++ b/src/_includes/partial/data-table/customers.html
@@ -0,0 +1,142 @@
+<div
+    class="app-card"
+    x-data="dataTable('customers', ['firstName', 'lastName'])"
+    x-cloak
+>
+    <div class="app-card__header">
+        <div class="app-card__actions">
+            <form class="search-form" @submit.prevent>
+                <span class="search-form__icon">
+                    {% svgIcon "./src/img/icon/search.svg" %}
+                </span>
+                <input
+                    x-model="search"
+                    class="search-form__control"
+                    type="text"
+                    placeholder="Search..."
+                    title="Search"
+                />
+            </form>
+        </div>
+    </div>
+    <div class="app-card__body">
+        <div class="data-table">
+            <div
+                class="alert alert--info data-table-alert"
+                x-show="selectedItems.length"
+            >
+                <span x-text="`${selectedItems.length > total ? total : selectedItems.length} items are selected`"></span>
+                <div class="data-table-alert__actions">
+                    <div class="data-table-alert__column">
+                        <button
+                            @click="selectAllCheckbox($event);"
+                            class="btn btn--primary btn--sm"
+                            x-text="`Select all ${items.length > total ? total : items.length}`"
+                        ></button>
+                        <button
+                            @click="deselectAllCheckbox($event);"
+                            class="btn btn--primary btn--sm"
+                        >
+                            Deselect all
+                        </button>
+                    </div>
+                    <div class="data-table-alert__column">
+                        <select class="form-control form-control--sm" id="actions" aria-label="Actions">
+                            <option value="bulk-edit">Bulk edit</option>
+                            <option value="send-notification">Send notification</option>
+                            <option value="publish">Publish</option>
+                            <option value="delete">Delete</option>
+                        </select>
+                        <button class="btn btn--primary btn--sm">Run</button>
+                    </div>
+                </div>
+            </div>
+            <div class="table-responsive">
+                <table class="table table--hover">
+                    <thead>
+                        <tr>
+                            <th style="inline-size: 3.25rem;">
+                                <span class="sr-only">Select</span>
+                                <label
+                                    @click="toggleAllCheckbox($event);"
+                                    aria-label="Select all item"
+                                    class="form-check"
+                                >
+                                    <input
+                                        class="form-check__control"
+                                        type="checkbox"
+                                        value="1"
+                                        name="select-all"
+                                        x-model="selectAll" />
+                                </label>
+                            </th>
+                            <th>Image</th>
+                            <th>
+                                <button
+                                    @click="sort('firstName')"
+                                    class="sort-btn"
+                                    type="button"
+                                >
+                                    First Name
+                                    {% svgIcon "./src/img/icon/chevron-up-down.svg", "sort-btn__icon" %}
+                                </button>
+                            </th>
+                            <th>
+                                <button
+                                    @click="sort('lastName')"
+                                    class="sort-btn"
+                                    type="button"
+                                >
+                                    Last Name
+                                    {% svgIcon "./src/img/icon/chevron-up-down.svg", "sort-btn__icon" %}
+                                </button>
+                            </th>
+                            <th>Email</th>
+                            <th>&nbsp;</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-if="pagedItems.length === 0">
+                            <tr>
+                                <td class="data-table__no-results" colspan="6">No results were found.</td>
+                            </tr>
+                        </template>
+                        <template x-for="(item, index) in pagedItems" :key="item.id">
+                            <tr>
+                                <td>
+                                    <label class="form-check" :aria-label="`Select ${item.customer}`">
+                                        <input
+                                            :name="item.id"
+                                            class="form-check__control"
+                                            type="checkbox"
+                                            value="1"
+                                            x-model="item.selected"
+                                            :change="updateSelectAllStatus()"
+                                        />
+                                    </label>
+                                </td>
+                                <td>
+                                    <img class="data-table__image" :src="`${item.image}?random=${item.id}`" alt="{{ item.firstName }} {{ item.lastName }}">
+                                </td>
+                                <td x-text="item.firstName"></td>
+                                <td x-text="item.lastName"></td>
+                                <td x-text="item.email"></td>
+                                <td>
+                                    <div class="data-table__actions">
+                                        <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                            {% svgIcon './src/img/icon/edit.svg', 'btn__icon' %}
+                                        </a>
+                                        <a href="#" class="btn btn--delete btn--sm btn--icon" aria-label="Delete">
+                                            {% svgIcon './src/img/icon/trash.svg', 'btn__icon' %}
+                                        </a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+            {% include "partial/card/data-table-footer.html" %}
+        </div>
+    </div>
+</div>
diff --git a/src/js/data/customers.js b/src/js/data/customers.js
new file mode 100644
index 0000000..1f3dc71
--- /dev/null
+++ b/src/js/data/customers.js
@@ -0,0 +1,142 @@
+window.customers = [
+  {
+    id: "1",
+    firstName: "John",
+    lastName: "Doe",
+    email: "johndoe@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "2",
+    firstName: "Jane",
+    lastName: "Smith",
+    email: "janesmith@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "3",
+    firstName: "David",
+    lastName: "Johnson",
+    email: "davidjohnson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "4",
+    firstName: "Emily",
+    lastName: "Brown",
+    email: "emilybrown@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "5",
+    firstName: "Michael",
+    lastName: "Wilson",
+    email: "michaelwilson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "6",
+    firstName: "Olivia",
+    lastName: "Taylor",
+    email: "oliviataylor@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "7",
+    firstName: "James",
+    lastName: "Miller",
+    email: "jamesmiller@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "8",
+    firstName: "Sophia",
+    lastName: "Anderson",
+    email: "sophiaanderson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "9",
+    firstName: "Daniel",
+    lastName: "Thomas",
+    email: "danielthomas@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "10",
+    firstName: "Ava",
+    lastName: "Wilson",
+    email: "avawilson@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "11",
+    firstName: "Matthew",
+    lastName: "Lee",
+    email: "matthewlee@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "12",
+    firstName: "Isabella",
+    lastName: "Harris",
+    email: "isabellaharris@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "13",
+    firstName: "Ethan",
+    lastName: "Roberts",
+    email: "ethanroberts@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "14",
+    firstName: "Mia",
+    lastName: "Clark",
+    email: "miaclark@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "15",
+    firstName: "Alexander",
+    lastName: "Lewis",
+    email: "alexanderlewis@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "16",
+    firstName: "Charlotte",
+    lastName: "King",
+    email: "charlotteking@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "17",
+    firstName: "William",
+    lastName: "Scott",
+    email: "williamscott@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "18",
+    firstName: "Grace",
+    lastName: "Baker",
+    email: "gracebaker@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "19",
+    firstName: "Benjamin",
+    lastName: "Wright",
+    email: "benjaminwright@example.com",
+    image: "https://i.pravatar.cc/150"
+  },
+  {
+    id: "20",
+    firstName: "Lily",
+    lastName: "Turner",
+    email: "lilyturner@example.com",
+    image: "https://i.pravatar.cc/150"
+  }
+];