View on GitHub

Ng-cells

Download this project as a .zip file Download this project as a tar.gz file

ng-cells

AngularJS Table directive

This directive draws a table of data with different features. It has no dependency other than angularjs. it has been tested on Google Chrome, Safari, Opera and Firefox and Internet Explorer 10 (8+ in developer mode)

Tu use this directive, just add the ngcTableDirective as dependency. The template is handle as an external HTML file and integrated during the build process in the ngc-template module. The template is registered in the angularjs template cache with the key ngc.table.tpl.html

ng-cells is also available as bower package, just bower install ng-cells

Features

Examples

You can find many examples in the Github project. Please refere to the test folder. Additionally, here are live samples:
A
B
C
D
E
F
G
H
I
J
K
L
M
ALK
ALL
1
0
1
2
3
4
5
6
7
8
9
10
11
12
998
999
2
0
2
4
6
8
10
12
14
16
18
20
22
24
1996
1998
3
0
3
6
9
12
15
18
21
24
27
30
33
36
2994
2997
4
0
4
8
12
16
20
24
28
32
36
40
44
48
3992
3996
5
0
5
10
15
20
25
30
35
40
45
50
55
60
4990
4995
6
0
6
12
18
24
30
36
42
48
54
60
66
72
5988
5994
7
0
7
14
21
28
35
42
49
56
63
70
77
84
6986
6993
8
0
8
16
24
32
40
48
56
64
72
80
88
96
7984
7992
9
0
9
18
27
36
45
54
63
72
81
90
99
108
8982
8991
10
0
10
20
30
40
50
60
70
80
90
100
110
120
9980
9990
11
0
11
22
33
44
55
66
77
88
99
110
121
132
10978
10989
12
0
12
24
36
48
60
72
84
96
108
120
132
144
11976
11988
13
0
13
26
39
52
65
78
91
104
117
130
143
156
12974
12987
14
0
14
28
42
56
70
84
98
112
126
140
154
168
13972
13986
15
0
15
30
45
60
75
90
105
120
135
150
165
180
14970
14985
16
0
16
32
48
64
80
96
112
128
144
160
176
192
15968
15984
17
0
17
34
51
68
85
102
119
136
153
170
187
204
16966
16983
998
0
998
1996
2994
3992
4990
5988
6986
7984
8982
9980
10978
11976
996004
997002
999
0
999
1998
2997
3996
4995
5994
6993
7992
8991
9990
10989
11988
997002
998001
1000
0
1000
2000
3000
4000
5000
6000
7000
8000
9000
10000
11000
12000
998000
999000

Usage

Table

The directive displays a grid of cells organized as the following principles :

--------------------------------
| |      COLUMN LETTERS        |
--------------------------------
| |      | HEADER ROWS |       |
|-|------|---------------------|
|R|      |             |       |
|O| LEFT |   CENTER    | RIGHT |
|W| COLS |    COLS     | COLS  |
|#|      |             |       |
|-|------|-------------|-------|
| |      | FOOTER ROWS |       |
--------------------------------

When the data matrix vertical dimension than the total number of rows, the area between header and footer is scrollable. The behaviour is identical for the number of columns, the area between the left and right columns becomes scrollable.

Minimal example to display a table with one million cells (1000 x 1000 data matrix) with default settings and no styling :

<!DOCTYPE html>
<html ng-app="ngcTableDirectiveTest">
<head>
    <title>Test Template</title>
    <link href="../dist/ng-cells.css" rel="stylesheet" type="text/css">
    <script src="../lib/angular-1.2.6.js"></script>
    <script src="../lib/angular-sanitize-1.2.6.js"></script>
    <script src="../dist/ng-cells.min.js"></script>
    <script>
        angular.module('ngcTableDirectiveTest', ['ngcTableDirective'])
                .controller('TestCtrl', function($scope) {
                    $scope.data = [];

                    for (var row = 0; row < 1000; row++) {
                        var rowContent = [];
                        for (var col = 0; col < 1000; col++) {
                            rowContent.push(row * col + col);
                        }
                        $scope.data.push(rowContent);
                    }

                });

    </script>

</head>
<body>
<div ng-controller="TestCtrl">
    <div ngc-table data="data"></div>
</div>
</body>
</html>

The data must be given as a two dimensional array (ie array[][]). If your data is a complex object, you can define a custom data function to extract the data value. For example, the following html snippet will use the below javascript function to get the value

<div ngc-table data="data" custom-data-value-fn="customDataFn"></div>

$scope.customDataFn = function(data, row, col) {
    return data[1000 - row - 1][1000 - col - 1];
}

The table settings like number of columns and rows in each table part can be specified with different attributes which names should be self-explanatory. Please see the reference below. For example:

<ngc-table
        data="data"
        left-column-number="5" left-column-widths="'30px'"
        center-column-number="10" center-column-widths="['40px', '60px', '40px']"
        right-column-number="5" right-column-widths="['60px', '40px', '60px', '40px', '60px']"
        header-row-number="2" header-row-heights="['30px', '15px']"
        row-number='15' row-heights="['41px', '14px']"
        footer-row-number="3" footer-row-heights="'24px'">
</ngc-table>

Cell Ranges

Ranges

Ranges let specify custom behaviour for data ranges. The range is defined by the area limits and holds custom CSS classes, format and styling functions and event callbacks. Ranges are specified in the data matrix range, thus they are not related to cells.

To add custom ranges, use the declarative ranges definitions such as this example :

 <ngc-table data="data">
     <ngc-range top="0" bottom="1000" left="0" right="5" format-fn="cellFormatRange1"></ngc-range>
     <ngc-range top="3" bottom="8" left="3" right="998" format-fn="cellFormatRange2"></ngc-range>
     <ngc-range top="10" bottom="12" left="6" right="15" format-fn="cellFormatRange3"></ngc-range>
     <ngc-range top="13" bottom="30" left="3" right="998" format-fn="cellFormatRange4"></ngc-range>
     <ngc-range top="990" bottom="998" left="3" right="998"></ngc-range>
 </ngc-table>

Ranges can overlap but only one class, event function, format function etc is activated on a single cell. The order of precedence is the same as the order of the range declarations. The callback receives the cell and the cellData.

Here an example of mousemove event handling :

<ngc-range top="0" bottom="5" left="0" right="5" click-fn="clickFn"  ></ngc-range>

$scope.clickFn = function(event, cellData) {
    console.log(event.target);
    console.log(cellData.row);
    console.log(cellData.col);
    console.log(cellData.data);
    console.log(cellData.value);
}

CSS Classes

In addition to ranges custom classes, the table embeds CSS classes to identify each part of the table. For example, to set the pen color and the background color of all cells of the right header part, use the following CSS statement in your stylesheet. If you have other elements that clash you can add an additional ngc class to make it more specific.

.cell.right.header {
    background-color: #880000;
    color: whitesmoke;
}

Directive Reference

Table

Range

CSS Reference

Here's a list of the classes which can be used to select cells according to the table parts they belong to

Column names

Header section

Middle section

Footer section

All element class declarations also have the ngc class. First and last rows of each section have the resp. first and last classes. Same for cells in each row and section.

License



    Copyright 2013,2014 Guy de Pourtalès

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.