feat: implement DataTable component with custom styling for dashboard and subscriptions pages

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;
+}

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>
+    </>
+  )
+}

app/pages/dashboard-contents/index.tsx

@@ -29,6 +29,7 @@ export const ContentsPage = () => {
           searching: true,
           ordering: true,
           info: true,
+          // scrollY: '50vh',
         }}
       ></DataTable>
     </div>

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={{