From 520696fb67ff250f4f6dd36a06901ca5636eaf2d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 30 Jul 2026 13:42:10 +0700
Subject: [PATCH] feat: add toolbar support to DataTable component for enhanced
 functionality

---
 resources/js/components/data-table.tsx | 37 +++++++++++++++-----------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index cf9ad11..5cffabb 100644
--- a/resources/js/components/data-table.tsx
+++ b/resources/js/components/data-table.tsx
@@ -49,6 +49,7 @@ interface DataTableProps<TData, TValue> {
     emptyText?: string;
     onReorder?: (items: TData[]) => void;
     getRowId?: (item: TData) => string | number;
+    toolbar?: React.ReactNode;
 }
 
 const DragHandleContext = React.createContext<{
@@ -115,6 +116,7 @@ export function DataTable<TData, TValue>({
     emptyText = 'Tidak ada data.',
     onReorder,
     getRowId,
+    toolbar,
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = React.useState<SortingState>([]);
     const [columnFilters, setColumnFilters] =
@@ -187,21 +189,26 @@ export function DataTable<TData, TValue>({
 
     return (
         <>
-            {searchKey && (
-                <Input
-                    placeholder={searchPlaceholder}
-                    value={
-                        (table
-                            .getColumn(searchKey)
-                            ?.getFilterValue() as string) ?? ''
-                    }
-                    onChange={(event) =>
-                        table
-                            .getColumn(searchKey)
-                            ?.setFilterValue(event.target.value)
-                    }
-                    className="max-w-sm"
-                />
+            {(searchKey || toolbar) && (
+                <div className="flex items-center gap-2">
+                    {searchKey && (
+                        <Input
+                            placeholder={searchPlaceholder}
+                            value={
+                                (table
+                                    .getColumn(searchKey)
+                                    ?.getFilterValue() as string) ?? ''
+                            }
+                            onChange={(event) =>
+                                table
+                                    .getColumn(searchKey)
+                                    ?.setFilterValue(event.target.value)
+                            }
+                            className="max-w-sm"
+                        />
+                    )}
+                    {toolbar}
+                </div>
             )}
             <Card className="bg-sidebar p-0">
                 <CardContent className="p-0">