feat(Table): Set default max width for Tabulator columns (#722)

- Can be overridden by authoring globalCellSize or column width #721
WISE-Community · Aug 10, 2022 · aefcf17 · aefcf17
1 parent 19b94d5
commit aefcf17
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/src/assets/wise5/components/table/TabulatorData.ts b/src/assets/wise5/components/table/TabulatorData.ts
@@ -10,7 +10,10 @@ export class TabulatorData {
     const defaultOptions = {
       layout: 'fitDataTable',
       maxHeight: '500px',
-      reactiveData: true
+      reactiveData: true,
+      columnDefaults: {
+        maxWidth: 200
+      }
     };
     this.options = { ...defaultOptions, ...options };
   }
@@ -19,6 +22,7 @@ export class TabulatorData {
 export class TabulatorColumn {
   title: string;
   field: string;
+  maxWidth: number | boolean; // number of pixels or false for no
   width: number | string; // number of pixels or percent of table width (e.g. '20%')
   editor: string;
   editable: (cell: Tabulator.CellComponent) => boolean;

diff --git a/src/assets/wise5/components/table/tabulator-table/tabulator-table.component.scss b/src/assets/wise5/components/table/tabulator-table/tabulator-table.component.scss
@@ -4,6 +4,10 @@
 
   .tabulator-header {
     font-weight: 500;
+
+    .tabulator-col .tabulator-col-content .tabulator-col-title {
+      white-space: normal;
+    }
   }
 }
 

diff --git a/src/assets/wise5/components/table/tabulatorDataService.ts b/src/assets/wise5/components/table/tabulatorDataService.ts
@@ -41,6 +41,7 @@ export class TabulatorDataService {
     const width: number = this.getTabulatorColumnWidth(columnDef, globalCellSize);
     if (width) {
       column.width = width;
+      column.maxWidth = false;
     }
     return column;
   }