Table in React Js || Create Table from Array of Objects in React Js

hello everyone how to create table like this in react.js let's start here I created a react project and also I'm running this project this is js9 and this is CSS I'm going to display this data in the table let's start first I'm going to create a table before that I'm going to save this yeah here inside the table I'm going to create a table header inside the table header I'm going to create a TR inside that th double head here I'm going to display a first name I'm going to duplicate one more time this is for last name yeah after the header I'm going to create that deep body and inside that I'm going to map I'm going to I'm going to map the data this data copy this and paste it here that map here a URL also I'm going to use the index for uh display this indexing key okay here I want to create a table draw TR inside that I'm going to create a TD table data inside the table data I'm going to display a first this F name and real name okay here well dot name I'm going to duplicate this for one more time this is a name and save this and go to browser yeah I get a table like this now I'm going to apply style for this go here get table I'm going to apply style for directly the table and here this table we test 400 PX and also height 100px but also I'm going to display a border and here to PX and I'm going to use a solid and its color b or I change this into this color save this go to browser yeah I got a button like this and also expand Center the higher tall content in center after that I'm going to display a border for this th and TD here th order I want to copy this and yeah this is 1px save this yeah I get that table header border and also I'm going to duplicate this for one more time this is table data save this yeah I get a butter like this and if I right click on the inspect it's showing console error because I am not display a key here key and Moto pass the this index say this now I refresh this yeah console player okay this is what I try to tell you in this video bye

Channel: Coding Comics

Views: 3,907

Keywords: table in react js, how to create dynamic table in react js, table in react js example, table in react js material ui, map value in table react, how to create table in react js, table in react js bootstrap, how to print table in react js, dynamically add rows to table react, create dynamic table from json in react js, react dynamic table columns, react create table from array of objects, how to create dynamic table, how to map data in table in react js, create table in react js, js

Id: SurVt_rqOQM

Length: 3min 14sec (194 seconds)

Published: Sat Feb 04 2023