lorenzofox3 / smart-table Goto Github PK

View Code? Open in Web Editor NEW

1.8K 96.0 521.0 9.84 MB

Code source of Smart Table module: a table/grid for Angularjs

Home Page: http://lorenzofox3.github.io/smart-table-website/

JavaScript 100.00%

smart-table javascript angular table

smart-table's Introduction

Hey I am not too much into angular these days. If someone wants to maintain this project, please contact me !

Smart Table

Smart Table is a table module for angular js. It allows you to quickly compose your table in a declarative way including sorting, filtering, row selection, and pagination. It is lightweight (around 3kb minified) and has no other dependencies than Angular itself. Check the documentation website for more details

Submitting an issue

Please be responsible -- investigate potential issues yourself to eliminate the possibility that your issue isn't just an error. If you are still having problems, try posting on our gitter. When submitting an issue try as much as possible to:

Search in the already existing issues or on stackoverflow if your issue has not been raised before.
Give a precise description mentionning angular version, smart-table version.
Give a way to reproduce your issue, the best would be with a running example, you can use plunkr (smart-table is the list of available packages). Note if you want to mimic ajax loading behaviour you can use $timeout angular service or $httpBackend.
Isolate your code sample on the probable issue to avoid pollution and noise.
Close your issue when a solution has been found (and share it with the community).

Note that 80% of the open issues are actually not issues but due to lack of good investigation. These issues create unnecessary work, so please be considerate.

Any open issue which do not follow the steps above will be closed without investigation.

Install

The easiest way is to run bower install angular-smart-table, then you just have to add the script and register the module smart-table to you application.

You can also install using NPM npm install angular-smart-table, so you can use with browserify or webpack

Test

Run npm install after you have installed the dependencies (npm install and bower install).

Custom builds

Smart Table is based around a main directive which generate a top level controller whose API can be accessed by sub directives (plugins). If you don't need some of these, simply edit the gulpfile (the pluginList variable) and run gulp build.

Older versions

Smart Table used to be configuration based and if you rely on this version, you can still access the code on the 0.2.x branch. You will be able to find the documentation related to this version here (simply open index.html in a browser).

Note, I have closed all the issues related to these versions as people get confused when reading these issues and commented on them like it was related to the newer version. Feel free to reopen any of them (or open a new one), but don't forget to mention it is related to the older versions.

License

Smart Table module is under MIT license:

Copyright (C) 2016 Laurent Renard.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

smart-table's People

Contributors

Stargazers

Watchers

Forkers

ccapndave myusernamejeep jonathana ccerrato fhefh2009 notatestuser darkdarkfruit t00f myushchenko openmindlab joebob12 sanjayvenkat2000 sublimino josedrac dralexmv dinesh-nadar karol-f ptsurko ianscrivener heks pheuter apobbati xtreme-christophe mhworth cocosx repx kburson iamfive cyrusdavid asgarddesigns pinoyyid elzio fabioformosa gizm0bill seancallinan jirikavi lee-elenbaas smartsolsoftbuilders mlwmlw sydneyryanczak tngps gintsgints turn pawank gkulkarni2020 morrog oddgames-david hcp000 ludovicpelle itslowvoice xmysteriox gintelllect vijayan-t djenyap tahiriabdou testchandp liverbool yjarosz jotu nickradford rohinp bala- inomy oookkk jkrot nateredding aeharding ishara cagriulas surfista sirriperek kougua geminiyellow sword42 vvaka bpmckee tellezhector andythiv dmackerman fiery kismsu e-oz jphautin makarioszen marufsiddiqui almar davidyaha inphi bregan nmmmnu xantrix zlf341 kreepn claudsan xunkutech alanrubin rimvydasurbonas gitter-badger flyingjamus nettunosolutions

smart-table's Issues

Adding custom markup in a table-cell

Hi,

Im trying to render a link in td but it shows up as escaped html:

Heres what i tried to do:

$scope.columnCollection = [
{ label:"Link", map:"NodeAliasPath", formatFunction(value, formatParameter) { 
   return $sanitize("linky linky");
} }
]

Directive won't compile if `rows` does not exist already (i.e. what if I'm adding the first item in the collection)

@lorenzofox3 I decided to open a new issue with this one:

How about the situation when you have no collection of rows to start with and then create one. Using an ng-if on the smart table does not seem to work. I presume it has to do with the isolated scope. Or, with how you use $watch on dataCollection.length and not dataCollection. Here is a plunker: http://plnkr.co/edit/VP6HHi?p=preview

