Smart-Table a new table / grid module

[lorenzofox3]

Hi Angularians,

For a personal project I have developed a grid / table module. I thought it might interest some people so I wrote a documentation/example website 
Feel free to contribute and to give me feedbacks.

Here are the current features. 

• table markup: it is a table and follows the semantic of an HTML table.
• manage your layout: you can choose the number of columns and how the should be mapped to your data model
• format data: you can choose how the data are formatted within a given column:
  • by giving your own format function
  • using one of the built-in angular filters
• Sort data
  • using your own algorithm
  • using the 'orderBy' angular algorithm: in this case you'll be able to provide predicates as explained in orderBy filter documentation
• Filter data
  • using a global search input box
  • using the controller API to filter according to a particular column
• Select data row(s) according to different modes:
  • single: one row selected at the time
  • multiple: many row selected at the time. In this case you can also add a selection column with checkboxes
• Simple style: you can easily give class name to all the cells of a given column and to the header as well
• template cell:
  • you can provide template for a given column header (it will be compiled so that you can attach directves to it)
  • same for the data cells
• Edit cells: you can make cells editable and specify a type for the input so that validation rules, etc will be applied
• Client side pagination : you can choose the number of rows you want to display and use the angular-ui.bootstrap pagination directive to navigate.
• All the directives of the table use the table controller API. It means that you can easily change the templates and directives but still using the API to perform any operatio

cheers, 

Laurent

[Leonardo Ribeiro]

thks for sharing. great job

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
[]'s
Leonardo

Linux User #488650
Ubuntu User #27045
Mais sobre o Ubuntu em português: http://www.ubuntu-br.org/comece

[Grant Rettke]

On Mon, May 27, 2013 at 3:30 PM, lorenzofox3 <laurent...@gmail.com> wrote:
> For a personal project I have developed a grid / table module. I thought it
> might interest some people so I wrote a documentation/example website
> Feel free to contribute and to give me feedbacks.

Thanks! It looks very cool.

I will ask what everyone is thinking; why might you use this rather
than or in addition to ng-grid?

[lorenzofox3]

Hi, 

That is a good question ;) 

My experience with ng-grid is quite limited (based on example website and a plunker version 1.9-something if I remember correctly) but it is that same experience that made me implement my own module (and it was also a good way to learn different aspects of AngularJS !). 

ng-grid has a lot of nice features but I disliked it for many reasons :
It is overwhelming : few thousands of code lines, need JQuery(?). The thing is that for most of the cases what I need from a table is a basic set of functionalities (sorting, format data and maybe filter them). If you want to customize ng-grid, it is in my opinion really difficult to get into the source code and you rely on the features the team has found relevant. It is not really tested and I am not sure it is actually really stable or regression proof (for example, on the demo website the edit cell example does not seem to work). It does not follow the markup of a html table and it can be troublesome for basic operations(not only for the lack of appropriate semantic) like copying the data and pasting it in a spreadsheet. They might have implemented a way to do it but again it is adding more code. For me it seems that the goal was to add more and more features but sometimes it has an impact on consistency (do I really need a server side pagination when all the sort/filter operations are done on client side)

For Smart Table I tried to keep this in mind. 

Everything actually relies on the Table controller that offers an API to the directives in order to perform any operation on the data.
The Table controller uses a helper to manipulate arrays (the Utility factory)
A filter helps to format the data but it is basically an adaptor to angular built in filters.
The column configuration is extended to add some more behavior and then provided to the scope of the main directive.
After the inside directives have access to all column and row data thanks to scope inheritance and can require an instance of the table controller to access its API. You don't even have to use the one provided and it is really easy to change with yours. At the end I believe it has the core features for a table (it is even already a bit to much), at least in my opinion and it is easily customizable though I know the code pretty well :p.   
Anyway I'll try to explain the anatomy of the module when I find sometimes. 

So at the end I don't think there really is a competition, It is just different approaches and the best I think it is to try both and take the one that fits the best your needs.

cheers, 

Laurent

[Grant Rettke]

On Tue, May 28, 2013 at 2:07 PM, lorenzofox3 <laurent...@gmail.com> wrote:
> So at the end I don't think there really is a competition, It is just
> different approaches and the best I think it is to try both and take the one
> that fits the best your needs.

Thanks!

[Marcus]

Hi Laurent,

This is really nice. Its simple enough, but with lots of nice features. Its functional, but easy to understand.

The CCS is key to making appearance universal for so many "skins" that one could apply in any app.

I for one would use this tool to list many database tables within my app's screen, as its so straight forward.

