How to Create Dynamic Table using React JS and Ant Design | Extract Columns from API Response Data

#reactjs #antd #table #apiintegration
In this video tutorial I have explained how to create dynamic table using React JS and Ant Design by extracting columns from API response data and rendering them inside Ant Design table
This video focuses on
- How to create dynamic table using React JS and Ant Design
- How to extract columns from API response data
- How to render different dynamic data inside antd table using react js
- How to create dynamic columns from dynamic APIs data
- How to get and integrate dummy table data from server (dummyjson.com/docs/quotes)
- How to create ant design table header from API data and make first letter as Capital
- How to render Boolean value inside antd table column
- How to render Object or dictionary value inside antd table column
- How to render Array value in a ant design table column
- How to render tags inside antd dynamic table
- How to render dynamic data inside antd table
- How to create a generic table to handle or render different type of data in react js
- How to limit vertical scroll of ant design table in React JS
- How to fetch server data inside useEffect and create columns and dataSource for antd table
- Update antd table columns using useState hook
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For details on how to use Ant Design Table, please go through following video.
Antd Table: • Ant Design Table compo...
For more details on ant-design, please visit its documentation at ant.design/components/table/
Happy Coding!

[@hakan126]

Exciting, Handling data table with Api

[@hakan126]

commented before watching

[@CodeWithAamir]

Yes @hakan ahmet,
- Fetching and populating data from API
- Extracting columns from API responses and render different type of data like string, number, boolean, object and arrays in table columns
I hope you will love this!
Please let me know if you face any issue and need any help.
Thanks

[@specex]

You did an excellent job packing a lot of information into a 16 minute. My first Ant Design project, and you helped make it easy. Thank you!

[@CodeWithAamir]

Great to hear!
Thanks @Rory Bre

[@hakan126]

i like the way you handled and checked the object type to display the data.

[@CodeWithAamir]

Thank you @Hakan Ahmet

[@BachelorsEntertainer]

You Are Great 👍

[@CodeWithAamir]

Thank you 😊

[@32713]

Sir i am unable to do in react data table i am getting column name in console but not visible

[@arnaudpoutieu1331]

Nice!!!

[@CodeWithAamir]

Thank you @Arnaud POUTIEU

[@BachelorsEntertainer]

Thanx Buddy

[@CodeWithAamir]

Always happy to help!

[@serkandemir3472]

Thank you my LORD

[@CodeWithAamir]

You are welcome!

[@meshileyaseyi2842]

Can you do a video on axios?

[@CodeWithAamir]

I have one video on Axios i at below link please check if that helps
ruclips.net/video/c6irH9lqcdQ/видео.html

[@arunkumar.d7968]

Nice, I have doubt in show/hide column and export /import columns

[@CodeWithAamir]

Sure, please let me know what are your doubts so those can be figured out accordingly.
Thanks.

[@arunkumar.d7968]

Easy way to show/hide column in table with global search, this is my doubt

[@CodeWithAamir]

The easy way in my mind is using the state variable as we did in the video by declaring the columns state. And in any use case if you need to hide some columns just update the columns state variable by removing those columns from the array and it will get reflected on the table automatically. Same goes for columns showing. Just have to update the state according to the use case.
And for global search on antd table I have a video at following link you can get help from there if not watched already
ruclips.net/video/gp0itoGtRTI/видео.html
Please let me know if you still face any issues.
Thanks

[@arunkumar.d7968]

@@CodeWithAamir thankyou for your replay, if possible, please share the small example for show/hide columns in functional components

[@CodeWithAamir]

Hi @Arunkumar,
Here you go with an example of show hide a column, please let me know if you need any more information on that.
import { Switch, Table } from "antd";
import { useState } from "react";
function App() {
const [allColumns] = useState([
{
title: "Name",
dataIndex: "name",
},
{
title: "Age",
dataIndex: "age",
},
{
title: "City",
dataIndex: "city",
},
]);
const [enabledColumns, setEnabledColumns] = useState(allColumns);
const showHideAge = (show) => {
if (show) {
setEnabledColumns(allColumns);
} else {
setEnabledColumns(allColumns.filter((col) => col.dataIndex !== "age"));
}
};
return (


);
}
export default App;
Thanks

[@ananditasaiaparna6101]

Can u please share the code

[@CodeWithAamir]

Hi @ANANDITA SAI APARNA ,
You can send me email at [e-mail] and I will reply back with the code file that was developed in the tutorial.
Thanks

[@sarkar715]

Hello Aamir, I was trying to show an image to a cell in ant design table,
{
title: "QR Code",
dataIndex: "qr_code",
render: (t, r) => {
;
},
},
can you help on, how to upload an image on this

[@CodeWithAamir]

Hi Sarkar
Can you please confirm that the r.qr_code has the proper image url? you can just console it inside the render to see if there is something in that? and return the img tag .
render: (t, r) => {
console.log(r.qr_code)
return ;
},
Please let me know if that work for you of you need any more help on that.
Thanks

[@sarkar715]

@@CodeWithAamir Hello Amir..It was fixed. key was missing in the img tag. I am new with ant design. your videos are very helpful. Thanks for your response 🥰