How can I add a search filter for my DataTable in reactjs?

Question

I'm looking to enhance my DataTable in React by incorporating a search filter.
I want users to be able to search for specific entries within the table.
The goal is to allow users to easily search and find specific data within the table. How to implement this?

<><ScrollView showsHorizontalScrollIndicator>
            <View style={styles.root}>
                <TouchableOpacity
                    style={[styles.button, styles.buttonOutline]}
                    onPress={handleBackButtonClick}
                >
                    <Text style={styles.buttonOutlineText}>Back</Text>

                </TouchableOpacity>
            </View>
            <TextInput
                style={styles.searchInput}
                placeholder="Search by customer..."

            />
                    <DataTable style={styles.container}>
                            <DataTable.Header style={styles.tableHeader}>
                                <DataTable.Title>Customer</DataTable.Title>
                                <DataTable.Title>Address</DataTable.Title>
                                <DataTable.Title>Mobile No.</DataTable.Title>
                                <DataTable.Title>Plate No.</DataTable.Title>
                            </DataTable.Header>
                            {displayedCustomers.map((customer, index) =>{
                                return(
                                <TouchableOpacity
                                    key={index}
                                    onPress={() => handleRowClick(customer)}
                                    style={[ styles.row,
                                        selectedRow && selectedRow.id === customer.id && styles.selectedRow]} 
                                >
                                <DataTable.Row key={index}>
                                    <DataTable.Cell>{customer.customer}</DataTable.Cell>
                                    <DataTable.Cell>{customer.address}</DataTable.Cell>
                                    <DataTable.Cell>{customer.mobileno}</DataTable.Cell>
                                    <DataTable.Cell>{customer.plateno}</DataTable.Cell>
                                </DataTable.Row>
                                </TouchableOpacity>
                                )
                                
                            })}

                        
                </DataTable>
                <DataTable.Pagination
                    page={currentPage}
                    numberOfPages={Math.ceil(customers.length / itemsPerPage)}
                    onPageChange={handlePageChange}
                />
            </ScrollView>

Ahmed Sbai · Accepted Answer · 2023-08-17T14:22:12.550

1

Create a state to hold the search query, and another one to store the filtered data:

const [searchQuery, setSearchQuery] = useState('');
const [filteredCustomers, setFilteredCustomers] = useState(customers); // Initialize with the full list

Now add this function. First it updates searchQuery state, then it filters based on the given text argment and set this result to filteredCustomers state

const handleSearchInputChange = (text) => {
    setSearchQuery(text);
    const filtered = text === "" ? customers : customers.filter(
      (customer) =>
        customer.customer.toLowerCase().includes(text.toLowerCase()) ||
        customer.address.toLowerCase().includes(text.toLowerCase()) ||
        customer.mobileno.includes(text) ||
        customer.plateno.includes(text)
    );
    setFilteredCustomers(filtered);
  };

You want to execute this logic each time you type in the search TextInput

<TextInput
   placeholder="Search by customer..."
   onChangeText={handleSearchInputChange}
   value={searchQuery}
/>

Finally, you just need to map through filtredCustomers instead of displayedCustomers:

{filteredCustomers.map((customer, index) => {
  return (
     <TouchableOpacity
        key={index}
     >
       // ....
     </TouchableOpacity>
  )  
})

edited Aug 17 '23 at 14:22

answered Aug 16 '23 at 17:41

Ahmed Sbai

10,695
9
19
38

The search filter works, but at the start when im not yet typing anything in the text input the table is not displaying the data. I want it to show the data before I type anything in the text input. – Les Jetskii Aug 17 '23 at 14:18
@LesJetskii @LesJetskii you are right, I updated my answer, I've added a condition to let `filtered` equal to `customers` when `text` is an empty string. also intilize the state to `customers` when the component mount `const [filteredCustomers, setFilteredCustomers] = useState(customers);` – Ahmed Sbai Aug 17 '23 at 14:49
it only shows all the data when I type something on the text input and delete, but it dont show automatically at the start its blank, I have to delete everything I typed first for all the data to show. – Les Jetskii Aug 17 '23 at 15:51
@LesJetskii add this useEffect: `useEffect(() => {setFilteredCustomers(customers)},[customers])` – Ahmed Sbai Aug 17 '23 at 15:52
it finally works. Thanks bro – Les Jetskii Aug 18 '23 at 11:53

How can I add a search filter for my DataTable in reactjs?

1 Answers1