[Bug] Adding data array in to tabledata

[maratha1205]

Version

1.9.0

Reproduction link

https://jsfiddle.net/5uftc7yb/1/

Operating System

Windows 10

Device

Laptop

Browser & Version

Chrome

Steps to reproduce

1) Assigning array to tableData

What is expected?

Table with array data

What is actually happening?

No data showing.

---

Solution

Additional comments

[einazare]

Hello there, @maratha1205 ,

I do not understand your issue. I can see that our product is working as expected on our live preview: https://demos.creative-tim.com/material-kit-pro-react/#/

Please share with me a step-by-step guide on what is not working as advertised.

Best, Manu

[maratha1205]

1) I want to add dynamic array of object in to shopping cart. Examples array:- [{"id":0,"cart_item_id":01221,"desc":"Product desc","price":0},{"id":1,"cart_item_id":01222,"desc":"Product desc","price":0},{"id":2,"cart_item_id":01223,"desc":"Product desc","price":0}]

2) By using array map function it does not render as expected. All data renders in one columns.

`    <Table
              striped
              tableHead={[
                "#",
                "",
                "Product Name",
                "Type",
                "Qty",
                "Price",
                "Amount"
              ]}
              tableData={[
               array1.map(arr => (
               [
          "1",

          "Moleskine Agenda",
          "Office",
          "25",
          "€ 49",
          "€ 1,225"
        ]  ))
        ,
                {
                  total: true,
                  colspan: "5",
                  amount: (
                    <span>
                      <small>€</small>12,999
                    </span>
                  )
                }
              ]}
              customCellClasses={[
                classes.textCenter,
                classes.padding0,
                classes.textRight,
                classes.textRight
              ]}
              customClassesForCells={[0, 1, 5, 6]}
              customHeadCellClasses={[
                classes.textCenter,
                classes.textRight,
                classes.textRight
              ]}
              customHeadClassesForCells={[0, 5, 6]}
            />`

3) I simply want to know, how to render dynamic json array in tableData.

Kindly help me.

[einazare]

Hello again, @maratha1205 ,

Well, of course, it is not working. Your array is totally different from what we have. So, please, instead of using

[
  { "id": 0, "cart_item_id": 01221, "desc": "Product desc", "price": 0 },
  { "id": 1, "cart_item_id": 01222, "desc": "Product desc", "price": 0 },
  { "id": 2, "cart_item_id": 01223, "desc": "Product desc", "price": 0 }
]

Try using:

[
  [0, "01221", "Product desc", 0 ],
  [1, "01222", "Product desc", 0 ],
  [2, "01223", "Product desc", 0 ]
]

Best, Manu

[maratha1205]

I tried that also. But how to map dynamically? Any example to map dynamic array?

[einazare]

Hello again, @maratha1205 ,

We didn't use the map function in our table.

Best, Manu

[maratha1205]

Then how should define dynamic array? Is there any way? Can't predict cart items so array will not static. How should I define dynamic array in the "tableData"? What is the best practice for that?

[einazare]

Hello again, @maratha1205 ,

So, instead of using array of objects:

[
  { "id": 0, "cart_item_id": 01221, "desc": "Product desc", "price": 0 },
  { "id": 1, "cart_item_id": 01222, "desc": "Product desc", "price": 0 },
  { "id": 2, "cart_item_id": 01223, "desc": "Product desc", "price": 0 }
]

You should use array of arrays:

[
  [0, "01221", "Product desc", 0 ],
  [1, "01222", "Product desc", 0 ],
  [2, "01223", "Product desc", 0 ]
]

Please note that an object is a structure that is delimited by { and }, whereas, an array is delimited by [ and ]. Also, in the case of an object, each item from the object has a structure as nameOfItem: valueOfItem, whereas the array has only the valueOfItem.

Hope this helps.

Best, Manu

[maratha1205]

According to your criteria, if I use array instead of array of object. It still gives me same output. I declared two dimensional array var cart_items= [ [ "col_1", "col_2", "col_3","col_4" ], [ "col_1", "col_2", "col_3","col_4" ], [ "col_1", "col_2", "col_3","col_4" ], ];

Then I assigned this array to tableData, `tableData={[

           cart_items,

            { other code`

After that I got attached output.

We can't say cart is of fixed length. User can add 'N' number of items. So cart array is dynamic. Your tableData is useful only for static array. It fails when dynamic array comes in picture. I wasted my 4 days configuring array in tableData. Is it bug or limitation of tableData?

[einazare]

Hello again, @maratha1205 ,

Yes, now it is not working since you have added an array of arrays inside another array.

tableData={[[ "col_1", "col_2", "col_3","col_4" ], [ "col_1", "col_2", "col_3","col_4" ], [ "col_1", "col_2", "col_3","col_4" ]]}

Please use this code.

Best, Manu

[maratha1205]

How to declare dynamic array ? Is it two dimensional array?

[maratha1205]

Finally issue resolved. Steps to resolve, 1) Created empty array. let obj = []; 2) Looping through cart array. for (var i=0;i<cart_items.length;i++) 3) Pushing cart array items to empty array. for (var i=0;i<cart_items.length;i++) { obj.push(cart_items[i]); } 4) Defined in tableData. tableData= {obj}