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-17 14:22:12Z

2

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, 2023 at 14:22

answered Aug 16, 2023 at 17:41

Ahmed Sbai

16.6k11 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Les Jetskii Over a year ago

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.

Ahmed Sbai Over a year ago

@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);

Les Jetskii Over a year ago

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.

Ahmed Sbai Over a year ago

@LesJetskii add this useEffect: useEffect(() => {setFilteredCustomers(customers)},[customers])

Les Jetskii Over a year ago

it finally works. Thanks bro

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related