DataTableResetButton.tsx31 lines · main

1	import { X } from 'lucide-react'
2	import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
3
4	import { Kbd } from './primitives/Kbd'
5	import { useDataTable } from './providers/DataTableProvider'
6	import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
7	import { useShortcut } from '@/state/shortcuts/useShortcut'
8
9	export function DataTableResetButton() {
10	const { table } = useDataTable()
11	useShortcut(SHORTCUT_IDS.DATA_TABLE_RESET_FILTERS, () => table.resetColumnFilters())
12
13	return (
14	<Tooltip>
15	<TooltipTrigger asChild>
16	<Button type="default" size="tiny" onClick={() => table.resetColumnFilters()} icon={<X />}>
17	Reset
18	</Button>
19	</TooltipTrigger>
20	<TooltipContent side="left">
21	<p>
22	Reset filters with{' '}
23	<Kbd className="ml-1 text-muted-foreground group-hover:text-accent-foreground">
24	<span className="mr-1">⌘</span>
25	<span>Esc</span>
26	</Kbd>
27	</p>
28	</TooltipContent>
29	</Tooltip>
30	)
31	}