From 519c72d9673c47893b6e9e56c5d224b92d33f6f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20In=C3=A9s=20Parnisari?= Date: Mon, 12 Dec 2016 19:08:47 -0300 Subject: [PATCH 1/5] Update README.md Added badges and proper code highlighting. --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7fbe4cc..6accd16 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,10 @@ -# angular-data-table [![Join the chat at https://gitter.im/Swimlane/angular-data-table](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/swimlane/angular-data-table?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Dependency Status](https://david-dm.org/swimlane/angular-data-table.svg)](https://david-dm.org/swimlane/angular-data-table) [![devDependency Status](https://david-dm.org/swimlane/angular-data-table/dev-status.svg)](https://david-dm.org/swimlane/angular-data-table#info=devDependencies) +# angular-data-table + +[![Join the chat at https://gitter.im/Swimlane/angular-data-table](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/swimlane/angular-data-table?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +![npm-version](https://img.shields.io/npm/v/angular-data-table.svg) +![Dependency Status](https://david-dm.org/swimlane/angular-data-table.svg) +![devDependency Status](https://david-dm.org/swimlane/angular-data-table/dev-status.svg) +![download-count](https://img.shields.io/npm/dm/angular-data-table.svg) `angular-data-table` is a AngularJS directive for presenting large and complex data. It has all the features you would expect from any other table but in a light package with _no external depedencies_. The table was designed to be extremely flexible and light; it doesn't make any assumptions about your data or how you: filter, sort or page it. @@ -74,6 +80,7 @@ There is also the CSS too: Include the module in your angular app module like: +```javascript var myApp = angular.module('myApp', [ 'data-table' ]); module.controller('HomeController', function($scope){ @@ -86,15 +93,18 @@ Include the module in your angular app module like: { name: 'Marjan', gender: 'Male' } ]; }); +``` then using expressive markup in your template: +```html {{$row.name}}: {{$cell}} +``` and your off to the races! See live demos [here](http://swimlane.github.io/angular-data-table/). From f51c13b54533a188d4857380aabe605cf1651db2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20In=C3=A9s=20Parnisari?= Date: Mon, 12 Dec 2016 19:13:31 -0300 Subject: [PATCH 2/5] Update README.md Development section pushed to the bottom --- README.md | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6accd16..c86b5bf 100644 --- a/README.md +++ b/README.md @@ -45,20 +45,7 @@ See live demos [here]( http://swimlane.github.io/angular-data-table/). or Github download or clone of course! -#### Run Demos - -Ensure you have the latest NPM and JSPM installed globally. If you don't already have JSPM installed run: `npm install jspm -g`. -- `npm install` -- `jspm install` -- `gulp watch serve` -- Open your browser to `http://localhost:9000` - -docs coming soon, in the meantime, 'View Source' is your friend ;)! - -#### Build - -`gulp release` to build Modules, ES* via Babel and compile. #### Include @@ -75,6 +62,7 @@ There is also the CSS too: - `./release/dataTable.css` - The base CSS, pretty much required - `./release/material.css` - Material theme +- `./release/icons.css` - If you want to show fancy icons when sorting #### Usage @@ -108,6 +96,23 @@ then using expressive markup in your template: and your off to the races! See live demos [here](http://swimlane.github.io/angular-data-table/). +## Contributing + +#### Run Demos + +Ensure you have the latest NPM and JSPM installed globally. If you don't already have JSPM installed run: `npm install jspm -g`. + +- `npm install` +- `jspm install` +- `gulp watch serve` +- Open your browser to `http://localhost:9000` + +docs coming soon, in the meantime, 'View Source' is your friend ;)! + +#### Build + +`gulp release` to build Modules, ES* via Babel and compile. + ## Credits `angular-data-table` is a [Swimlane](http://swimlane.com) open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations. From 1bbcda0cdcaa3f9bd2256761f4813bf633840996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20In=C3=A9s=20Parnisari?= Date: Mon, 12 Dec 2016 19:31:08 -0300 Subject: [PATCH 3/5] Update README.md Documented the options. --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c86b5bf..de1e650 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,52 @@ then using expressive markup in your template: and your off to the races! See live demos [here](http://swimlane.github.io/angular-data-table/). +## API + +The data table can be created with the following `options`: + +- `checkboxSelection`: Checkbox selection vs row click (default: `false`) +- `columnMode`: Possible values are `flex`, `force` and `standard` (default: `standard`) +- `columns` + - `canAutoResize`: Whether the column can automatically resize to fill space in the table (default: `true`) + - `cellDataGetter`: Type `function`. Returns content for the `cellRenderer`. If not provided, the cell data will be collected from row data instead (default: `undefined`) + - `cellRenderer`: Type `function`. Returns HTML for the cell. + - `className`: CSS class for the body cell (default: `undefined`) + - `comparator`: Type `function`. Custom sort comparator, pass `false` if you want to do server sort + - `flexGrow`: The growth factor relative to other columns (default: `0`) + - `frozenLeft`: Column is pinned to the left (default: `false`) + - `frozenRight`: Column is pinned to the right (default: `false`) + - `headerCheckbox`: Toggles the checkbox column in the header for selecting all values given to the grid (default: `false`) + - `headerClassName`: CSS class for the header cell (default: `undefined`) + - `headerRenderer`: Type `function`. Returns HTML for the cell (default: `undefined`) + - `isCheckboxColumn`: Adds the checkbox selection to the column (default: `false`) + - `isTreeColumn`: Adds +/- button and makes a secondary call to load nested data (default: `false`) + - `maxWidth`: Maximum width, in pixels (default: `undefined`) + - `minWidth`: Minimum width, in pixels (default: `100`) + - `name`: Name of the column + - `prop`: Property to use to get the data + - `resizable`: Whether the column can be resized (default: `true`) + - `sort`: Default sort asecending/descending for the column (default: `undefined`) + - `sortBy`: Property by which to sort (default: `undefined`) + - `sortable`: Whether the column can be sorted (default: `true`) + - `template` + - `width`: Width, in pixels (default: `150`) +- `emptyMessage`: Message to show when array is presented but contains no values (default: `'No data to display'`) +- `footerHeight`: Footer height in pixels. Pass a `falsey` value for no footer (default: `0`) +- `headerHeight`: Header height in pixels. Pass a `falsey` value for no header (default: `30`) +- `loadingMessage`: Loading message presented when the array is undefined (default: `'Loading...'`) +- `multiSelect`: Whether users can select multiple items (default: `false`) +- `paging` + - `externalPaging`. Default `false` + - `size`. Default `undefined` + - `count`. Default `0` + - `offset`. Default `0` + - `loadingIndicator`. Default `false` +- `reorderable`: Whether you can reorder columns (default: `true`) +- `rowHeight`: Row height in pixels, necessary if using lazy rendering (default: `30`) +- `scrollbarV`: Enable vertical scrollbars (default: `true`) +- `selectable`: Whether users can select items (default: `false`) + ## Contributing #### Run Demos @@ -107,8 +153,6 @@ Ensure you have the latest NPM and JSPM installed globally. If you don't alread - `gulp watch serve` - Open your browser to `http://localhost:9000` -docs coming soon, in the meantime, 'View Source' is your friend ;)! - #### Build `gulp release` to build Modules, ES* via Babel and compile. From c9ca0e761fc7e8116616304ba5cebaaabe5b70fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20In=C3=A9s=20Parnisari?= Date: Mon, 12 Dec 2016 19:35:47 -0300 Subject: [PATCH 4/5] Added file icons.css --- release/icons.css | 88 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 release/icons.css diff --git a/release/icons.css b/release/icons.css new file mode 100644 index 0000000..5c5d101 --- /dev/null +++ b/release/icons.css @@ -0,0 +1,88 @@ +@charset "UTF-8"; + +/* data-table */ +@font-face { + font-family: "data-table"; + src:url("https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/fonts/1447204703.eot"); + src:url("https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/fonts/1447204703.eot?#iefix") format("embedded-opentype"), + url("https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/fonts/1447204703.woff") format("woff"), + url("https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/fonts/1447204703.ttf") format("truetype"), + url("https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/fonts/1447204703.svg#1447204703") format("svg"); + font-weight: normal; + font-style: normal; +} + +[data-icon]:before { + font-family: "data-table" !important; + content: attr(data-icon); + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="icon-"]:before, +[class*=" icon-"]:before { + font-family: "data-table" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-filter:before { + content: "b"; +} +.icon-collapse:before { + content: "a"; +} +.icon-expand:before { + content: "c"; +} +.icon-close:before { + content: "d"; +} +.icon-up:before { + content: "e"; +} +.icon-down:before { + content: "f"; +} +.icon-sort:before { + content: "g"; +} +.icon-done:before { + content: "h"; +} +.icon-done-all:before { + content: "i"; +} +.icon-search:before { + content: "j"; +} +.icon-pin:before { + content: "k"; +} +.icon-add:before { + content: "m"; +} +.icon-left:before { + content: "o"; +} +.icon-right:before { + content: "p"; +} +.icon-skip:before { + content: "q"; +} +.icon-prev:before { + content: "r"; +} From 5689fed6abf9b4106c0a7a00cea28920d669e30a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20In=C3=A9s=20Parnisari?= Date: Tue, 13 Dec 2016 22:54:42 -0300 Subject: [PATCH 5/5] Update README.md - Angular < 1.6.0 - Added 'group' column property --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index de1e650..a7e8199 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ `angular-data-table` is a AngularJS directive for presenting large and complex data. It has all the features you would expect from any other table but in a light package with _no external depedencies_. The table was designed to be extremely flexible and light; it doesn't make any assumptions about your data or how you: filter, sort or page it. -It was engineered from its conception to handle thousands of rows without sacrificing performance. It was built for modern browsers using _ES6, CSS3 and HTML5_ and only supports [Evergreen Browsers](http://eisenbergeffect.bluespire.com/evergreen-browsers/) and >= 1.4.x Angular. +It was engineered from its conception to handle thousands of rows without sacrificing performance. It was built for modern browsers using _ES6, CSS3 and HTML5_ and **only supports [Evergreen Browsers](http://eisenbergeffect.bluespire.com/evergreen-browsers/) and Angular >= 1.4.x and < 1.6.0**. Sadly, this project is **not Angular2 upgrade compatible**. Fortunately, we have authored [angular2-data-table](https://github.com/swimlane/angular2-data-table) which is the successor to this project. **We are going to slowly be transitioning this project maintenance mode**. We will continue to provide feedback to the community and accept PRs but we won't be doing any major new development. @@ -66,11 +66,15 @@ There is also the CSS too: #### Usage -Include the module in your angular app module like: +Include the `data-table` module as a dependency: ```javascript - var myApp = angular.module('myApp', [ 'data-table' ]); + var module = angular.module('myApp', [ 'data-table' ]); +``` + +Set the data and the options in your controller: +```javascript module.controller('HomeController', function($scope){ $scope.options = { scrollbarV: false @@ -111,6 +115,7 @@ The data table can be created with the following `options`: - `flexGrow`: The growth factor relative to other columns (default: `0`) - `frozenLeft`: Column is pinned to the left (default: `false`) - `frozenRight`: Column is pinned to the right (default: `false`) + - `group`: Whether to group by the column (default: `false`) - `headerCheckbox`: Toggles the checkbox column in the header for selecting all values given to the grid (default: `false`) - `headerClassName`: CSS class for the header cell (default: `undefined`) - `headerRenderer`: Type `function`. Returns HTML for the cell (default: `undefined`)