angular/material

mdTable: Table Component

rgolea opened this issue Β· 77 comments

http://www.google.com/design/spec/components/data-tables.html

DataTables

Here is at Codepen an actual table made.
Thanks for everything! Really nice job!

http://codepen.io/zavoloklom/pen/IGkDz

Sometimes called a DataTable

Tables are scheduled for Milestone 0.9

Thank you for the nice HTML <table> demo.

How do you plan on doing it? Something like ui-grid or just the tags replacement? I think I can try to help on that... I just don't know how you organise the codes and how to send the info... Any tips on any tutorials that I can see or any document I must read in order to help? (I'm new to github)

I'd suggest reading the Readme, Contributing Guidelines, Coding Guidelines and Pull Requests Guidelines. You'll find instructions on where to put the code, how to test it and how to submit it.

If you want to learn more about Git, Understanding the GitHub Flow, how to fork a repo, how to create a branch and how to submit a pull request may help you.

I don't know if you have already worked on this, but I made one too, if I could help...

http://codepen.io/jbltx/details/WbdRRb

I will try to add some features on it, because I need it for an app which uses many data to put in a table.

+1 I love how @rgolea's demo collapses on small screens. I never thought about repeating the headers that way.

+1 @rgolea - that responsive layout is innovative and nicely done.

+1 nice

Looking forward to this. I'm especially interested in a table featuring scrollable body or floating headers.

+1, really interested

The version 0.9.0 is still scheduled for 6 april 2015 ?

+1

Where is that April 6th date from?

+1

Why can't we merge this now? If someone's already made it, shouldn't we delighted and prepone the integration....

data-table is now scheduled for post v1.0. Trust me, if it was actually built it would be merged. No need for additional +1's: we're definitely doing it, it's just a large undertaking.

A little bit of info goes a long way. Thanks for clearing it up. Looking forward to it.

+1

Hi,
I'm looking for md-table of "angularJs Material/polymer" to use in my app.
please suggest me how to use ???
can u guys provide some sample code of md-table.???
is there any source to get complete info of angularjs Polymer or angular material..???

Well now its official.
http://www.google.com/design/spec/components/data-tables.html

Polymer hasn't implemented it also. It would be cool how fast these new specifications will be available to devs. There is a roadmap? If it has no plans, I could start and collaborate with something.

Thanks ivanhtp
but i'm looking for sample code to use in my app.

If this feature is developed and under testing, can I get an API reference / sample code for using this feature?

I'll try to make this more clear.

There is no material data table built at this point in time.
No code has been written.
There is no API.
Design is in-progress.

It's amazing how developers are chomping at the bit to use even pre-release versions of software nowadays. πŸ˜‰ Thanks for the clarification, @jelbourn.

I'm curious if this got de-prioritized because we really shouldn't be using data tables? If I need to truly avoid tables I can but my use case fits precisely into the spec's explanation.

@wcjr They are working on 0.9.0 which is a bugfix/polish update. This is coming in 0.10.0 which returns to adding new features/components.

Have a look at the milestones https://github.com/angular/material/milestones I really don't think it has anything to do with avoiding tables. They are very important for data heavy apps.

Thanks @epelc , I may have been confused by the "post 1.0" tags.

πŸ‘

Do you know if md-data-table (or how it will be named) will use HTML tables? I expect that.

So... what will it be in the end? I mean in responsive. Will it just shrink or will it be able to change headers?

+1 Can't wait for this.

+1

+1

So data tables as a features seems to have been removed from the list of features for milestone 0.10.0. Is this an oversight and someone's working, or planning on, working on it before then or should we re-label this issue as post-1.0 or 1.0-beta1?

+1

+1

I've been looking at the ng-conf on youtube, the talk about the next features on material design so it can advance to v.1.0. @ThomasBurleson you guys didn't mention anything about tables. Does that mean it won't be any tables in that version? Should we expect it in a later version?

@rgolea - We are working on mdTable internally. This component [with its requirements] is quite complicated with 1..n columns, sorting, filtering, infinite scrolling, in-cell editors, etc. The planned community availability of this component is targeted for post v1.0.

If your needs are immediate and require layout only.... then here is a Responsive Table CodePen a contributor Sergey Kupletsky.

That's great to hear. Is there a possibility of delivering all of that goodness iteratively? For example, could we have a well-styled table rc without the sorting, etc?

please, please with a cherry on top? :-)

I have been using this codePen which has some of the features @ThomasBurleson has spoke about:
http://codepen.io/jbltx/pen/WbdRRb/

Very excited for this component!

@wcjr - Our tradition with Angular Material is to publish early so the community can preview, test, and provide feedback. We love iterative releases... but we still focus on quality and stability for each component.

Once a subset of features have stabilized for <md-table/>, I am confident the community will see iterative previews... maybe sooner than expected.

Currently our primary focus is on releasing mdDateTimePicker and mdMenu.

ok @ThomasBurleson , thanks for the consideration. You guys are doing great work and my team is benefitting from it greatly!

@mwils-bp - πŸ‘

πŸ‘

+1

πŸ‘

πŸ‘

Hi Guys, I've just created the specification for the md-data-table 1 day before.
https://github.com/iamisti/md-data-table

So I found this issue and I saw that table component scheduled to milestone 0.9.

But now it's already v0.94 and there is no table component if I'm correct.
So before I'm moving on, I'd like to know the status of it.

Does it make sense to do it, or should I stop that I've started?

If you read the 'milestone' on here it is logged against 0.10 to have this built, there were comments to suggest 0.9 might get a preview version, but as we are on 0.9.6 now I expect we won't be getting a preview in 0.9..... however this ticket is marked as closed, so would help to get confirmation on.