Bravo !

[lorenzofox3]

Hi, 

thanks for your feedbacks. 

In the same time, I have improved the build process so that everything is included in a single file (16kb).

And you can start playing with this plunkr.

Cheers,

Laurent

[vapo...@gmail.com]

This is awesome. Thanks for sharing your work, this is what makes AngularJS an awesome framework : its community !

lorem--ipsum

[Jason Drake]

Yes this does look very impressive and I intend to play with it.  At a minimum it should be a good solution for my secondary object tables.

 

Have you considered/gotten requests to provide scrolling table capabilities?  I am not suggesting at this point using deferred rendering viewpoints, but just supporting a grid that will auto scroll vertically/horizontally if there are more results than the rendering size.  (Note: I haven't played with the CSS to see if I can get this to work via CSS yet)

[Allan Siongco]

That looks great. Thanks.

Is there any plan to support row-based editing/validation?

[Jason Drake]

It would appear that there is not anything within smartTable that would prevent you using css scrolling tables.  There is some styles/capabilities that perhaps could be added via the directive and config to better support it (perhaps one advantage would be the encapsulation of listing for scrolling and generation of elements/tds based on scroll position ie. viewport)..... For reference a useful link showing how to do this (I recommend using firefox/chrome and a dev tool to inspect it is here: http://www.imaputz.com/cssStuff/bigFourVersion.html)

[Nolan Dubeau]

This is great.  Nice work!

What would also be really valueable is a change event when a row is selected or a cell is edited.  i.e  I select a row and I want to trigger a function to cause something else in the page to change/refresh, or I edit a cell and I want to asyncronously pass that row to the server to update in the background.  There are some similar features to ng-grid - http://angular-ui.github.io/ng-grid/ in your project but the config (and UI) seems to be much more streamlined and simple to use.  

Thanks!

Nolan

--

[Laurent Renard]

Hi, 

Thanks all for your feedbacks.

@Allan : Unforunately there is no plan to support row validation coming soon.
@Nolan : you are right, the issue was raised on github and it makes sens. For the moment you can watch the data model the table is bound to, to see updated value, selected rows, etc. However it is quite expensive I think. Moreover the watch will be on the whole data collection and not only on the displayed one. Finally, as explained in this issue https://github.com/lorenzofox3/Smart-Table/issues/9, if people want to have a table server side driven, they will not need to have a bound dataCollection source anymore; the only way to notify parent controllers,scopes etc would be by using events. For these reasons, I think we can introduce events emitting when the table controller API is called.
@Jason: 
1-Four the css part, you are right, I actually already used the link you mentioned. However beware that you'll have to change the display property of your table elements (likely to inline-block), so this will work fine if you assume you know the width of your columns. Otherwise it would be trickier.
2-The best way I see for the moment (aside that reformating the data coming from the server), is to use a custom template (cellTemplateUrl) as in the scope you will have access to the whole dataRow, and column Objects. However this is a bit a pitty, because when you use a custom template the cells are compiled in the fly and this can affect the rendering time. In the meanwhile we can think of changing the format function to take the whole row as input (instead of the specific column value) or change the way the mapping is done. I have to investigate a bit more to come up with a valid solution.

Thanks for your interest and for your feedbacks.

Laurent

On Thu, Jun 6, 2013 at 11:26 PM, Jason Drake <jadr...@gmail.com> wrote:

So I have played around with it a little.....

 

There does not seem to be a way to provide the equivalent of {{attr1 + ' - ' + attr2}} or {{getCalculatedArea()}} that you could do using standard TD tags with angular ty-ins.  For objects that have sub-objects that you need to display (I have two collections that hang off the primary object) you can navigate to the right field using a formatFunction and passing the collection, but the standard mapping seems to only support a single attribute.  If you had an object that was

 

{

   pricePaid: 25.5,

   currency: 'USD'

}

 

you could only map the row to either pricePaid OR currency (as I understand it).  This you could not leverage these two values in a formatFunction to produce the correct formatted string.  In this case the format parameter doesn't make sense since it is data-driven.  Another example might be given the width and height return the calculated width.

 

In theory I suppose when you get your server response you could "modify" the data to add these fields for display, but this does also make posting updates more difficult as it means you need to prune out all of these fields or risk them being serialized.  Overall that has a bad smell.  In the currency example above, in my editors I allow the user to choose a price paid and currency separately, but it would be anticipated to when displayed in a tabular format it would be the price paid as a currency.

 

Comments?

 

-Jason

 

 

 

 

On Monday, May 27, 2013 3:30:52 PM UTC-5, lorenzofox3 wrote:

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Em8pi03Skxg/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[lorenzofox3]

Hi,

I have added events on changePage, selectionChange, updateDataRow so you don't have to watch the whole data collection collection.

I have also been asked quite few times what about server side driven table (pagination for example). As I explained the goal of Smart Table is not to handle all possible use cases but to be simple enough to be adapted to any use case. 

That's why I have provided on two different branches code sample to 

1. have server side pagination : you load data on demand but keep all the logic(sort, filter, etc)  on the client (and so on the already loaded data).
server partial  

2. Put all the logic on server side

server sample

Both changes are limited (<10 lines)

By the way you can achieve server side pagination without touching the table code at all. As the data source is bound to the table any change outside the table will be propagated inside so you simply have to implements your pagination outside the table.

Cheers,

Laurent

Le lundi 27 mai 2013 22:30:52 UTC+2, lorenzofox3 a écrit :

[Ron Buchanan]

Looks promising. I have been using ng-grid for our large project, but always felt it was so much more than I needed. We don't allow edits, just viewing and basic sorting/paging/etc. Ours is all on server-side though, too much data to pull back. I wanted to do something similar, but no time, so had to drudge ahead with ng-grid.

Why did you choose to use an HTML table to implement the markup, whereas ng-grid uses divs? I am not abdicating either direction.

-- Ron

[lorenzofox3]

Hi,

and sorry for the late reply !

I chose to use table markup because :

-well if you want to display a table, I think a table markup is appropriate :D
-consistant semantic.
-it eases some basic operations like copying the table data, and pasting it into a spreadCheat.
-ease the skinning and styling (I know that twitter boostrap style is quite popular for example so if you want to use their style it is as simple as <smart-table class="table table-stripped"></smart-table>) as everything is done by css

-less obscur template in my opinion which makes it easier to customise.

For ng-grid, I don't know but it migth be to support the grouping functionalities wich smart-table does not. The best is maybe is to ask their team ;) 

cheers,

Laurent.R

[Richard Emerson]

Awesome table module - good work!

Be aware that if it uses nested ng-repeats internally, then it triggers a nasty bug in Chrome - a memory leak - which effectively makes it unusable.  This might explain the high memory usage for Chrome tabs displaying the smart-table examples.

If there are nested ng-repeats in there, then please consider using (e.g.) a directive for the inner ng-repeat, to avoid the issue.

[lorenzofox3]

Thanks Richard,

You are right, it seems that the nodes are not collected when changing page, and filtering. it is a bug of chrome V8 if I am not mistaken. I'll try to have a look, for the moment 
the workaround would be to replace the second ng-repeat in the row template by a declaration of each cell  (it my require to redo the binding with column object though as it would not be in the scope anymore and some children directives need a scope.column).

Thanks, I did not know 

cheers,
Laurent

[Alexander Kochemasov]

Thank you!

How to change global field Search (isGlobalSearchActivated: true)? And remove label Search?

I have <input type="text" ng-model="search.name" class="search-query-small" placeholder="Search" autofocus>

вторник, 28 мая 2013 г., 0:30:52 UTC+4 пользователь lorenzofox3 написал:

[lorenzofox3]

Hi,

for global configuration, refer to demo-website

and you can edit the template which is related see template, 

Laurent

[Anthony Schultz]

Does anybody know how you could update a table row from outside the table? I'm a bit new to angularjs, so please be easy! Thanks in advance!

[Leonardo Ribeiro]

Hi,

Can I set a object whenever a record (row) of the grid is selected?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Sagi Waitzman]

Hi, how are you?

Thank you.

This is a great plugin.

I have a question about passing paramaters to the custome cell html file.

How do I do this?

I try to to this:

<custom text='{{entity_id}}'></custom>

and I have this line in the mapping

{label: '', map: 'entity_id', cellTemplateUrl:'/custom.html'}

After running I'm getting an empty cell.

Can you please help??

Thank you

[Laurent Renard]

Hello, 

as explained in the documentation website http://lorenzofox3.github.io/smart-table-website/#/section-cellTemplate, your custom directive can have access to dataRow and column object through the scope.
the column object will have all the properties defined in its configuration (and few more) as it is created by copying the column config (angular.extend)

So if you have have you column config {label:'whatever', map:'whatever',....,whateverProperty:'value'}
this will be available in you custom template under scope.column.whateverProperty
So a template <custom text="{{column.whateverProperty}}"></custom> should perform the appropriate binding

Laurent

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.

To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Em8pi03Skxg/unsubscribe.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

[dreamer ameri]

Hi,

I have a custom filter created using angularjs. I know that for a built-in angularjs filter, we can use formatFunction on smart-table. How does it work for a custom filter?

Thanks!

[老 乔]

@lorenzofox3:  Do the tables support "virtualization" of rows so it can display thousands / millions of rows instead of just hundreds?

@dreamerameri: According to the docs ...

Use your own algorithm

In the same way than for the sort operation you can use you own algorithm, you just have to specify the function you want to use in the global config under the property filterAlgorithm

function customFilter(arrayRef, expression){
            //do some stuff
            return filteredArray;
        }

Then your global config would be:

    scope.globalConfig={
        isGlobalSearchActivated:true,
        filterAlgorithm: customFilter
    };




http://lorenzofox3.github.io/smart-table-website/#/section-filter

---

Date: Tue, 3 Sep 2013 15:20:59 -0700
From: dreame...@gmail.com
To: ang...@googlegroups.com
Subject: [AngularJS] Re: Smart-Table a new table / grid module

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[老 乔]

Search for matches where date > birth date.

function customFilter(arrayRef, expression){ //do some stuff if (expression && expression['$']) { var filterDate = new Date(expression.birthDate || expression['$']); filteredArray = arrayRef.filter(function(it) { return it.birthDate && (it.birthDate > filterDate) }); } else { filteredArray = arrayRef; } return filteredArray }

Can use jQuery.map or underscore.filter if you want it to work on old versions of IE.

@lorenzofox3 : feel free to add this to future versions of your docs

---

From: josh...@hotmail.com
To: ang...@googlegroups.com
Subject: RE: [AngularJS] Re: Smart-Table a new table / grid module
Date: Wed, 4 Sep 2013 04:32:29 +0000

[lorenzofox3]

Hi, 

Thanks 老 乔  for the snippet. 

It seems my pervious message was not posted but the idea was the same:

//this filter will take the input from the checkbox (if it is a number) an keep the items where the lastname length is equal to the number

angular.module('app',['smartTable.table']).controller('mainCtrl',['$scope',function(scope){

    

    scope.employees=[

        {name:'Raymond',lastName:'first'},

        {name:'Bob',lastName:'second'},

        {name:'jhon',lastName:'third'},

        {name:'whoever',lastName:'do'}

      ];

      

      scope.globalConfig={

        isGlobalSearchActivated:true,

        isPaginationEnabled:false,

        filterAlgorithm:function(array, expression){

          //expression is {name:'', lastName:''} or {$:''}

          var filtered=[];

          

          if(typeof expression==='object'){

            if(expression['$']){

              for(var i=0,l=array.length;i<l;i++){

                var value=array[i];

                if(value.lastName.length==expression['$']){

                  filtered.push(value);

                }

              }

              return filtered;

            } 

          }

          

          return array;

        }

      }

  }]);

Note there is a constraint on your filter expression: the expression will be passed by smart-module as an object like
{ mycolumn:'input in the check box'} or more likely {$:'input in the checkbox'} please refer to the angular filter filter documentation for more details.

老 乔 : there is no support for virtualization but the pagination does somehow the job. The displayed items are actually a subset of the whole bound collection so that there is only a dom element per displayed item.
There might have some leak though in Chrome. Refer to previous messages for more details.

Thanks,

Laurent 

[dreamer ameri]

My custom filter (say newFilter) is now in a single file with bunch of other custom filters built in angularjs. With ng-grid, to use this filter on a cell, i did cellTemplate: '<div>{{row.getProperty(col.field) | newFilter}}</div>' . It did the work. Now I am replacing ng-grid with smart-table.
So, with smart-table, should I have newFilter function with parameters arrayRef and expression inside filterAlgorithm? If I want to use this filter on a cell, can I do formatFuntion='newFilter' ? Would greatly appreciate if you could point me to a working example if you have one. Thanks!

[lorenzofox3]

Hi, 

Ok in this case is more about formatting. There are several ways to do it :

1) the first one and the easiest one is to set a format function within the columnConfiguration :
//assuming you have injected $filter service in you controller
scope.columnConfiguration=[

...
     {map:'foo',label:'bar',...,formatFunction:$filter('myCustomFilter)'}
...
]

2) You can also use a cell template and do what you are used to do with ngGrid '<div>{{dataRow.myColumnProperty | myCustomFilter}}</div>'
3) You can change the smart table src file to accept more than the built in filters, so that you can specify you custom filter as a string in the column Configuration. I don't remmember exactly why I added the built in filter as constant. I think this can be discussed

