Controller 'mdDataTable', required by directive 'mdDataTableHeaderRow', can't be found! about mddatatable

[achadha235]

Make sure to include jQuery and lodash in your index.html - it seems that md-data-table relies on these two libraries.

I added these two lines to my code and the table worked

  <script src="https://code.jquery.com/jquery-2.1.4.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>

[lmbvarela]

I ran into the same issue, however if you include jquery before angular it works fine. If you are using bower_concat just add jquery as a dependency to angular.

like this:

dependencies: {'angular':['jquery']},

[iamisti]

Hi Samster, you're welcome, however still a lot to do with the project.

I think u missed wrapping the md-data-table-column with md-data-table-header-row.
Can you please make a screenshot or copy your code and show me?

[samster]

I'm using the example code you had on your README as shown below. My project is for work, so I'm unable to give you more of the source.

Could it have anything to do with the way bower is pulling in the library or the way I'm minifying using gulp etc? It's just weird that it recognizes the md-data-table-column directive but then can't find the parent controller.

I'm not sure if it has anything to do with it, but I have an Angular project following the general structure outlined by John Papa's style guidelines. In particular, I'm using ui-router, and "controller as" syntax etc.

Thanks for the help!

            <md-data-table
                   selectable-rows="true"
                    table-card="{title: Nutrition, actionIcons: true}">

                <md-data-table-header-row>
                    <!-- defining column descriptions, align content to the left -->
                    <md-data-table-column
                            align-rule="left"
                            column-definition="The total amount of food energy in the given serving size.">
                        Dessert (100g serving)
                    </md-data-table-column>

                    <!-- in case of inline menu -->
                    <md-data-table-column inline-menu="[ {iceCream: 'Ice Cream', pastry: 'Pastry', other: 'Other'} ]">Type</md-data-table-column>

                    <!-- inline text editing -->
                    <md-data-table-column editable-field="textInput">
                        Calories
                    </md-data-table-column>

                    <!-- in case of sortable columns, we can set the defaultly sortable column -->
                    <md-data-table-column sortable-rows-default>
                        Fat (g)
                    </md-data-table-column>
                    <md-data-table-column>Carbs (g)</md-data-table-column>
                    <md-data-table-column>Protein (g)</md-data-table-column>
                </md-data-table-header-row>

                <md-data-table-row ng-repeat="nutrition in nutritionList">
                    <md-data-table-cell>Frozen Joghurt</md-data-table-cell>
                    <md-data-table-cell>159</md-data-table-cell>
                    <md-data-table-cell>6</md-data-table-cell>
                    <md-data-table-cell>24</md-data-table-cell>
                    <md-data-table-cell>4</md-data-table-cell>
                    <md-data-table-cell>87</md-data-table-cell>
                </md-data-table-row>

            </md-data-table>

[joansanfeliu]

Hi!

Thanks for this module, it looks fantastic however I'm having the exact same issue as samster here, my simple table looks like this:

<md-data-table
    table-card="{visible: true, title: 'Users'}"
                  selectable-rows="true"
                    sortable-columns="true">
              <md-data-table-header-row>
                  <md-data-table-column>User Name</md-data-table-column>
                  <md-data-table-column>Role</md-data-table-column>
              </md-data-table-header-row>

              <md-data-table-row ng-repeat="user in users | orderBy: 'role'">
                  <md-data-table-cell>{{user.username}}</md-data-table-cell>
                  <md-data-table-cell>{{user.role}}</md-data-table-cell>
              </md-data-table-row>
</md-data-table>

Any help would be appreciated

[samchristie]

I'm having the same issue, and after a lot of trial and error I have been able to reproduce it by simply removing the reference to jquery from the demo app. This implies there is a dependency on jquery, but I couldn't figure out why.

Maybe one of the calls to angular.element isn't supported by jqlite? Is that really necessary?

[iamisti]

FYI: Working on the issue, give me 1 day and it will be solved.

[iamisti]

Sorry guys. Today I'll have a look at it.

[iamisti]

@samster @joansanfeliu @samchristie
I cannot reproduce the issue. For me it was working locally.
Can somebody provide me a demo plunkr where I can spot the error?

Thanks.

[samster]

Tried to create a sample app to reproduce. Hope it helps.

Example App

[samchristie]

Thanks for looking into this. I have been able to recreate it many times but only in a very complex application. I'll see what I can do with the sample app you created. Thanks a lot.

Sam Christie
Sent from 919-272-1368

-------- Original message --------

From: samster

Date:07/21/2015 11:19 PM (GMT-05:00)

To: iamisti/md-data-table

Cc: samchristie

Subject: Re: [md-data-table] Controller 'mdDataTable', required by directive 'mdDataTableHeaderRow', can't be found! (#24)

Tried to create a sample app to reproduce. Hope it helps.

Example App

---

Reply to this email directly or view it on GitHub:
#24 (comment)

[bryandent]

I was having this same issue as well. We use jade and compile to HTML and I discovered that this issue appeared when everything was not nested correctly. For example, your md-data-table-header-row and md-data-table-row elements need to all be a child of md-data-table. While this seems obvious, in our case, jade made it less obvious. As soon as we fixed this, our errors went away and it functions as expected.

[iamisti]

Good to hear that. But the others unfortunately had the right structure but it's not working for some reason. I'm did some investigations but I didn't find the cause. I'd be glad if someone of you guys can help me with that issue. Pull requests are welcome here as well.

[vpquant]

I ran into the same issue.
I come to the same conclusion as samchristie: from this plunker http://plnkr.co/GhIJYp23Y3XqLAKzqSiL, just comment out the jquery script tag in index.html to reproduce the error.

[iamisti]

@samster Is that solved your issue?

[PauloLira]

+1

[anupamurl]

Add jquery on top of script it will work

[iamisti]

Fixes also electron with v1.8.1