Up next in 10
Build a React.js Live Search Filter Contact List Using Bootstrap 5 Table in Browser Using Javascript
Dec 22, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-live-search-filter-contact-list-using-bootstrap-5-table-in-browser-using-javascript/
Show More Show Less View Video Transcript
0:06
Uh hello friends today in this tutorial
0:08
we will be building a live search filter
0:12
list kind of an application inside
0:14
reacts. So let me just show you the demo
0:16
of this application. So basically there
0:19
is a table out there which is a
0:21
bootstrap table and basically it
0:23
contains a lot of information. So you
0:26
can see there are four columns out
0:27
there. First name, last name, email
0:30
address and phone number. So you can see
0:33
this is a reports out there. So there is
0:35
this is a random data that we are
0:37
storing it inside a file. You can also
0:39
get this data from an API external API.
0:43
Totally depends upon your own
0:44
application. The nice thing about this
0:46
application is that there is this input
0:48
field out there and if you want to
0:51
search a contact by its first name, you
0:53
can search it. So this is functional. So
0:56
if I just write here from a you can now
0:59
see it is live filtering out the names
1:02
here as I type here. So it is live
1:04
filter like you can see that if I start
1:07
with t a b
1:10
you can see here as I write this tabina
1:13
is a name here you can now see the first
1:15
name tabina is there. So it's a live
1:17
filtering it. You can now see how it is
1:20
doing it. So as I said JA you can now
1:24
see all the names starting with JA will
1:26
be showed here nicely.
1:30
So basically we have this bootstrap
1:32
table which we are using it inside our
1:34
ReactJS application. And then if I live
1:37
filtering it you can see all the records
1:39
which have this Jasmine. You can now see
1:42
if I put K Catalin you can now see. So
1:46
we will be trying to make this awesome
1:49
little live search filter guys
1:51
application inside our react shares and
1:54
we will be using bootstrap for this
1:56
table and also for this input field nice
1:58
little so if you're watching it for the
2:00
very first time then please hit the like
2:02
button and also subscribe the channel as
2:05
well so you can see it how nicely it is
2:08
done. So let me just wait for all the
2:12
guys to join in because my subscribers
2:15
I'm doing this live stream at night. So
2:17
that's why it's difficult for the
2:19
viewers to join in. So slowly slowly the
2:22
viewers will will join in and I will
2:25
explain to you what is happening here.
2:27
So
2:29
again let me tell you what we are
2:31
building here. It says search contact
2:33
list list kind of an application. So
2:36
here you can search for your contacts by
2:38
live search. So this is the field out
2:40
there. So here if you search it, you
2:43
will now see it will give you the search
2:45
here like this.
2:51
If you write here, you will now see it
2:53
will live filter it. So as you type the
2:56
contacts, it will find out
3:00
the names by its first name.
3:03
So we will try to build this
3:05
functionality guys in this tutorial. So
3:07
if you're watching it for the very first
3:09
time then please hit the like button,
3:11
subscribe the channel as well.
3:14
So let me just wait for all the guys to
3:17
join in and then we will start this
3:19
application.
3:22
So it's a live search filter guys. So if
3:25
you are watching it for the very first
3:28
time then please hit the like button,
3:30
subscribe the channel as well.
3:36
So just wait guys I'm just starting it
3:39
this application as people can join in.
3:46
You can see that how perfectly it is
3:48
working. It is
3:50
searching it like this. The first name
3:53
last name all the fields are. So for
3:56
building this application guys we are
3:59
using a bootstrap as you as you all
4:01
know. So specifically for reacts we have
4:05
this library which is react bootstrap.
4:08
This is the package we are using it. If
4:11
you go to its official website though
4:13
basically it's a most popular front-end
4:15
framework. Basically it is rebuilt for
4:17
reacts. So it is called as react
4:19
bootstrap. So it has a lot of components
4:22
out there. We will now see alerts
4:24
accordian batch. So for this purpose we
4:27
have will be using our
4:30
input group component
4:33
and the table as well. So we have the
4:35
table component. If you see
4:38
inside this bootstrap. So we will be
4:40
using this table component guys to
4:42
render out the table inside this. This
4:44
is the table that we are using it.
4:48
So if you're watching it for the very
4:50
first time then please hit the like
4:52
button subscribe the channel. So now
4:55
let's get started by building this
4:56
application. So right here inside our
4:58
ReactJS project we have this uh newly
5:02
created ReactJS project guys. So
5:06
I have given all the source code in the
5:07
description of this live stream. So get
5:10
all the source code. So here first of
5:12
all guys we will delete all the source
5:14
code. We will start from scratch.
5:18
and also delete this
5:24
and also delete this data folder as
5:26
well. So simply delete this.
5:30
So now if you refresh your ReactJS
5:32
application guys, nothing will be
5:33
present here. If you see nothing is
5:36
present. So it is currently empty. Our
5:38
ReactJS application is currently empty.
5:41
So now now the very first thing guys we
5:43
need to do is that we need to install
5:45
the packages which is required for this
5:47
application. First package is react-
5:50
bootstrap. This is the package which is
5:52
required for this. So simply install
5:54
this package which is react- bootstrap.
5:58
So this is required for this application
6:00
guys. So once it is installed it will be
6:03
listed here. You will see
6:04
react-bootstrap is successfully
6:06
installed. This is a version number
6:08
2.4.0.
6:11
So I have already installed it. So once
6:15
I will just start this application
6:18
npm run start. So this will start this
6:20
ReactJS application and port number
6:22
3000. So now guys inside of a root
6:25
directory of the ReactJS project just
6:27
make it data.js file. So here we will be
6:29
storing all the records that needs to be
6:32
inserted
6:34
inside a table.
6:40
So basically this will be a array of
6:42
object. So this will be data here. And
6:45
inside this basically you can give as
6:47
many reports as you want. This will be a
6:49
JSON property.
6:52
If you see here
7:00
so I have given this records here guys
7:03
in the description of this live stream.
7:05
So this is my blog posts. So you can
7:07
copy paste all this data static data.
7:09
This can also be coming from the API as
7:11
well. Totally depends upon your own
7:13
application.
7:15
So we will have this object
7:19
and we can export this. So we can
7:21
include it inside another files. So in
7:24
this will be an array of object. So each
7:26
object will have this uh five properties
7:29
guys. First will be the id then we will
7:31
have the first name, last name, email
7:33
address and phone number. You can see
7:35
this is the object here which contains
7:37
these five properties. So we can simply
7:39
now copy paste it.
7:43
So you can see it has 100 records out
7:45
there. Similarly we have copy pasted it.
7:48
This can also be coming from an API. So
7:50
this is our data js file. This needs to
7:53
be rendered inside a bootstrap table.
7:55
Now we'll move to the app dot js file.
7:57
So right here we need to first of all
8:00
uh have a hook variable. Basically here
8:04
we will have a we store the state of the
8:08
reacts application. So here we will say
8:10
search set search.
8:12
So whatever we will search inside the
8:14
input field we will store it inside this
8:16
ustate hook. This will be imported from
8:18
reacts application. So right here inside
8:20
this div section guys you will have a
8:22
component which will be a bootstrap
8:24
container component. You will now see.
8:27
So inside this container component guys
8:29
you will have a heading basically. Here
8:31
we will say live search filter
8:35
in reacts.
8:37
So basically we need to align this
8:39
heading in the center position. So we
8:40
will be giving a class name to it of
8:45
which will be text center. This is the
8:47
bootstrap class guys. Text center and
8:49
margin top from four. So if you now
8:52
refresh it your application
9:01
uh let me see
9:13
so local host 3000. So now you will see
9:16
this is live search filter in ReactJS.
9:18
So you can see that this is our
9:21
application
9:24
and text center margin T4. So after this
9:28
guys we need to have a simple form
9:30
component here. Basically this is the
9:32
form component which is there inside
9:34
Bootstrap. You can now see it is
9:36
imported from react- bootstrap. So this
9:38
is a form component and right here what
9:41
we need to do is that
9:44
inside this form we will show a simple
9:46
input field where we can search for our
9:49
elements.
9:52
So just wait let me see.
9:56
So if you're watching it for the very
9:57
first time guys then please hit the like
9:58
button subscribe the channel. So inside
10:01
this uh we will have a simple input
10:04
field. So for surrounding the input
10:06
field guys we have this component called
10:08
as input group.
10:11
So input group this component will also
10:14
get imported from react bootstrap. And
10:18
here we will be giving a class name to
10:19
it.
10:24
So this class name will be margin from
10:26
the yaxis three. And here guys we will
10:31
have a form control.
10:36
Form control.
10:40
Form control. And basically
10:45
inside this we will define our input
10:47
field. So basically this will be
10:50
placeholder. We will be giving a
10:52
placeholder simple placeholder that uh
10:55
search contacts.
10:58
So now if you refresh your ReactJS
11:00
application guys, you will now see a
11:02
simple input field out there which is
11:03
search contacts.
11:08
And also guys, we need to also import
11:10
the CSS for Bootstrap. So right here
11:12
just import this. We will simply say
11:17
Bootstrap
11:18
/
11:20
CSS/
11:22
Bootstrap
11:24
main. CSS. So import this also
11:30
and also we need to uh
11:34
import our uh form component which is
11:38
there from react bootstrap/
11:43
form. This is a component which is there
11:46
inside react bootstrap. So we are just
11:47
importing it.
11:52
And the container one we also need to
11:54
import like this. import container from
11:58
react bootstrap /ashc container
12:03
and also import
12:06
input group
12:11
from input group like this.
12:18
So now if you refresh your application
12:20
guys now you will see that the heading
12:22
will be there in the center position.
12:24
Now you you have this nice little input
12:26
field out there which is there which is
12:29
giving the feeling of bootstrap. So now
12:31
you can see that. So up till now if you
12:33
have any sort of problem guys please hit
12:35
the like button subscribe the channel as
12:36
well. So if you're watching it for the
12:38
very first time guys please hit the like
12:40
button. Sorav Gupta please hit the like
12:42
button. Manukuran Manifas super he's
12:46
saying that please hit the like button
12:48
and after this guys we will simply show
12:51
a table and
12:54
we need to
12:56
you can write anything inside this input
12:58
field but now we need to
13:02
give it a table after this form. So the
13:06
table component will be there guys.
13:08
Table I think this table will be
13:11
imported from
13:13
react bootstrap table. So just put /ash
13:18
table.
13:20
That's it.
13:25
So inside this table guys we will be
13:29
giving it a class which will be called
13:32
as striped. The table will be striped
13:35
and also it will be have a border table
13:38
and hover as well. So these three
13:40
classes we have given and then we will
13:42
have a table head tag.
13:46
So inside this we will show table row
13:48
and then we will have
13:52
headings here which is column name which
13:55
is first name,
13:57
last name.
14:01
Then we will have email address and also
14:05
we will have uh phone number like this.
14:10
So after this guys we will have the
14:13
table body tag. So inside the table body
14:17
guys we will first of all import the
14:19
data that we have written inside this.
14:21
This is an array of objects. 100 records
14:23
are there. So we need to import this. So
14:24
we will simply say import data
14:28
from data like this.
14:31
You can see that. So now we need to loop
14:34
through guys inside this table body. So
14:38
basically here we will say inside curly
14:40
brackets data
14:42
and basically
14:45
we will map this using the map method.
14:49
So for each item we will have its index.
14:55
So basically here we will be having a
14:58
table row tag and inside this we will be
15:03
assigning a key parameter.
15:06
So this needs to be an arrow function.
15:08
Sorry.
15:11
Here we will be assigning the key
15:12
parameter guys. This will be equal to
15:14
index and inside this we will have the
15:16
table data tag. And here we will be
15:19
simply be putting item dot first name.
15:26
And then we will have
15:29
if you see here we have initialized like
15:31
this first name first name last name
15:35
email phone. So we just need to now put
15:39
this item dot last name
15:45
item dot email
15:52
and item dot phone number. That's it. So
15:55
if you now put this guys if you refresh
15:57
it.
16:01
So now you can see that all the records
16:03
are showing it inside this bootstrap
16:05
data table. You can basically it's
16:07
called a data table because it is
16:09
holding a lot of data 100 records are
16:11
there 100 rows. So it is all this data
16:15
is fetching here. You will now see from
16:16
this file which is data.js. You can even
16:19
uh get this data from an API external
16:22
API as well. Totally depends upon your
16:24
own application. So this is data here
16:26
guys. You can see that. So now we need
16:28
to search this data by first name. So
16:31
basically here you can say if I type
16:33
anything now you can see the search
16:35
filter is not working. So we need to
16:36
assign the simplest of function here. So
16:39
right here inside this looping through
16:42
when we are doing up till now guys if
16:44
you have any sort of problem you can ask
16:46
in the comment section and please hit
16:48
the like button subscribe the channel as
16:49
well. So now we will be looking at how
16:52
to filter out this data. So there is a
16:54
highlevel method guys which is there
16:57
inside JavaScript which is called as
16:59
data dot filter. So we will make this
17:03
filter method guys. You can now see
17:06
after this
17:08
just put this dot here like this. First
17:11
of all we will make the filter here like
17:13
this
17:15
and for each item we will do this
17:17
process. So this will be a arrow
17:19
function.
17:22
So like this. So first of all we will
17:24
filter out the data and then we will
17:26
display the results like this. So here
17:28
we are using two methods. First we are
17:30
invoking this filter method and then we
17:32
are in uh invoking the map method to
17:35
display all the results. So right here
17:37
inside this filter method guys we will
17:38
return all the elements which passes
17:42
this result which is search. If you see
17:45
here we have uh I think we haven't
17:48
attached. Yeah. So we need to attach on
17:51
change as well guys. here on change. So
17:53
whenever the value changes inside this
17:55
input field, this call back function
17:56
will automatically execute. And here we
17:59
will call this method of hook which is
18:01
set search. And here we will simply say
18:04
e.target dot value. That's it. So here
18:07
we have binded this method guys set
18:09
search. You can now see we are calling
18:11
this method of uh use state hook. So
18:14
whatever value is written here it will
18:15
be assigned here using this function.
18:17
And here we will be now be getting this
18:20
value whichever value is there. First of
18:22
all we will convert this value to lower
18:24
case. So this will so let's suppose in
18:27
if I return in capital letters it will
18:29
convert this to a lowerase letters.
18:33
And after that we will
18:36
compare it using this triple equal to
18:39
and first of all it it will check if the
18:42
value is empty. In that case we will use
18:45
the turnary operator. we will return the
18:47
item as it is. We will return the item
18:49
as it is. But if the
18:53
item is not empty, in that case we will
18:55
say item dot first name.
19:00
You can now uh uh filter out with any
19:03
property guys. It it need not have to be
19:05
first name. You can also filter out by
19:07
last name and email address as well.
19:09
Totally depends upon you which we need
19:11
to filter out. So we will be filtering
19:13
out by first name. And again we need to
19:16
convert this to lower case just to
19:20
be on the same page lowerase.
19:23
And then there is a method guys which is
19:25
called as includes. So there is a
19:28
includes method which allows you to
19:31
search. So here we will pass the search
19:34
here. That's it.
19:39
So that's all that you need to do guys.
19:40
So basically uh whichever data that you
19:43
type here, whichever character that you
19:45
type, basically it will only uh show the
19:48
results to you. Now if you refresh the
19:49
application, if I go to my contact list
19:54
and uh if I
20:00
sorry let me run this application once
20:02
again it was crashed. So npm
20:07
run start.
20:09
So now it will start my ReactJS
20:11
application on localhost 3000 port
20:14
number. So just wait it is starting it.
20:25
So it is starting the development
20:26
server. So just wait guys for the
20:28
development server to start. So now you
20:30
can see if I hit any here if I put a
20:33
like this a n s e l. So now you can see
20:37
it is filtering out by first name. As I
20:39
type the characters, it is filtering out
20:42
by the characters NE. If I write here K
20:48
E. So all the characters starting with K
20:51
will come here like this. First name
20:53
Kelvin like this. If I start with L
20:57
characters array B E R N E can now see.
21:01
This is a live search filter guys. we
21:03
have developed inside ReactJS using the
21:05
bootstrap data table. So all this data
21:07
is fetching is is coming from a file and
21:09
we are able to filter out these contact
21:12
list using reacts.
21:15
So if you're watching it for the very
21:16
first time then please hit the like
21:18
button subscribe the channel as well
21:20
like this you can filter out by last
21:23
name as well totally depends upon you
21:25
you can change this property just change
21:27
it to last name now item dot last name.
21:32
So what will now do is that it will it
21:35
filter out by last name. So if I type
21:37
here mass
21:39
like this. So now you can see that if I
21:43
type this refy
21:45
like this. So last name is refy here
21:47
like this. You can even filter out by
21:49
email address. Totally depends upon you
21:51
which property you need to filter out.
21:53
So this is a code guys. All the source
21:55
code I have given in the description of
21:56
the live stream and also in the live
21:57
chat. So if you want to get all the
21:59
source code, please hit the like button,
22:00
subscribe the channel as well. If you
22:02
are watching it for the very first time.
22:15
So this is the application guys we have
22:17
developed it. So if you have any doubt
22:19
related to this application you can ask
22:21
in the comment section and
23:20
So if you're watching it for the very
23:21
first time guys then please hit the like
23:23
button subscribe the channel as well.
24:01
So if you have any sort of doubt guys
24:03
you can ask in the comment section. I
24:04
will try to reply to your doubts.
24:08
So so anyone watching here you can
24:10
comment here. I will definitely reply to
24:12
your questions. So,
24:23
so I can also live chat with you, answer
24:26
your questions. So, if you have any sort
24:27
of live chat with you, answer your
24:29
questions. So, if you have any sort of
24:31
live chat with you, answer your
24:33
questions. If you have any sort of live
24:35
chat with you, answer your questions. If
24:37
you have any sort of live chat with you,
24:39
answer your question.
24:47
So please hit the like button guys,
24:49
subscribe the channel as well.
25:52
So if you're watching it for the very
25:53
first time guys, please hit the like
25:55
button, subscribe the channel as well.
26:05
Please like and subscribe.
26:25
Please
26:33
wonder.
27:01
Thank you.
27:53
speech.
28:12
If you want to Please.