akveo / ng2-smart-table Goto Github PK
View Code? Open in Web Editor NEWAngular Smart Data Table component
Home Page: https://akveo.github.io/ng2-smart-table/
License: MIT License
Angular Smart Data Table component
Home Page: https://akveo.github.io/ng2-smart-table/
License: MIT License
I dont know how to load ir someone can help me please?
I wasn't sure and haven't tracked down the code, but if I set the filter for the datasource in code, will the filter values be displayed in the grid input boxes when the filter is enabled for the column being filtered?
I've noticed the pager doesn't have attached any events. It would be great to add custom events on page change.
Hey. How about adding support to disable automatic row selection?
Currently, there is a callback (rowSelect)
, but it doesn't seem to be very useful for me, since it automatically triggers on the first table row when the data is initially loaded and it seems to select other rows upon different actions (like navigation, row deletion and etc.). So it means I cannot predict user selecting a specific row, it happens on its own.
What I'm trying to achieve is an ability to trigger some action only when user selects a row. For example, table can contain a list of items, and when user clicks on a particular row it should open a separate page with item information. It could also be achieved by adding a custom action, but it seems to be impossible at the moment too.
After investigation, I believe an additional configuration property would work. For example, it could cause determineRowToSelect
in Grid return null. I can do a PR if it's fine for you.
I have a data, there are one million records, how to use this component, because I found that when the data from the server to get all the data
thanks
Hi,
I have an object similar to that:
{ name: 'test', stats: { views: 5, clicks: 5 } }
Is it possible to display the "views" and "clicks" fields under "stats"?
First of all Congratulations for making a fantastic product.
I followed the Minimal Setup example here but got this below error. https://akveo.github.io/ng2-smart-table/demo#from-server
Could you also publish brief guide about configuration using angular2-cli ? It would be helpful.
ERROR in [default] /home/krishna/angular2_migrate/webui/src/app/app.component.ts:3:9
Module '"/home/krishna/angular2_migrate/webui/node_modules/ng2-smart-table/build/ng2-smart-table"' has no exported member 'Ng2SmartTableModule'.
ERROR in [default] /home/krishna/angular2_migrate/webui/src/app/app.module.ts:7:9
Module '"/home/krishna/angular2_migrate/webui/node_modules/ng2-smart-table/build/ng2-smart-table"' has no exported member 'Ng2SmartTableModule'.
my angular2-cli version details
krishna@Krishna:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64
It would be nice to be able to get some additional cell state information on the cell.getValuePrepareFunction callback, this would allow round tripping optional information state settings on the cell, column or row of that cell.
proposed change to
https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/lib/data-set/cell.ts#L17
from
return prepare.call(null, this.value);
to
return prepare.call(null, this.value, {row: this.row, column: this.column, dataSet: this.dataSet});
that would allow access to some additional cell state without breaking existing code
reason for request
I am interested in being able to store state information on the cell settings and would like to retrieve that information on the callback
I am pulling data from a database and using angular 2 Observables to subscribe returned records and stored as objects in a local array variable. I implemented http.get() inside a service and subscribed the observable inside my component under ngOnInit(). For some reason the data is only being loaded when I click on a column title (i.e. on sort). Why am I not able to simple load the data?
I get no data found when I go to the webpage:
When I click on a field, the data is loaded like so:
This is the code inside my component:
initData(data) {
this.allUsers = data;
for(var i = 0; i < this.allUsers.data.length; i++) {
if(this.allUsers.data[i].isactive == "true") {
this.allUsers.data[i].isactive = "yes";
} else {
this.allUsers.data[i].isactive = "no";
}
this.users.push({
username: this.allUsers.data[i].username,
firstname: this.allUsers.data[i].firstname,
lastname: this.allUsers.data[i].lastname,
lastloggedin: this.allUsers.data[i].lastloggedin,
isactive: this.allUsers.data[i].isactive
});
}
}
subscribeUsers() {
this._userService.getUsers()
.subscribe(
data => this.initData(data),
error => this.handleError(),
() => {
this.source.load(this.users);
console.log(this.source);
console.log(typeof this.source);
console.log("success");
});
}
ngOnInit() {
this.subscribeUsers();
console.log("show all users");
}
This is the code inside my template:
`
Is there some way to add more actions like archive, open, import, export, etc. ?
Presently we can use only 2 actions ie. edit and delete.
I noticed when attempting to set
{
actions: {
edit:false,
delete: false,
update: false
}
in my page settings that it wasn't carrying forward into the table settings.
after looking at the settings property update code its looks like
deepExtend(this.settings, this.defaultSettings);
works when it is changed to
deepExtend(this.defaultSettings, this.settings);
otherwise the page level settings get overwritten by the defaults;
Hi,
Is there any way that I can hide edit/delete button for some rows in a table? In my use case, user will only edit those rows which has status=NEW while he can view all rows.
Setting "class" in settings for each column NOT effect on all cells of column and only effect on column header. I think, it is very useful if "class" set for all cells ("th" and "td") and not for "th"
Hello,
For some reason I get this error mentioned in the title. it has something to with my LocalDataSource but I don't know how en why. I am enthusiastic about this data-table and I would like to use it.
Kind regards,
Meindert
Hi all,
I have a problem when try to load data from API to the table, the table do not update unless I click on the filter box and click out.
Template
<ng2-smart-table [settings]="settings" [source]="pages"></ng2-smart-table>
Typescript
export class PageListComponent {
pages: LocalDataSource;
settings = {
columns: {
id: {
title: 'ID'
},
title: {
title: 'Title'
},
edit_link: {
title: 'Action'
}
},
pager: {
display: true,
perPage: 10
}
};
constructor(private pageSerice:PageService) {
this.pages = new LocalDataSource();
pageSerice.getAllPage().toPromise().then(data => {
this.pages.load(data);
this.pages.reset();
});
}
}
Service
getAllPage() {
//noinspection TypeScriptUnresolvedFunction
return this.http.get(window.location.origin + "/api/page").map(res => res.json());
}
Please help me solve this problem. Thank you so much.
Hi,
Is there any way to keep column editable for "Add New" action but keep editable:false for "edit" row?
any plan to add feature to export table data?
the data like this {"name":"name","state":1}
I want to show data like this {"name":"name",state:"true"}
I use filterFunction attr but not show true
Excuse me what should I do?
Component
import { Component } from '@angular/core';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import '../../public/css/styles.css';
@component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent { }
ERROR in [default] C:\Desenvolvimento\workspace\cetip-if-eventos\src\app\app.component.ts:2:9
Module '"C:/Desenvolvimento/workspace/cetip-if-eventos/node_modules/ng2-smart-table/build/ng2-smart-table"' has no exported member 'Ng2SmartTableModule'.
Child html-webpack-plugin for "index.html":
chunk {0} index.html 321 bytes
webpack: bundle is now VALID.
when i try to do the install:
[email protected] postinstall C:\Desenvolvimento\workspace\cetip-if-eventos
typings install
typings WARN deprecated 2016-10-06: "registry:dt/node#6.0.0+20160909174046" is deprecated (updated, replaced or removed)
typings WARN deprecated 2016-09-14: "registry:dt/core-js#0.0.0+20160725163759" is deprecated (updated, replaced or removed)
typings WARN deprecated 2016-10-03: "registry:dt/jasmine#2.2.0+20160621224255" is deprecated (updated, replaced or removed)
+-- core-js (global)
+-- jasmine (global)
`-- node (global)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\karma\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/forms@^0.2.0 but none was installed.
npm WARN [email protected] No repository field.
package.json
{
"name": "cetip-if-eventos",
"version": "1.0.0",
"description": "A webpack starter for Angular",
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"postinstall": "typings install"
},
"license": "MIT",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"core-js": "^2.4.1",
"ng2-smart-table": "^0.1.11",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23"
},
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^2.2.4",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
}
Datatables are always adding the class selected
to the first row. Is there any way to set up it outside the code?
Hello,
I'm trying to import this module via systemjs with this configuration:
map = {
...
'ng2-smart-table': 'js/node_modules/ng2-smart-table',
};
packages = {
...
'ng2-smart-table': {
main: 'build/ng2-smart-table.js',
defaultJSExtension: 'js',
},
};
and I'm getting error that it can't find other files that ng2-smart-table.js cannot find:
http://localhost:8000/js/node_modules/ng2-smart-table/build/src/ng2-smart-table/lib.js 404 (Not Found)
I propose changing the value passed to deepextend to be a copy of the defaultSettings rather than a reference to the defaultSettings, this isolates and decouples the current defaultSettings values and prevents the additional properties being added in the extend from being included in the defaultSettings when it is reused in the future.
change
return deepExtend({}, this.defaultSettings, this.settings);
to
return deepExtend({}, JSON.parse(JSON.stringify(this.defaultSettings)), this.settings);
Hi guys, this is more question than issue. Is it possible to have custom html in the cells ?
I need to add checkbox column with multiline selection and I'm wondering if it's achievable with this library.
Regards, Niki
Please correct me if I am wrong but it doesn't seem like ng2-smart-table is compatible with SystemJS. If it is compatible, do you mind sharing a few examples?
System.config({
paths: {
// paths serve as alias
'npm:': "../node_modules/"
},
map: {
app: "./app",
'@angular/core': "npm:@angular/core/bundles/core.umd.js",
'@angular/common': "npm:@angular/common/bundles/common.umd.js",
'@angular/compiler': "npm:@angular/compiler/bundles/compiler.umd.js",
'@angular/platform-browser': "npm:@angular/platform-browser/bundles/platform-browser.umd.js",
'@angular/platform-browser-dynamic':
"npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
'@angular/http': "npm:@angular/http/bundles/http.umd.js",
'@angular/router': "npm:@angular/router/bundles/router.umd.js",
'@angular/forms': "npm:@angular/forms/bundles/forms.umd.js",
// other libraries
'rxjs': "npm:rxjs",
'angular2-in-memory-web-api': "npm:angular2-in-memory-web-api",
// ag-Grid stuff
'ag-grid-ng2': "npm:ag-grid-ng2",
'ag-grid': "npm:ag-grid",
// ng2-smart-table
'ng2-smart-table': "npm:ng2-smart-table/ng2-smart-table.js"
........................
.........................
I've tried to search through all of your files in the node_modules but I am not able to identify the correct file to reference. Any help on this would be great! I'll continue to investigate and let you know if I find a solution.
I'm trying to add link with routerLink attribute into cell but routerLink is cutted. type is 'html'
Hi,
Please make the table responsive and make always a linebreak in the column title. It is really ugly, if you have just one digit numbers in the column and the column title is long. Example:
|ID | The grade for the best student ever at the best university of bblablaballaa |
|1 | 4 |
|2 | 3 |
|3 | 2 |
Hi,
npm repo is in 0.1.11 release and github in 0.3.1,
pls update it )
https://akveo.github.io/ng2-smart-table/documentation deeplink gives a 400 Bad Request.
however going to
https://akveo.github.io/ng2-smart-table/ and clicking documentation does not
Hello! Is there any way to select several rows and remove by clicking on my button "Delete selected"?
I also found event "userRowSelect" but i can't get selector and add css to this tr to mark it as selected (data and LocalDataSource don't contain such data).
Thank you.
It's possible use input select (combo) on a field?
When will you support the SELECT form input?
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
Does not display properly. The items appear to be white on white backgrounds when the select element is clicked. I do not wish to use dropdown as the style is different.
It`s possible to use the Date type?
Hi,
I want to change form of dates. for example:
2016-10-09T07:00:41.387Z
to 2016/10/09
, in angular 2 we can use 'shortDate' pipe parameter, but how do it in ng2-smart table
like jquery table, there is a dropdownlist with element like 5,10,20 in the pager that control the num of record per page. can ng2 smart table introduce this feature
When I changed settings.columns, columns added to previous columns and colums did NOT reseted
I search in code and I found the code in data-set.ts
protected createColumns(settings) {
for (let id in settings) {
if (settings.hasOwnProperty(id)) {
this.columns.push(new Column(id, settings[id], this));
}
}
}
I see that you insert columns to array and not clean it.
I think it is a bug, Is it true?
Hi guys, ty for ur work.
Any idea how to implement MDL style to ur table ?
Thanks in advance,
someone tryed install from zero?
When I use de the editConfirm event, the data object has the new value, not the old.
With this bug, difficult to find what is changed
Hello! I have just added the code from your Quick Start tutorial and my Idea PhpStorm (10.0.4) underscore LocalDataSource when i'm trying to import it from ng2-smart-table and shows tip "Can not resolve symbol LocalDataSource":
import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table';
Everything actually works good as aspected but this underscore is a little bit annoying. And because of it also not available autocomplete in Idea.
My environment:
typescript: 2.0.2
,
angular: 2.0.0
angular-cli: 1.0.0-beta.14
node: 5.6.0
os: darwin x64
"ng2-smart-table": "^0.3.1"
P.s Thanks for this useful component
Hi all,
Do we have anyway to server loading data when change page. Because I have a situation with a large amount of items, I think it should be loaded dynamic when user change page.
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.