I can't add multiple array of objects to my rows

Zahdi

Hello,

I am new to datatables and ajax, and never worked with jquery, so i believe i am missing something. I am using datatables with react.js, where i am trying to use it within a react component. I want to perform simple CRUD operations on my displayed data. For now, i try to display data attributes and add their id to the id of the row. Reading the doc, it is possible to add multiple rows by passing an array of objects. However, i keep getting an error alert :

DataTables warning: table id=ConfigurationTable - Requested unknown parameter '0' for row 0, column 0

I understand that datatables is requesting an array of arrays in this case, but i already defined my columns values during initialization.

// Create an effect to use datatables library and prepare a container inside the table to mount react-bootstrap buttons 
    useEffect(()=>{
        // We create the datatable, we specify the layout around the table in the top right (topStart) and top left (topEnd) 
        // we put a 'search' input provided by the library and a custom styled container 
        table = new DataTable("#ConfigurationTable", {
            layout : { 
            topStart : 'search', 
            topEnd : ()=>{
                container.style = "margin-top : 15px; display : flex ; justify-content : center;"
                return container ; 
            } , 
            columns :[
              {data : 'title'}, 
              {data : 'version'} , 
              {data : 'description'} 
            ], 
            rowId : "id" , 
        } 
        }
// ....

this is a test data i am using to simplify :

useEffect(()=>{
      if (teacherCourses != null){
        table.clear() ; 
table.rows
    .add(
       [ {   id : "row1",
            title: 'test',
            description: 'test'
            version: 'test',
        }, 
        {   id : "row2",
          title: 'test',
          description: 'test',
          version: 'test',
      }])
    .draw();
      }
    },[teacherCourses])

I am not sure if react do intervene with my implementation, altough i don't think that's the case, since an array of arrays does work, something like this :

["test","test","test"]

Zahdi

Update:

My bad, i was configuring the columns inside the layout, it works fine now.

allan

Thanks for the update. Good to hear you've got it working now.

Allan