[dreamer ameri]

Thank you Laurent!
Now, I am getting the result I want with smart-table using my custom filter. Greatly appreciate your help!

[dreamer ameri]

This is what I have in ng-grid cellTemplate:

<a href="{{attempt(row)}}">{{row.getProperty(col.field)}}</a>

attempt(row) is a function in a controller.

How does this work in smart-table cell template. Thanks!

[fops]

Hi there, thanks for sharing your code.

I'm currently struggling with setting focus to a specific cell after pressing a button outside of the table.

Any help would be highly appreciated

[fops]

Is there a way to add a new row which is editable, so the user can quickly using the tab key to go from column to column in this new row and edit it?

thats btw. why i need to set the focus to a cell after a button click ;)

[Aman Bains]

What would be the best way to make Smart-Table responsive? Can following be implemented for mobile devices?

This would be quite desirable.

Eg:-

Original Table on Desktop

Name   Age  City       

Don    25   Kansas     

Bret   28   Long Beach

Greg   27   Oceanside  

Same Table on Mobile (Becomes vertical)

Name  Don        

Age   25         

City  Kansas     

Name  Bret

Age   28

City  Long Beach

Name  Greg       

Age   27         

City  Oceanside  

[Aman Bains]

Another Question

What is the best way to have CRUD links in the table?

