React Mui Data Table in English | React js Data Table

hey guys in this video we will see this how to make this mu data table this one table have a multiple features like search download CSV print out view columns filter table and pagination and we can set the pro par page also Okay click search button you can search any other item in this table like name age gender if you type this name like any T oror will be filtering okay or else you can type any number 49 you can see okay you can click this download CSV it'll be downloading the CSV format once it will be download just open you can see this is our data okay serial number profile name gender age and domain link okay it will be convered to CSV file okay after if you want to like print you can use this you can see just click print will be printing out Okay click view columns if you if you don't want this gender you can just uncheck you'll be hide also you don't want age just click you can see we we only see this profile name serial number and domain link check and gender also it be check it'll be showing okay and also we can filter any other column based data like if you want to only see the female let's see after the female age should be 26 you can see this only one person it be gender female and also age 26 okay and also if you want to can click this age it will be ordering by increase or decrease if you click this age you can see 19 21 22 will be increasing if I again click 15 49 4 7 46 will be decreasing order okay same as you can click this gender okay first it will be shot by female after it will be male again click first it will be shot by male after female okay this same also this name domaining and also we have a a good imagination after we can change it change this Ro page 10 20 30 can see and also you can click click this open Button it'll be open this particular user website you can see this is that one user website you can pick any other it will be opening some other website okay so in this video we can see how to make this we have here one app.jsx file and also I already added a basic setup like background after we have one CSS file tt. CSS we will use this Popin F family after T CSS okay okay this is our output okay you can go to this npm package management you can search m data tables you'll be open this page mu data tables mu this is our basic setup okay you can download this code package using this line npm install mua data TBL iph Ione s after installed you can download this also like mu material emotion react emotion style and mu icons once you can installed after you can copy this basic setup code text paste it okay this is our basic Y data table and also it will be static data but we want make Dynamic data okay like we any other have a API call you will be return your response it will show this item like we have a multiple users we can show that name email address and much more okay first we will do this change change this St okay first we can remove this checkbox so like remove this for after type selectable rows select selectable row false okay and see after type elevation elevation zero okay this code will be make remove removing the background Shadow if you change this background like white after command this score refresh you can see some shadows in this table okay I don't want so make this zero you will be hi okay so this is the use of this line after we can change the rose back page Rose back back page F okay after we change this option like prare page options B like I Got 5 10 20 30 okay can see we have your four options 5 10 20 30 okay we complete this options after we can change this background color and the font family and much more okay we will use material Style mui material SL Styles import create theme okay after create one variable get mui theme there will be Arrow function okay after right create create theme first we can change the typography change font family family like popins okay it will be another font family okay we can change to poins once you write can copy this GM theme after we will provide some theme provider theme provider will be come from same M material mu material so we can type theme provider right provider after inside you can paste it give theme and uh call this function team okay you can see the font family has been changed to popins okay after we can change this background color can use the palette change background paper use this background color like 1 E 29 3 B okay this is our background color you can see and also we can change this also it will be default okay default background color #f 172a okay let see and also this will be a dark theme so we can change the theme like more dark okay the text will be white okay can see nice after I don't want some extra pic you can see we have in the heading section have a extra padding okay first we can remove that like type components mua table cell style override first Ty hit you can change the hit okay so we can use the head after we can change body body means this whole data head means this row and also we have another one footer footer means this pagination I don't like put okay first we can change the head like padding addding 10 pixel top and bottom 4 pixel left and right okay can see alignment also very clean the same as we can change the padding in the body 7 pixel and 15 pixel okay you can see once we will add the profile image it will be align properly okay after write the color like e 2 e 8 f z it will be light white okay some gray color Okay okay so we can go to the next level like Dynamic data first open one website dummy Json can go to this website dumy jon.com it will be provide that dummy user information okay once you can go after click any other we can use the users so we can click the users okay this is our Dy API response okay so we can use that so just copy this line and create one new SE have empty dependency okay can change change to users users change the Ty data console data after create one variable like users set users big caption use State initially it be empt you can set the user we don't want to print just set users data okay this usest length like users it will be not data it will be the uses okay so data dot users okay we can see this users. length zero okay be zero okay be 30 okay can print that also like data. user data users not showing okay it'll be showing you can see this this is our users data okay be first name age and uh the domain also domain gender so first we can go to this V code remove this line after you can change it to users list US list and also provide the data to users once you can give you can see we have here 30 data okay but it'll be not showing we can change the columns okay like data okay you can don't want the data okay can change the column like remove this all okay create one object give name okay name will be the uh this uh key key key value uh we have some H okay so give the correct H key once you can give after open the our Port okay can see it will be showing okay how we will be showing uh we have a data will be array of object okay that array of object contain this key okay this is our data this is our 30 data each object contain some age key okay we can provide that key in this name it will it will be automatically take the value okay so you can give the correct key in this uh line okay if you change this any other ABC will be not because ABC we don't have in this uh response okay so we can give the proper name H okay pH okay after uh we have some uh like gender so like type gender gender okay okay B gender let see the M female female M okay and also you can see this this first letter will be uh small letter okay we don't want we want capit capitalize so what we can do we can easily customize the render option so we can type options after create one object you can type Custom Body RoR okay it be a arrow function not Arrow function be okay be Arrow function right Pac give the value like we can get the value inside this arguments so we can type value we get we we get the name gender value okay you can get the gender value inside this argument you can type value it be work you can see the same result okay if you want to change the style like capitalize like capitalize okay it will be work nice okay this only uh Custom Body render have multiple arguments like value like uh table meta uh table data table value and much more you can open this mui package you can search the Custom Body render you can see uh okay this is value table meter updated value table meter contain the whole table data okay after we can change the color like if male the background color will be blue female the background color will be Rose okay first we can change the padding PX3 py1 and uh give PG blue 500 okay can see after we can change to inline block okay rounded MD no we want to round it full okay round it full okay it will be like batch okay we want to change the female color okay what we can do we can remove this string add template string after bracket after remove this background create $1 and 30 bracket inside you can write the condition value equal to equal to gen value equal to equal to M we want to back we want your background color this or else we want uh [Music] like I think pink pink is good okay you can see female background color will be pink male will be blue okay so you can easily identify okay this way to you can easily customize your value okay Custom Body render you can use okay same as we can create the serial number okay how can create the serial number uh give the name and give the id id from this ID this ID will be have a 1 2 3 4 the proper uh increasing so we can use that also Name ID once you can add this you can see ID 1 2 3 4 5 okay and also you can you can see uh if this ID will be the table heading okay if you don't want that you can easily change that you can write a label we want to different heading name like serial number you can type after you can open this can you can see we got we got another okay serial number okay after we can create one uh name column okay can open this website you can see uh in this response we have uh separate value like first name last name but we want a single name so what we'll do you can go to this set users okay uh create one variable like any local local and set that data. users after map that get single user after we can spread that users create new key like name this name will be user do first name plus space user. last name so we can manually create one another key like class name okay we can create one name key after we can assign this local to this set users so we have another key like name okay you can console that you can easily understand local okay this is our data you can see this is our one key this is not a AP response return this see not written in AP response but we can create manually okay name okay we want use that ke okay just like type name same name putting the comma you can see you can open this filter box will will be showing this okay names you can see after we can change the name like uh capure okay same as age gender so what we can do copy this label paste it and uh give the custom title capsule name and capsule age and the capsule gender okay okay you can see be okay capitalize after we can create one domain like uh one button we can click this button we we will open this particular uh user website okay you can copy this gender paste it here can change it to domain domain is the valid key can see this D domain domain domain domain okay this domain contains some sites okay sites URL okay every domain contain some different sites URL you this is uh this is the domain we contain different site URL so type domain remove this classes okay you can see it will be showing this links okay but I don't want if I click the any click the open button it will be automatically open so what we can do create one anchor tag anchor tag open open give the class name like PG uh Rose 600 PX3 py1 and rounder M okay okay open give the HF value like value okay before you want to add theps okay will be not in in that URL okay we we want to add that manually htps okay after that value okay and also give that Target underscore BL so that line will be make this line will be make uh open the website in new tab Okay click the open okay we'll be opening some website okay feed burner some okay same as can click any other okay after we can create the user profile image uh you can see this image and have some image URL okay what we can do first uh we can go to this ID below and create name equal to image okay the label be the profile okay give the options comma after Custom Body render okay it will be return here one image tag pick and alternative give that class name like BD 20 sorry 12 height 12 round full sorry and uh take the value and uh use this image you can see this is is our users image we can add some more classes like P3 and PG s semer okay can see after you can see if we click this uh filter uh we have another field like profile okay if if you click that you can give you can see this the each profiling this this is we don't want because we don't filter that profile image okay so how to remove this profile in this filter section just type filter fals this will be make the uh disable like this one column okay you can see only you have a name gender age domain if you don't want to The Domain also you you can and filter FSE will be high okay after past it him can see it will be hide okay we will complete this me data table and check that search button R okay be work same as you can download the CSV file open that okay sorry open can see we have a serial number 1 2 3 4 profile profile image will be the image URL name will be the the name name value okay age 28 50 something male gender female okay uh domain we have here some domain URL okay this is our proper data okay in CSV format okay don't save okay sa will be okay after you can this will be also work can remove age beide okay close my page imagination okay I hope in this video use useful for you if you like this video please subscribe

Channel: Code A Program

Views: 4,478

Keywords: React Mui Data Table | React js Tanstack Table, React js mui data table, Mui table, React js table search filter download file, react table with mui, Tanstack Table Design Using React js and tailwind css search, pagination, download option | #reactjs, React js Filterable table, React js tailwind css table, Data Table, Data Grid Table, react js tanstack, react js tanstack table, mui datatable

Id: v5jiq5pJhxo

Length: 30min 25sec (1825 seconds)

Published: Sun Jan 07 2024