Thanks!

Question: how to attach actions to custom formatted cells?

I want to achieve something similar, the code is simplified to point out only the required features (in the last cell add buttons that will trigger custom actions on the collection - rows='collection'):

<tr>
  <td>John</td>
  <td>24</td>
  <td><button ng-click="removeRow(dataRow)">Delete</button></td>
</td>

app.controller('someController', function ($scope, $http) {
  $scope.removeRow = function (dataRow) {
    $http.delete('/api/users/' + dataRow.id).success(function (response) {
      $scope.collection.slice(dataRow.$index, 1) // remove item from collection
    })
  }
})

The problem is that I cant attach functions on ng-click because columns create isolated scope and the ng-click"removeRow()" search can't reach my controller's $scope

More granular column mapping

Smee again,

i have data that is nested like e.g. this[*1]:

{"test":"one",
"another":"one",
"moreData": {
     "numbers": 12123,
     "test": "hello world"
}}

now the problem is that in the colum configuration
{label: 'xyz', map: 'moreData.test'},
just doesn't work.

To be honest, i'm not an javascript expert, but i wanted to preserve the string syntax in the map attribute but also have access to nested data. so i use now this function(as seen here http://stackoverflow.com/questions/13355278/javascript-how-to-convert-json-dot-string-into-object-reference)

function locate(obj, path) {

  path = path.split('.');
  var arrayPattern = /(.+)\[(\d+)\]/;
  for (var i = 0; i < path.length; i++) {
    var match = arrayPattern.exec(path[i]);
    if (match) {
      obj = obj[match[1]][parseInt(match[2])];
    } else {
      obj = obj[path[i]];
    }
  }

  return obj;
}

and instead of doing this (Directives.js:158)
scope.formatedValue = format(row[column.map], column.formatFunction, column.formatParameter);
i have
scope.formatedValue = format(locate(row,column.map), column.formatFunction, column.formatParameter);

I know this is a dirty fix, it might also be possible to throw in a function in the mapping element that is given the row variable and then returns something the user defines earlier in the corresponding function.

Do you think you can implement a way how to deal with multidimensional data? Or is there a complete misunderstanding from my side and this is already possible ?

Thank you in advance for your support, i highly appreciate it how you respond to all the issues and questions.

[*1] The data is coming from Restangular, this is why it is structured like this. Of course i could flatten everything, but i thought this is somehow cumbersome, as i don't know yet what attributes i really need or not. So i like to retrieve everything and just put it into smart table and let it handle the mapping

Bower

Hi man,
very nice work. i think that for most cases it's much better then ng-grid or ng-table.
are you still maintaining this?
what about bower integration?

thanks!

Does the Smart-Table keep track of the selected items?

Is there a way to keep track of the selected items easily instead of watching and checking my data models?

Proposed improvement: Text on empty/fully filtered table

When filtering out all rows, or when no data is available I've always found it more intuitive if the text "All data filtered out." or "No data." is presented instead of simply having an empty table (that looks kinda buggy).

summary footer

Need drill down table.(Nested table)

Error on "null" values

The table seems to be broken if a single value in the data array is 'null'.

Typo in docs / API

In the cell template section:
scope.formatedValue;//the formated value (not the raw string)
It should be "formatted".

Hi! How can you use it if you have an array of models and need a few tables?

Smart Table extended (Datatables Bootstrap look/features)

NOT AN ISSUE

Just started playing with Smart Table but like the simplicity and would encourage to keep it as is with standard fixes/improvements. Say that as in looking at the grids out there many do too much which then makes it difficult for your personal needs.

Anyway posting this to be helpful to others. Needed way to select number of records to be displayed and some mods for adapting to Bootstrap 3 pagination. Below explains what I did along with the source and screen shot.

TO AUTHOR
I'll be working with Smart Table quite a bit over the coming days. Including some of the issues/improvements you noted in your comments. Let me know if you want me to do a pull at some point.

Blog post here => http://origin1tech.wordpress.com/2013/10/14/smart-table-for-angularjs/

Download files here => https://docs.google.com/a/origin1.com/file/d/0B3J8DFHpBR67V2Z0MWZpU3YwNDg/edit?usp=sharing

Screen shot attached.

Easier configuration of templates

Right now, it's a little cumbersome to modify the template. When you include smart-table as a component you can't change the template because it will get overwritten on the next update. When you copy it into your project you now have to maintain the code.