[Spiros Kabasakalis]

Great work!

How can we include action columns for every row?(edit,view details,delete  buttons)?

Thanks in advance,Laurent!

[Robert Fender]

Spiros, I was looking for the same feature coming from ng-grid and I ran across this: https://github.com/lorenzofox3/Smart-Table/issues/21

[Pacheco]

Amazing work, thanks for sharing!

If you want your work on a nice reference guide, check this: https://github.com/jmcunningham/AngularJS-Learning

[Robert Fender]

Vague question, but any idea why sorting might not be working?

[Robert Fender]

Can you resize the columns?

[Robert Fender]

Here's a plunk to go along with my two terribly vague and extremely lacking in detail questions above:

http://plnkr.co/edit/d2fF4iY2jsfMIIkuVl3J?p=preview

FYI, first time using plunker and first time using angularjs. Be gentle.

[lorenzofox3]

Hello,

I have updated your plunker http://plnkr.co/edit/H5j8xDrCVuBjLGIRqchB?p=preview

you forgot to add the smart table module in you app module dependencies (module('app',['smartTable.table'])
I have added a small directive so when you click on an action button you can perfrom some logic in you controller (the way you were doing it could not work for scoping reason)

There is no support for column resizing although it should not be complicated to implement you own directive.

Laurent

[Rob Fender]

Aaargh, thanks for the fix. I should have known better. In my production code I do have the module injected. So besides all the mess in my code, do you see anything that would prevent my ability to click a header and sort using your default sorting filter?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Em8pi03Skxg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Santosh G Ksheersagar]

