Added search area for table users

This commit is contained in:
Joao Ramos
2023-12-27 21:44:13 +00:00
parent b7ddee1db2
commit b3bb5a2337
2 changed files with 88 additions and 27 deletions

View File

@@ -0,0 +1,48 @@
import {useState, useMemo} from 'react';
import Input from "@/components/Low/Input";
/*fields example = [
['id'],
['companyInformation', 'companyInformation', 'name']
]*/
const getFieldValue = (fields: string[], data: any): string => {
if(fields.length === 0) return data;
const [key, ...otherFields] = fields;
if(data[key]) return getFieldValue(otherFields, data[key]);
return data;
}
export const useListSearch = (fields: string[][], rows: any[]) => {
const [text, setText] = useState('');
const renderSearch = () => (
<Input
label="Search"
type="text"
name="search"
onChange={setText}
placeholder="Enter search text"
value={text}
/>
)
const updatedRows = useMemo(() => {
const searchText = text.toLowerCase();
return rows.filter((row) => {
return fields.some((fieldsKeys) => {
const value = getFieldValue(fieldsKeys, row);
if(typeof value === 'string') {
return value.toLowerCase().includes(searchText);
}
})
})
}, [fields, rows, text])
return {
rows: updatedRows,
renderSearch,
}
}