Ant Design Table component usage in ReactJS app | AntD Table Component Tutorial

welcome back in this video we will be exploring the table component from and design if you have not seen the video on integration of the end design i have added the link in the icon and in the description below please have a look so let's get started from integration of the table component so it is how to import the table so let's save and it will show an empty table and there are two major props of the table one is the data source which gives the data which will be populated and then the other one is the columns to show how many columns we want to show so that the data will map on those columns so let's create the data source it will be an array of objects so suppose we want to show the data of the user so in the user that will that will have a name you can say name one and it will have an h so you can see 10 and then address address one and there will be a unique key suppose you can say one and let's duplicate this one to at least three for three rows name one and it will be named two name two name three name three and give it b3 and your key will be two suppose the age is 20 and then age is 30. so one two and three good and here we will be passing this data and that's 12 the columns so it is showing that it is only less than 10 rows so one by four it shows 10 rows in one page so this pagination is built in in the table component from a design and we can customize it by using the pagination prop all right so let's build the columns and we will be showing at least let's see three columns for no title so that will be the title shown on the column name and in this column what the data will be shown that will come in from data index so the data index will be the name key and the key is the key okay so let's copy this one three times first column name is name and second one is h and the data resides in the h key and then address and the data so it's in the tests d and cross the columns here and here you go the name column and its values age address that is the default trending provided by the end design so if we want to customize this one we can customize each and every row each even the header the footer and the pagination so suppose let's uh we want to customize the name so that it is clickable and when we click on it it suppose goes to a profile page of that user so for that in the columns there is a method render so it will be pass the name and we have to return the component we which we want to be rendered instead of this thing so suppose we want to be rendered this name here here you go now it looks like it is clickable and we can suppose that the own click here and we can write the logic to navigate to other pages and something like that all right and also we can add more columns if needed and even though the data is only available for three keys so let's add another column suppose we want to add a column name again you can say graduated and do not need data index because that is not available for this one and we will be doing a custom rendering here and payload passing the payload and from the whole payload available in each row and in the payload we can sorry there is comma missing here right we can return you can see okay a b tag maybe and in the b tag we can say the payload dot age if the age is greater than 20 we can say sorry greater than 20 we can say that usage usage is graduated otherwise it is not you can add you can add any logic here and you can return any component here let's set let's combine row so the graduated column is passed is shown and when the age is greater than 20 it will show that it is user graduated otherwise it is not graduated okay and the thing we can add filters on here and also we can expand and collapse rows if the number of columns are larger and doesn't fit into the available space also you can add the sorting on each column so let's add a sorting on the edge column so to add the sorting we need to add a key sorter and it will pass two values for again rows so we need to return which one is greater it sorry a dot h s p dot h after adding this key it has i did the sorting options and on click of the sorting so it is sorting 30 on the top and then 30 on the bottom so that's it regarding exploring table if you are if you have any questions please let me know in the comments below or you can directly go to the and design table documentation so there are pretty much too many options available so if you we cover it in single video that will be very long so i think that's enough for to start on using the tables on the end design in the next video we will pick another topic so stay tuned see you there thank you

Channel: CodeWithAamir

Views: 26,895

Keywords: antd, ant design, reactjs, website ui development using ant design and reactJS, ant design components in reactJS website, how to use Table component of ant design, how to show list of data in reactJS via ant design, Ant Design Table component usage in ReactJS app | AntD Table Component Tutorial, AntD Table Component Tutorial, antd table data source, antd table column, antd table sort, andt table sorting, antd table custom render, antd table render record, codewithaamir, antd reactjs

Id: Stw-WAUNNYM

Length: 8min 59sec (539 seconds)

Published: Mon Mar 22 2021