chore: refactor

Author: jn138

src/components/Table.tsx

@@ -1,7 +1,7 @@
 import { useStore, useTask$, component$ } from "@builder.io/qwik"
 import SortArrows from "./SortArrows"
 import FilterInput from "./FilterInput"
-import { param2string, sortTable, filterTable } from "../utils"
+import { param2string, sortTable } from "../utils"
 import type {
   TableProps,
   TableRecord,
@@ -31,8 +31,8 @@ export default component$(
       tData: tData,
       tHeadings: {
         headingList: Object.keys(tData[0]),
-        customHeadings: { ...tHeadings.customHeadings },
-        ...tHeadings,
+        customHeadings: { ...tHeadings?.customHeadings },
+        ...tHeadings!,
       },
       tColumns: {
         ...tColumns,
@@ -56,11 +56,19 @@ export default component$(
     useTask$(async ({ track }) => {
       track(() => [sortConfigs.param, sortConfigs.order, filterConfigs.params])
 
-      const filteredData = await filterTable(
-        tData,
-        tableData.tHeadings.headingList,
-        filterConfigs
-      )
+      const filteredData = tData.filter((record: TableRecord) => {
+        let i = 0
+        tableData.tHeadings.headingList.map((param: string) => {
+          if (
+            record[param]
+              ?.toString()
+              .toLowerCase()
+              .includes(filterConfigs.params[param]?.toString().toLowerCase())
+          )
+            ++i
+        })
+        if (i === Object.keys(filterConfigs?.params).length) return record
+      })
 
       if (sortConfigs.order === 0) {
         tableData.tData = filteredData
@@ -82,10 +90,10 @@ export default component$(
                 <th
                   key={index}
                   class={`
-                  ${tableData.tHeadings.classList}
-                  ${tableData.tColumns?.classList}
-                  ${tableData.tColumns?.columnClassList?.[heading]}
-                `}
+                    ${tableData.tHeadings.classList}
+                    ${tableData.tColumns?.classList}
+                    ${tableData.tColumns?.columnClassList?.[heading]}
+                  `}
                 >
                   <div class="flex flex-col">
                     <div class="flex flex-row items-center justify-between gap-[10px]">
@@ -95,16 +103,22 @@ export default component$(
                         ? tableData.tHeadings.element$[heading](
                             tableData.tHeadings.customHeadings?.[heading]!
                           ) || tableData.tHeadings.customHeadings?.[heading]
-                        : tableData.tHeadings.element$[heading](
+                        : tableData.tHeadings.element$?.[heading]?.(
                             param2string(heading)
                           ) || param2string(heading)}
                       {tableData.sortOptions?.params?.includes(heading) && (
                         <SortArrows
                           heading={heading}
                           classList={{
-                            container: "",
-                            arrowUp: "",
-                            arrowDown: "",
+                            container:
+                              tableData.tableOptions?.sortArrowsClassList
+                                ?.container,
+                            arrowUp:
+                              tableData.tableOptions?.sortArrowsClassList
+                                ?.arrowUp,
+                            arrowDown:
+                              tableData.tableOptions?.sortArrowsClassList
+                                ?.arrowDown,
                           }}
                           sortConfigs={sortConfigs}
                           highlightColor={tableData.sortOptions.highlightColor}
@@ -118,7 +132,9 @@ export default component$(
                         {tableData.filterOptions?.params?.[heading] ===
                         "search" ? (
                           <FilterInput
-                            classList={""}
+                            classList={
+                              tableData.tableOptions?.filterInputClassList
+                            }
                             heading={heading}
                             filterConfigs={filterConfigs}
                           />

src/index.ts

@@ -1,2 +1,4 @@
-export * from "./components/Table"
+import Table from "./components/Table"
+
+export default Table
 export * from "./types"

src/types/index.ts

@@ -33,6 +33,12 @@ export type TableData = {
   }
   tableOptions?: {
     classList?: string
+    sortArrowsClassList?: {
+      container?: string
+      arrowUp?: string
+      arrowDown?: string
+    }
+    filterInputClassList?: string
   }
   sortOptions?: {
     params?: Array<string>
@@ -86,6 +92,12 @@ export type TableProps = {
   }
   tableOptions?: {
     classList?: string
+    sortArrowsClassList?: {
+      container?: string
+      arrowUp?: string
+      arrowDown?: string
+    }
+    filterInputClassList?: string
   }
   sortOptions?: {
     params?: Array<string>

src/utils/table.utils.ts

@@ -1,5 +1,5 @@
 import { $ } from "@builder.io/qwik"
-import type { TableRecord, FilterConfigs } from "../types"
+import type { TableRecord } from "../types"
 
 export const sortTable = $(
   (data: Array<TableRecord>, param: string, isAscending: boolean) => {
@@ -18,27 +18,6 @@ export const sortTable = $(
   }
 )
 
-export const filterTable = $(
-  (
-    records: Array<TableRecord>,
-    headings: Array<string>,
-    filterConfigs: FilterConfigs
-  ) =>
-    records.filter((record: TableRecord) => {
-      let i = 0
-      headings.map((param: string) => {
-        if (
-          record[param]
-            ?.toString()
-            .toLowerCase()
-            .includes(filterConfigs.params[param].toString().toLowerCase())
-        )
-          ++i
-      })
-      if (i === Object.keys(filterConfigs.params).length) return record
-    })
-)
-
 export const getTotalPages = (
   total_record: number,
   record_per_page: number