From 6e555184f0203d143eb557aaf7b27f4455fd35ff Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Thu, 6 Mar 2025 17:37:23 +0700
Subject: [PATCH] feat: add pagination icons to UiTable component for improved
 navigation

---
 app/components/ui/table.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
index ca22ed5..3225929 100644
--- a/app/components/ui/table.tsx
+++ b/app/components/ui/table.tsx
@@ -11,6 +11,10 @@ export type UiTableProperties = {
   title: string
 }
 
+const renderPaginationIcon = (icon: string) => {
+  return `<div class="pagination-icon">${icon}</div>`
+}
+
 export const UiTable: React.FC<UiTableProperties> = ({
   data,
   columns,
@@ -33,6 +37,22 @@ export const UiTable: React.FC<UiTableProperties> = ({
             searching: true,
             ordering: true,
             info: true,
+            language: {
+              paginate: {
+                first: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 "><path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" /></svg>`,
+                ),
+                previous: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>`,
+                ),
+                next: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>`,
+                ),
+                last: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"> <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" /> </svg>`,
+                ),
+              },
+            },
             ...options,
           }}
         />