@swimlane/ngx-datatable 20.1.0 → 21.0.0-alpha.0

package/lib/types/table-column.type.d.ts

@@ -1,49 +1,38 @@
-import { PipeTransform } from '@angular/core';
+import { PipeTransform, TemplateRef } from '@angular/core';
 import { ValueGetter } from '../utils/column-prop-getters';
+import { CellContext, HeaderCellContext } from './public.types';
 /**
  * Column property that indicates how to retrieve this column's
  * value from a row.
  * 'a.deep.value', 'normalprop', 0 (numeric)
  */
-export declare type TableColumnProp = string | number;
+export type TableColumnProp = string | number;
 /**
  * Column Type
  */
-export interface TableColumn {
+export interface TableColumn<TRow = any> {
     /**
      * Internal unique id
-     *
-     * @memberOf TableColumn
      */
     $$id?: string;
     /**
      * Internal for column width distributions
-     *
-     * @memberOf TableColumn
      */
     $$oldWidth?: number;
     /**
      * Internal for setColumnDefaults
-     *
-     * @memberOf TableColumn
      */
     $$valueGetter?: ValueGetter;
     /**
      * Determines if column is checkbox
-     *
-     * @memberOf TableColumn
      */
     checkboxable?: boolean;
     /**
      * Determines if the column is frozen to the left
-     *
-     * @memberOf TableColumn
      */
     frozenLeft?: boolean;
     /**
      * Determines if the column is frozen to the right
-     *
-     * @memberOf TableColumn
      */
     frozenRight?: boolean;
     /**
@@ -51,68 +40,52 @@ export interface TableColumn {
      * API from http =//www.w3.org/TR/css3-flexbox/. Basically;
      * take any available extra width and distribute it proportionally
      * according to all columns' flexGrow values.
-     *
-     * @memberOf TableColumn
      */
     flexGrow?: number;
     /**
      * Min width of the column
-     *
-     * @memberOf TableColumn
      */
     minWidth?: number;
     /**
      * Max width of the column
-     *
-     * @memberOf TableColumn
      */
     maxWidth?: number;
     /**
      * The default width of the column, in pixels
-     *
-     * @memberOf TableColumn
      */
     width?: number;
     /**
      * Can the column be resized
-     *
-     * @memberOf TableColumn
      */
     resizeable?: boolean;
     /**
      * Custom sort comparator
-     *
-     * @memberOf TableColumn
      */
     comparator?: any;
     /**
      * Custom pipe transforms
-     *
-     * @memberOf TableColumn
      */
     pipe?: PipeTransform;
     /**
      * Can the column be sorted
-     *
-     * @memberOf TableColumn
      */
     sortable?: boolean;
     /**
      * Can the column be re-arranged by dragging
-     *
-     * @memberOf TableColumn
      */
     draggable?: boolean;
+    /** @internal */
+    dragging?: boolean;
+    /** @internal */
+    isTarget?: boolean;
+    /** @internal */
+    targetMarkerContext?: any;
     /**
      * Whether the column can automatically resize to fill space in the table.
-     *
-     * @memberOf TableColumn
      */
     canAutoResize?: boolean;
     /**
      * Column name or label
-     *
-     * @memberOf TableColumn
      */
     name?: string;
     /**
@@ -121,70 +94,70 @@ export interface TableColumn {
      * `someField` or `some.field.nested`, 0 (numeric)
      *
      * If left blank, will use the name as camel case conversion
-     *
-     * @memberOf TableColumn
      */
     prop?: TableColumnProp;
     /**
-     * Cell template ref
+     * By default, the property is bound using normal data binding `<span>{{content}}</span>`.
+     * If this property is set to true, the property will be bound as `<span [innerHTML]="content" />`.
      *
-     * @memberOf TableColumn
+     * **DANGER** If enabling this feature, make sure the source of the data is trusted. This can be a vector for HTML injection attacks.
      */
-    cellTemplate?: any;
+    bindAsUnsafeHtml?: boolean;
+    /**
+     * Cell template ref
+     */
+    cellTemplate?: TemplateRef<CellContext<TRow>>;
+    /**
+     * Ghost Cell template ref
+     */
+    ghostCellTemplate?: TemplateRef<any>;
     /**
      * Header template ref
-     *
-     * @memberOf TableColumn
      */
-    headerTemplate?: any;
+    headerTemplate?: TemplateRef<HeaderCellContext>;
     /**
      * Tree toggle template ref
-     *
-     * @memberOf TableColumn
      */
     treeToggleTemplate?: any;
     /**
      * CSS Classes for the cell
-     *
-     *
-     * @memberOf TableColumn
      */
-    cellClass?: string | ((data: any) => string | any);
+    cellClass?: string | ((data: {
+        row: TRow;
+        group?: TRow[];
+        column: TableColumn<TRow>;
+        value: any;
+        rowHeight: number;
+    }) => string | Record<string, boolean>);
     /**
      * CSS classes for the header
-     *
-     *
-     * @memberOf TableColumn
      */
-    headerClass?: string | ((data: any) => string | any);
+    headerClass?: string | ((data: {
+        column: TableColumn;
+    }) => string | Record<string, boolean>);
     /**
      * Header checkbox enabled
-     *
-     * @memberOf TableColumn
      */
     headerCheckboxable?: boolean;
     /**
      * Is tree displayed on this column
-     *
-     * @memberOf TableColumn
      */
     isTreeColumn?: boolean;
     /**
      * Width of the tree level indent
-     *
-     * @memberOf TableColumn
      */
     treeLevelIndent?: number;
     /**
      * Summary function
-     *
-     * @memberOf TableColumn
      */
     summaryFunc?: (cells: any[]) => any;
     /**
      * Summary cell template ref
-     *
-     * @memberOf TableColumn
      */
-    summaryTemplate?: any;
+    summaryTemplate?: TemplateRef<any>;
+}
+export interface TableColumnGroup {
+    left: TableColumn[];
+    center: TableColumn[];
+    right: TableColumn[];
 }

package/lib/utils/column-helper.d.ts

@@ -3,9 +3,9 @@ import { DataTableColumnDirective } from '../components/columns/column.directive
 /**
  * Sets the column defaults
  */
-export declare function setColumnDefaults(columns: TableColumn[]): void;
+export declare function setColumnDefaults(columns: TableColumn[], defaultColumnWidth?: number): void;
 export declare function isNullOrUndefined<T>(value: T | null | undefined): value is null | undefined;
 /**
  * Translates templates definitions to objects
  */
-export declare function translateTemplates(templates: DataTableColumnDirective[]): any[];
+export declare function translateTemplates<TRow>(templates: DataTableColumnDirective<TRow>[]): TableColumn[];

package/lib/utils/column-prop-getters.d.ts

@@ -1,5 +1,5 @@
 import { TableColumnProp } from '../types/table-column.type';
-export declare type ValueGetter = (obj: any, prop: TableColumnProp) => any;
+export type ValueGetter = (obj: any, prop: TableColumnProp) => any;
 /**
  * Always returns the empty string ''
  */

package/lib/utils/column.d.ts

@@ -1,26 +1,19 @@
+import { TableColumn, TableColumnGroup } from '../types/table-column.type';
+import { ColumnGroupWidth, PinnedColumns } from '../types/internal.types';
 /**
  * Returns the columns by pin.
  */
-export declare function columnsByPin(cols: any[]): {
-    left: any;
-    center: any;
-    right: any;
-};
+export declare function columnsByPin(cols: TableColumn[]): TableColumnGroup;
 /**
  * Returns the widths of all group sets of a column
  */
-export declare function columnGroupWidths(groups: any, all: any): {
-    left: number;
-    center: number;
-    right: number;
-    total: number;
-};
+export declare function columnGroupWidths(groups: TableColumnGroup, all: TableColumn[]): ColumnGroupWidth;
 /**
  * Calculates the total width of all columns and their groups
  */
-export declare function columnTotalWidth(columns: any[], prop?: string): number;
+export declare function columnTotalWidth(columns: TableColumn[], prop?: string): number;
 /**
  * Calculates the total width of all columns and their groups
  */
-export declare function columnsTotalWidth(columns: any, prop?: any): number;
-export declare function columnsByPinArr(val: any): any[];
+export declare function columnsTotalWidth(columns: TableColumn[], prop?: keyof TableColumn): number;
+export declare function columnsByPinArr(val: TableColumn[]): PinnedColumns[];

package/lib/utils/keys.d.ts

@@ -1,8 +1,8 @@
 export declare enum Keys {
-    up = 38,
-    down = 40,
-    return = 13,
-    escape = 27,
-    left = 37,
-    right = 39
+    up = "ArrowUp",
+    down = "ArrowDown",
+    return = "Enter",
+    escape = "Escape",
+    left = "ArrowLeft",
+    right = "ArrowRight"
 }

package/lib/utils/math.d.ts

@@ -1,12 +1,13 @@
+import { TableColumn } from '../types/table-column.type';
 /**
  * Calculates the Total Flex Grow
  */
-export declare function getTotalFlexGrow(columns: any[]): number;
+export declare function getTotalFlexGrow(columns: TableColumn[]): number;
 /**
  * Adjusts the column widths.
  * Inspired by: https://github.com/facebook/fixed-data-table/blob/master/src/FixedDataTableWidthHelper.js
  */
-export declare function adjustColumnWidths(allColumns: any, expectedWidth: any): void;
+export declare function adjustColumnWidths(allColumns: TableColumn[], expectedWidth: number): void;
 /**
  * Forces the width of the columns to
  * distribute equally but overflowing when necessary
@@ -26,4 +27,4 @@ export declare function adjustColumnWidths(allColumns: any, expectedWidth: any):
  *  - If the grid starts off small but then becomes greater than the size ( + / - )
  *    the width should use the original width; not the newly proportioned widths.
  */
-export declare function forceFillColumnWidths(allColumns: any[], expectedWidth: number, startIdx: number, allowBleed: boolean, defaultColWidth?: number): void;
+export declare function forceFillColumnWidths(allColumns: TableColumn[], expectedWidth: number, startIdx: number, allowBleed: boolean, defaultColWidth?: number, verticalScrollWidth?: number): void;

package/lib/utils/selection.d.ts

@@ -1,2 +1,2 @@
-export declare function selectRows(selected: any[], row: any, comparefn: any): any[];
-export declare function selectRowsBetween(selected: any[], rows: any[], index: number, prevIndex: number, comparefn: any): any[];
+export declare function selectRows<TRow>(selected: TRow[], row: TRow, comparefn: any): TRow[];
+export declare function selectRowsBetween<TRow>(selected: TRow[], rows: TRow[], index: number, prevIndex: number): TRow[];

package/lib/utils/sort.d.ts

@@ -1,10 +1,9 @@
-import { SortType } from '../types/sort.type';
-import { SortDirection } from '../types/sort-direction.type';
-import { SortPropDir } from '../types/sort-prop-dir.type';
+import { Group, SortDirection, SortPropDir, SortType } from '../types/public.types';
+import { TableColumn } from '../types/table-column.type';
 /**
  * Gets the next sort direction
  */
-export declare function nextSortDir(sortType: SortType, current: SortDirection): SortDirection | undefined;
+export declare function nextSortDir(sortType: SortType, current: SortDirection | 'desc' | 'asc'): SortDirection | undefined;
 /**
  * Adapted from fueld-ui on 6/216
  * https://github.com/FuelInteractive/fuel-ui/tree/master/src/pipes/OrderBy
@@ -14,4 +13,5 @@ export declare function orderByComparator(a: any, b: any): number;
  * creates a shallow copy of the `rows` input and returns the sorted copy. this function
  * does not sort the `rows` argument in place
  */
-export declare function sortRows(rows: any[], columns: any[], dirs: SortPropDir[]): any[];
+export declare function sortRows<TRow>(rows: TRow[], columns: TableColumn[], dirs: SortPropDir[]): TRow[];
+export declare function sortGroupedRows<TRow>(groupedRows: Group<TRow>[], columns: TableColumn[], dirs: SortPropDir[], sortOnGroupHeader: SortPropDir): Group<TRow>[];

package/lib/utils/table-token.d.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import type { DatatableComponent } from '../components/datatable.component';
+/**
+ * This token is created to break cycling import error which occurs when we import
+ * DatatableComponent in DataTableRowWrapperComponent.
+ */
+export declare const DatatableComponentToken: InjectionToken<DatatableComponent<any>>;

package/lib/utils/tree.d.ts

@@ -1,5 +1,5 @@
 import { TableColumnProp } from '../types/table-column.type';
-export declare type OptionalValueGetter = (row: any) => any | undefined;
+export type OptionalValueGetter = (row: any) => any | undefined;
 export declare function optionalGetterForProp(prop: TableColumnProp): OptionalValueGetter;
 /**
  * This functions rearrange items by their parents
@@ -37,4 +37,4 @@ export declare function optionalGetterForProp(prop: TableColumnProp): OptionalVa
  * @param rows
  *
  */
-export declare function groupRowsByParents(rows: any[], from?: OptionalValueGetter, to?: OptionalValueGetter): any[];
+export declare function groupRowsByParents<TRow>(rows: TRow[], from?: OptionalValueGetter, to?: OptionalValueGetter): TRow[];

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@swimlane/ngx-datatable",
-  "version": "20.1.0",
+  "version": "21.0.0-alpha.0",
   "description": "ngx-datatable is an Angular table grid component for presenting large and complex data.",
   "peerDependencies": {
-    "@angular/common": ">=11.0.2",
-    "@angular/core": ">=11.0.2",
-    "@angular/platform-browser": ">=11.0.2",
-    "rxjs": "^6.6.3 || ^7.4.0"
+    "@angular/common": "17.x || 18.x || 19.x",
+    "@angular/core": "17.x || 18.x || 19.x",
+    "@angular/platform-browser": "17.x || 18.x || 19.x",
+    "rxjs": "7.x"
   },
   "dependencies": {
     "tslib": "^2.0.0"
@@ -29,23 +29,15 @@
     "url": "https://github.com/swimlane/ngx-datatable/issues"
   },
   "homepage": "https://github.com/swimlane/ngx-datatable#readme",
-  "module": "fesm2015/swimlane-ngx-datatable.mjs",
-  "es2020": "fesm2020/swimlane-ngx-datatable.mjs",
-  "esm2020": "esm2020/swimlane-ngx-datatable.mjs",
-  "fesm2020": "fesm2020/swimlane-ngx-datatable.mjs",
-  "fesm2015": "fesm2015/swimlane-ngx-datatable.mjs",
-  "typings": "swimlane-ngx-datatable.d.ts",
+  "module": "fesm2022/swimlane-ngx-datatable.mjs",
+  "typings": "index.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./swimlane-ngx-datatable.d.ts",
-      "esm2020": "./esm2020/swimlane-ngx-datatable.mjs",
-      "es2020": "./fesm2020/swimlane-ngx-datatable.mjs",
-      "es2015": "./fesm2015/swimlane-ngx-datatable.mjs",
-      "node": "./fesm2015/swimlane-ngx-datatable.mjs",
-      "default": "./fesm2020/swimlane-ngx-datatable.mjs"
+      "types": "./index.d.ts",
+      "default": "./fesm2022/swimlane-ngx-datatable.mjs"
     }
   },
   "sideEffects": false

