@@Codenemy problem is there are no full courses on data grid like what you’ve just done .. literally started with data grid but left it to follow your tutorial s because it covers all I need
@@Codenemy just spoke to the dev guy said they just updated 2.0 to be compatible with MUI pretty sure theyre working on documentation..so i will be using ur tut to understnd as u just save a life
How would I insert a component into a component for country icons? I am getting "cannor read property 'src' of undefined". Thank you. Also, I'm not passing the row objects into a "MaterialTable" component. Instead, I have the "tableHead" property and the "tableData" property which accepts an array. When I try to write the callback function in the array data that I will pass into tableData, I get an error. Thanks!
You can use lookup concept here, add this to status column lookup:{1:"Active",0:"Deactive"} if you want to learn about, checkout this video th-cam.com/video/ElDHFc5n_aQ/w-d-xo.html
@@kishorkumarp4492 You can use function onSearchChange which will give you text as a first parameter onSearchChange={(searchText)=>console.log(searchText)}
Material Table don't have inbuilt function. But you can achieve this using useRef hook. -create a variable using useRef : const tableRef = useRef(); -assign varible to material table : - Trigger refresh button tableRef.current.onQueryChange()} > Refresh if you are facing challenge plz let me know :)
Are you using editable and onRowUpdate function for update. if yes then are you getting id from you api If you have both means, it will work fine onRowUpdate:(updatedRow,oldRow)=>new Promise((resolve,reject)=>{ const id=oldRow.id; // make api call // and resolve the promise once you get response back from api resolve() }) if you are facing challenge feel free to contact me :)
Hello, Thanks for this video. Can you please tell, how to render a custom button (on/off) based on the value of groupMember as one of the columns in the table. Here is the sample data Const sampleData = [ { name : “bob”, Age : “18”, group : [ { GroupName : “bobhouse”, GroupMember: true }, { GroupName : “bobhouse”, GroupMember: true } ] }, { name : “mic”, Age : “18”, group : [ { GroupName : “michouse”, GroupMember: false }, { GroupName : “micbu”, GroupMember: true } ] } ] Looking forward to your help
Here group is a array of two object for first obj try: group[0].GroupMember and for second group[1].GroupMember , pass these as a field to particular column
I really appreciate you saving my life with this video! thank you a lot!
Glad to hear that from u, Thanks for watching :)
Amazing video, keep going.
It's my pleasure, Thanks for watching :)
You're a life saver
hi codenemy..thanks alot for all.. whats the differencence between material-table and MUI5 and which is better
if you are talking about data-grid vs material-table, blindly go for data-grid because material-table project left by it's owner
@@Codenemy problem is there are no full courses on data grid like what you’ve just done .. literally started with data grid but left it to follow your tutorial s because it covers all I need
@@Codenemy just spoke to the dev guy said they just updated 2.0 to be compatible with MUI pretty sure theyre working on documentation..so i will be using ur tut to understnd as u just save a life
@@emmanueleban1096 will upload videos on that too, however it will take time
@@emmanueleban1096 Have a look at official website still previous one
material-table.com/#/docs/install
Thank you so much video is very help full! suppose we want to print today date with as separated column how can print?
add new column and pass new date() as a column value, Have a look here th-cam.com/video/h4SQhWM59gY/w-d-xo.html
can you give me some instruction or video for in in-line editing .... multi-select example
??
You should use lookup concept, Have a look here th-cam.com/video/ElDHFc5n_aQ/w-d-xo.html
Thank you, very help full video
It's my pleasure, Thanks for watching :)
How would I insert a component into a component for country icons? I am getting "cannor read property 'src' of undefined". Thank you.
Also, I'm not passing the row objects into a "MaterialTable" component. Instead, I have the "tableHead" property and the "tableData" property which accepts an array. When I try to write the callback function in the array data that I will pass into tableData, I get an error. Thanks!
can you text me code on fb
facebook.com/codenemy
i got first half but not last one.
hi sir i need your help for react table(time picker)
I have not idea on react table, Have a look on this npm npm i react-table-time-picker
Can a column have more than one row?
Example:
Name | Date | (3 objects/3 lines)
Depends, just give a try
Can you show us how to filter or search using the rendered values "Deactive" and "Active" on the search bar?
You can use lookup concept here, add this to status column
lookup:{1:"Active",0:"Deactive"}
if you want to learn about, checkout this video th-cam.com/video/ElDHFc5n_aQ/w-d-xo.html
Brilliant! very good series!!
Glad to know that it helped, Thanks for watching and your response :)
pease make video on expandable row with selection and pagination
Sure, Thanks for suggestion :)
How to add custom icon button on table..
instated of button you can render your custom component. as like
here IconButton is imported from material ui core and Add is a icon from material ui icons
If you stuck somewhere plz let me know :)
@@Codenemy i need button on topbar
@@kishorkumarp4492 topbar in the sense near to title
@@kishorkumarp4492 givr me some time plz
How add pagination..how pass start and limit to api
Have a look here material-table.com/#/docs/features/remote-data
look at very first example (Remote Data Example)
@@Codenemy how to implement server side search...?how to take search keyy??
@@kishorkumarp4492 You can use function onSearchChange which will give you text as a first parameter
onSearchChange={(searchText)=>console.log(searchText)}
Which function is used for reload the full tablee
Material Table don't have inbuilt function.
But you can achieve this using useRef hook.
-create a variable using useRef :
const tableRef = useRef();
-assign varible to material table :
- Trigger refresh button
tableRef.current.onQueryChange()} >
Refresh
if you are facing challenge plz let me know :)
In cell edit time how get row id.. That row data i need for api call
Are you using editable and onRowUpdate function for update. if yes then are you getting id from you api
If you have both means, it will work fine
onRowUpdate:(updatedRow,oldRow)=>new Promise((resolve,reject)=>{
const id=oldRow.id;
// make api call
// and resolve the promise once you get response back from api
resolve()
})
if you are facing challenge feel free to contact me :)
How to render custom title?
Are you referring to text or component.
For text pass title as your custom text.
and for component you can override Toolbar component.
@@Codenemy thanks
Helpful 👍
Thanks for response glad to know that it helped
Thanks for watching :)
Thanks
you are Welcome :)
Hay vl
Hello, Thanks for this video. Can you please tell, how to render a custom button (on/off) based on the value of groupMember as one of the columns in the table. Here is the sample data
Const sampleData = [
{
name : “bob”,
Age : “18”,
group : [ {
GroupName : “bobhouse”,
GroupMember: true
},
{
GroupName : “bobhouse”,
GroupMember: true
}
]
},
{
name : “mic”,
Age : “18”,
group : [ {
GroupName : “michouse”,
GroupMember: false
},
{
GroupName : “micbu”,
GroupMember: true
}
]
}
]
Looking forward to your help
Here group is a array of two object for first obj try:
group[0].GroupMember and for second group[1].GroupMember , pass these as a field to particular column
@@Codenemy but field is in “”. How can I write this as string?
@@lalitchelani190 field:"group[0].GroupMember"
it's renderCell now not render
Thanks
ten thousand times oke, impossible to concentrate
Thanks for your word, and watching :)