Awesome Stuff... 

Just few questions

1. What if I need to hide/show few rows?
2. What if my JSON has multiple array? ObjectA.ObjectB.property? I can see very simple usage like ObjectA.property in the table;
3. Adding click event handler for columns? Which opens up new URL/TAB?
4. Pagination to be more advanced like having { First(<<), Previous(<), [currentpage/totalpage] Next(>), Last(>>) } having to view the  itemsbypage to custom-select to display[5,10,25,50,100]

-santosh

[Alex Theiakos]

Hi Lorenz,

Cool project, I like the simplicity compared with other, similar tools.

Is the project still active? With the latest stable (1.2.5) the directive breaks. There was a problem with the ng-include from 1.2rc (you had some open issues) but that's is now fixed by the angular team.

If you are not planning to support it maybe its time for me to fork it :)

Cheers,

Alex

[lorenzofox3]

Hi, 

Yep, I am a bit late with the maintenance :) 

But I will update it soon. However if you want to fork or work on it please go ahead ;).

I know there were some issues with 1.2.4 but 1.2.5 should be fine. There is still an issue with the change in how the filterFilter deals with null properties but the fix is pretty simple

Laurent

[Dustin Callaway]

How would I go about making some columns links? Would I need to use a cellTemplateUrl? Is there an example of this somewhere?

Thanks!

[Kamen Staykov]

Hi Laurent,

I'm looking at implementing pagination on scroll as per http://lorenzofox3.github.io/smart-table-website/#examples-section

The problem I have is that when I use st-pipe the sort & search functions are broken.

Do you have an example of how to keep the default search & sort functionalities and extend to use st-pipe for pagination?

Thanks