The workaround is to inject the new template into the $templateCache but that's not nice either.

It would be great if the configuration could take names of the templates that should be used instead.

Couple of problems with latest update

I'm running with
edb304e
to fix the problem of updates to the data model from outside Smart Table.

Issues:-

If I add a new row to a table with columns set to editable, I can only edit a single cell. Once one cell has been edited, none of the other cells will respond to a double click. No matter which cell I edit first, and which second, only one cell is editable on a newly inserted row.
One of my cells has a cellTemplateUrl pointing to an HTML checkbox

<input ng-model="dataRow.manager" 
    name="inputcheck{{dataRow.id}}" 
    type="checkbox" 
    ng-change="$parent.$parent.$parent.$parent.vm.rowChanged(dataRow)"/>

It displays correctly, until I click the checkbox to select/unselect it. Upon click, the cell content changes from a checkbox to "true" or "false", depending on the value of the data.

Both issues are new with this release.

I really need to add my appreciation to the author. Simple Table has been an absolute delight to work with. Many thanks.

bower install broken

I'm not sure if this is just an intermittent issue, can someone please confirm?

peter@edgy:/var/www/cv/cms$ bower install smart-table --save
bower smart-table#*         not-cached git://github.com/lorenzofox3/bower-smart-table.git#*
bower smart-table#*            resolve git://github.com/lorenzofox3/bower-smart-table.git#*
bower smart-table#*           download https://github.com/lorenzofox3/bower-smart-table/archive/v0.1.1.tar.gz
bower smart-table#*              EHTTP Status code of 500
peter@edgy:/var/www/cv/cms$ bower install smart-table --save
bower smart-table#*         not-cached git://github.com/lorenzofox3/bower-smart-table.git#*
bower smart-table#*            resolve git://github.com/lorenzofox3/bower-smart-table.git#*
bower smart-table#*           download https://github.com/lorenzofox3/bower-smart-table/archive/v0.1.1.tar.gz
bower smart-table#*              EHTTP Status code of 500
peter@edgy:/var/www/cv/cms$ date
Thu Aug 15 17:56:29 BST 2013

How to programmatically unselected items in the controller?

Is there a public api to unselect all rows and the check box in the header? At the moment, I iterate through the row data and set isSelected to false. That unchecks the items but the checkbox in the header is still checked even $scope.isChecked is set to false.

Also related to this, I also did not know how to make the cell clickable for popup modal. Is there a way to accomplish that?

Thanks for your help.

Accept function to determine row class

It would be nice if Smart-Table would take a function that looks at a row object and determines CSS classes to apply to a row.

not fully working in angular 1.2rc

in the newest angular 1.2 release candidate, smarttable stoped working. Or at least some functionality is not working.

