add custom column example

lineupjs · Mar 25, 2020 · acaca1f · acaca1f
1 parent 40bbd8e
commit acaca1f
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git a/demo/customColumn.html b/demo/customColumn.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>LineUp Builder Test</title>
+
+  <link href="./LineUpJS.css" rel="stylesheet">
+  <link href="./demo.css" rel="stylesheet">
+  <style>
+    .lu-action-my-action::before {
+      content: "My";
+    }
+  </style>
+</head>
+<body>
+<script src="./LineUpJS.js"></script>
+
+<script>
+  window.onload = function () {
+    const arr = [];
+    const cats = ['c1', 'c2', 'c3'];
+    for (let i = 0; i < 100; ++i) {
+      arr.push({
+        s: 'Row ' + i,
+        a: Math.random() * 10,
+        cat: cats[Math.floor(Math.random() * 3)],
+        d: new Date(Date.now() - Math.floor(Math.random() * 1000000000000))
+      });
+    }
+    const b = LineUpJS.builder(arr);
+
+    class MyStringColumn extends LineUpJS.StringColumn {
+
+    }
+    Reflect.decorate([
+      LineUpJS.toolbar('my')
+    ], MyStringColumn);
+
+    b.registerColumnType('my', MyStringColumn);
+    b.registerToolbarAction('my', {
+      title: 'My Action',
+      onClick: () => {
+        window.alert('clicked');
+      },
+      options: {
+        mode: 'menu+shortcut'
+      }
+    })
+
+    b.column({
+      type: 'my',
+      column: 's'
+    });
+
+    const lineup = b.build(document.body);
+  };
+</script>
+
+</body>
+</html>
diff --git a/src/config.ts b/src/config.ts
@@ -201,7 +201,7 @@ function resolveToolbarActions(col: Column, keys: string[], lookup: IToolbarLook
     if (lookup.hasOwnProperty(key)) {
       actions.push(<IToolbarAction>lookup[key]);
     } else {
-      console.warn('cannot find: ', col.desc.type, key);
+      console.warn(`cannot find toolbar action of type: "${col.desc.type}" with key "${key}"`);
     }
   });
   return actions;
@@ -214,7 +214,7 @@ function resolveToolbarDialogAddons(col: Column, keys: string[], lookup: IToolba
     if (lookup.hasOwnProperty(key)) {
       actions.push(<IToolbarDialogAddon>lookup[key]);
     } else {
-      console.warn('cannot find: ', col.desc.type, key);
+      console.warn(`cannot find toolbar dialog addon of type: "${col.desc.type}" with key "${key}"`);
     }
   });
   return actions;