In Reactjs, how can I add a search filter to my DataTable?

Question

I want to enhance my DataTable by adding search filter in ReactJS. I want the user to be able to search for a specific entry in the table. The goal is to allow users to easily search and find specific data in tables.How to implement this?

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

                </TouchableOpacity>
            </View>
            <TextInput
                style={styles.searchInput}
                placeholder="按客户搜索..."

            />
                    <DataTable style={styles.container}>
                            <DataTable.Header style={styles.tableHeader}>
                                <DataTable.Title>客户</DataTable.Title>
                                <DataTable.Title>地址</DataTable.Title>
                                <DataTable.Title>手机号码</DataTable.Title>
                                <DataTable.Title>车牌号码</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>

Answer 1

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

const [searchQuery, setSearchQuery] = useState('');
const [filteredCustomers, setFilteredCustomers] = useState(customers); // 初始化为完整列表

Now add this function. First update the searchQuery status, then filter based on the given text parameter and set the result to the filteredCustomers status.

const handleSearchInputChange = (text) => {
    setSearchQuery(text);
    const filtered = 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);
  };

This logic must be executed every time you enter in the search TextInput.

<TextInput
   placeholder="按客户搜索..."
   onChangeText={handleSearchInputChange}
   value={searchQuery}
/>

Finally, just map by filtredCustomers instead of displayedCustomers:

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