@fluid-topics/ft-filterable-table 0.1.18 → 0.2.2

package/build/ft-filterable-table.js

@@ -13,6 +13,7 @@ import "@fluid-topics/ft-select";
 import "@fluid-topics/ft-text-field";
 import "@fluid-topics/ft-button";
 import { FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { classMap } from 'lit/directives/class-map';
 export class RowClickEvent extends CustomEvent {
     constructor(data) {
         super("row-click", { detail: data });
@@ -23,6 +24,7 @@ export const FtFilterableTableCssVariables = {
     oddRowBackground: FtCssVariable.create("--ft-filterable-table-odd-row-background", "COLOR", "#FFFFFF"),
     evenRowBackground: FtCssVariable.create("--ft-filterable-table-even-row-background", "COLOR", "#fdfdfd"),
     rowHoverBackground: FtCssVariable.create("--ft-filterable-table-row-hover-background", "COLOR", "#fafafa"),
+    stickyHeaderZIndex: FtCssVariable.create("--ft-filterable-table-sticky-header-zindex", "NUMBER", "100"),
     colorOnSurfaceHigh: FtCssVariable.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
     titleFont: FtCssVariable.external(designSystemVariables.titleFont, "Design system"),
     contentFont: FtCssVariable.external(designSystemVariables.contentFont, "Design system"),
@@ -37,6 +39,7 @@ export class FtFilterableTable extends FtLitElement {
         super(...arguments);
         this.data = [];
         this.columns = [];
+        this.stickyHeaders = false;
         this.filters = [];
         this.selectData = [];
     }
@@ -121,15 +124,20 @@ export class FtFilterableTable extends FtLitElement {
         this.requestUpdate();
     }
     renderHeader(column, index) {
+        const classes = {
+            'header-cell': true,
+            'header-cell--sticky': this.stickyHeaders
+        };
         return html `
-            <div class="header-cell">
+            <div class="${classMap(classes)}">
                 <div class="column-title-container">
                     <span class="column-title">${column.title}</span>
                     ${this.renderColumnSort(column, index)}
                 </div>
+              ${column.filter ? html `
                 <div class="column-filter">
                     ${this.renderColumnFilter(column, index)}
-                </div>
+                </div>` : null}
             </div>
         `;
     }
@@ -238,6 +246,12 @@ FtFilterableTable.styles = css `
             padding: .5rem 1rem;
             font-family: ${FtFilterableTableCssVariables.titleFont};
         }
+        
+        .header-cell--sticky {
+            top: 0;
+            z-index: ${FtFilterableTableCssVariables.stickyHeaderZIndex};
+            position: sticky;
+        }
 
         .header-cell:first-of-type {
             border-radius: .5rem 0 0 0;
@@ -261,6 +275,9 @@ FtFilterableTable.styles = css `
             white-space: nowrap;
             text-transform: uppercase;
             margin-right: .5rem;
+            font-weight: normal;
+            letter-spacing: 1.5px;
+            font-size: 0.8em;
         }
 
         .column-filter {
@@ -326,6 +343,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], FtFilterableTable.prototype, "sort", void 0);
+__decorate([
+    property()
+], FtFilterableTable.prototype, "stickyHeaders", void 0);
 __decorate([
     state()
 ], FtFilterableTable.prototype, "currentSort", void 0);