56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
import type { Table } from '@tanstack/react-table'
|
|
import { RefreshCcw } from 'lucide-react'
|
|
|
|
import { DataTableViewOptions } from '@/components/data-table/view-options.tsx'
|
|
import { Button } from '@/components/ui/button.tsx'
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip.tsx'
|
|
|
|
type DataTableToolbarProps<TData> = {
|
|
table: Table<TData>
|
|
toolbarLeft?: ReactNode
|
|
toolbarRight?: ReactNode
|
|
}
|
|
|
|
export function DataTableToolbar<TData>({
|
|
table,
|
|
toolbarLeft,
|
|
toolbarRight,
|
|
}: DataTableToolbarProps<TData>) {
|
|
const refetch = table.options.meta?.refetch
|
|
const isFetching = table.options.meta?.isFetching
|
|
|
|
return (
|
|
<div className='flex mb-4 items-center'>
|
|
<div className='flex-1 flex items-center'>{toolbarLeft}</div>
|
|
<div className='flex gap-2 items-center'>
|
|
{toolbarRight}
|
|
|
|
<div className='flex items-center'>
|
|
{refetch && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className='inline-flex'>
|
|
<Button
|
|
disabled={isFetching}
|
|
variant='ghost'
|
|
size='icon'
|
|
className='cursor-pointer'
|
|
onClick={() => refetch()}
|
|
>
|
|
<RefreshCcw />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>刷新表格</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
|
|
<DataTableViewOptions table={table} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|