diff --git a/demos/all-options.html b/demos/all-options.html new file mode 100644 index 0000000..f0fe445 --- /dev/null +++ b/demos/all-options.html @@ -0,0 +1,191 @@ + + + + + + + + + + Datagrid - All Options + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 5c37480..7d41cfb 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -46,7 +46,7 @@ gulp.task('es6', function () { .pipe(changed(path.output, { extension: '.js' })) .pipe(babel()) .pipe(ngAnnotate({ - gulpWarnings: false + gulpWarnings: true })) .pipe(gulp.dest(path.output)) .pipe(browserSync.reload({ stream: true })); diff --git a/index.html b/index.html index 2ddae9b..5eb5ee3 100644 --- a/index.html +++ b/index.html @@ -102,6 +102,7 @@

Table Demos

  • 100k Rows
  • 10 Grids on One Page
  • Horz Scrolling and Full Screen
  • +
  • All Options
  • Plugins diff --git a/src/components/DataTableController.js b/src/components/DataTableController.js index 419fead..5710427 100644 --- a/src/components/DataTableController.js +++ b/src/components/DataTableController.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { TableDefaults, ColumnDefaults } from '../defaults'; import { AdjustColumnWidths, ForceFillColumnWidths } from '../utils/math'; import { ColumnsByPin, ColumnGroupWidths, CamelCase, ObjectId, ScrollbarWidth } from '../utils/utils'; @@ -47,6 +46,7 @@ export class DataTableController { var watch = this.$scope.$watch('dt.rows', (newVal) => { if (newVal) { watch(); + this.onSorted(); } }); @@ -58,8 +58,7 @@ export class DataTableController { defaults(){ this.expanded = this.expanded || {}; - this.options = angular.extend(angular. - copy(TableDefaults), this.options); + this.options = angular.extend(angular.copy(TableDefaults), this.options); angular.forEach(TableDefaults.paging, (v,k) => { if(!this.options.paging[k]){ diff --git a/src/components/DataTableDirective.js b/src/components/DataTableDirective.js index 3511de1..818c0d5 100644 --- a/src/components/DataTableDirective.js +++ b/src/components/DataTableDirective.js @@ -1,10 +1,9 @@ -import angular from 'angular'; import { DataTableController } from './DataTableController'; import { ScrollbarWidth, ObjectId } from '../utils/utils'; import { throttle } from '../utils/throttle'; import { DataTableService } from './DataTableService'; -export function DataTableDirective($window, $timeout, $parse){ +export default function DataTableDirective($window, $timeout, $parse){ return { restrict: 'E', replace: true, @@ -102,10 +101,13 @@ export function DataTableDirective($window, $timeout, $parse){ ctrl.adjustColumns(); }; - $window.addEventListener('resize', + function _calculateResize() { throttle(() => { $timeout(resize); - })); + }); + } + + $window.addEventListener('resize', _calculateResize); // When an item is hidden for example // in a tab with display none, the height diff --git a/src/components/DataTableService.js b/src/components/DataTableService.js index f315fed..2125bcf 100644 --- a/src/components/DataTableService.js +++ b/src/components/DataTableService.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { ColumnDefaults } from '../defaults'; import { CamelCase } from '../utils/utils'; @@ -60,7 +59,7 @@ export let DataTableService = { }); let header = c.getElementsByTagName('column-header'); - + if (header.length) { column.headerTemplate = header[0].innerHTML; c.removeChild(header[0]) diff --git a/src/components/body/BodyDirective.js b/src/components/body/BodyDirective.js index 5c0ab3b..523a482 100644 --- a/src/components/body/BodyDirective.js +++ b/src/components/body/BodyDirective.js @@ -1,6 +1,6 @@ import BodyController from './BodyController'; -export function BodyDirective($timeout){ +export default function BodyDirective($timeout){ return { restrict: 'E', controller: BodyController, diff --git a/src/components/body/CellDirective.js b/src/components/body/CellDirective.js index d1dd60c..7bfc3ae 100644 --- a/src/components/body/CellDirective.js +++ b/src/components/body/CellDirective.js @@ -1,7 +1,6 @@ -import angular from 'angular'; import { CellController } from './CellController'; -export function CellDirective($rootScope, $compile, $log, $timeout){ +export default function CellDirective($rootScope, $compile, $log, $timeout){ return { restrict: 'E', controller: CellController, @@ -67,7 +66,7 @@ export function CellDirective($rootScope, $compile, $log, $timeout){ } else { content[0].innerHTML = ctrl.getValue(); } - + }, true); function createCellScope(){ diff --git a/src/components/body/GroupRowDirective.js b/src/components/body/GroupRowDirective.js index 58426b9..ad5200a 100644 --- a/src/components/body/GroupRowDirective.js +++ b/src/components/body/GroupRowDirective.js @@ -1,7 +1,7 @@ import { GroupRowController } from './GroupRowController'; import { TranslateXY } from '../../utils/translate'; -export function GroupRowDirective(){ +export default function GroupRowDirective(){ return { restrict: 'E', controller: GroupRowController, diff --git a/src/components/body/RowController.js b/src/components/body/RowController.js index 3987a33..aeccc73 100644 --- a/src/components/body/RowController.js +++ b/src/components/body/RowController.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { DeepValueGetter } from '../../utils/utils'; import { TranslateXY } from '../../utils/translate'; diff --git a/src/components/body/RowDirective.js b/src/components/body/RowDirective.js index 50675a4..404b8e8 100644 --- a/src/components/body/RowDirective.js +++ b/src/components/body/RowDirective.js @@ -1,7 +1,7 @@ import { RowController } from './RowController'; import { TranslateXY } from '../../utils/translate'; -export function RowDirective(){ +export default function RowDirective(){ return { restrict: 'E', controller: RowController, diff --git a/src/components/body/ScrollerDirective.js b/src/components/body/ScrollerDirective.js index ab5dad9..3b3af2d 100644 --- a/src/components/body/ScrollerDirective.js +++ b/src/components/body/ScrollerDirective.js @@ -2,7 +2,7 @@ import { requestAnimFrame } from '../../utils/utils'; import { StyleTranslator } from './StyleTranslator'; import { TranslateXY } from '../../utils/translate'; -export function ScrollerDirective($timeout, $rootScope){ +export default function ScrollerDirective($timeout, $rootScope){ return { restrict: 'E', require:'^dtBody', diff --git a/src/components/body/SelectionDirective.js b/src/components/body/SelectionDirective.js index 9046d4e..1c2d82f 100644 --- a/src/components/body/SelectionDirective.js +++ b/src/components/body/SelectionDirective.js @@ -1,6 +1,6 @@ import { SelectionController } from './SelectionController'; -export function SelectionDirective(){ +export default function SelectionDirective(){ return { controller: SelectionController, restrict: 'A', diff --git a/src/components/footer/FooterDirective.js b/src/components/footer/FooterDirective.js index 1a733ff..f633a1d 100644 --- a/src/components/footer/FooterDirective.js +++ b/src/components/footer/FooterDirective.js @@ -1,6 +1,6 @@ import { FooterController } from './FooterController'; -export function FooterDirective(){ +export default function FooterDirective(){ return { restrict: 'E', controller: FooterController, diff --git a/src/components/footer/PagerDirective.js b/src/components/footer/PagerDirective.js index 1893128..479544d 100644 --- a/src/components/footer/PagerDirective.js +++ b/src/components/footer/PagerDirective.js @@ -1,6 +1,6 @@ import { PagerController } from './PagerController'; -export function PagerDirective(){ +export default function PagerDirective(){ return { restrict: 'E', controller: PagerController, diff --git a/src/components/header/HeaderCellController.js b/src/components/header/HeaderCellController.js index 30ad1fd..fce0d14 100644 --- a/src/components/header/HeaderCellController.js +++ b/src/components/header/HeaderCellController.js @@ -1,6 +1,7 @@ import { NextSortDirection } from '../../utils/utils'; -export class HeaderCellController { +export default class HeaderCellController { + /* @ngInject */ constructor($scope) { Object.assign(this, { $scope diff --git a/src/components/header/HeaderCellController.spec.js b/src/components/header/HeaderCellController.spec.js index 95f8292..49a0e1e 100644 --- a/src/components/header/HeaderCellController.spec.js +++ b/src/components/header/HeaderCellController.spec.js @@ -1,4 +1,4 @@ -import { HeaderCellController } from './HeaderCellController'; +import HeaderCellController from './HeaderCellController'; describe('HeaderCellController', function () { // diff --git a/src/components/header/HeaderCellDirective.js b/src/components/header/HeaderCellDirective.js index 02d60e2..43fe7b6 100644 --- a/src/components/header/HeaderCellDirective.js +++ b/src/components/header/HeaderCellDirective.js @@ -1,7 +1,6 @@ -import angular from 'angular'; -import { HeaderCellController } from './HeaderCellController'; +import HeaderCellController from './HeaderCellController'; -export function HeaderCellDirective($compile){ +export default function HeaderCellDirective($compile){ return { restrict: 'E', controller: HeaderCellController, diff --git a/src/components/header/HeaderDirective.js b/src/components/header/HeaderDirective.js index ac28eb9..698ad7e 100644 --- a/src/components/header/HeaderDirective.js +++ b/src/components/header/HeaderDirective.js @@ -1,7 +1,6 @@ -import angular from 'angular'; import { HeaderController } from './HeaderController'; -export function HeaderDirective($timeout){ +export default function HeaderDirective($timeout){ return { restrict: 'E', controller: HeaderController, diff --git a/src/components/header/ResizableDirective.js b/src/components/header/ResizableDirective.js index af46807..dd2ad4f 100644 --- a/src/components/header/ResizableDirective.js +++ b/src/components/header/ResizableDirective.js @@ -5,7 +5,7 @@ * @param {function} * @param {function} */ -export function ResizableDirective($document, $timeout){ +export default function ResizableDirective($document, $timeout){ return { restrict: 'A', scope:{ diff --git a/src/components/header/SortableDirective.js b/src/components/header/SortableDirective.js index b4c7e44..01aecaa 100644 --- a/src/components/header/SortableDirective.js +++ b/src/components/header/SortableDirective.js @@ -1,12 +1,10 @@ -import angular from 'angular'; - /** * Sortable Directive * http://jsfiddle.net/RubaXa/zLq5J/3/ * https://jsfiddle.net/hrohxze0/6/ * @param {function} */ -export function SortableDirective($timeout) { +export default function SortableDirective($timeout) { return { restrict: 'A', scope: { diff --git a/src/components/menu/context/contextMenu.js b/src/components/menu/context/contextMenu.js index cecb3ff..c57ba32 100644 --- a/src/components/menu/context/contextMenu.js +++ b/src/components/menu/context/contextMenu.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import dropdown from '../dropdown/dropdown'; export default angular diff --git a/src/components/menu/dropdown/dropdown.js b/src/components/menu/dropdown/dropdown.js index 805980d..bfeb397 100644 --- a/src/components/menu/dropdown/dropdown.js +++ b/src/components/menu/dropdown/dropdown.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { DropdownController } from './DropdownController'; import { DropdownDirective } from './DropdownDirective'; import { DropdownToggleDirective } from './DropdownToggleDirective'; diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js index e4c5406..f154df7 100644 --- a/src/components/menu/menu.js +++ b/src/components/menu/menu.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { MenuController } from './MenuController'; import { MenuDirective } from './MenuDirective'; import dropdown from './dropdown/dropdown'; diff --git a/src/components/popover/PopoverDirective.js b/src/components/popover/PopoverDirective.js index 1cbdb12..265f7f7 100644 --- a/src/components/popover/PopoverDirective.js +++ b/src/components/popover/PopoverDirective.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { POSITION } from './Popover.constants'; /** diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index f576fc4..4d8c03d 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { PopoverDirective } from './PopoverDirective'; import { PopoverRegistry } from './PopoverRegistry'; import { PositionHelper } from './PositionHelper'; diff --git a/src/dataTable.js b/src/dataTable.js index 1f1fa05..1fde266 100644 --- a/src/dataTable.js +++ b/src/dataTable.js @@ -1,20 +1,20 @@ import angular from 'angular'; import './utils/polyfill'; -import { ResizableDirective } from './components/header/ResizableDirective'; -import { SortableDirective } from './components/header/SortableDirective'; -import { DataTableDirective } from './components/DataTableDirective'; -import { HeaderDirective } from './components/header/HeaderDirective'; -import { HeaderCellController } from './components/header/HeaderCellController'; -import { HeaderCellDirective } from './components/header/HeaderCellDirective'; -import { BodyDirective } from './components/body/BodyDirective'; -import { ScrollerDirective } from './components/body/ScrollerDirective'; -import { SelectionDirective } from './components/body/SelectionDirective'; -import { RowDirective } from './components/body/RowDirective'; -import { GroupRowDirective } from './components/body/GroupRowDirective'; -import { CellDirective } from './components/body/CellDirective'; -import { FooterDirective } from './components/footer/FooterDirective'; -import { PagerDirective } from './components/footer/PagerDirective'; +import ResizableDirective from './components/header/ResizableDirective'; +import SortableDirective from './components/header/SortableDirective'; +import DataTableDirective from './components/DataTableDirective'; +import HeaderDirective from './components/header/HeaderDirective'; +import HeaderCellController from './components/header/HeaderCellController'; +import HeaderCellDirective from './components/header/HeaderCellDirective'; +import BodyDirective from './components/body/BodyDirective'; +import ScrollerDirective from './components/body/ScrollerDirective'; +import SelectionDirective from './components/body/SelectionDirective'; +import RowDirective from './components/body/RowDirective'; +import GroupRowDirective from './components/body/GroupRowDirective'; +import CellDirective from './components/body/CellDirective'; +import FooterDirective from './components/footer/FooterDirective'; +import PagerDirective from './components/footer/PagerDirective'; import dtPopover from './components/popover/popover'; import dtMenu from './components/menu/menu'; diff --git a/src/utils/math.js b/src/utils/math.js index 5a680eb..f5f3701 100644 --- a/src/utils/math.js +++ b/src/utils/math.js @@ -1,4 +1,3 @@ -import angular from 'angular'; import { ColumnsByPin, ColumnGroupWidths } from './utils'; /** diff --git a/src/utils/throttle.js b/src/utils/throttle.js index 2f503c9..bd0231b 100644 --- a/src/utils/throttle.js +++ b/src/utils/throttle.js @@ -1,5 +1,3 @@ -import angular from 'angular'; - /** * Debounce helper * @param {function}