4. Render Custom Component in Material Table || Material UI

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ม.ค. 2025

ความคิดเห็น • 63

  • @bdk9830
    @bdk9830 3 ปีที่แล้ว +2

    I really appreciate you saving my life with this video! thank you a lot!

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      Glad to hear that from u, Thanks for watching :)

  • @josearmandozeballosduran7086
    @josearmandozeballosduran7086 3 ปีที่แล้ว +1

    Amazing video, keep going.

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      It's my pleasure, Thanks for watching :)

  • @kooyaw4445
    @kooyaw4445 ปีที่แล้ว +1

    You're a life saver

  • @emmanueleban1096
    @emmanueleban1096 2 ปีที่แล้ว +1

    hi codenemy..thanks alot for all.. whats the differencence between material-table and MUI5 and which is better

    • @Codenemy
      @Codenemy  2 ปีที่แล้ว

      if you are talking about data-grid vs material-table, blindly go for data-grid because material-table project left by it's owner

    • @emmanueleban1096
      @emmanueleban1096 2 ปีที่แล้ว +1

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

    • @emmanueleban1096
      @emmanueleban1096 2 ปีที่แล้ว +1

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

    • @Codenemy
      @Codenemy  2 ปีที่แล้ว

      @@emmanueleban1096 will upload videos on that too, however it will take time

    • @Codenemy
      @Codenemy  2 ปีที่แล้ว

      @@emmanueleban1096 Have a look at official website still previous one
      material-table.com/#/docs/install

  • @lakshmiprasuna8248
    @lakshmiprasuna8248 3 ปีที่แล้ว +1

    Thank you so much video is very help full! suppose we want to print today date with as separated column how can print?

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      add new column and pass new date() as a column value, Have a look here th-cam.com/video/h4SQhWM59gY/w-d-xo.html

  • @RajeshKumar-sq2ji
    @RajeshKumar-sq2ji 2 ปีที่แล้ว +1

    can you give me some instruction or video for in in-line editing .... multi-select example
    ??

    • @Codenemy
      @Codenemy  2 ปีที่แล้ว

      You should use lookup concept, Have a look here th-cam.com/video/ElDHFc5n_aQ/w-d-xo.html

  • @simpledatabymurari6779
    @simpledatabymurari6779 3 ปีที่แล้ว +1

    Thank you, very help full video

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      It's my pleasure, Thanks for watching :)

  • @X-AEA-12
    @X-AEA-12 3 ปีที่แล้ว +1

    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!

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      can you text me code on fb
      facebook.com/codenemy
      i got first half but not last one.

  • @amraja08
    @amraja08 3 ปีที่แล้ว +1

    hi sir i need your help for react table(time picker)

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      I have not idea on react table, Have a look on this npm npm i react-table-time-picker

  • @vmrexp5596
    @vmrexp5596 3 ปีที่แล้ว +1

    Can a column have more than one row?
    Example:
    Name | Date | (3 objects/3 lines)

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      Depends, just give a try

  • @mikiyasegaye
    @mikiyasegaye 3 ปีที่แล้ว +1

    Can you show us how to filter or search using the rendered values "Deactive" and "Active" on the search bar?

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว +1

      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

  • @khandoor7228
    @khandoor7228 3 ปีที่แล้ว

    Brilliant! very good series!!

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      Glad to know that it helped, Thanks for watching and your response :)

  • @umair4909
    @umair4909 3 ปีที่แล้ว +1

    pease make video on expandable row with selection and pagination

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      Sure, Thanks for suggestion :)

  • @kishorkumarp4492
    @kishorkumarp4492 3 ปีที่แล้ว +1

    How to add custom icon button on table..

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว +1

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

    • @kishorkumarp4492
      @kishorkumarp4492 3 ปีที่แล้ว

      @@Codenemy i need button on topbar

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      @@kishorkumarp4492 topbar in the sense near to title

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      @@kishorkumarp4492 givr me some time plz

  • @kishorkumarp4492
    @kishorkumarp4492 3 ปีที่แล้ว +1

    How add pagination..how pass start and limit to api

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว +1

      Have a look here material-table.com/#/docs/features/remote-data
      look at very first example (Remote Data Example)

    • @kishorkumarp4492
      @kishorkumarp4492 3 ปีที่แล้ว

      @@Codenemy how to implement server side search...?how to take search keyy??

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว +1

      @@kishorkumarp4492 You can use function onSearchChange which will give you text as a first parameter
      onSearchChange={(searchText)=>console.log(searchText)}

  • @kishorkumarp4492
    @kishorkumarp4492 3 ปีที่แล้ว

    Which function is used for reload the full tablee

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว +2

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

  • @kishorkumarp4492
    @kishorkumarp4492 3 ปีที่แล้ว

    In cell edit time how get row id.. That row data i need for api call

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว +1

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

  • @MrYogi84
    @MrYogi84 3 ปีที่แล้ว +1

    How to render custom title?

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว +1

      Are you referring to text or component.
      For text pass title as your custom text.
      and for component you can override Toolbar component.

    • @MrYogi84
      @MrYogi84 3 ปีที่แล้ว +1

      @@Codenemy thanks

  • @mansilaad2062
    @mansilaad2062 3 ปีที่แล้ว

    Helpful 👍

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      Thanks for response glad to know that it helped
      Thanks for watching :)

  • @leamon9024
    @leamon9024 3 ปีที่แล้ว +1

    Thanks

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      you are Welcome :)

  • @hiem5434
    @hiem5434 3 ปีที่แล้ว +1

    Hay vl

  • @lalitchelani190
    @lalitchelani190 2 ปีที่แล้ว +1

    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

    • @Codenemy
      @Codenemy  2 ปีที่แล้ว

      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

    • @lalitchelani190
      @lalitchelani190 2 ปีที่แล้ว +1

      @@Codenemy but field is in “”. How can I write this as string?

    • @Codenemy
      @Codenemy  2 ปีที่แล้ว +1

      @@lalitchelani190 field:"group[0].GroupMember"

  • @simondonaldson3210
    @simondonaldson3210 2 ปีที่แล้ว +1

    it's renderCell now not render

  • @fikilix
    @fikilix 3 ปีที่แล้ว +1

    ten thousand times oke, impossible to concentrate

    • @Codenemy
      @Codenemy  3 ปีที่แล้ว

      Thanks for your word, and watching :)