package/public-api.d.ts

@@ -19,37 +19,30 @@ export * from './lib/components/footer/footer-template.directive';
 export * from './lib/components/columns/column.directive';
 export * from './lib/components/columns/column-header.directive';
 export * from './lib/components/columns/column-cell.directive';
+export * from './lib/components/columns/column-ghost-cell.directive';
 export * from './lib/components/columns/tree.directive';
 export * from './lib/components/row-detail/row-detail.directive';
 export * from './lib/components/row-detail/row-detail-template.directive';
+export * from './lib/components/body/body-row-def.component';
 export * from './lib/directives/draggable.directive';
 export * from './lib/directives/long-press.directive';
 export * from './lib/directives/orderable.directive';
 export * from './lib/directives/resizeable.directive';
 export * from './lib/directives/visibility.directive';
+export * from './lib/directives/disable-row.directive';
 export * from './lib/services/scrollbar-helper.service';
-export * from './lib/services/dimensions-helper.service';
 export * from './lib/services/column-changes.service';
-export * from './lib/types/column-mode.type';
-export * from './lib/types/sort.type';
-export * from './lib/types/sort-direction.type';
-export * from './lib/types/selection.type';
-export * from './lib/types/click.type';
+export * from './lib/types/public.types';
 export * from './lib/types/table-column.type';
