I am working on application with spring boot front-end in angular js, html. The application contains many angular JS tables. Now we have requirement to apply freezing of header (first row) and first column in the table.
We have tried many solution to freeze both of them together in one table, but in some cases only header get freeze in other cases only columns are.
We have tried to fix header :
https://github.com/daniel-nagy/fixed-table-header/blob/master/README.md
https://github.com/cornflourblue/angu-fixed-header-table
To freeze column, I tried :
<td style="position:absolute;width:50px; left:0;"> : http://jsfiddle.net/dkeo1mLh/
Only one work at a time, but I need header and column freeze working at same time.
Sample angular js table is :
example.js
angular.module('plunker', ['ui.bootstrap']);
function ListCtrl($scope, $dialog) {
$scope.items = [
{name: 'foo', value: 'foo value'},
{name: 'bar', value: 'bar value'},
{name: 'baz', value: 'baz value'}
];
}
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ListCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name1</th>
<th>Value1</th>
<th>Name2</th>
<th>Value2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}1</td>
<td>{{item.value}}1</td>
<td>{{item.name}}2</td>
<td>{{item.value}}2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Can anyone suggest any solution for angular js table that help in freezing header and column ? CSS solution tried but table format looks not proper, so needed solution in js or angular js.
Related
I have an existing HTML table. I'd like a thin JS library to add simple search and sorting. GridJS looks promising, but I don't understand the docs for loading from HTML. For example, I'm unable to use the useRef function. Even the first line of code in the example fails for me:
>>> gridjs.useRef(null)
Uncaught TypeError: Bt is undefined
Preact 3
<anonymous> debugger eval code:1
Here is a minimal example:
<html>
<head>
<link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
<table id='table'>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</table>
<script>
window.onload = function() {
var node = document.getElementById('table');
new gridjs.Grid({'from': node});
}
</script>
</body>
</html>
I get the error
Uncaught TypeError: t.querySelector(...) is null
fromHTMLTable header.ts:288
fromUserConfig header.ts:256
fromUserConfig config.ts:179
update config.ts:146
e grid.ts:15
onload example.html:17
EventHandlerNonNull* example.html:15
I know this answer comes a bit late, but I hope it helps future visitors.
It looks like you still need to call the render function, and the way it seems to work is it hides the table in the DOM and injects the Grid.js table into the wrapper you specify.
For example, this worked for me:
new gridjs.Grid({
from: document.getElementById('mySourceTable'),
}).render(document.getElementById('myDestinationWrapper'));
Lastly, I think thead & tbody is needed - the documentation shows these elements as well: From HTML Table
Here's a snippet as a demo:
document.addEventListener("DOMContentLoaded", function() {
new gridjs.Grid({
from: document.getElementById('sourceTable')
}).render(document.getElementById('destinationWrapper'));
});
<html>
<head>
<link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
<div id='destinationWrapper'></div>
<table id='sourceTable'>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</tbody>
</table>
</body>
</html>
I want to make a table, based on this model (Material Design Lite) :
https://getmdl.io/components/index.html#tables-section
In my code, I have a list, and I try to display it, in the following way, by using a ng-repeat :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
But the result is not the same than in the illustration example :
As we can see, there is no checkbox on the left and I don't understand why.
Also, how to make a table, where we can directly add data on it ?
In fact, with a fixed list, it works. But mine is generated by a request in a database, and its value can be changed. My listadmin is empty at the beginning, and it is completed by an authentification process.
Your code work correct.
<html ng-app="myApp">
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script>
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.listAdmins = ['admin1', 'admin2', 'admin3'];
}]);
</script>
</head>
<body ng-controller="MainController as main">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
</body>
</html>
May be some errors occurred? Can you see browser console.
I'm trying to load dynamic content with AngularJS but does not work.
I have a system with legacy pages with dynamic load using JQuery but now I am developing some new features using AngularJS and have same trouble in dynamic load.
The follow code show exact my problem (https://jsfiddle.net/alvarof/w7ynuro8/):
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.75/jsrender.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="static">
<div ng-controller="StaticCtrl">
<table>
<tr>
<th>Static Table</th>
</tr>
<tr ng-repeat="item in items">
<td>{[{item}]}</td>
</tr>
<tr ng-show="!items.length">
<td>No items!</td>
</tr>
</table>
</div>
</div>
<div id="dynamic">
</div>
<button onclick="loadDynamicContent()">Load dynamic content</button>
</body>
<script id="dynamic_tmpl" type="text/x-jsrender">
<div ng-controller="DynamicCtrl">
<table>
<tr>
<th>Dynamic Table</th>
</tr>
<tr ng-repeat="item in items">
<td>{[{item}]}</td>
</tr>
<tr ng-show="!items.length">
<td>No items!</td>
</tr>
</table>
</div>
</script>
<script>
var loadDynamicContent = function () {
$("#dynamic").html($("#dynamic_tmpl").render());
//FORCE RECOMPILE Angular????
}
var myApp = angular.module('myApp', []);
myApp.config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
myApp.controller('StaticCtrl', function ($scope) {
$scope.items = ['StaticCtrl: element 1', 'StaticCtrl: element 2', 'StaticCtrl: element 3', 'StaticCtrl: element 4'];
});
myApp.controller('DynamicCtrl', function ($scope) {
$scope.items = ['DynamicCtrl: element 1', 'DynamicCtrl: element 2', 'DynamicCtrl: element 3', 'DynamicCtrl: element 4'];
});
</script>
</html>
Anyone had the same problem?
Thank you!
First of all your expression {[{item}]} is not correct check the documentation for angularjs expressions then why did you use ng-template refer template matching in angularjs
I want tableRow.html to be drawn under the table head but the ng-repeat is not drawing at all and the examples are above the table head. If I drop the row with examples directly into the proper location in index.html it will draw just fine. What am I doing wrong?
index.html
<html>
<head>
<title>Currency Exchange</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>A title to the table</h1>
<div>
<div class= "ExTableDiv">
<table class= "ExTable">
<thead>
<tr>
<th class="column">Currency Code</th>
<th class="column">Currency Name</th>
<th class="column">Exchange Rate vs USD</th>
</tr>
</thead>
<tbody ng-controller="TestController"><!--**if you try TestController as TC it will throw an error, why?**-->
<test-directive></test-directive>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/directives/tableFiller.js"></script>
</html>
app.js
(function(){
var app = angular.module('myApp',['exchange-directives']);
app.controller('TestController', ['$http', function($http) {
var table = this;
table.rows = [];
$http.get('/item.json').success(function(data){
table.rows = [{"name":"Captain","rate":"0.8910","inverce":"1.1223"}]; //I added this here so I know I am getting json data
});
}]);
})();
tableFiller.js
(function(){
var app = angular.module('exchange-directives', []);
app.directive('testDirective', function(){
return {
restrict: 'E',
templateUrl: 'js/directives/tableRow.html'
};
});
})();
tableRow.html
<tr ng-repeat='row in TestController.table.rows'>
<td>{{row.name}}</td>
<td>{{row.rate}}</td>
<td>{{row.inverse}}</td>
</tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
</tr>
Replace <tr ng-repeat='row in TestController.table.rows'> with
<tr ng-repeat='row in TestController.rows'>
In your controller you're setting table = this, so table.rows actually is this.rows and thus available to the markup via TestController.rows
I am choosing to answer this question:
Also the tutorial I followed on codeschool wraps angular.module within a function but I see that most other examples don't. What is the difference? Why choose one over the other?
This is called an immediately invoked function expression or (IIFE). It is a light-weight way to introduce modules into JavaScript. The goal of using something like this is to ensure lexical scoping of all variables declared at the top level of the module. Without something like this, it is easy to accidentally introduce global variables, which in general is a baaaaad thing.
I can't for the life of me figure out what I'm doing wrong. I'm going off a John Linquist video doing some basic AngularJS routing. When I don't have my table in a partials folder and in my index.html page (and not using ng-view so I don't have to configure routing, it works fine. However, I try to inject my a partial view of my table with <ng-view></ng-view> then I get the error: http://goo.gl/nZAgrj (from the angular docs)
app.js
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
//this is the that iterated over in the partial view's ng-repeat
function AppController($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Routing</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
<h2>Enterprise Crew</h2>
<ng-view></ng-view>
//list.html should be injected here
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
list.html
<table class="table table-striped" style="width: 250px">
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td><i class="glyphicon glyphicon-plus-sign"></i> </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in crew">
<td>{{person.name}}</td>
<td>{{person.description}}</td>
<td><i class="glyphicon glyphicon-edit"></i></td>
</tr>
</tbody>
</table>
You need to include ng-route.
angular.module('myApp', ['ngRoute']).
cdn:
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js
And is it working like that?
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
.controller("AppController", ['$scope',
function ($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
];
}
]);
Ok, response is here : AngularJS 1.2 $injector:modulerr