From d273d9ecc630e33fdb0bf30e7390f69be36104ea Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Wed, 26 Feb 2025 23:25:05 +0700
Subject: [PATCH] feat: implement DataTable component with custom styling for
 dashboard and subscriptions pages

---
 app/app.css                                 | 10 ++++++++++
 app/components/ui/table.tsx                 | 22 +++++++++++++++++++++
 app/pages/dashboard-contents/index.tsx      |  1 +
 app/pages/dashboard-subscriptions/index.tsx |  2 +-
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 app/components/ui/table.tsx

diff --git a/app/app.css b/app/app.css
index f260295..e743c14 100644
--- a/app/app.css
+++ b/app/app.css
@@ -18,3 +18,13 @@
 html,
 body {
 }
+
+table.dataTable thead > tr {
+  border-bottom: 2px solid #c2c2c2;
+}
+
+table.dataTable tbody > tr > td {
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: 1px solid #ebebeb;
+}
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
new file mode 100644
index 0000000..12a9334
--- /dev/null
+++ b/app/components/ui/table.tsx
@@ -0,0 +1,22 @@
+import DT from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+
+export const TableComponent = () => {
+  DataTable.use(DT)
+  return (
+    <>
+      <h1>test</h1>
+      <DataTable
+        className="cell-border"
+        data={[]}
+        columns={[]}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+      ></DataTable>
+    </>
+  )
+}
diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx
index 066ce98..e4ffa2d 100644
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@@ -29,6 +29,7 @@ export const ContentsPage = () => {
           searching: true,
           ordering: true,
           info: true,
+          // scrollY: '50vh',
         }}
       ></DataTable>
     </div>
diff --git a/app/pages/dashboard-subscriptions/index.tsx b/app/pages/dashboard-subscriptions/index.tsx
index 8282cca..f9b3a69 100644
--- a/app/pages/dashboard-subscriptions/index.tsx
+++ b/app/pages/dashboard-subscriptions/index.tsx
@@ -47,7 +47,7 @@ export const SubscriptionsPage = () => {
 
       {SubscribtionOpen && (
         <DataTable
-          className="cell-border"
+          // className="cell-border"
           data={SUBSCRIPTIONS}
           columns={colTableSubscription}
           options={{