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 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

For details on how to use Ant Design Table, please go through following video.

Happy Coding!

[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!

[aNDy-qhem]

Thank you sir! That was very helpful for the newbies like me! I wish you every succes and let God bless you!

[hakan]

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

[hakan]

Exciting, Handling data table with Api

[abhisekgupta]

Hi man, at 12 minutes mark, where we can see id and username as nested child of user key. What if we want to display the data in a way that there are two headers row, if normal string they fill header at row2, if the header is an object, the header occupy row 1 and its key will fill on row 2, something like colspan 2. Can we do that and make sure the table is dynamic as well? Please help if you saw this message

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

[arunkumar.d]

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

[sarkar]

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) => {
<img src={`${r.qr_code}`} alt="hello" />;
},
},
can you help on, how to upload an image on this