refactor: useDataTable 적용

apps/cs/src/shared/lib/index.ts

@@ -1,6 +1,7 @@
 export { getCookie, setCookie, removeCookie } from "./cookie";
 export { useMutationWrapper } from "./use-mutation-wrapper";
 export { useAlertStore } from "./use-alert-store";
+export { useDataTable } from "./use-data-table";
 export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
 export { usePrompt } from "./use-prompt";

apps/cs/src/shared/lib/use-data-table.tsx

@@ -6,6 +6,12 @@ import { NoData } from "../ui/no-data";
 import type { PageableList } from "../model";
 import { matchQueryStatus } from "./match-query-status";
 
+type UseDataTableOptions<T> = {
+  query: UseQueryResult<PageableList<T>>;
+  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">;
+  dataTableOptions?: DataTableOptions<T>;
+};
+
 type DataTableOptions<T> = {
   variant?: "default" | "secondary" | "line";
   className?: HTMLAttributes<HTMLTableElement>["className"];
@@ -13,21 +19,24 @@ type DataTableOptions<T> = {
   onRowClick?: (row: T) => void;
 };
 
-export const useDataTable = <T,>(
-  query: UseQueryResult<PageableList<T>>,
-  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">,
-  dataTableOptions?: DataTableOptions<T>,
-) => {
+export const useDataTable = <T,>({
+  query,
+  tableOptions,
+  dataTableOptions,
+}: UseDataTableOptions<T>) => {
   const table = useReactTable({
     ...tableOptions,
     data: query.data?.content ?? [],
     rowCount: query.data?.totalElements ?? 0,
   });
 
-  return matchQueryStatus(query, {
-    Empty: <NoData />,
-    Success: () => {
-      return <DataTable table={table} {...dataTableOptions} />;
-    },
-  });
+  return {
+    tableComponent: matchQueryStatus(query, {
+      Empty: <NoData />,
+      Success: () => {
+        return <DataTable table={table} {...dataTableOptions} />;
+      },
+    }),
+    tableInstance: table,
+  };
 };