Make demos sortable

mar10 · Aug 4, 2024 · ba380f6 · ba380f6
1 parent 244200c
commit ba380f6
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,12 @@ First release.
 > This section will be removed after the beta phase. <br>
 > Note that semantic versioning rules are not strictly followed during this phase.
 
+- v0.11.0: BREAKING
+  Renamed `tree.options.resizableColumns` to `columnsResizable`.
 - v0.11.0: Add support for icon buttons in column headers (menu, sort, filter).
+- v0.11.0: Add `tree.options.columnsSortable` and `ColumnDefinition.sortable`.
+- v0.11.0: Add `tree.options.columnsFilerable` and `ColumnDefinition.filterable`.
+- v0.11.0: Add `tree.options.columnsMenu` and `ColumnDefinition.menu`.
 - v0.11.0: Add `tree.sortByProperty()`.
 - v0.11.0: Add `util.rotate()`.
 - v0.11.0: Migrate documentation from docsify to MkDocs.

diff --git a/docs/demo/demo-custom.js b/docs/demo/demo-custom.js
@@ -27,7 +27,7 @@ new mar10.Wunderbaum({
     },
     { id: "description", title: "Details", width: "*" },
   ],
-  resizableColumns: true,
+  columnsResizable: true,
   types: {
     category: { colspan: true },
     electronics: { icon: "bi bi-cpu" },

diff --git a/docs/demo/demo-editable.js b/docs/demo/demo-editable.js
@@ -28,8 +28,8 @@ new mar10.Wunderbaum({
   // source: "../assets/fixture_department_1k_3_6_p.json",
   source:
     // "../assets/fixture_department_1k_3_6_flat_comp.json",
-    "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/fixture_department_1k_3_6_flat_comp.json",
-  // "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/fixture_department_1k_3_6_p.json",
+    // "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/fixture_department_1k_3_6_flat_comp.json",
+    "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/fixture_department_1k_3_6_p.json",
   types: {
     department: { icon: "bi bi-diagram-3", colspan: true },
     role: { icon: "bi bi-microsoft-teams", colspan: true },
@@ -43,23 +43,20 @@ new mar10.Wunderbaum({
       title: "Title",
       id: "*",
       width: "250px",
-      sortable: true,
     },
     {
       title: "Age",
       id: "age",
       width: "50px",
       classes: "wb-helper-end",
       // "html": "<input type=number min=0 tabindex='-1'>",
-      sortable: true,
     },
     {
       title: "Date",
       id: "date",
       width: "100px",
       classes: "wb-helper-end",
       // "html": '<input type=date tabindex="-1">',
-      sortable: true,
     },
     {
       title: "Status",
@@ -70,26 +67,25 @@ new mar10.Wunderbaum({
       //     <option value="h">Happy</option>
       //     <option value="s">Sad</option>
       //     </select>`
-      sortable: true,
     },
     {
       title: "Avail.",
       id: "avail",
-      width: "70px",
+      width: "80px",
       classes: "wb-helper-center",
       // "html": '<input type=checkbox tabindex="-1">',
-      sortable: true,
     },
     {
       title: "Remarks",
       id: "remarks",
       width: "*",
       // "html": "<input type=text tabindex='-1'>",
-      sortable: true,
+
       menu: true,
     },
   ],
-  resizableColumns: true,
+  columnsResizable: true,
+  columnsSortable: true,
 
   edit: {
     trigger: ["clickActive", "F2"], // "macEnter"],
@@ -120,6 +116,12 @@ new mar10.Wunderbaum({
   init: (e) => {},
   // load: function (e) {
   // },
+  buttonClick: function (e) {
+    console.log(e.type, e);
+    if (e.command === "sort") {
+      e.tree.sortByProperty({ colId: e.info.colId, updateColInfo: true });
+    }
+  },
   change: function (e) {
     const util = e.util;
     const node = e.node;

diff --git a/docs/demo/demo-fixedcol.js b/docs/demo/demo-fixedcol.js
@@ -26,7 +26,7 @@ new mar10.Wunderbaum({
   // checkbox: true,
   // minExpandLevel: 1,
   fixedCol: true,
-  // resizableColumns: true,
+  // columnsResizable: true,
   navigationModeOption: "cell",
   edit: {
     trigger: ["clickActive", "F2", "macEnter"],

diff --git a/docs/demo/demo-grid.js b/docs/demo/demo-grid.js
@@ -29,9 +29,24 @@ new mar10.Wunderbaum({
   types: {},
   columns: [
     { id: "*", title: "Product", width: "250px" },
-    { id: "author", title: "Author", width: 1, minWidth: "100px" },
-    { id: "year", title: "Year", width: "50px", classes: "wb-helper-end" },
-    { id: "qty", title: "Qty", width: "50px", classes: "wb-helper-end" },
+    {
+      id: "author",
+      title: "Author",
+      width: 1,
+      minWidth: "100px",
+    },
+    {
+      id: "year",
+      title: "Year",
+      width: "50px",
+      classes: "wb-helper-end",
+    },
+    {
+      id: "qty",
+      title: "Qty",
+      width: "50px",
+      classes: "wb-helper-end",
+    },
     {
       id: "price",
       title: "Price ($)",
@@ -41,7 +56,8 @@ new mar10.Wunderbaum({
     // In order to test horizontal scrolling, we need a fixed or at least minimal width:
     { id: "details", title: "Details", width: 3, minWidth: "200px" },
   ],
-  resizableColumns: true,
+  columnsResizable: true,
+  columnsSortable: true,
   dnd: {
     dragStart: (e) => {
       if (e.node.type === "folder") {
@@ -102,6 +118,12 @@ new mar10.Wunderbaum({
     console.log(e.type, e);
     // e.tree.addChildren({ title: "custom1", classes: "wb-error" });
   },
+  buttonClick: function (e) {
+    console.log(e.type, e);
+    if (e.command === "sort") {
+      e.tree.sortByProperty({ colId: e.info.colId, updateColInfo: true });
+    }
+  },
   lazyLoad: function (e) {
     console.log(e.type, e);
     // return { url: "../assets/ajax-lazy-products.json" };

diff --git a/docs/demo/demo-large.js b/docs/demo/demo-large.js
@@ -34,21 +34,22 @@ new mar10.Wunderbaum({
     music: { icon: "bi bi-disc" },
     phone: { icon: "bi bi-phone" },
   },
-  columns: [
-    { id: "*", title: "Product", width: "250px" },
-    { id: "author", title: "Author", width: "200px" },
-    { id: "year", title: "Year", width: "50px", classes: "wb-helper-end" },
-    { id: "qty", title: "Qty", width: "100px", classes: "wb-helper-end" },
-    {
-      id: "price",
-      title: "Price ($)",
-      width: "80px",
-      classes: "wb-helper-end",
-    },
-    // In order to test horizontal scrolling, we need a fixed or at least minimal width:
-    { id: "details", title: "Details", width: "*", minWidth: "600px" },
-  ],
-  resizableColumns: true,
+  // columns: [
+  //   { id: "*", title: "Product", width: "250px" },
+  //   { id: "author", title: "Author", width: "200px" },
+  //   { id: "year", title: "Year", width: "50px", classes: "wb-helper-end" },
+  //   { id: "qty", title: "Qty", width: "100px", classes: "wb-helper-end" },
+  //   {
+  //     id: "price",
+  //     title: "Price ($)",
+  //     width: "80px",
+  //     classes: "wb-helper-end",
+  //   },
+  //   // In order to test horizontal scrolling, we need a fixed or at least minimal width:
+  //   { id: "details", title: "Details", width: "*", minWidth: "600px" },
+  // ],
+  columnsResizable: true,
+  columnsSortable: true,
   dnd: {
     dragStart: (e) => {
       if (e.node.type === "folder") {

diff --git a/docs/demo/demo-readonly.js b/docs/demo/demo-readonly.js
@@ -31,7 +31,7 @@ new mar10.Wunderbaum({
   },
   columns: [
     { title: "Title", id: "*", width: "250px" },
-    { title: "Age", id: "age", width: "40px", classes: "wb-helper-end" },
+    { title: "Age", id: "age", width: "60px", classes: "wb-helper-end" },
     { title: "Date", id: "date", width: "90px", classes: "wb-helper-end" },
     {
       title: "Status",
@@ -42,16 +42,23 @@ new mar10.Wunderbaum({
     {
       title: "Avail.",
       id: "avail",
-      width: "50px",
+      width: "60px",
       classes: "wb-helper-center",
     },
     { title: "Remarks", id: "remarks", width: "*" },
   ],
-  resizableColumns: true,
+  columnsResizable: true,
+  columnsSortable: true,
   filter: {
     connectInput: "input#filterQuery",
   },
   init: (e) => {},
+  buttonClick: function (e) {
+    console.log(e.type, e);
+    if (e.command === "sort") {
+      e.tree.sortByProperty({ colId: e.info.colId, updateColInfo: true });
+    }
+  },
   render: function (e) {
     // console.log(e.type, e.isNew, e);
     const node = e.node;

diff --git a/docs/tutorial/tutorial_grid.md b/docs/tutorial/tutorial_grid.md
@@ -271,11 +271,12 @@ const tree = new Wunderbaum({
   columns: [
     {
       title: "Title",
-      sortable: true,
+      sortable: true, // or set in column definition
       ...
     },
     ...
   ],
+  columnsSortable: true, // or set in column definition
   buttonClick: (e) => {
     if (e.command === "sort") {
       e.tree.sortByProperty({ colId: e.info.colId, updateColInfo: true });

diff --git a/src/types.ts b/src/types.ts
@@ -369,7 +369,8 @@ export interface ColumnDefinition {
    */
   minWidth?: string | number;
   /** Allow user to resize the column.
-   * Default: false.
+   * @default false (or global tree option `columnsSortable`)
+   * @see {@link WunderbaumOptions.columnsResizable}.
    * @since 0.10.0
    */
   resizable?: boolean;
@@ -379,6 +380,7 @@ export interface ColumnDefinition {
   customWidthPx?: number;
   /** Display a 'filter' button in the column header. Default: false. <br>
    * Note: The actual filtering must be implemented in the `buttonClick()` event.
+   * @default false (or global tree option `columnsFilterable`)
    * @since 0.11.0
    */
   filterable?: boolean;
@@ -389,6 +391,8 @@ export interface ColumnDefinition {
   filterActive?: boolean;
   /** Display a 'sort' button in the column header. Default: false. <br>
    * Note: The actual sorting must be implemented in the `buttonClick()` event.
+   * @default false (or global tree option `columnsSortable`)
+   * @see {@link WunderbaumOptions.columnsSortable}.
    * @since 0.11.0
    */
   sortable?: boolean;
@@ -400,6 +404,8 @@ export interface ColumnDefinition {
   sortOrder?: SortOrderType;
   /** Display a menu icon that may open a context menu for this column.
    * Note: The actual functionality must be implemented in the `buttonClick()` event.
+   * @default false (or global tree option `columnsMenu`)
+   * @see {@link WunderbaumOptions.columnsMenu}.
    * @since 0.11.0
    */
   menu?: boolean;

diff --git a/src/wb_ext_grid.ts b/src/wb_ext_grid.ts
@@ -29,7 +29,7 @@ export class GridExtension extends WunderbaumExtension<GridOptionsType> {
         const allow =
           colDef &&
           this.tree.element.contains(e.dragElem) &&
-          toBool(colDef.resizable, tree.options.resizableColumns, false);
+          toBool(colDef.resizable, tree.options.columnsResizable, false);
 
         // this.tree.log("dragstart", colDef, e, info);
 

diff --git a/src/wb_options.ts b/src/wb_options.ts
@@ -218,12 +218,30 @@ export interface WunderbaumOptions {
    * Default: false
    */
   fixedCol?: boolean;
+  /**
+   * Default value for ColumnDefinition.filterable option.
+   * Default: false
+   * @since 0.11.0
+   */
+  columnsFilterable?: boolean;
+  /**
+   * Default value for ColumnDefinition.menu option.
+   * Default: false
+   * @since 0.11.0
+   */
+  columnsMenu?: boolean;
   /**
    * Default value for ColumnDefinition.resizable option.
    * Default: false
    * @since 0.10.0
    */
-  resizableColumns?: boolean;
+  columnsResizable?: boolean;
+  /**
+   * Default value for ColumnDefinition.sortable option.
+   * Default: false
+   * @since 0.11.0
+   */
+  columnsSortable?: boolean;
 
   // --- Selection ---
   /**

diff --git a/src/wunderbaum.ts b/src/wunderbaum.ts
@@ -2178,12 +2178,12 @@ export class Wunderbaum {
       let addMarkup = "";
       // NOTE: we use CSS float: right to align icons, so they must be added in
       // reverse order
-      if (col.menu) {
+      if (util.toBool(col.menu, this.options.columnsMenu, false)) {
         const iconClass = "wb-col-icon-menu " + iconMap.colMenu;
         const icon = `<i data-command=menu class="wb-col-icon ${iconClass}"></i>`;
         addMarkup += icon;
       }
-      if (col.sortable) {
+      if (util.toBool(col.sortable, this.options.columnsSortable, false)) {
         let iconClass = "wb-col-icon-sort " + iconMap.colSortable;
         if (col.sortOrder) {
           iconClass += `wb-col-sort-${col.sortOrder}`;
@@ -2193,7 +2193,7 @@ export class Wunderbaum {
         const icon = `<i data-command=sort class="wb-col-icon ${iconClass}"></i>`;
         addMarkup += icon;
       }
-      if (col.filterable) {
+      if (util.toBool(col.filterable, this.options.columnsFilterable, false)) {
         colElem.classList.toggle("wb-col-filter", !!col.filterActive);
         let iconClass = "wb-col-icon-filter " + iconMap.colFilter;
         if (col.filterActive) {
@@ -2204,7 +2204,7 @@ export class Wunderbaum {
       }
       // Add resizer to all but the last column
       if (i < colCount - 1) {
-        if (util.toBool(col.resizable, this.options.resizableColumns, false)) {
+        if (util.toBool(col.resizable, this.options.columnsResizable, false)) {
           addMarkup +=
             '<span class="wb-col-resizer wb-col-resizer-active"></span>';
         } else {

diff --git a/test/playground.js b/test/playground.js
@@ -73,7 +73,7 @@ const tree = new Wunderbaum({
   // source: "generator/ajax_1k_3_54 t_c.json",
   // source: "generator/fixture_department_1k_3_6_flat_comp.json",
   // source: "generator/fixture_department_1k_3_6_comp.json",
-  resizableColumns: true,
+  columnsResizable: true,
 
   // source: "../docs/assets/ajax-tree-products.json",
   // source: