Hi Aamir, thanks to your video I think I understand state properly! I was setting state useeffect, and trying to us it in the onDelete function and state was empty! Your video/gh code cleared up in 10 minutes what took me a few days! Thank you so much. You beat of google, bing and chatGPT!
@@CodeWithAamir bro, i have a question. If I want to add an empty array, then I add data for each line when click addNewstuden, what should I do? (don't have to manually add random data)
Please make a video on inline CRUD operation of a table, Like we can add new row on button click on add data in the inline, and also edit in inline order
yes it helps, BUT please make a video on adding data into the table in inline, like there should be a button by clicking the button a new row add where we put our data and on save this data stores into the table (inline)
@@CodeWithAamir ua-cam.com/video/S7-99HqpWvo/v-deo.html like this by using ant design, please make this video I really need this, and Thank you soo much your videos are very very helpful
Excellent video ❤. By the way Bro could you make a small video on handling api calls as well using any backend like firebase or crudcrud for handling crud operations.
Hi Agnel, You can show the text and button in Name column by the use of render prop as we did for actions column. Like const columns =[{ title:”Name”, render:(name)=>{ return {name}edit}]
Hi Amir, Using ant design table component u should do custom calling on click of arrow icons..it is possible or not if possible means please let me know Bhai.
Hi @suresh yadav , For that you can implement the onChange prop of Table and it will give you current sort order etc. when you click on the arrows so based on that you can make the API calls and update the table datasource based on your API results. const onChange = (pagination, filters, sorter, extra) => { console.log('params', pagination, filters, sorter, extra); //Make API call here and update the datasource based on selected sorter arrow }; I hope you got the idea. Please let me know if you need any more information on that feature. Thank you
Hello, I have an error when I get to this part 19:33 and the error I get is this, Module parse failed: Unexpected token (360:25) You may need an appropriate loader to handle this file type. | } | }, /*#__PURE__*/React.createElement(Input, { > value: editingPlayer?.name, | __self: this, | __source: { Also for setEditingPlayer({...record}) I had to change it in square brackets bc it doesn't accept it in curly ones, so when I changed it like this it worked setEditingPlayer([...record]) Thank you for the tutorials by the way they are a true gem!
@@CodeWithAamir Hi, I just looked more into it and turns out it was an issue from eslint a parsing error, it works now AlhamdulAllah, thanks again man!
Hi @Robertus Adrian, I could but right now I don't own any server/backend on which I can perform CRUD, technically it will be similar to what we have in the video the difference will be that instead of updating local dataSource (in case of edit, delete, add etc.) we will be making axios API calls to update/get data. Please let me know if you need more information that or if you have your server setup I can chat on zoom/email (aamircodewith@gmail.com) with you to show you how it works. Thanks
Hi, In case of tree table we need to adjust the add/edit in such a way that when we add record we add children array too in the table record and in case of edit we need to show children records fields may be a little indented to look like a tree and on edit we need to update the record and its children data arrays also. If we add or edit the records along with their children data array it should work similar to our current use case. Please let me know if you need more insights on that. Thanks
Hi Amir , I want to add a button inside a modal which when we click on that it should show a PDF !.. So its basically creating modal inside a modal..how can I do that ? I'm stuck can you help
Hi Bhushan, Yes you can add button or anything inside the Modal as its children so you will be adding button as well as the 2nd modal but will set the visible prop to false by default and to show a modal on button click you can set any state variable true and use it in 2nd modal like visible={your state variable} so the new modal will appear on button click and on 2nd modal dismiss you can update the same state variable to false. Hope it helps. Please let me know if you need more info on that or if its a single code file you can share it with me at aamircodewith@gmail.com so I can code this for you! Thanks
Sure @Vuong Balloon, To update the changed data using axios API call you can replace the onOK function of Edit Student modal with something like below onOk={() => { axios.put("YOUR_API_URL", editingStudent).then((response) => { setDataSource((pre) => { return pre.map((student) => { if (student.id === editingStudent.id) { return editingStudent; } else { return student; } }); }); resetEditing(); }); }} Please let me know if you still have any questions. Thanks
bro i have a issue, i've inserted a newRecord in a specific index using splice(1,index,newRecord) ->method and updated the state using use state but the change's in the dataSource is not visible in antd table please help me to fixe the issue bro🥺
Hi Aamir, thank you for the informative video, what if I get data from server, how I can assign id (included in data) to every row, so when use delete, the id can be passed in axios.delete, thx again
Hi @Jiang, As the id is included in the data then you will get it in a record variable on click of each row so need to declare it something like below { return { onClick: event => { //use record.id or something like that here to delete it or so }, // click row onDoubleClick: event => {}, // double click row .....other events }; }} ....other props /> on the other hand if delete action is not on the entire row then you will get the whole record data including that id in each cell as well so something like below while declaring columns (This type of work in done in current youtube video) const columns = [ { title: "Actions", render: (record) => { return ( { //use record.id or something like that here to delete it or so }} >Delete ); }, }, ]; Please let me know if you need any more information/help. Thanks
@@CodeWithAamir Hi!I have a problem with this line of code :const randomNumber = parseInt(Math.random()*1000) .Error code "Argument of type 'number' is not assignable to parameter of type 'string'. ". You can tell why, I will be grateful
This line looks good because you are declaring a brand new const, it should not complain. Are you using typeScript? Type-casting between number and string wherever it is complaining will help, can you try type-casting and see if that resolves the issue? P.S. In video I was NOT using type script so no such error seen.
Hi Aamir, thank you for these wonderful series. I have an issue where my modal has a black background , remains on the screen and refuses to clear out even after closing it keeps replicating itself, though I followed your exact steps . Is there an alternative way to render moodals from a column? What do you think the problem is?
Thank you @Nicholas, Apparently I don’t see any issue in current code because when we close the modal it should not render itself. There could be a specific case in which it is occurring for that I can zoom call with you or due to time zone differences you can share the code snippet on codesandbox or on email aamircodewith@gmail.com so that I will take a look and see the problem. Thanks
Thank you @M G To be honest I haven’t used SPFX react pnp yet so not sure how it works at the moment but it can come in my future videos once I have used it. Thanks
Hello, Record is actually the json object against a single row. So in overall dataSource of a table we have an array of data/json/dictionary representing each row. So record mean the data/json/dictionary against a particular row. In render of a column cell we get the whole row from where we can get any key value pair and return a component based on that key:value pair data/record. Suppose we have following dataSource const [dataSource, setDataSource] = useState([ { name: "John", age: 32, address: "New York", }, { name: "Jim", age: 33, address: "Sydney", }, ]) then for row-1 record will be { name: "John", age: 32, address: "New York", }, and for row-2 record will be { name: "Jim", age: 33, address: "Sydney", }, and so on. Hope it helped. Please let me know if you need any more information on that. Thanks
Yes this concept will work for APIs also, you just have to make API calls too wherever we are updating our local dataSource state so that local and server data is in sync. Hope it makes sense. Please let me know if you need any more information on that. Thanks
Hi, The validation will work the same in popup field as we do in normal screen component so we will be adding the Form and Form.Item as modal children and will be adding validation rules on it. So it will be something like below Hope it makes sense, for more details in fields validation I have a separate video you can take a look on that it will make it more clear to you hopefully ua-cam.com/video/ajp8hmAKEhM/v-deo.html
Hi @Anshika, The ? (Optional chaining) is used to avoid any crash because initially the editingStudent value is set to null and null.name will create exception so we used ? to get name value if editingStudent exists. Please let me know if you got the idea or need more information on that. Thanks
Hi @Bablu Ahmed The Select component should work the same as the Input component used in the video, we just need to replace the Input component with the Select component inside the Form. I have a separate video which explains how to add Input and Select etc. components inside the Form at below link ua-cam.com/video/ajp8hmAKEhM/v-deo.html you can go through that for more informations. Please let me know if you face any issues. Thanks
Yes @Bablu Ahmed the new link was just to show how you can add select component inside the Forms, rest of the process will be same as in current video. Kindly let me know If you face any issues. Thank you !
Yes @elson, You can use any type of data in cells, in fact you can return any react component based on the records (which can contain nested data etc.) you just need to render the cells accordingly as we did in current video for rendering custom action buttons. Please let me know if you need any more information/help on that. Thanks
I'm facing issue while getting a value from checkbox. I'm using antd components only and in the table I've different records each record having checkbox. Actually the case is on click of checkbox I'll get popup for confirmation and onclick of 'Yes' only I need to make value of checkbox as 'true' but it's not happening. could you please help? I'm using normal checkbox and antd modal here.
Hi @Amruta, I prepared some code snippet for you based on your usecase. So I suppose you have a column where you are showing the checkbox with a confirm popup so something like below const columns = [ ....other columns will go here, { .....other props will go here title: "Checkbox", render: (record) => { return ( { const updatedDataSource = dataSource.map((item) => { if (item.id === record.id) { item.isChecked = !item.isChecked; } return item; }); setDataSource(updatedDataSource); }} >
); }, }, ] so what I am doing here is I am setting the checkbox as checked based on record value isChecked and on popup confirm I am updating the record isChecked if user press on OK button. Otherwise it will stay the same. Here on click of checked checkbox I am making it uncheccked, if you don't need that you ma set ite.isChecked = true always. Hope it helped. Please let me know if you need any more information/help on that. Thanks
i save data in ReactContextAPI and localstorage but when i edit data, the data is indeed changed in Context and Localstorage, but it still show the old data in website (not re-render new data) how to solve this issue in antd Table?
Hi, While you are updating the data in storage etc you have to update it in your local state variable as well so that on state change the re render works. The table dataSource state should update/change to get it re render. Pleas let me know in case you need more help on that. Thanks
@@CodeWithAamir hi amir i have an issue with this too when i refreshed the page is back to default. i tried useEffect(() => { const data = localStorage.getItem('onrefresh');
Hi @Billy Kane, Can you try removing following useEffect and instead save it whenever you have a new datasource, may be while declaring the dataSource state or when you fetch it from API etc. so looks like this useEffect might getting invoked before your other useEffect and it might override the localStorage with empty/null/undefined dataSource. So its recommended that you save the dataSource wherever you have it and do not do inside this type of recursive useEffect which runs on every render. useEffect(() => { localStorage.setItem('onrefresh', JSON.stringify(dataSource)) }); If after doing above change works for you then well and good, otherwise you can share your code snippet via codesandbox etc. or email me at aamircodewith@gmail.com so I can take a look to see what is causing the issues. Thanks
Sure @Abu David, Can you please elaborate a little more what you mean by antd not affect global styling? You can always override the styling on antd components.
I got it now. Actually this is a known issue on antd side. There are few workarounds which may or may not work in every situation so may be worth trying in your project. Workarounds could be as below 1- First of all antd considers that your whole project is using the antd as the base bone of components so creating all those conflicting css components from antd will resolve the issue. 2- Try importing antd css styles before importing your custom styles might help in overriding the antd styles with your custom styles 3- Some developers find that importing components and only their own related css works well like import Modal from 'antd/lib/modal' import 'antd/lib/modal/style/css' but I personally found it problematic when using some basic components like Select, it might help in your use-case but not 100% sure. I summary it is a known issue on ant design side and if workarounds works then well and good otherwise we may have to live with it until properly resolved. Please let me know if you need any more information/help on that. Thanks
@@CodeWithAamir First of all I would like to thank you for all you coorpaerate. May be my Englist is not good. In my OrderForm contain OrderDetail(orderDate,customer) and OrderItem(product,price,qty) I want to create OrderItem by Form.List by collect data from FormModal to Form.List and show orderItem in Table. and I want to my payload like this {orderDate:date,customer:customerId,orderItem:[{product:productID,price:productProce,qty:orderQty}]} . Don't worry if you don't understand my English thank you.
Hi @Panumas Saewong, I got an idea what you are talking about, let discuss this further on zoom or email (aamircodewith@gmail.com) and solve your problem. Thanks
Hi @Apna Food PK, Not exactly the this.state but you can pass something like this.state.columns etc. because antd Table need an array of objects, you can pass it from any variable/sate_variable etc. but mostly this.state contains variable and then those variables contains the state values so it won't work directly. Please let me know if that is what you need OR I misunderstood your question? Thanks
Hi @Awaiz, It should work as explained in the video, its hard to tell what could be the issue, can you please share the code snippet via drive or code sandbox etc so that I can take a look and see for the solution. Thanks
I used the plain javascript instead of typescript so that is why its allowing me. I hope you got it. Please let me know if you have any more question. Thank you !
Hi @Khánh Trần Nguyên, Setting a unique id by any mean is fine, so if you want to set the ID incremented every time by 1 is also fine. Please let me know if you need any more information on that. Thanks
Hi @Alice, It’s strange, can you try printing pre value to see what is in the state at that time because if its still an Array it should work. If somehow its not Array, change it to Array and it should work. Please let me know if still there are issues. Thanks
Hi @art one , You can pass the unique key either inside you dataSource like dataSource={[ { col1: "123", col2: "456", key: "123", }, { col1: "789", col2: "10111213", key: "456", }, ]} and Table will automatically pick it if it is against the "key" in dataSource recrod. The second way is you can specify the unique key column in Table props like and it will pick col1 as the unique key for rows. The 3rd way could be you can return it based on your row record so something like record.uid} /> Please let me know if that makes sense or worked for you. Thanks
Hi @Gamergenix, To code it exactly by using axios.delete and delete records might not be possible for me because I do not own any server or APIs which can do that with examples. But I have created two separate videos 1- Integrate axios in antd table and fetch paginated data (ua-cam.com/video/AXNp_oU1Q80/v-deo.html). In the video I implemented axios.get to fetch the data and populate in antd table, using similar way you can use axios.delete and change your datasource based on API response. 2- Generic axios integration in reactjs ua-cam.com/video/c6irH9lqcdQ/v-deo.html I hope those videos will help you in that regard. Thanks
It is as easy as that. earlier i was complicated with ant design but now after watching your video it is very easy. Thank you making this video.
It’s really Great to hear this. Thank you 👍
Hi Aamir, thanks to your video I think I understand state properly! I was setting state useeffect, and trying to us it in the onDelete function and state was empty! Your video/gh code cleared up in 10 minutes what took me a few days! Thank you so much. You beat of google, bing and chatGPT!
Really glad to hear such a nice feedback, its so awesome and keeps me motivated. Thanks again.
I'm beginer. This clib can help me!. Thank you.
Thanks u guy, i learned a lot from your video.
Glad to hear it!
@@CodeWithAamir bro, i have a question. If I want to add an empty array, then I add data for each line when click addNewstuden, what should I do? (don't have to manually add random data)
Very comprehensive
Hi Aamir awesome to learn from you ant design... one topic is missing I guess that is shadow.. why shadow topic is not covered?
Thank you @learncode5110
I did not get you exactly what you mean by shadow topic, may be you can elaborate a little more what you wanted here?
Thanks
@@CodeWithAamir Ok I mean is background shadow topic is not covered..shadow in scence if we take a box and to give background shadow to that box..
Very useful video..Thanks a lot
best luck!
Please make a video on inline CRUD operation of a table, Like we can add new row on button click on add data in the inline, and also edit in inline order
Hi @Sandip,
I have another video on in-line edit
ua-cam.com/video/Kifluk4YGDc/v-deo.html
Please let me know if that helps?
Thanks
yes it helps, BUT please make a video on adding data into the table in inline, like there should be a button by clicking the button a new row add where we put our data and on save this data stores into the table (inline)
@@CodeWithAamir ua-cam.com/video/S7-99HqpWvo/v-deo.html like this by using ant design, please make this video I really need this, and Thank you soo much your videos are very very helpful
Great!
Sure @Sandip
Thanks bro, I was almost 90% ok while doing this implementation but now I am all clear and going to drink sprite 😀
That is great!
Cheers!
@@CodeWithAamir thanks
Awesome video! Thank you!
Glad you liked it!
Nice! You need to continue your work!)
Sure, Thanks
Excellent video ❤.
By the way Bro could you make a small video on handling api calls as well using any backend like firebase or crudcrud for handling crud operations.
Hi aamir, How do i add a button inside a column like the Name column ? (this button would Delete, Edit only the Name section) (eg: John edit)
Hi Agnel,
You can show the text and button in Name column by the use of render prop as we did for actions column.
Like
const columns =[{
title:”Name”,
render:(name)=>{
return {name}edit}]
You are awesome bhai❤
Idk can u make 1 video like this but use json server and make some router?
Thanks a lot
Hi Amir,
Using ant design table component u should do custom calling on click of arrow icons..it is possible or not if possible means please let me know Bhai.
Hi @suresh yadav ,
For that you can implement the onChange prop of Table and it will give you current sort order etc. when you click on the arrows so based on that you can make the API calls and update the table datasource based on your API results.
const onChange = (pagination, filters, sorter, extra) => {
console.log('params', pagination, filters, sorter, extra);
//Make API call here and update the datasource based on selected sorter arrow
};
I hope you got the idea. Please let me know if you need any more information on that feature.
Thank you
Hello, I have an error when I get to this part 19:33 and the error I get is this, Module parse failed: Unexpected token (360:25)
You may need an appropriate loader to handle this file type.
| }
| }, /*#__PURE__*/React.createElement(Input, {
> value: editingPlayer?.name,
| __self: this,
| __source: {
Also for setEditingPlayer({...record}) I had to change it in square brackets bc it doesn't accept it in curly ones, so when I changed it like this it worked setEditingPlayer([...record])
Thank you for the tutorials by the way they are a true gem!
Thanks @Sassy,
I guess you have made it working by using different state setter function. Right?
@@CodeWithAamir well yes but my code is almost identical to yours, what do you think is the problem I can't seem to figure it out...
@@CodeWithAamir Hi, I just looked more into it and turns out it was an issue from eslint a parsing error, it works now AlhamdulAllah, thanks again man!
Alhumdolillah, That’s great @Sassy
@@CodeWithAamir thanks you gotta a new sub 💯keep it up 👏
Hello, can you share how to handle CRUD operations using data from server like using axios ?
Hi @Robertus Adrian,
I could but right now I don't own any server/backend on which I can perform CRUD, technically it will be similar to what we have in the video the difference will be that instead of updating local dataSource (in case of edit, delete, add etc.) we will be making axios API calls to update/get data.
Please let me know if you need more information that or if you have your server setup I can chat on zoom/email (aamircodewith@gmail.com) with you to show you how it works.
Thanks
I learned a lot, Thanks.
Hey! Very useful video!!! how can you edit and add records to the tree table?
Thanks
Hi,
In case of tree table we need to adjust the add/edit in such a way that when we add record we add children array too in the table record and in case of edit we need to show children records fields may be a little indented to look like a tree and on edit we need to update the record and its children data arrays also. If we add or edit the records along with their children data array it should work similar to our current use case.
Please let me know if you need more insights on that.
Thanks
@@CodeWithAamir Thanks, I will try
Is there a way to do this with one delete button at the top?
Hi Amir ,
I want to add a button inside a modal which when we click on that it should show a PDF !..
So its basically creating modal inside a modal..how can I do that ?
I'm stuck can you help
Hi Bhushan,
Yes you can add button or anything inside the Modal as its children so you will be adding button as well as the 2nd modal but will set the visible prop to false by default and to show a modal on button click you can set any state variable true and use it in 2nd modal like visible={your state variable} so the new modal will appear on button click and on 2nd modal dismiss you can update the same state variable to false.
Hope it helps. Please let me know if you need more info on that or if its a single code file you can share it with me at aamircodewith@gmail.com so I can code this for you!
Thanks
Obrigada
You are welcome!
pls can u code example using axios.put to change data ?
Sure @Vuong Balloon,
To update the changed data using axios API call you can replace the onOK function of Edit Student modal with something like below
onOk={() => {
axios.put("YOUR_API_URL", editingStudent).then((response) => {
setDataSource((pre) => {
return pre.map((student) => {
if (student.id === editingStudent.id) {
return editingStudent;
} else {
return student;
}
});
});
resetEditing();
});
}}
Please let me know if you still have any questions. Thanks
bro i have a issue, i've inserted a newRecord in a specific index using splice(1,index,newRecord) ->method and updated the state using use state but the change's in the dataSource is not visible in antd table please help me to fixe the issue bro🥺
Hi,
Please share the code snippet via codesandbox or email at aamircodewith@gmail.com so I will take a look and fix it. Thanks
Hi Aamir, thank you for the informative video, what if I get data from server, how I can assign id (included in data) to every row, so when use delete, the id can be passed in axios.delete, thx again
Hi @Jiang,
As the id is included in the data then you will get it in a record variable on click of each row so need to declare it something like below
{
return {
onClick: event => {
//use record.id or something like that here to delete it or so
}, // click row
onDoubleClick: event => {}, // double click row
.....other events
};
}}
....other props
/>
on the other hand if delete action is not on the entire row then you will get the whole record data including that id in each cell as well so something like below while declaring columns (This type of work in done in current youtube video)
const columns = [
{
title: "Actions",
render: (record) => {
return (
{
//use record.id or something like that here to delete it or so
}}
>Delete
);
},
},
];
Please let me know if you need any more information/help.
Thanks
@@CodeWithAamir Hi!I have a problem with this line of code :const randomNumber = parseInt(Math.random()*1000) .Error code "Argument of type 'number' is not assignable to parameter of type 'string'. ". You can tell why, I will be grateful
This line looks good because you are declaring a brand new const, it should not complain. Are you using typeScript? Type-casting between number and string wherever it is complaining will help, can you try type-casting and see if that resolves the issue?
P.S. In video I was NOT using type script so no such error seen.
@@CodeWithAamir Thank you so much
Hi Aamir, thank you for these wonderful series. I have an issue where my modal has a black background , remains on the screen and refuses to clear out even after closing it keeps replicating itself, though I followed your exact steps . Is there an alternative way to render moodals from a column? What do you think the problem is?
Thank you @Nicholas,
Apparently I don’t see any issue in current code because when we close the modal it should not render itself. There could be a specific case in which it is occurring for that I can zoom call with you or due to time zone differences you can share the code snippet on codesandbox or on email aamircodewith@gmail.com so that I will take a look and see the problem.
Thanks
@@CodeWithAamir thanks for your reply Aamir, I will do that
Wonderful!
thanks a lot!
Hi Aamir , thanks for a good lecture. Can you please do a video for SPFx react pnp crud table thanks
Thank you @M G
To be honest I haven’t used SPFX react pnp yet so not sure how it works at the moment but it can come in my future videos once I have used it.
Thanks
Hello can you explain what is the "record" ? and where we get it? i have record = undefined. Thank you for answer!
Hello,
Record is actually the json object against a single row. So in overall dataSource of a table we have an array of data/json/dictionary representing each row. So record mean the data/json/dictionary against a particular row. In render of a column cell we get the whole row from where we can get any key value pair and return a component based on that key:value pair data/record.
Suppose we have following dataSource
const [dataSource, setDataSource] = useState([
{
name: "John",
age: 32,
address: "New York",
},
{
name: "Jim",
age: 33,
address: "Sydney",
},
])
then for row-1 record will be
{
name: "John",
age: 32,
address: "New York",
},
and for row-2 record will be
{
name: "Jim",
age: 33,
address: "Sydney",
},
and so on.
Hope it helped. Please let me know if you need any more information on that.
Thanks
@@CodeWithAamir Yes, thank you very much! 👍
does this method works with api also
Yes this concept will work for APIs also, you just have to make API calls too wherever we are updating our local dataSource state so that local and server data is in sync.
Hope it makes sense. Please let me know if you need any more information on that.
Thanks
Hi Aamir, I am not getting the record data in input I have followed the same procedure I am unable to understand what is the issue
Hi @Jhansi,
Can you please share the code snippet via codesandbox or email aamircodewith@gmail.com so I can look into the issue.
how can i add validation in the popup field
Hi,
The validation will work the same in popup field as we do in normal screen component so we will be adding the Form and Form.Item as modal children and will be adding validation rules on it. So it will be something like below
Hope it makes sense, for more details in fields validation I have a separate video you can take a look on that it will make it more clear to you hopefully
ua-cam.com/video/ajp8hmAKEhM/v-deo.html
In input value field why we used ? i.e., value={editingStudent?.name}
Hi @Anshika,
The ? (Optional chaining) is used to avoid any crash because initially the editingStudent value is set to null and null.name will create exception so we used ? to get name value if editingStudent exists.
Please let me know if you got the idea or need more information on that.
Thanks
@@CodeWithAamir Thank You for explanation
How to use the Ant Design Select component for updating?
Hi @Bablu Ahmed
The Select component should work the same as the Input component used in the video, we just need to replace the Input component with the Select component inside the Form. I have a separate video which explains how to add Input and Select etc. components inside the Form at below link ua-cam.com/video/ajp8hmAKEhM/v-deo.html you can go through that for more informations.
Please let me know if you face any issues.
Thanks
@@CodeWithAamir The video link you have provided it looks like only for creating not updating purposes
Yes @Bablu Ahmed the new link was just to show how you can add select component inside the Forms, rest of the process will be same as in current video. Kindly let me know If you face any issues.
Thank you !
Can i use nested data in cells?
Yes @elson,
You can use any type of data in cells, in fact you can return any react component based on the records (which can contain nested data etc.) you just need to render the cells accordingly as we did in current video for rendering custom action buttons.
Please let me know if you need any more information/help on that.
Thanks
@@CodeWithAamir I'm trying to access data on multidimensional array, can you help me.
Sure @Elson, please share details.
I'm facing issue while getting a value from checkbox. I'm using antd components only and in the table I've different records each record having checkbox. Actually the case is on click of checkbox I'll get popup for confirmation and onclick of 'Yes' only I need to make value of checkbox as 'true' but it's not happening. could you please help? I'm using normal checkbox and antd modal here.
Hi @Amruta,
I prepared some code snippet for you based on your usecase. So I suppose you have a column where you are showing the checkbox with a confirm popup so something like below
const columns = [
....other columns will go here,
{
.....other props will go here
title: "Checkbox",
render: (record) => {
return (
{
const updatedDataSource = dataSource.map((item) => {
if (item.id === record.id) {
item.isChecked = !item.isChecked;
}
return item;
});
setDataSource(updatedDataSource);
}}
>
);
},
},
]
so what I am doing here is I am setting the checkbox as checked based on record value isChecked and on popup confirm I am updating the record isChecked if user press on OK button. Otherwise it will stay the same. Here on click of checked checkbox I am making it uncheccked, if you don't need that you ma set ite.isChecked = true always.
Hope it helped.
Please let me know if you need any more information/help on that. Thanks
i save data in ReactContextAPI and localstorage but when i edit data, the data is indeed changed in Context and Localstorage, but it still show the old data in website (not re-render new data) how to solve this issue in antd Table?
Hi,
While you are updating the data in storage etc you have to update it in your local state variable as well so that on state change the re render works. The table dataSource state should update/change to get it re render.
Pleas let me know in case you need more help on that.
Thanks
@@CodeWithAamir hi amir i have an issue with this too when i refreshed the page is back to default. i tried useEffect(() => {
const data = localStorage.getItem('onrefresh');
setDataSource(JSON.parse(data));
}, []);
useEffect(() => {
localStorage.setItem('onrefresh', JSON.stringify(dataSource))
});
however the code doesnt work
Hi @Billy Kane,
Can you try removing following useEffect and instead save it whenever you have a new datasource, may be while declaring the dataSource state or when you fetch it from API etc. so looks like this useEffect might getting invoked before your other useEffect and it might override the localStorage with empty/null/undefined dataSource. So its recommended that you save the dataSource wherever you have it and do not do inside this type of recursive useEffect which runs on every render.
useEffect(() => {
localStorage.setItem('onrefresh', JSON.stringify(dataSource))
});
If after doing above change works for you then well and good, otherwise you can share your code snippet via codesandbox etc. or email me at aamircodewith@gmail.com so I can take a look to see what is causing the issues.
Thanks
Is this of ng zorro
Hi @Hasini Preetham Neruturi
I did not get you exactly what you mean here? Can you please give some more relevant details.
Thanks
Pls can you do a tutorial on how to make antd not affect global styling
Sure @Abu David,
Can you please elaborate a little more what you mean by antd not affect global styling?
You can always override the styling on antd components.
@@CodeWithAamir like if I add my other CSS styles once I import the antd style it overrides other of my CSS styles
I got it now.
Actually this is a known issue on antd side. There are few workarounds which may or may not work in every situation so may be worth trying in your project. Workarounds could be as below
1- First of all antd considers that your whole project is using the antd as the base bone of components so creating all those conflicting css components from antd will resolve the issue.
2- Try importing antd css styles before importing your custom styles might help in overriding the antd styles with your custom styles
3- Some developers find that importing components and only their own related css works well like
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'
but I personally found it problematic when using some basic components like Select, it might help in your use-case but not 100% sure.
I summary it is a known issue on ant design side and if workarounds works then well and good otherwise we may have to live with it until properly resolved.
Please let me know if you need any more information/help on that.
Thanks
I want you to show add Submit button to collect data in table to Form.
Hi @Panumas Saewong,
I might not get you exactly, can you please elaborate your question a little more so I can comment to the right point.
Thanks
@@CodeWithAamir First of all I would like to thank you for all you coorpaerate. May be my Englist is not good. In my OrderForm contain OrderDetail(orderDate,customer) and OrderItem(product,price,qty) I want to create OrderItem by Form.List by collect data from FormModal to Form.List and show orderItem in Table. and I want to my payload like this {orderDate:date,customer:customerId,orderItem:[{product:productID,price:productProce,qty:orderQty}]} . Don't worry if you don't understand my English thank you.
Hi @Panumas Saewong,
I got an idea what you are talking about, let discuss this further on zoom or email (aamircodewith@gmail.com) and solve your problem.
Thanks
@@CodeWithAamir Hey Amir can I also talk with you about this
Sure @Nikola Kikanovic,
You can comment here or send me email in details at aamircodewith@gmail.com
Thanks
7:55
Thanks @Aarthi for referring/bookmarking custom render implementation.
is there anyway to pass this.state to columns?
Hi @Apna Food PK,
Not exactly the this.state but you can pass something like this.state.columns etc. because antd Table need an array of objects, you can pass it from any variable/sate_variable etc. but mostly this.state contains variable and then those variables contains the state values so it won't work directly.
Please let me know if that is what you need OR I misunderstood your question?
Thanks
@CodeWithAamir I was able to get it done thanks for your help
how can i add search table data option?
Hi @Varun,
I have a separate video on table search at below link.
ua-cam.com/video/uatpXRlR4zo/v-deo.html
Please have a look if that helps.
Thanks
bro I am not getting data if I write columns inside the function
and if I write it outside I am getting data but cannot perform delete operation.
Hi @Awaiz,
It should work as explained in the video, its hard to tell what could be the issue, can you please share the code snippet via drive or code sandbox etc so that I can take a look and see for the solution.
Thanks
@@CodeWithAamir got it bro thanks.
Why are you allowed to declare functions in a variable without specifying their type
I used the plain javascript instead of typescript so that is why its allowing me.
I hope you got it.
Please let me know if you have any more question.
Thank you !
why dont set ID = iD+ 1
Hi @Khánh Trần Nguyên,
Setting a unique id by any mean is fine, so if you want to set the ID incremented every time by 1 is also fine.
Please let me know if you need any more information on that.
Thanks
when i delete show error: "pre.filter is not a function"
Hi @Alice,
It’s strange, can you try printing pre value to see what is in the state at that time because if its still an Array it should work. If somehow its not Array, change it to Array and it should work.
Please let me know if still there are issues.
Thanks
I got the same issue but I found out that my remove function was nested in a child component. hope it helps
":Each child in a list should have a unique "key" prop." how i should solve this error
Hi @art one ,
You can pass the unique key either inside you dataSource like
dataSource={[
{
col1: "123",
col2: "456",
key: "123",
},
{
col1: "789",
col2: "10111213",
key: "456",
},
]}
and Table will automatically pick it if it is against the "key" in dataSource recrod.
The second way is you can specify the unique key column in Table props like
and it will pick col1 as the unique key for rows.
The 3rd way could be you can return it based on your row record so something like
record.uid} />
Please let me know if that makes sense or worked for you.
Thanks
pls can u code example using axios.delete to del data ?
Hi @Gamergenix,
To code it exactly by using axios.delete and delete records might not be possible for me because I do not own any server or APIs which can do that with examples. But I have created two separate videos
1- Integrate axios in antd table and fetch paginated data (ua-cam.com/video/AXNp_oU1Q80/v-deo.html). In the video I implemented axios.get to fetch the data and populate in antd table, using similar way you can use axios.delete and change your datasource based on API response.
2- Generic axios integration in reactjs ua-cam.com/video/c6irH9lqcdQ/v-deo.html
I hope those videos will help you in that regard. Thanks
7:55
Thanks @Aarthi for referring/bookmarking custom render implementation.