React Data Table Component Tutorial

hi everyone in this video we'll create a data table component a digital table in rehackages so create so create a data table in react we will use a package by the name of react data table company token we will use this package and first we will install this package in pistol react data table component after installing we will install the style components also okay let's come to our code here so I have installed them first we will come to the react data table this is the drag data table component I have installed already and also style component we should install that also since style component after installing these two packages so now we will start creating a data table to sort that to pagination with that and also a fly filter and that too and that's it to select them the rows so these are functionalities we will perform using this package so what we should do first of all um have an import that imported data table from react data table component after importing this so now we need the data that we would like to show in this data table logo so first I will write the columns columns is equal to for the column the first thing is the name it means that the heating okay the heating the first we will assign for example um title and the second one would be that this would be named okay and the second column would be named email and also the third column would be name H after writing this so now we should use selector okay the selector means that that will give us a row a complete row okay we will use this selector selector and we will it give us a complete row you will write Arrow function row dot name okay that the name that we would like to pitch okay we will later we will write this name in the data in our data same to this we will write for all these three email and H so now let's define our data so for the data the first thing to Define that is name before name just write id id would be one with us and in the name with us name would be users and the second one is the email that we have the old email s third one is the age and same to this I will write more data I will just pass and write a few records choose why I wrote five free cards okay these five records of data with us so now let's collapse this and that so let's cut off this column first I will display this data to display this data we will use data table company that we have imported before and we will assign now the columns The Columns will be the column that we wrote columns and the data would be the data that we are out okay after writing this let's run the server the server is running already so let's come to the Chrome and see our app see it is our application which is running so these five record we wrote okay this data we have now so now the first thing is let's add the sortable to make this sortable okay to say make this suitable so just come to the column area and here are just suitable through so if you would like to sort apply this on email also so you can apply it an email also with also an edge and which one you want so you can apply in that one just try to put this suitable true so now let's check it now see it we have this let's sorted see and also an email you can sort it in also an age see it we have sorted the regards so it was applying the sword so now let's apply that selectable okay these should be selectable the rows to apply that just let's try it here we will just write here selectable rows select table close this one okay after writing this let's take it see these are selectable now you can select the rows so it was another property so one of the property is to make this for example we have let's copy a few records mode yeah let's copy these records sorry these are columns it's to the data now let's check it see we have these records so now we don't know what is this for example we have more details here are thinner it will columns so we don't know what is it here what is it is so further to make this header fixed so we will write something like this okay fixed heater after writing this now let's stick it see the heater is fixed it does now see that the heater is fixed now with us generation we will just write AG Nation after writing this we will see now the pitch Edition see these are the feature Nation okay see it let's go to the next page and back so it was all about the pagination to add the pig generation to the table so now the last functionality that we should perform that is the filter okay to filter these data to filter we will use first of all we will create uh a search box okay I will create a search input field there input type is equal to text and let's name and paint let's check it how it looks like it looks like this okay beautiful so now let's just you can add here a button also to remove restore the text field so maybe just perform the filtering option so now whenever we are changing the database okay on change we will call a function handle filter now we will create this hinder handle filter function okay to create that let's collapse the data and also the column before calling the function so I will create a state okay a variable to assign the data to that I will keep that const three cards set records using used okay excuse and I will assign the data to this variable okay this data has assigned to this state ID cards okay now I will use retards here instead of data I will use three cards okay it is the same uh what happened in the filter okay this function is defined its create the function function middle filter it will have the name it a ticket everything is okay so now let's perform the filter so perform the filter on this what we should do whenever we get a video okay can't say we can just directly use the cons new data okay new database is equal to we will use filter and this array cards okay regards dot filter we will use filter function of the JavaScript so now we will have in item file after that we will perform operation on this filter so now we will return the records that row that name we will perform our filtration again row dot name dot includes first I will change that to the lowercase tool lower case after that that includes after that in in the includes what I should write I should write the data that I am entering in this input field event dot Target dot value dot to lowercase now I will set the records see three cards to this newly cards new data so everything is okay so let's try it okay I will just write the name of for example Holly just highly came to the top or if I write sorry in filter so let's stick it to what happened so the problem is that we have to filter the data okay the data that we has not the records because the records are beating so we should filter the data so now let's check it refresh the page we don't need the refresh but just read adds user we don't have any card honey see we have applied the filter professional and this also so it was all about so you can design it that's a new added to design it to make a style to this but these were the functionalities in react data table using react data table component package so as I have helped so if you have liked this video please subscribe our YouTube channel and also like this video thanks for watching

Channel: Code With Yousaf

Views: 93,039

Keywords: react data table component, react table, react data table, react, react table component, react table tutorial, table component, react data table component in hindi, react data table component tutorial, react js, react datatable, table in react, table in react js, material ui table react, react tutorial, react table sort component, react table pagination, react js datatable, how to make a table in react, data table in react js, react data table pagination, table, reactjs

Id: 3oHUtG0cjfY

Length: 11min 51sec (711 seconds)

Published: Sun Feb 05 2023