dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add toolbar support to DataTable component for enhanced functionality

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-30 13:42:10 +07:00
parent c43713c41c
commit 520696fb67
1 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/components/data-table.tsx
View File

@ -49,6 +49,7 @@ interface DataTableProps<TData, TValue> {
emptyText?: string; emptyText?: string;
onReorder?: (items: TData[]) => void; onReorder?: (items: TData[]) => void;
getRowId?: (item: TData) => string | number; getRowId?: (item: TData) => string | number;
toolbar?: React.ReactNode;
} }
const DragHandleContext = React.createContext<{ const DragHandleContext = React.createContext<{
@ -115,6 +116,7 @@ export function DataTable<TData, TValue>({
emptyText = 'Tidak ada data.', emptyText = 'Tidak ada data.',
onReorder, onReorder,
getRowId, getRowId,
toolbar,
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = React.useState<SortingState>([]); const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = const [columnFilters, setColumnFilters] =
@ -187,6 +189,8 @@ export function DataTable<TData, TValue>({
return ( return (
<> <>
{(searchKey || toolbar) && (
<div className="flex items-center gap-2">
{searchKey && ( {searchKey && (
<Input <Input
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
@ -203,6 +207,9 @@ export function DataTable<TData, TValue>({
className="max-w-sm" className="max-w-sm"
/> />
)} )}
{toolbar}
</div>
)}
<Card className="bg-sidebar p-0"> <Card className="bg-sidebar p-0">
<CardContent className="p-0"> <CardContent className="p-0">
<Table> <Table>