e.g. sorting is not working. The click handler is not fired

        .directive('smartTableHeaderCell',function () {
            return {
                restrict: 'C',
                require: '^smartTable',
                link: function (scope, element, attr, ctrl) {
                    console.log("fired");
                    element.bind('click', function () {
                        console.log("neverfired");
                        scope.$apply(function () {
                            ctrl.sortBy(scope.column);
                        });
                    })
                }
            };

Bug when clicking on the select all checkbox

I have found that if displaySelectionCheckbox is enabled and you click on the header checkbox which checks all checkboxes, only the checkboxes on that page will be checked. If you move to another page, the check all checkbox is still checked but the checkboxes are not.

Either all checkboxes on the table should be checked or only the ones in the current page (which means the check all checkbox should not be checked).

I can look into this, but I am just becoming acquainted with the library.

paginatin config does not work with UI bootstrap v0.6

Angular.js version: 1.2.0 rc3
UI Bootstrap version: 0.6

I have specified the pagination config as documentation:


  $scope.globalConfig = {
    isPaginationEnabled: true,
    itemsByPage: 100,
    maxSize: 5,
  };

It is not working.

I have seen Smart-Table redefine UI bootstrap default pagination config, but it seems broken too.

        .constant('paginationConfig', {
            boundaryLinks: false,
            directionLinks: true,
            firstText: 'First',
            previousText: '<',
            nextText: '>',
            lastText: 'Last'
        })

It seems UI bootstrap have changed their default config item name schema?

http://angular-ui.github.io/bootstrap/#/pagination

Ensure all rendered html is(optionally) compatible with Bootstrap

I have started using this library and my goal is to ensure the rendered html is compatible with Bootstrap styles.
I plan to do some changes in my fork for this to happen but I think some of the required changes should be useful to others:

allow Bootstrap table classes optional output: e.g. "";
header sort icon support using Bootstrap icons.

Error: Duplicates in a repeater are not allowed

I'm seeing this issue which appears to be triggered by some duplication in the data in my table.

Error: Duplicates in a repeater are not allowed. Repeater: dataRow in displayedCollection.

Typo: cutsom => custom

On the demo site, under "Cell Template", there's a typo in custom.html.

Dynamically assigning filterAlgorithm

I have been trying to create an advanced search feature that allows the user to apply different filters to the table. The problem is, that when I try to set globalConfiguration.filterAlgorithm to the table, nothing happens. It only works if I set it at the beginning (in my controller, not triggered by any event).

Is there a way to change this filter dynamically?

Fire event when selecting rows

We need an event when selecting a row so that we can act accordingly (without having to do our own $watch over and over).

Pagination: previous and next symbols are not rendering correctly on Chrome

Both current Chrome stable and Chrome Canary(on Windows) are not rendering the pagination previous/next symbols correctly.It is rendering correctly on IE 10 and latest Firefox though.

The characters used are U+2770 and U+2771 .

Is Smart-Table working on AngularJS 1.2?

Or, put another way ...

It doesn't seem to be working for me. On 1.2, the grid renders as three html bullets "<, 1, >". Switching from 1.2 to 1.1.5, the grid renders beautifully.

Confusion about Smart-Table's sort order

From what I see in the code and your unit tests, specifically test:

it('should sort by "map", first acending then descending ', function () {
            //by id
            ctrl.sortBy(scope.columns[0]);
            expect(scope.displayedCollection).toEqual([
                {id: 2, secondProperty: true, thirdProperty: 1},
                {id: 1, secondProperty: true, thirdProperty: 3},
                {id: 0, secondProperty: true, thirdProperty: 2}
            ]);

you are misinterpreting ascending and descending order. As per definition ascending order is A to Z, 0 to 9, while descending order is Z to A, 9 to 0. The above unit test indicates that you are swapping the two definitions. Having a look at your demo site also confirms that Smart-Tables first does descending sort and then ascending.

Are there any plans to move towards Bootstrap 3?

Since Bootstrap 3 is not backwards compatible, I was wondering what the plans are to migrate into Bootstrap 3. I can start contributing to migrating the app to B3 if you create a new branch for it.

filtering on displayed columns only

Hi,

Sorry for my poor english....

I send to smart-table an array of object with a lot of columns. But I display only 2 columns.

My problem is : by default, smart-table filter each columns even if it'sn't displayed.

My questions :
a) is it possible to parameter smart-table to do filtering ONLY on displayed columns OR on some columns ? If yes, how to do it ?

b) if no, I tryed to create an custom function to filter data. But I didn't find any example ? Have you got somewhere an example ?
On the doc, you said to create a function customFilter(arrayRef, expression){
//do some stuff
return filteredArray;
}
But when I do a console.log() of arrayRef and expression in this function : they are undefined. How do you write the filterAlgorithm configuration ?
filterAlgorithm: customFilter(???, ???) to get the value of the filter and the current table ?

Thank you for your help.

   Michel

Possibilty to refresh Smarttable

Doesn't work in IE 8

Even after providing document.createElement('smart-table');, I still get an error when trying to use smart-table in IE 8:

Error: Unknown runtime errorundefined

Code you can use to reproduce: http://plnkr.co/edit/6QEfDFCXtyW23Q8UYXrE?p=preview

Typo on the website

In the cell template section:
<custom></cutsom>"

Controller 'smartTable', required by directive 'smartTableHeaderCell', can't be found!

I am getting following error while working with latest unstable branch 1.2RC1

Any Solution ?

Headers not displayed in demos

It seems in all the examples, the header values are not displayed?

Make the globalSearchRow customizable

The layout is static for the globalSearchRow in the current implementation. That makes styling and I18n hard to archive. It should be able to use a custom template for that as it is possible for cells, headers,...

Bootstrap UI pagination

I am trying to move pagination outside of Smart Table so I am attempting to include the bootstrap UI pagination

However it seems the smart table overrides "ui.bootstrap.pagination" at least from what I can see.

How to extend smart-tables using custom directives

Hello,

Thanks for your brilliant work. Could you provide a simple example of how to extend smart tables with a custom directive that access the API.

Thank you

Remote Services

First I want to say I really like this library, Very nice and light but I would be nice if there was a way to easily override / extend the library so we can simply define if we want to use remote paging & Filtering.

I Have not had a ton of time to go over the code yet I am sure it is possible but this is just a suggestion.

Enable ServerSide Pagination

in know, this one is stated as "not gonna coming", but i just want to briefly describe our requirement. We have a database with over 10.000 entries and it is not really reasonable to hold this in the client side and get this chunk of data every time the controller switches.

So my question is, whether it is possible at all to adapt the library to have server side pagination as well as sorting and filtering. This is huge, but maybe i have to time to adapt the library on my own*. It's just that for every operation a single call have to be made.

*Would be my first fork, so have to look into that how to do that ;)

floating header and footer

Editable Date fields will not pre-populate

http://lorenzofox3.github.io/smart-table-website/#/section-edit
All the fields will pre-populate with existing data when you double-click to edit, except the 'Birth Date' column. Thanks for having the others be pre-filled though!

cheers

Indicating that columns are sortable on first load

By default it's not obvious that sorting is enabled on certain columns.

Is there a recommended way to indicate this?

Rows Attribute - Changing of data

I was looking over your server partial example and noticed that you mentioned it should be possible to do pagination outside of smart table

"As the table is bound to a data collection ("rows" attribute on the directive element) any change on the bound collection will be propagated inside the table"

I am experiencing issues with this. I am updating my data and adjusting the rows value yet it does not seem to be actually changing the data in the table.

Not sure what I am doing wrong.

Data binding not updating

I have a rowCollection on a controller, something like this:

scope.rowCollection = [
{firstName: scope.users[0].name, lastName: scope.users[0].lastName},
{firstName: scope.users[1].name, lastName: scope.users[1].lastName},
{firstName: scope.users[2].name, lastName: scope.users[2].lastName},
];

I have my smart table markup on a view like this:

< smart-table class="table" rows="rowCollection"> < / smart-table>

On other controllers the scope.users[] gets updated but the changes are not updated in the table, I tried testing it by creating a timeout that after 10 seconds the controller explicitly updates the users array like this:

$timeout(function(){
scope.users[0].name = 'Changed';
}, 10000);

But still not able to see the changes reflected in the table, the only change that its reflected is when I added new items to the rowCollection, have someone experienced this issue or similar?

Document that smart-table must live in i an angular app

Currently, the documentation does not really make it clear that it is an AngularJS directive and that it needs to live in an Angular application. The sample documentation has <html ng-app="app"> defined at it's top. This should probably be documented, or refer to the Angular bootstrapping documentation, which also covers how to run multiple applications on a single page.

Option to use template:"<xxx>" instead of templateUrl:"url.html"

I have a list of users, and each of them can be edited, deleted etc. For this there is a directive column with these buttons associated with every user. The problem is, not every action might be allowed, therefore i have to dynamically change my directive.

It would be really cool if i could simply write down the directive markup into the template field like

[...]
template: "<mybuttons delete edit view></mybuttons>"
[...]

and not create a uniqe template html file for every configuration.

Functions in inner template not working

It seems that inner functionality like ng-click is not working as intended, if provided within the inner template of a directive.

e.g.

config configuration
{label: 'Actions',cellTemplate:'<quickactions><a ng-click="doXY()">Do something</a></quickactions>'}

As you see i have a directive quickations which gets some inline HTML as:

  <ul class="dropdown-menu">
    <li ng-transclude>
      <a ng-click="doZ()">another action</a>
    </li>
  </ul>

Now normally i would assume that i can define doXY in my controller(from within smart table is configured) or at least define a function inside of the directive. But both approaches are not working and it seems he completly ignores the doXY call.

Other calls from the template of the directive itself are working(e.g. doZ() )

My question is now, how can i put doXY into the root controller and let the directive call this method from my directive(that is again inside smart table).
An example for this is given here: http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html

Thank you in advance!

Make Smart-Table bower-installable

Would be nice if Smart-Table could be installed via e.g. bower install smart-table or similar. Requires manifest.json, as well as probably also either renaming the debug version to Smart-Table.js or copying it to that file name.

I am happy to do the work in a fork and submit pull request if you want to add this capability, but given how bower registration works these days--or more importantly, changes to existing bower packages works or doesn't--it would be preferable to actually register this repo's code into bower versus anybody's fork.

Jonathan