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

package/assets/icons.css

@@ -0,0 +1,106 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: 'data-table';
+  src: url('fonts/data-table.eot');
+  src: url('fonts/data-table.eot?#iefix') format('embedded-opentype'),
+    url('fonts/data-table.woff') format('woff'), url('fonts/data-table.ttf') format('truetype'),
+    url('fonts/data-table.svg#data-table') 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^='datatable-icon-']::before,
+[class*=' datatable-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;
+}
+
+.datatable-icon-filter::before {
+  content: '\62';
+}
+
+.datatable-icon-collapse::before {
+  content: '\61';
+}
+
+.datatable-icon-expand::before {
+  content: '\63';
+}
+
+.datatable-icon-close::before {
+  content: '\64';
+}
+
+.datatable-icon-up::before {
+  content: '\65';
+}
+
+.datatable-icon-down::before {
+  content: '\66';
+}
+
+.datatable-icon-sort-unset::before {
+  content: '\63';
+  opacity: 0.5;
+}
+
+.datatable-icon-sort::before {
+  content: '\67';
+}
+
+.datatable-icon-done::before {
+  content: '\68';
+}
+
+.datatable-icon-done-all::before {
+  content: '\69';
+}
+
+.datatable-icon-search::before {
+  content: '\6a';
+}
+
+.datatable-icon-pin::before {
+  content: '\6b';
+}
+
+.datatable-icon-add::before {
+  content: '\6d';
+}
+
+.datatable-icon-left::before {
+  content: '\6f';
+}
+
+.datatable-icon-right::before {
+  content: '\70';
+}
+
+.datatable-icon-skip::before {
+  content: '\71';
+}
+
+.datatable-icon-prev::before {
+  content: '\72';
+}

package/index.css

