Up next in 10
Build a React.js CSV Viewer & Editor to Render CSV Using react-csv-viewer Library in Browser
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/756e780066c7aa570a7b8e143d42c110
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will talk about how
0:04
to display CSV files and we'll be
0:07
looking at in react CHS CSV Viewer and
0:10
editor and this is actually the
0:12
interface which is developed using
0:14
bootstrap and we have a choose file
0:16
button here the user can select a CSV
0:19
file so if I select the CSV file you
0:21
will see all the
0:24
controls of using this so you will see
0:29
this uh
0:31
the CSV files we have different comma
0:34
separated values so we have these
0:36
columns right
0:38
here and we also see these controls so
0:41
on page one basically we are showing 10
0:43
rows you can also show 20 rows as well
0:46
these are different controls which are
0:48
there in this module we can go to the
0:49
next page and you can see page two page
0:52
three page 4 page five page
0:55
six so we have previous next page
0:58
controls you will see it's a fully
1:00
fleshed CSV editor VI you can see your
1:04
CSV files really easily in the
1:07
browser you can adjust how many rows you
1:10
want to show on a single page and then
1:12
we have these next buttons previous
1:14
buttons you can easily see the content
1:18
of CSV files right in the browser itself
1:20
using this
1:22
awesome library that I will show you so
1:25
now guys uh we are using this module
1:28
which is react CSV Viewer you can even
1:31
search this uh Library by going to
1:36
npmjs.com and just search for this
1:39
package which is react
1:44
CSV so this is actually the name of the
1:46
package react CSV Viewer the very first
1:50
link which comes and uh you can see that
1:53
it's a pretty new library 125 weekly
1:56
downloads are there so now to get
1:59
started we need to install this package
2:02
first of all which is react CSV Viewer
2:05
apart from that we are also using uh
2:07
bootstrap for building the user
2:10
interface so you just need to install
2:12
these three packages which is react CSV
2:14
Viewer react bootstrap and bootstrap so
2:17
just install that I've already installed
2:20
these so I will start the development
2:23
server so I will start from scratch just
2:28
make a simple functional
2:33
component so for building this I will
2:35
use the shortcut RFC it will have a
2:38
functional component now I will
2:41
basically import the
2:43
bootstrap so first of all we need to
2:46
include the bootstrap CSS file so we
2:48
have included this you will see and then
2:51
we need to import these modules from
2:54
react bootstrap we will be using the
2:56
container class form and alert from
3:00
react bootstrap
3:02
so after this we need to actually
3:05
declare some State variables which will
3:07
be
3:08
required for this application first of
3:10
all we need to keep track of which CSV
3:12
file the user has selected for this we
3:15
have declared file content set file
3:17
content and using the US state hook of
3:20
react CHS so the initial value will be
3:22
null whenever you open the application
3:25
for the very first time and then we need
3:27
to keep track of any error so for that
3:30
we are having this variable set error is
3:33
a function in US state
3:35
to initial value will be nothing and
3:39
then we need to keep track which file is
3:42
selected by the user so file uploaded
3:44
set file
3:46
uploaded and the initial value will be
3:50
null so here we are just keeping track
3:52
whether the user has uploaded the file
3:54
or not for this we have a boodan
3:56
variable so depending upon that we will
3:59
show the some wigets on the screen and
4:02
lastly we need to have a file input ref
4:06
this will be required for attaching the
4:09
reference so use ref it will be used so
4:12
use ref is again a hook that we need to
4:14
import from react so use
4:18
ref so that's all the state variables
4:20
which are required and now coming back
4:22
to the
4:25
jsx we will instead be using wrapping
4:28
everything using the container class of
4:35
bootstrap so right here uh we will
4:37
attach uh a bootstrap class margin from
4:43
the y direction and when we have a
4:46
simple H1
4:51
tag we'll align this heading in the
4:53
center position and it will simply say
4:55
react CSV Viewer
4:59
and here we will simply
5:02
check if the
5:04
file variable if the file is not
5:08
uploaded
5:10
or in either of these
5:14
cases so simply here what we are
5:17
checking right here if this file is not
5:19
uploaded because the initial value is
5:21
false so this will be executed because
5:24
we have put a not sign so essentially if
5:27
the file is not uploaded then we need to
5:29
show the file input so for showing the
5:32
file input we will use the form
5:38
group component or bootstrap react
5:41
bootstrap and we'll attach a control ID
5:44
CSV file and we'll give it also a class
5:47
name which will
5:50
be and inside this we will have the
5:53
actual label that we want to show to the
5:55
user which will say upload a CSV file
6:00
and here the user will upload the file
6:03
and you will have the form control we
6:05
will attach some attributes to it so the
6:08
type parameter we need to give
6:11
it of file and we will only be accepting
6:15
the CSV files only so we are just having
6:19
this attribute and we will also be
6:21
attaching a on change so when we do
6:23
select a file this function will get
6:25
executed a custom function I would
6:28
Define this function which is handle
6:30
file
6:30
uploaded right
6:37
here so here e parameter will
6:39
automatically be passed to this function
6:42
so and also we need to attach a
6:44
reference which we declared early on
6:47
which is file input
6:49
ref that's all that we need to do and if
6:52
you refresh there will be this
6:55
uh choose file button which will be
6:57
there and now we will simply be after
7:01
this if any sort of error take
7:05
place we will show any alert message to
7:09
the user using this
7:11
alert and the variant of the alert will
7:15
be the danger one and it will simply be
7:17
attaching any sort of error which will
7:19
be
7:21
there so after this uh we need to read
7:24
the file first of all for reading the
7:25
file we this function will be executed
7:28
whenever you select a file handle file
7:30
uploaded we need to get access to the
7:32
file so for that we will simply say e.
7:35
Target files zero this will get
7:37
reference to that file and then we will
7:39
simply check if the file is not uploaded
7:42
so not sign file then we'll set this
7:45
error message that uh using the hook
7:47
function no file
7:51
selected and then we will simply return
7:53
and not execute the rest of the code and
7:58
same another if condition here if the
8:01
file is not CSV then we simply say
8:03
please upload a valid CSV file so you're
8:05
checking the type of the file in that
8:08
case also we return and now if all
8:12
things are corrected then we set the
8:13
error to nothing and then you read the
8:16
file using the file reader Constructor
8:18
you simply say file reader this is a way
8:21
by which we can simply read any file and
8:25
we simply first of all say reader. read
8:28
as
8:29
text and we read the file as a pure text
8:34
and this will need this will execute
8:36
this function reader on load and this
8:39
will be executed event parameter will
8:42
automatically be passed and here you'll
8:43
simply say set file content the variable
8:47
the hook function that we created right
8:50
here so we are setting this state to
8:53
whatever is the result so which will be
8:56
contained inside event. Target do result
9:01
and then we set the file uploaded to be
9:04
true so here basically tells that the
9:07
file has been selected by the user so we
9:09
are changing the value from false to
9:12
true and if any sort of error take place
9:15
in reading the file this call back
9:17
function will execute on error and here
9:20
we can set the error message set error
9:23
to
9:23
be
9:25
error in reading the file
9:32
so if you try to refresh now and if you
9:36
select any other file apart from
9:41
CSV you will see this error message that
9:44
please upload only a valid CSV file so
9:46
in this way we actually display these
9:48
eror messages so now if you want to now
9:52
show the CSV Viewer after this alert
9:55
message we will actually be comparing
9:58
that if the file content has been set
10:01
then only display the actual CSV file so
10:04
in order to display the CSV file we will
10:06
have a div
10:07
tag attaching a class name to it margin
10:11
top four and here we will have the
10:13
module here CSV
10:16
Viewer so we need to uh actually import
10:19
this module I showed
10:21
you so just import this
10:25
module at the top just add this import
10:28
line import
10:31
CSV Viewer from this Library react CSV
10:36
Viewer and we can simply now use
10:46
this so it basically takes some options
10:49
first of all you need to attach the data
10:51
property so whatever is the data so we
10:53
have the file content variable so if you
10:56
try to now actually select a CSV file
11:04
so now the the file is displaying you
11:07
will see that all the controls are there
11:10
if you
11:11
see so using this simple CSV module we
11:15
can simply display the CSV file so in
11:19
this way you can do this and also we can
11:22
additionally provide some options this
11:24
is not necessary you can do that without
11:27
it as well but uh there is these options
11:30
available to us which is uh array
11:40
of
11:44
think yeah if you want to show the
11:46
header as well you can do this by
11:49
providing an options header to two and D
11:52
limiter is comma so you can also provide
11:56
any other D limiter commonly in CSV
11:59
files the D limited is comma because it
12:01
is called as comma separated value so in
12:04
this way guys uh you can display your
12:06
CSV files with all these controls
12:08
available previous next you can change
12:11
the total number of rows to be displayed
12:13
on a single page uh so this is a really
12:16
nice module if you want to show CSV
12:18
files in the browser editor so thank you
12:22
very much for watching this video please
12:24
hit that like button subscribe the
12:25
channel and do check out my website as
12:27
well free mediat tools.com which
12:29
contains thousands of free tools
12:31
regarding audio video and image and I
12:33
will be seeing you in the next video
#Programming
#Software