diff --git a/src/components/textFilter.tsx b/src/components/textFilter.tsx index d1a1b50..e4cf9c6 100644 --- a/src/components/textFilter.tsx +++ b/src/components/textFilter.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useFilter } from '../hooks/useFilter'; import { useTheme } from '../hooks/useTheme'; import { asStringOrArray } from '../misc/helpers'; @@ -9,12 +8,14 @@ import { AutoFocusTextField } from './autoFocusTextField'; export function TextFilter({ compare = textMatch, filterBy = asStringOrArray, + placeholder, ...props }: { /** Custom comparison function. Should return true if an item value matches the current filter value. * By default a fuzzy text comparison is used. */ compare?: (itemValue: string, filterValue: string) => boolean; + placeholder?: string; } & CommonFilterProps): JSX.Element { const IconButton = useTheme((t) => t.components.IconButton); const Search = useTheme((t) => t.icons.Search); @@ -46,6 +47,7 @@ export function TextFilter({ value={value} onChange={(e) => onChange(e.target.value)} endIcon={ onChange('')}>{!value ? : }} + placeholder={placeholder} /> ); diff --git a/src/types.ts b/src/types.ts index 79295cf..9997be1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -67,6 +67,7 @@ export interface TableTheme { endIcon?: ReactNode; className?: string; inputRef?: Ref; + placeholder?: string; }>; Spinner: (props: { className?: string }) => JSX.Element; };