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

37
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,21 +189,26 @@ export function DataTable<TData, TValue>({
return ( return (
<> <>
{searchKey && ( {(searchKey || toolbar) && (
<Input <div className="flex items-center gap-2">
placeholder={searchPlaceholder} {searchKey && (
value={ <Input
(table placeholder={searchPlaceholder}
.getColumn(searchKey) value={
?.getFilterValue() as string) ?? '' (table
} .getColumn(searchKey)
onChange={(event) => ?.getFilterValue() as string) ?? ''
table }
.getColumn(searchKey) onChange={(event) =>
?.setFilterValue(event.target.value) table
} .getColumn(searchKey)
className="max-w-sm" ?.setFilterValue(event.target.value)
/> }
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">