@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
47 lines (42 loc) • 1.1 kB
JavaScript
import React from 'react';
import { useAsyncDebounce } from 'react-table';
import CsLineIcons from 'cs-line-icons/CsLineIcons';
const ControlsSearch = ({ tableInstance }) => {
const {
setGlobalFilter,
state: { globalFilter },
} = tableInstance;
const [value, setValue] = React.useState(globalFilter);
const onChange = useAsyncDebounce((val) => {
setGlobalFilter(val || undefined);
}, 200);
return (
<>
<input
className="form-control datatable-search"
value={value || ''}
onChange={(e) => {
setValue(e.target.value);
onChange(e.target.value);
}}
placeholder="Search"
/>
{value && value.length > 0 ? (
<span
className="search-delete-icon"
onClick={() => {
setValue('');
onChange('');
}}
>
<CsLineIcons icon="close" />
</span>
) : (
<span className="search-magnifier-icon pe-none">
<CsLineIcons icon="search" />
</span>
)}
</>
);
};
export default ControlsSearch;