3/25 까지의 대표님 작업사항

1 files changed, 104 insertions, 0 deletions

diff --git a/components/data-table/data-table-advanced-toolbar.tsx b/components/data-table/data-table-advanced-toolbar.tsx
new file mode 100644
index 00000000..7c126c51
--- /dev/null
+++ b/components/data-table/data-table-advanced-toolbar.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import type { DataTableAdvancedFilterField } from "@/types/table"
+import { type Table } from "@tanstack/react-table"
+
+import { cn } from "@/lib/utils"
+import { DataTableFilterList } from "@/components/data-table/data-table-filter-list"
+import { DataTableSortList } from "@/components/data-table/data-table-sort-list"
+import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"
+import { DataTablePinList } from "./data-table-pin"
+import { PinLeftButton } from "./data-table-pin-left"
+import { PinRightButton } from "./data-table-pin-right"
+import { DataTableGlobalFilter } from "./data-table-grobal-filter"
+import { DataTableGroupList } from "./data-table-group-list"
+
+interface DataTableAdvancedToolbarProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The table instance returned from useDataTable hook with pagination, sorting, filtering, etc.
+   * @type Table<TData>
+   */
+  table: Table<TData>
+
+  /**
+   * An array of filter field configurations for the data table.
+   * @type DataTableAdvancedFilterField<TData>[]
+   * @example
+   * const filterFields = [
+   *   {
+   *     id: 'name',
+   *     label: 'Name',
+   *     type: 'text',
+   *     placeholder: 'Filter by name...'
+   *   },
+   *   {
+   *     id: 'status',
+   *     label: 'Status',
+   *     type: 'select',
+   *     options: [
+   *       { label: 'Active', value: 'active', count: 10 },
+   *       { label: 'Inactive', value: 'inactive', count: 5 }
+   *     ]
+   *   }
+   * ]
+   */
+  filterFields: DataTableAdvancedFilterField<TData>[]
+
+  /**
+   * Debounce time (ms) for filter updates to enhance performance during rapid input.
+   * @default 300
+   */
+  debounceMs?: number
+
+  /**
+   * Shallow mode keeps query states client-side, avoiding server calls.
+   * Setting to `false` triggers a network request with the updated querystring.
+   * @default true
+   */
+  shallow?: boolean
+}
+
+export function DataTableAdvancedToolbar<TData>({
+  table,
+  filterFields = [],
+  debounceMs = 300,
+  shallow = true,
+  children,
+  className,
+  ...props
+}: DataTableAdvancedToolbarProps<TData>) {
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-2 overflow-auto p-1",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+      <DataTableViewOptions table={table} />
+        <DataTableFilterList
+          table={table}
+          filterFields={filterFields}
+          debounceMs={debounceMs}
+          shallow={shallow}
+        />
+        <DataTableSortList
+          table={table}
+          debounceMs={debounceMs}
+          shallow={shallow}
+        />
+        <DataTableGroupList table={table}  debounceMs={debounceMs}/>
+        <PinLeftButton table={table}/>
+        <PinRightButton table={table}/>
+        <DataTableGlobalFilter />
+      </div>
+      <div className="flex items-center gap-2">
+        {children}
+
+      </div>
+    </div>
+  )
+}