@fluid-topics/ft-filterable-table 1.1.45 → 1.1.46

package/build/ft-filterable-table.properties.d.ts

@@ -6,8 +6,9 @@ export interface ColumnConfiguration<T> {
     render?: (value: any, index: number) => string | TemplateResult;
     sortable?: boolean;
     comparator?: (a: any, b: any) => number;
-    filter?: "text" | "select" | "date" | "none";
+    filter?: "text" | "select" | "none";
     stringify?: (value: any, index: number) => string;
+    options?: Array<any>;
     gridTemplateColumn?: string;
 }
 export interface Sort {
@@ -16,15 +17,25 @@ export interface Sort {
 }
 export interface Filter {
     value?: string;
-    rangeStart?: Date;
-    rangeEnd?: Date;
+}
+export interface ColumnFilter {
+    column: number;
+    value: string;
 }
 export declare class RowClickEvent<T> extends CustomEvent<T> {
     constructor(data: T);
 }
+export interface FtFilterableTableChangeEventDetail {
+    filters: ColumnFilter[];
+    sort?: Sort;
+}
+export declare class FtFilterableTableChangeEvent extends CustomEvent<FtFilterableTableChangeEventDetail> {
+    constructor(detail: FtFilterableTableChangeEventDetail);
+}
 export interface FtFilterableTableProperties<T extends Record<string, any>> {
     data: Array<T>;
     columns: Array<ColumnConfiguration<T>>;
     sort?: Sort;
     stickyHeaders: boolean;
+    disableDataManipulation: boolean;
 }

package/build/ft-filterable-table.properties.js

@@ -3,3 +3,8 @@ export class RowClickEvent extends CustomEvent {
         super("row-click", { detail: data });
     }
 }
+export class FtFilterableTableChangeEvent extends CustomEvent {
+    constructor(detail) {
+        super("change", { detail: detail });
+    }
+}

package/build/ft-filterable-table.styles.d.ts

@@ -5,6 +5,7 @@ export declare const FtFilterableTableCssVariables: {
     rowHoverBackground: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     stickyHeaderZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     cellVerticalBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    columnTitleWhiteSpace: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorOnSurfaceHigh: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     titleFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     contentFont: import("@fluid-topics/ft-wc-utils").FtCssVariable;

package/build/ft-filterable-table.styles.js

@@ -1,6 +1,7 @@
 import { css } from "lit";
 import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.styles";
+import { FtSelectCssVariables } from "@fluid-topics/ft-select/build/ft-select.styles";
 export const FtFilterableTableCssVariables = {
     headerBackground: FtCssVariableFactory.create("--ft-filterable-table-header-background", "", "COLOR", "whitesmoke"),
     oddRowBackground: FtCssVariableFactory.create("--ft-filterable-table-odd-row-background", "", "COLOR", "#FFFFFF"),
@@ -8,6 +9,7 @@ export const FtFilterableTableCssVariables = {
     rowHoverBackground: FtCssVariableFactory.create("--ft-filterable-table-row-hover-background", "", "COLOR", "#fafafa"),
     stickyHeaderZIndex: FtCssVariableFactory.create("--ft-filterable-table-sticky-header-zindex", "", "NUMBER", "10"),
     cellVerticalBorderWidth: FtCssVariableFactory.create("--ft-filterable-table-cell-vertical-border-width", "", "SIZE", "1px"),
+    columnTitleWhiteSpace: FtCssVariableFactory.create("--ft-filterable-table-column-title-white-space", "", "UNKNOWN", "nowrap"),
     colorOnSurfaceHigh: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
     titleFont: FtCssVariableFactory.external(designSystemVariables.titleFont, "Design system"),
     contentFont: FtCssVariableFactory.external(designSystemVariables.contentFont, "Design system"),
@@ -60,7 +62,7 @@ export const styles = css `
     }
 
     .column-title {
-        white-space: nowrap;
+        white-space: ${FtFilterableTableCssVariables.columnTitleWhiteSpace};
         text-transform: uppercase;
         margin-right: .5rem;
         font-weight: normal;
@@ -71,6 +73,7 @@ export const styles = css `
     .column-filter {
         flex-grow: 1;
         flex-shrink: 0;
+        ${setVariable(FtSelectCssVariables.optionsHeight, "300px")};
     }
 
     .column-filter:not(:empty) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filterable-table",
-  "version": "1.1.45",
+  "version": "1.1.46",
   "description": "A dynamic table with filters",
   "keywords": [
     "Lit"
@@ -22,11 +22,11 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@fluid-topics/ft-button": "1.1.45",
-    "@fluid-topics/ft-select": "1.1.45",
-    "@fluid-topics/ft-text-field": "1.1.45",
-    "@fluid-topics/ft-wc-utils": "1.1.45",
+    "@fluid-topics/ft-button": "1.1.46",
+    "@fluid-topics/ft-select": "1.1.46",
+    "@fluid-topics/ft-text-field": "1.1.46",
+    "@fluid-topics/ft-wc-utils": "1.1.46",
     "lit": "3.1.0"
   },
-  "gitHead": "6f166986bd8187f17e3d5a70f366596807be03c1"
+  "gitHead": "023f346e70fcbd9980c41b0c7ede0c199ca699bc"
 }