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

package/lib/types/public.types.d.ts

@@ -0,0 +1,142 @@
+import { TableColumn, TableColumnProp } from './table-column.type';
+import { BehaviorSubject, Observable } from 'rxjs';
+export interface SortPropDir {
+    dir: SortDirection | 'desc' | 'asc';
+    prop: TableColumnProp;
+}
+export declare enum SortDirection {
+    asc = "asc",
+    desc = "desc"
+}
+export interface InnerSortEvent {
+    column: TableColumn;
+    prevValue: SortDirection;
+    newValue: SortDirection;
+}
+export interface SortEvent extends InnerSortEvent {
+    sorts: SortPropDir[];
+}
+export declare enum SortType {
+    single = "single",
+    multi = "multi"
+}
+export declare enum ColumnMode {
+    standard = "standard",
+    flex = "flex",
+    force = "force"
+}
+export type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';
+export interface ActivateEvent<TRow> {
+    type: 'checkbox' | 'click' | 'dblclick' | 'keydown' | 'mouseenter';
+    event: MouseEvent | KeyboardEvent;
+    row: TRow;
+    group?: TRow[];
+    rowHeight?: number;
+    column?: TableColumn;
+    value?: any;
+    cellElement?: HTMLElement;
+    treeStatus?: TreeStatus;
+    cellIndex?: number;
+    rowElement?: HTMLElement;
+}
+export interface HeaderCellContext {
+    column: TableColumn;
+    sortDir: SortDirection | 'asc' | 'desc';
+    sortFn: () => void;
+    allRowsSelected: boolean;
+    selectFn: () => void;
+}
+export interface GroupContext<TRow = any> {
+    group: Group<TRow>;
+    expanded: boolean;
+    rowIndex: number;
+}
+export interface CellContext<TRow = any> {
+    onCheckboxChangeFn: (event: Event) => void;
+    activateFn: (event: ActivateEvent<TRow>) => void;
+    row: TRow;
+    group: TRow[];
+    value: any;
+    column: TableColumn;
+    rowHeight: number;
+    isSelected: boolean;
+    rowIndex: number;
+    treeStatus: TreeStatus;
+    disable$: BehaviorSubject<boolean>;
+    onTreeAction: () => void;
+    expanded?: boolean;
+}
+export interface FooterContext {
+    rowCount: number;
+    pageSize: number;
+    selectedCount: number;
+    curPage: number;
+    offset: number;
+}
+export declare enum ContextmenuType {
+    header = "header",
+    body = "body"
+}
+/** A Group row */
+export interface Group<TRow> {
+    /** The value by which to rows are grouped. */
+    key: TRow[keyof TRow];
+    /** All rows that are part of the group. */
+    value: TRow[];
+}
+/** Type for either a row or a group */
+export type RowOrGroup<TRow> = TRow | Group<TRow>;
+export interface RowDetailContext<TRow = any> {
+    row: TRow;
+    expanded: boolean;
+    rowIndex: number;
+    disableRow$?: Observable<boolean>;
+}
+export interface ReorderEvent {
+    column: TableColumn;
+    prevValue: number;
+    newValue: number;
+}
+export interface PageEvent {
+    count: number;
+    pageSize: number;
+    limit: number;
+    offset: number;
+}
+export interface PagerPageEvent {
+    page: number;
+}
+export interface ColumnResizeEvent {
+    column: TableColumn;
+    prevValue: number;
+    newValue: number;
+}
+export interface ScrollEvent {
+    offsetY: number;
+    offsetX: number;
+}
+export interface GroupToggleEvent<TRow> {
+    type: 'group';
+    value: Group<TRow>;
+}
+export interface AllGroupsToggleEvent {
+    type: 'all';
+    value: boolean;
+}
+export type GroupToggleEvents<TRow> = GroupToggleEvent<TRow> | AllGroupsToggleEvent;
+export declare enum SelectionType {
+    single = "single",
+    multi = "multi",
+    multiClick = "multiClick",
+    cell = "cell",
+    checkbox = "checkbox"
+}
+export type DragEventType = 'drag' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'dragstart' | 'drop';
+export interface DragEventData {
+    event: DragEvent;
+    srcElement: HTMLElement;
+    targetElement?: HTMLElement;
+    eventType: DragEventType;
+    dragRow: any;
+    dropRow?: any;
+}

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.1",
   "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/themes/_ghost.scss

@@ -0,0 +1,22 @@
+$datatable-ghost-cell-container-background: #fff !default;
+$datatable-ghost-cell-strip-background: #dee2e5 !default;
+$datatable-ghost-cell-strip-background-image: linear-gradient(
+  to right,
+  #dee2e5 0%,
+  #dee2e5 10%,
+  #f0f2f5,
+  transparent
+) !default;
+$datatable-ghost-cell-strip-radius: 4px !default;
+$datatble-ghost-cell-animation-duration: 10s;
+
+.ghost-cell-container {
+  background: $datatable-ghost-cell-container-background;
+}
+
+.ghost-cell-strip {
+  background: $datatable-ghost-cell-strip-background;
+  background-image: $datatable-ghost-cell-strip-background-image;
+  border-radius: $datatable-ghost-cell-strip-radius;
+  animation-duration: $datatble-ghost-cell-animation-duration;
+}

package/themes/_rows.scss

@@ -0,0 +1,22 @@
+$disable-row-text-color: #83888e !default;
+
+.ngx-datatable {
+  .row-disabled {
+    color: $disable-row-text-color;
+    .datatable-body-cell-label {
+      color: $disable-row-text-color;
+    }
+  }
+  .datatable-row-wrapper {
+    .datatable-body-row {
+      &.row-disabled:hover {
+        background-color: inherit;
+        transition: none;
+        .datatable-row-group {
+          background-color: inherit;
+          transition: none;
+        }
+      }
+    }
+  }
+}