Bootstrap-table: Uncaught TypeError: Cannot read property 'field' of undefined

[sxahmed]

Uncaught TypeError: Cannot read property 'field' of undefined

(anonymous function) @ bootstrap-table.min.js:7n.extend.each @ jquery.js:374n.fn.n.each @ jquery.js:139(anonymous function) @ bootstrap-table.min.js:7n.extend.each @ jquery.js:374n.fn.n.each @ jquery.js:139o.initTable @ bootstrap-table.min.js:7o.init @ bootstrap-table.min.js:7o @ bootstrap-table.min.js:7(anonymous function) @ bootstrap-table.min.js:8n.extend.each @ jquery.js:374n.fn.n.each @ jquery.js:139a.fn.bootstrapTable @ bootstrap-table.min.js:8(anonymous function) @ bootstrap-table.min.js:8n.Callbacks.j @ jquery.js:3099n.Callbacks.k.fireWith @ jquery.js:3211n.extend.ready @ jquery.js:3417I @ jquery.js:3433

[wenzhixin]

Can you provide a jsFiddle to show your problem?

[CathalG]

Hey there,

I just finished troubleshooting this same issue, make sure your table includes table header and table body tags:

<thead></thead>
<tbody></tbody>

Sorted

[sxahmed]

You nailed it. My table had no <thead> and no <tbody> . After adding I get no " Uncaught TypeError: Cannot read property 'field' of undefined "

Thank you CathalG

[wenzhixin]

Please use a standard table.

[rameshfernandez]

@CathalG You just saved my time. thank you. it works after adding

<thead></thead>
<tbody></tbody>

[InsomniumBR]

What about warning that the table is missing this fields? I lost some time on this, because I was using an ASP.Net MVC sample table...

[gogaz]

I came across this issue because I had more columns than headers in my table. Hope this could help someone

[rachelluethi]

I got the same error message. I have <thead> and <tbody>, number of header columns equals the number of columns in tbody, tags are all closed. Is there another problem leading to the same error message?

[UtechtDustin]

@rachelluethi Please provide us an example using our online editor

[djhvscf]

Reopened it for tracking purposes

[rachelluethi]

The problem was that colspan is not considered in <thead> (?). I could solve it by adding the same amount of <th> in <thead> as the sum of colspans defined.

Example:

<thead>
   <th></th>
   <th></th>
   <th></th>
   <th></th>
   <th></th>
</thead>
<tbody>
   <tr colspan="1"></tr>
   <tr colspan="3"></tr>
   <tr colspan="1"></tr>
</tbody>

[UtechtDustin]

@rachelluethi as already said, please provide a example using our editor.

rowspan and colspan works in the thead, check this example: https://live.bootstrap-table.com/example/column-options/rowspan-colspan.html

[rachelluethi]

Thank you!
I added a working and a non-working example:
https://live.bootstrap-table.com/code/rachelluethi/3433
https://live.bootstrap-table.com/code/rachelluethi/3434

[UtechtDustin]

Im not sure if we support colspan/rowspan on the tbody.
There is a method called mergeCells : https://examples.bootstrap-table.com/#methods/merge-cells.html

@wenzhixin @djhvscf could you check this ?

[djhvscf]

I think you can use the mergeCells method in order to do that

[wenzhixin]

Thank you!
I added a working and a non-working example:
https://live.bootstrap-table.com/code/rachelluethi/3433
https://live.bootstrap-table.com/code/rachelluethi/3434

Duplicate of #4562

[keithpickett]

Adding my $0.02 worth:
I had this exact same issue and after reading this thread, was able to solve my problem. My table was set up like this with a td instead of a th like so:

<thead>
   <td></td>
   <th></th>
   <th></th>
   <th></th>
   <th></th>
</thead>

This falls under @BeardyB 's comment above regarding unequal number of elements. Hope this helps someone.