@@ -0,0 +1,253 @@
+.ngx-datatable {
+  display: block;
+  overflow: hidden;
+  justify-content: center;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+  /**
+   * Vertical Scrolling Adjustments
+   */
+  /**
+   * Horizontal Scrolling Adjustments
+   */
+  /**
+   * Fixed Header Height Adjustments
+   */
+  /**
+   * Fixed row height adjustments
+   */
+  /**
+   * Shared Styles
+   */
+  /**
+   * Header Styles
+   */
+  /**
+   * Body Styles
+   */
+  /**
+   * Footer Styles
+   */
+}
+.ngx-datatable [hidden] {
+  display: none !important;
+}
+.ngx-datatable *,
+.ngx-datatable *:before,
+.ngx-datatable *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ngx-datatable.scroll-vertical .datatable-body {
+  overflow-y: auto;
+}
+.ngx-datatable.scroll-vertical.virtualized .datatable-body .datatable-row-wrapper {
+  position: absolute;
+}
+.ngx-datatable.scroll-horz .datatable-body {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.ngx-datatable.fixed-header .datatable-header .datatable-header-inner {
+  white-space: nowrap;
+}
+.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ngx-datatable.fixed-row .datatable-scroll {
+  white-space: nowrap;
+}
+.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row {
+  white-space: nowrap;
+}
+.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ngx-datatable .datatable-body-row,
+.ngx-datatable .datatable-row-center,
+.ngx-datatable .datatable-header-inner {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  -webkit-flex-flow: row;
+  -moz-flex-flow: row;
+  -ms-flex-flow: row;
+  -o-flex-flow: row;
+  flex-flow: row;
+}
+.ngx-datatable .datatable-body-cell,
+.ngx-datatable .datatable-header-cell {
+  overflow-x: hidden;
+  vertical-align: top;
+  display: inline-block;
+  line-height: 1.625;
+}
+.ngx-datatable .datatable-body-cell:focus,
+.ngx-datatable .datatable-header-cell:focus {
+  outline: none;
+}
+.ngx-datatable .datatable-row-left,
+.ngx-datatable .datatable-row-right,
+.ngx-datatable .datatable-group-header {
+  z-index: 9;
+  position: sticky !important;
+}
+.ngx-datatable .datatable-row-left,
+.ngx-datatable .datatable-group-header {
+  left: 0;
+}
+.ngx-datatable .datatable-row-right {
+  right: 0;
+}
+.ngx-datatable .datatable-row-center,
+.ngx-datatable .datatable-row-group {
+  position: relative;
+}
+.ngx-datatable .datatable-header {
+  display: block;
+  overflow: hidden;
+}
+.ngx-datatable .datatable-header .datatable-header-inner {
+  align-items: stretch;
+  -webkit-align-items: stretch;
+}
+.ngx-datatable .datatable-header .datatable-header-cell {
+  position: relative;
+  display: inline-block;
+}
+.ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper {
+  cursor: pointer;
+}
+.ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper {
+  cursor: move;
+}
+.ngx-datatable .datatable-header .datatable-header-cell .sort-btn {
+  line-height: 100%;
+  vertical-align: middle;
+  display: inline-block;
+  cursor: pointer;
+}
+.ngx-datatable .datatable-header .datatable-header-cell .resize-handle,
+.ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable {
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  padding: 0 4px;
+  visibility: hidden;
+}
+.ngx-datatable .datatable-header .datatable-header-cell .resize-handle {
+  cursor: ew-resize;
+}
+.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle {
+  visibility: visible;
+}
+.ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable {
+  visibility: visible;
+}
+.ngx-datatable .datatable-header .datatable-header-cell .targetMarker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromLeft {
+  right: 0;
+}
+.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromRight {
+  left: 0;
+}
+.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap {
+  height: inherit;
+}
+.ngx-datatable .datatable-body {
+  position: relative;
+  z-index: 10;
+  display: block;
+  overflow: hidden;
+}
+.ngx-datatable .datatable-body .datatable-scroll {
+  display: inline-block;
+}
+.ngx-datatable .datatable-body .datatable-row-detail {
+  overflow-y: hidden;
+}
+.ngx-datatable .datatable-body .datatable-row-wrapper {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -moz-box-orient: vertical;
+  -moz-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.ngx-datatable .datatable-body .datatable-body-row {
+  outline: none;
+}
+.ngx-datatable .datatable-body .datatable-body-row > div {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+.ngx-datatable .datatable-footer {
+  display: block;
+  width: 100%;
+  overflow: auto;
+}
+.ngx-datatable .datatable-footer .datatable-footer-inner {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.ngx-datatable .datatable-footer .selected-count .page-count {
+  flex: 1 1 40%;
+}
+.ngx-datatable .datatable-footer .selected-count .datatable-pager {
+  flex: 1 1 60%;
+}
+.ngx-datatable .datatable-footer .page-count {
+  flex: 1 1 20%;
+}
+.ngx-datatable .datatable-footer .datatable-pager {
+  flex: 1 1 80%;
+  text-align: right;
+}
+.ngx-datatable .datatable-footer .datatable-pager .pager,
+.ngx-datatable .datatable-footer .datatable-pager .pager li {
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  list-style: none;
+}
+.ngx-datatable .datatable-footer .datatable-pager .pager li,
+.ngx-datatable .datatable-footer .datatable-pager .pager li a {
+  outline: none;
+}
+.ngx-datatable .datatable-footer .datatable-pager .pager li a {
+  cursor: pointer;
+  display: inline-block;
+}
+.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a {
+  cursor: not-allowed;
+}

package/index.scss

@@ -0,0 +1,325 @@
+.ngx-datatable {
+  display: block;
+  overflow: hidden;
+  justify-content: center;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+
+  [hidden] {
+    display: none !important;
+  }
+
+  *,
+  *:before,
+  *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  /**
+   * Vertical Scrolling Adjustments
+   */
+  &.scroll-vertical {
+    .datatable-body {
+      overflow-y: auto;
+    }
+    &.virtualized {
+      .datatable-body {
+        .datatable-row-wrapper {
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  /**
+   * Horizontal Scrolling Adjustments
+   */
+  &.scroll-horz {
+    .datatable-body {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  /**
+   * Fixed Header Height Adjustments
+   */
+  &.fixed-header {
+    .datatable-header {
+      .datatable-header-inner {
+        white-space: nowrap;
+        .datatable-header-cell {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  /**
+   * Fixed row height adjustments
+   */
+  &.fixed-row {
+    .datatable-scroll {
+      white-space: nowrap;
+
+      .datatable-body-row {
+        white-space: nowrap;
+
+        .datatable-body-cell {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .datatable-body-group-cell {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  /**
+   * Shared Styles
+   */
+  .datatable-body-row,
+  .datatable-row-center,
+  .datatable-header-inner {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    flex-direction: row;
+    -webkit-flex-flow: row;
+    -moz-flex-flow: row;
+    -ms-flex-flow: row;
+    -o-flex-flow: row;
+    flex-flow: row;
+  }
+
+  .datatable-body-cell,
+  .datatable-header-cell {
+    overflow-x: hidden;
+    vertical-align: top;
+    display: inline-block;
+    line-height: 1.625;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .datatable-row-left,
+  .datatable-row-right,
+  .datatable-group-header {
+    z-index: 9;
+    position: sticky !important;
+  }
+
+  .datatable-row-left,
+  .datatable-group-header {
+    left: 0;
+  }
+
+  .datatable-row-right {
+    right: 0;
+  }
+
+  .datatable-row-center,
+  .datatable-row-group {
+    position: relative;
+  }
+
+  /**
+   * Header Styles
+   */
+  .datatable-header {
+    display: block;
+    overflow: hidden;
+
+    .datatable-header-inner {
+      align-items: stretch;
+      -webkit-align-items: stretch;
+    }
+
+    .datatable-header-cell {
+      position: relative;
+      display: inline-block;
+
+      &.sortable {
+        .datatable-header-cell-wrapper {
+          cursor: pointer;
+        }
+      }
+
+      &.longpress .datatable-header-cell-wrapper {
+        cursor: move;
+      }
+
+      .sort-btn {
+        line-height: 100%;
+        vertical-align: middle;
+        display: inline-block;
+        cursor: pointer;
+      }
+
+      .resize-handle,
+      .resize-handle--not-resizable {
+        display: inline-block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 5px;
+        padding: 0 4px;
+        visibility: hidden;
+      }
+
+      .resize-handle {
+        cursor: ew-resize;
+      }
+
+      &.resizeable:hover {
+        .resize-handle {
+          visibility: visible;
+        }
+      }
+
+      &:hover {
+        .resize-handle--not-resizable {
+          visibility: visible;
+        }
+      }
+
+      .targetMarker {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+
+        &.dragFromLeft {
+          right: 0;
+        }
+
+        &.dragFromRight {
+          left: 0;
+        }
+      }
+
+      .datatable-header-cell-template-wrap {
+        height: inherit;
+      }
+    }
+  }
+
+  /**
+   * Body Styles
+   */
+  .datatable-body {
+    position: relative;
+    z-index: 10;
+    display: block;
+    overflow: hidden;
+
+    .datatable-scroll {
+      display: inline-block;
+    }
+
+    .datatable-row-detail {
+      overflow-y: hidden;
+    }
+
+    .datatable-row-wrapper {
+      display: -webkit-box;
+      display: -moz-box;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -webkit-flex-direction: column;
+      -moz-box-orient: vertical;
+      -moz-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+    }
+
+    .datatable-body-row {
+      outline: none;
+
+      > div {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+      }
+    }
+  }
+
+  /**
+   * Footer Styles
+   */
+  .datatable-footer {
+    display: block;
+    width: 100%;
+    overflow: auto;
+
+    .datatable-footer-inner {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .selected-count {
+      .page-count {
+        flex: 1 1 40%;
+      }
+      .datatable-pager {
+        flex: 1 1 60%;
+      }
+    }
+
+    .page-count {
+      flex: 1 1 20%;
+    }
+
+    .datatable-pager {
+      flex: 1 1 80%;
+      text-align: right;
+
+      .pager,
+      .pager li {
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        list-style: none;
+      }
+
+      .pager {
+        li,
+        li a {
+          outline: none;
+        }
+
+        li {
+          a {
+            cursor: pointer;
+            display: inline-block;
+          }
+
+          &.disabled a {
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swimlane/ngx-datatable",
-  "version": "21.0.0-alpha.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": "17.x || 18.x || 19.x",

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;
+}