React Material-UI table Tutorial

in this video we are going to create this kind of a table using react i'll be using material ui framework to create the table and something called faker.js to generate random fake data i have created a minimal react app using create react app and i've run it i'll install the dependent packages i'll say npm install faker and at material ui core faker is something i'll be using to generate realistic test data so i don't have to set up the test data myself and from material ui core i'll be using ready to use react components for my table once that's done i'm going to create a new folder called components in my src folder and i'm going to create a new react component which i'm going to call m table.js i'll say a function m table return export default m table just standard react code and i'm going to add some text here table x then i'm going to go to my app.js file remove the logo remove the css and clean up everything inside the return statement i'm going to import the new component that i created into my app.js file i'll say input m table from components m table then i'm going to return m table and let's see what that looks like yeah that seems to work the first thing that i'm going to do is to generate my test data using faker for this i'm going to import faker from faker i'm going to define an array called users to hold my data set and i'm going to populate this array using faker apis in a for loop i'll choose a size of 14 for my data set in the for loop i'll say users of i equals new object the fields that i'm going to need are name email phone job title company join date and status i'm going to refer to faker's github documentation this is the api to generate a random name i'm going to copy that and i'm also going to need a api to generate a random email i'm going to copy this similarly i'm going to refer to a faker apis to generate random data for the rest of the fields faker.date.pass generates a date in the past that i am going to format to let's say usdate format for status field i am going to pick a random value among active pending and block for this i am going to define an array called statuses with values active pending and blocked and i am going to pick a random value among them so this is the code to pick a random value among active pending and blocked now my data is ready to see what my data looks like i'm going to print it on my browser console i'll open my chrome dev tools and i can see an array of size 14 being generated with all this random data now i'm going to create my table for this i'm going to refer to ready table examples from material ui website i'm going to choose the basic table click on source code in the source code we have this import statements to import these components table table body table cell etc and then there are some basic styles being defined and then there's a part where the data is created which i'm not going to need because i have created my data myself we have a call to use styles which is defined above and in the component itself at the root we have table container with component equals paper component equals paper gives this paper like elevated look to the table then we have the table tag within which we have table head and table body each of which has got table row and table cells which can be compared to tr and td html tags within the table body the rows are being iterated using map function for generation and display of rows now i'm going to do some copy pasting i'm going to copy all of the import statements the styles and everything inside the component function if you look at the import statements a lot of components are being imported from material ui core i am going to club all of them into a single import statements because i find that neater then i will remove my console.log statement and in the table header they have five columns i'm going to need four so i'm going to remove the first column i'm going to remove all of this align equals right i'm going to rename my headers to user info job info joining date and status change rows to users remove the first column in the first column i am going to have name email and phone in the second column i'm going to have job title and company and in the last two columns i'll have join date and status now we can see a table with the headers and 14 rows of randomly generated fake data the data is not formatted for the status uh one of active pending blocked values are randomly being picked now i am going to apply some styles to my table there are many different ways in which you can define and apply styles i am going to use material device make styles and i'm going to define some custom styles i'm going to define a parameter theme this gives me access to some of material ui's theming elements such as standard color palette with some standard colors or standard spacing so i don't have to define every style myself first i'm going to style my table container for this i'm going to define a new style table container and i'm going to make the borders rounded border radius 15 and then i'll say class name equals classes dot table container and let's see what that looks like the borders are rounded but we're not able to see it so i'm going to add a couple of more styles i'll add some margin i'll say 10px 10px and i'll add a max width so the table doesn't occupy the entire width and now we can see the new table with the margins the reduced width and the rounded borders now i'll style my table headers for this i'm going to define a new style called table header cell with the font weight bold background color theme palette primary dark which will translate to a dark shade of blue and for the font color i am going to choose the default contrast color of the background color by calling a function called get contrast text and passing the background color to it then i'm going to apply this new style to all of my table header cells and we can see that the header is now styled with a shade of blue next i'm going to work on my first column first i'm going to add an avatar here for this i'm going to import avatar component from material ui and then i'll add the avatar tag i'll say avatar art equals row name and we can see that another has been added i'll add a src attribute to my author if you have an image for the author you can specify the path here but if you specify a path that doesn't have any image then it is going to change it to a letter avatar which is exactly what i'm what i need which is why i change it to the current directory and you can see that it's changed now to a letter avatar it has picked the first letter from the name next i'm going to try to align the items in my first column i'll keep the avatar to the left and try to bring the text to the right for this i am going to use a grid component from material ui import grid i'll wrap all the content of the first column in a grid tag the auth are in a second grid tag and the rest of the content in a third grade tag the outer grid is called a container and the inner grids are called items then i'm going to say lg equals 2 for the avatar and an lg equals 10 for the text this is basically a bootstrap kind of a grid system if you imagine the cell being divided into 12 imaginary columns author occupies two columns and the text occupies 10 columns lg stands for large similarly you can also have small and medium screens as well now let's see what that looks like we can see how avatar occupies a small space whereas the text has occupied most of the space in the column next i'm going to try to place name email address and phone number one below the other for this i am going to wrap my individual text in in typography tags and as soon as i do this okay i need to import typography from material ui you can see that the text is placed one below the other now i'll try to style my avatar a bit for this i am going to define a new style called avatar with the background color theme.palette.primary.light this will translate to a light shade of blue and for color i am going to choose the default contrast color for the light blue color and then i will apply the class to my author class name equals classes.avatar the outer icon is now changed to blue next let me try to style the name for this i'm going to define a style name font weight bold and color let me say theme palette secondary dark which will translate to a moroni shade the name is now styled typography offers some default colors and style variants such as h2h1 subtitle body etcetera i'm going to apply this to some of my text now for email i'm going to say color equals text secondary and variant equals 42 and i'm going to apply the same style for phone as well and we can see how the email address and phone number are now styled next i'm going to style my job title and company name i'm going to enclose them in typography tags and i'll say color equals text second random body two for company and here i'll say primary and subtitle two and you can see how the job title and company name are now styled i'm gonna leave the joining date as is for status field i am going to apply a label kind of a look for this i will define a new style status bold smaller font size color background color border radius for a rounded border padding and inline block enclosing typography and class name equals classes.status it's changed to a label now the label has a gray background what i want is the color to be chosen based on the value of the status that is green for active blue for pending and orange for blocked for this i'm going to define an inline style style equals background color if raw status requires active then choose green if it's pending choose blue if it's blocked choose orange okay now you can see how the colors are changed based on the value all actives are green pendings are blue and blocked are orange next i'm going to apply pagination to my table for this i am going to reuse some code from standard material ui pagination examples on their website i'll choose the example that says fixed header let me see the source code there is an import for table pagination and in the function two props have been defined page and rows per page and there are a couple of handlers for pagination controls and uh in the table body instead of choosing the entire data set only those rows are chosen that are to be displayed in the current page and at the bottom there is this section with the pagination controls i'll do some copy pasting now import table pagination copy the props and the handlers copy the row filtering code and below my table body i'm going to have a table footer section for the pagination controls i'm going to change rows per page to 5 10 and 15 change rows to users change initial rows per page to 5 i also need to import table footer and there we go this is my first youtube tutorial and i hope you like it thanks for watching and have a good day

Channel: Dee Kay

Views: 51,192

Keywords: material ui, material ui table, material ui react, material ui react table, react, reactjs, react material ui, react table, material ui tutorial, material ui table row, table header mui react, mui table row, mui table cells, mui table tutorial, MUI Table Tutorial, MUI Table header, Material UI Table header, Material UI Table React, Material UI Table data, Material Ui table, Material UI Table tutorial, Table header react mui, react material-ui table example, dee kay

Id: bqzlm565CnA

Length: 14min 7sec (847 seconds)

Published: Sat Apr 17 2021