feat: implement UiTable component and refactor dashboard pages to use it

2025-03-04 00:21:14 +07:00
parent 1538869e49
commit 120450fd7c
5 changed files with 228 additions and 109 deletions
@@ -0,0 +1,42 @@
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+import React from 'react'
+
+export type UiTableProperties = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any[]
+  columns: ConfigColumns[]
+  slots?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  options?: Config
+  title: string
+}
+
+export const UiTable: React.FC<UiTableProperties> = ({
+  data,
+  columns,
+  slots,
+  options,
+  title,
+}) => {
+  DataTable.use(DT)
+  return (
+    <div className="rounded-lg bg-white p-5 shadow-md">
+      <h3 className="py-1 font-semibold text-[#4C5CA0]">{title}</h3>
+      <div className="rounded-lg">
+        <DataTable
+          className="cell-border"
+          data={data}
+          columns={columns}
+          slots={slots}
+          options={{
+            paging: true,
+            searching: true,
+            ordering: true,
+            info: true,
+            ...options,
+          }}
+        />
+      </div>
+    </div>
+  )
+}