In this thread, angular material team said nothing was specified, or even touched about tables for now. I think @iamisti did a great job, even though thinking Google will ignore them or will have their own attributes. I think you should continue. :)

@andrew-cunliffe I was searching over the milestones and I didnt even found a ticket for 'table'.

Thank you @ivanhtp , I'll try my best! :)

@iamisti See @ThomasBurleson reply a bit further up in this thread:

@rgolea - We are working on mdTable internally. This component [with its requirements] is quite complicated with 1..n columns, sorting, filtering, infinite scrolling, in-cell editors, etc. The planned community availability of this component is targeted for post v1.0.

They did also use to have data-tables mentioned in the 0.9 and then 0.10 milestone list but they removed it, so think they're prioritising the other components and having them just work and look good. Along with a well functioning docs and build system.

Looking at when post v1.0 will arrive: it's scheduled for a little more than one month after 1.0-beta1 at July 14. 1.0-beta1 is however scheduled to be around in one week. Very much doubt if even 0.10 will be around by then. Meaning we should expect a heavy delay compared to the milestone. Then there might be some vacations coming around in July, possibly delaying it further. So would guess we'll see it in August at the earliest.

Awesome if you think you have time to contribute in anyway though. Looking at the repository I think it looks good. My only real comment is that for the "example usage" you accidentally left it receiving an array rather than a matrix, unlike in your actual directive where you expect a matrix (as you should expect).

If you ask nicely you could maybe also work with the Material Angular team on the official component as well, like @topherfangio did with #2842. Rather than just making your own in parallel. I have no idea how interested you or the Angular Material team is in that though.

Good luck either way.

Thanks @Koslun for your detailed answer!
I will try to do something on my own, and also I'll try to reach the internal guys if I can help them.

I'm continously working on it, here is a demo of the current status:
http://iamisti.github.io/md-data-table/

Cheers,
Istvan

I am working on implementing this as well. See here for more information.

Current Features Supported

  • Automatic Row Selection
  • Numeric Columns
  • Column Ordering

I'll try to have a gh-pages up shortly so people can play around with it without running the application locally.

update
http://danielnagy.me/md-data-table/

So you just created the repository today and u do the same as I do... Instead of contributing.... okay

Hi,

I did not mean to offend, I started this project a few days ago. At my employment we use tables for everything so this is a necessary feature for me. I wouldn't say, "I did the same as you". Our implementations are quite different. In addition, neither of our solutions are mature or offer much functionality so there is no sense of entitlement to one over the other.

Sorry you get me wrong.
I thought you will build it up with the entire functionality that I'm planning to do. That's why I didn't understand the concept of creating a new repo.

Cheers,
Iatvan

@ThomasBurleson @jelbourn Is Tables still scheduled for v1.0? I didn't see it on the schedule as mentioned here

I think it's post v1.0

-----Mesaj original-----
De la: "Luke Edwards" notifications@github.com
Trimis: β€Ž05.β€Ž06.β€Ž2015 8:20
Către: "angular/material" material@noreply.github.com
Cc: "Rares Golea" rgolea@gmail.com
Subiect: Re: [material] mdTable: Table Component (#796)

@ThomasBurleson @jelbourn Is Tables still scheduled for v1.0? I didn't see it on the schedule as mentioned here
β€”
Reply to this email directly or view it on GitHub.

:(

I'm looking forward to appear mdTable

Hi all,

I've committed some new features, including functional select boxes and support for server side filtering. You can experience the new features from my demo application. I have a Node.JS server running on Heroku with a companion MongoDB database. When you click on the column names you are seeing server side filtering. If you open up a dev console and click the Log Selected Items button, you will see all the selected items logged to the console. Hopefully I will get around to updating the documentation tomorrow.

I would really love to see people improve my code! The source code for the server is available as well if anyone wants to add more CRUD operations before I get around to it. :)

Hello,

I have built a md-table following the google specs. The syntax is very easy to understand, example:

<md-table id="myTable" content="content" multi-selection="true" 
    on-selection-change="updateSelectedItems(selectedItens)" 
    on-item-click="openDetail(item)">
    <columns>
        <table-column header="Pic" width="40" sortable="false">
            <column-template>
                <div style="background-image:url({{row.thumbnail}})"></div>
            </column-template>
        </table-column>
        <table-column header="Name" field="name" sortable="true" width="40%"/>
        <table-column header="Desc" field="description" sortable="false" width="40"/>
        <table-column header="Modified" field="last_modified" width="20" sortable="false"/>
    </columns>

    <!--Optionals composite components -->
    <pager>
        <infinity-scroll-pager on-scroll-end="sendMoreData(size)"></infinity-scroll-pager>
    </pager>
</md-table>

Is there any spec of the md-table?

@daniel-nagy looks great, thanks!
I just with the filtering was done on the client side

@lukeed client-side filtering is easy if you use ng-repeat to display the items in the table. Please take a look at Column Ordering, specifically the example for automatic sorting. If you have trouble getting it to work let me know.

Be aware the table is not capable of sorting data without ng-repeat and I do not plan on implementing this ability.

You can expect more improvements this weekend. If anyone is experiencing problems please open an issue so I can fix it for you! πŸ˜ƒ.

@daniel-nagy " In addition, neither of our solutions are mature or offer much functionality so there is no sense of entitlement to one over the other."

+1

There are a number of quality 3rd party Material table implementations listed above. Please use them and contribute to making them better. There are no plans at this time to add a table to AngularJS Material.

If you would like a Material table that is officially supported by the Angular team, then it is suggested that you either migrate to Angular Material (and Angular) or use ngUpgradeLite to run in Hybrid mode so that you can use the Angular Material table in your AngularJS app.

There was a PR with some work towards making this happen but the team just didn't have enough resources to get this done and most importantly to support it over the years.