-export * from './lib/types/sort-prop-dir.type';
-export * from './lib/types/contextmenu.type';
 export * from './lib/utils/id';
 export * from './lib/utils/column';
 export * from './lib/utils/column-prop-getters';
 export * from './lib/utils/camel-case';
 export * from './lib/utils/keys';
 export * from './lib/utils/math';
-export * from './lib/utils/prefixes';
 export * from './lib/utils/selection';
-export * from './lib/utils/translate';
 export * from './lib/utils/throttle';
 export * from './lib/utils/sort';
 export * from './lib/utils/row-height-cache';
 export * from './lib/utils/column-helper';
-export * from './lib/utils/elm-from-point';
 export * from './lib/utils/tree';

package/LICENSE

@@ -1,22 +0,0 @@
-(The MIT License)
-
-Copyright (c) 2019 Swimlane <info@swimlane.com>
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,47 +0,0 @@
-# ngx-datatable
-
-[![Join the chat at https://gitter.im/swimlane/ngx-datatable](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/swimlane/ngx-datatable?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Code Climate](https://codeclimate.com/github/swimlane/ngx-datatable/badges/gpa.svg)](https://codeclimate.com/github/swimlane/ngx-datatable)
-[![Test Coverage](https://codeclimate.com/github/swimlane/ngx-datatable/badges/coverage.svg)](https://codeclimate.com/github/swimlane/ngx-datatable/coverage)
-[![npm version](https://badge.fury.io/js/%40swimlane%2Fngx-datatable.svg)](https://badge.fury.io/js/%40swimlane%2Fngx-datatable)
-[![npm downloads](https://img.shields.io/npm/dm/@swimlane/ngx-datatable.svg)](https://npmjs.org/@swimlane/ngx-datatable)
-
-`ngx-datatable` is an Angular component 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 dependencies_. 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 built for modern browsers using _TypeScript, CSS3 and HTML5_ and Angular `8.0.0`. This is the sister project of the [angular-data-table](https://github.com/swimlane/angular-data-table) that is designed for Angular 1.x.
-
-Check out the [documentation](https://swimlane.gitbook.io/ngx-datatable/) & [demos](http://swimlane.github.io/ngx-datatable/) for more information!
-
-See the [changelog](https://github.com/swimlane/ngx-datatable/blob/master/docs/changelog.md) for recent changes.
-
-## Features
-
-- Handle large data sets ( Virtual DOM )
-- Expressive Header and Cell Templates
-- Horizontal & Vertical Scrolling
-- Column Reordering & Resizing
-- Client/Server side Pagination & Sorting
-- Intelligent Column Width Algorithms ( Force-fill & Flex-grow )
-- Integrated Pager
-- Cell & Row Selection ( Single, Multi, Keyboard, Checkbox )
-- Fixed AND Fluid height
-- Left and Right Column Pinning
-- Row Detail View
-- Decoupled theme'ing with included Google Material theme
-- Light codebase / No external dependencies
-- AoT Compilation Support
-- Universal Support
-
-## Installation
-
-To use ngx-datatable in your project install it via [npm](https://www.npmjs.com/package/@swimlane/ngx-datatable):
-
-```
-npm i @swimlane/ngx-datatable --save
-```
-
-## Credits
-
-`ngx-datatable` 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.
-
-[SecOps Hub](http://secopshub.com) is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.