@yanqirenshi/table.wbs 0.0.18 → 0.0.19

package/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "example",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["--prefix", "example", "start"],
+      "port": 3002
+    }
+  ]
+}

package/README.md

@@ -101,3 +101,105 @@ export const EDGES = [
     },
 ];
 ```
+
+### (3) CSV Download
+
+The download button in the controller offers three CSV export types out of the box: 階層 (hierarchy, indented by WBS level), フラット (flat), and データ (raw computed records, all fields).
+
+Each column can define a `value(d)` function to control what plain text goes into the 階層/フラット CSV cell (`contents` is JSX and isn't used for CSV). Columns without `value` fall back to `d[column.key]`, then `d._id`.
+
+```
+{
+    label: 'Name',
+    required: true,
+    value: (d) => d.label,
+    contents: (c, d) => {
+        return <span>{d.label}</span>;
+    },
+},
+```
+
+To keep the previous behavior of delegating the click to your own handler instead of the built-in dropdown, pass a `download` prop to `<WBSTable>`:
+
+```
+<WBSTable source={wbs_source}
+          columns={columns}
+          download={() => myOwnExport()}/>
+```
+
+### (4) Supporter
+
+`Supporter` bundles the cell renderers you would otherwise write by hand for every `contents`.
+Node-type paths and the link component are app concerns, so they are passed in through the constructor.
+
+```
+import WBSTable, { Supporter } from '@yanqirenshi/table.wbs';
+import { Link } from 'react-router-dom';
+
+const supporter = new Supporter({
+    paths:       { DB_TABLE: 'database/tables', SCREEN: 'screens' }, // keyed by _node_type (falls back to _class)
+    defaultPath: 'wbs',                                              // used when the type is not in paths
+    link:        (to, label, d) => <Link to={to}>{label}</Link>,     // omit to render the plain _id
+    marks:       { true: '○', false: '--' },                         // used by cellFlag
+    empty:       '',                                                 // shown for null / undefined values
+    indent:      '　',                                               // used by margin / withMargin
+});
+
+const columns = [
+    { label: 'ID',          leveling: true, required: true, contents: supporter.cellID },
+    { label: 'Name',        required: true,                 contents: supporter.cellLabel },
+    { label: 'Physical',    contents: supporter.cellByType({ DB_TABLE: supporter.cellCoreValue('physical_name') }) },
+    { label: 'Use',         contents: supporter.cellFlag('use') },
+    { label: 'Description', contents: supporter.cellDescription },
+];
+```
+
+| method | returns |
+| --- | --- |
+| `cellID(c, d)` | `link(to, d._id, d)` when `link` is set, otherwise `d._id` |
+| `cellIDNotLink(c, d)` | `d._id` |
+| `cellLabel(c, d)` | `d.label` |
+| `cellDescription(c, d)` | `d.description` |
+| `cellValue(key)` | a `contents` that returns `d[key]` |
+| `cellCoreValue(key)` | a `contents` that returns `d._core[key]` |
+| `cellFlag(key, marks?)` | a `contents` that shows `marks.true` when `d[key]` (or `d._core[key]`) is `true`, else `marks.false` |
+| `cellByType(table, fallback?)` | a `contents` that picks `table[_node_type]`, falling back to `cellLabel` |
+| `withMargin(contents)` | wraps a `contents` with a `margin(d._level)` indent (for columns without `leveling`) |
+| `margin(level)` / `path(d)` / `to(d)` | the building blocks above |
+
+### (5) Column width (Min / Max)
+
+Each column can have a minimum and maximum width in px. Set them in the column definition, or let users change them at runtime from the **Columns** panel (the Width cell has Min and Max inputs).
+
+```
+{
+    label: 'Description',
+    width: { min: 200, max: 400 },   // either side is optional
+    contents: (c, d) => d.description,
+},
+```
+
+`max` is applied as the column's `width` on the `<th>` and as `max-width` on a wrapper `<div>` inside each cell, so the column stays at `max` and long text wraps. The table's leftover width goes to the columns without `max`; when every visible column has one, the table stops stretching to the container width. A `leveling` column cannot shrink below the room its indent cells and caret need.
+
+### (6) Row selection
+
+Pass `selection` to make rows clickable. Selected rows get a `wbs-selected` class and a `#F2F2B0` background (text color is left as is). Override the background with `style.selected`:
+
+```
+const style_table = { selected: { backgroundColor: '#ffe' } };
+```
+
+```
+<WBSTable source={wbs_source}
+          columns={columns}
+          selection="multiple"                       // 'single' | 'multiple' (true means 'single')
+          onSelect={(records, ids, clicked) => ...}/>  // called after every toggle
+```
+
+| prop | description |
+| --- | --- |
+| `selection` | `'single'` (one row at a time, click again to clear) or `'multiple'` (toggle each row). Omit or `false` to disable. |
+| `onSelect(records, ids, clicked)` | Called after every click with the selected records (in table order), their `_id`s, and the record that was clicked. |
+| `selected` | Optional array of `_id`s. When given, the table is *controlled*: it renders exactly these rows as selected and leaves updating them to your `onSelect`. |
+
+Clicking the collapse caret on a WBS row does not change the selection.

package/dist/Core.js

@@ -9,6 +9,14 @@ var _deepmerge = _interopRequireDefault(require("deepmerge"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -57,6 +65,10 @@ var Core = /*#__PURE__*/function () {
         label: 'col-' + (i + 1),
         required: false,
         visible: true,
+        width: {
+          min: null,
+          max: null
+        },
         contents: function contents(c, d) {
           return d._id;
         }
@@ -111,6 +123,90 @@ var Core = /*#__PURE__*/function () {
 
       return tmp;
     }
+    /* **************************************************************** *
+     *  Width                                                           *
+     * **************************************************************** */
+    // key は 'min' か 'max'。v は px の数値。空文字・null・NaN・0 以下は未設定にする。
+
+  }, {
+    key: "changeColumnWidth",
+    value: function changeColumnWidth(number, key, v, columns) {
+      var n = v === null || v === undefined || v === '' ? null : Number(v);
+      var value = n === null || Number.isNaN(n) || n <= 0 ? null : n;
+      return columns.map(function (d) {
+        if (d.number !== number) return d;
+        return _objectSpread(_objectSpread({}, d), {}, {
+          width: _objectSpread(_objectSpread({}, d.width || {}), {}, _defineProperty({}, key, value))
+        });
+      });
+    } // th に当てるスタイルを返す。
+    // max を列の width として明示すると、テーブルの余り幅は幅指定のない列に配られ、
+    // この列は max より広がらなくなる。
+
+  }, {
+    key: "widthCellStyle",
+    value: function widthCellStyle(column) {
+      var w = column.width || {};
+      return w.max ? {
+        width: w.max
+      } : {};
+    } // 表示中の列がすべて max を持つと余り幅の行き先がないので、
+    // その場合はテーブルを横幅いっぱいに広げない。
+
+  }, {
+    key: "fitsFullWidth",
+    value: function fitsFullWidth(columns) {
+      return !columns.every(function (c) {
+        return c.width && c.width.max;
+      });
+    } // セルの中身を包む div に当てるスタイルを返す。
+    // table の td は max-width が効かないので、中の div で幅を抑える。
+
+  }, {
+    key: "widthStyle",
+    value: function widthStyle(column) {
+      var w = column.width || {};
+      var out = {};
+      if (w.min) out.minWidth = w.min;
+
+      if (w.max) {
+        out.maxWidth = w.max;
+        out.overflowWrap = 'break-word';
+      }
+
+      return out;
+    }
+    /* **************************************************************** *
+     *  selection                                                       *
+     * **************************************************************** */
+    // selected: { [_id]: true } 形式。mode は 'single' か 'multiple'。
+
+  }, {
+    key: "toggleSelected",
+    value: function toggleSelected(_id, selected, mode) {
+      if (mode === 'multiple') {
+        var tmp = _objectSpread({}, selected);
+
+        if (tmp[_id]) delete tmp[_id];else tmp[_id] = true;
+        return tmp;
+      }
+
+      return selected[_id] ? {} : _defineProperty({}, _id, true);
+    }
+  }, {
+    key: "selectedIds",
+    value: function selectedIds(selected) {
+      return Object.keys(selected).map(function (k) {
+        return k * 1;
+      });
+    }
+  }, {
+    key: "selectedRecords",
+    value: function selectedRecords(selected, records) {
+      return records.filter(function (d) {
+        return selected[d._id];
+      });
+    }
     /* **************************************************************** *
      *  filter                                                          *
      * **************************************************************** */
@@ -144,7 +240,9 @@ var Core = /*#__PURE__*/function () {
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var rec = _step.value;
-          if (rec._class === "WORKPACKAGE" && !this.filterWp(rec, filter_wp)) continue;
+          if (rec._class === "WORKPACKAGE" && !this.filterWp(rec, filter_wp)) continue; // 閉じた祖先の配下にいる行は、その行自身が閉じていても表示しない。
+
+          if (lev !== null && rec._level > lev) continue;
 
           if (closed_wbs[rec._id]) {
             lev = rec._level;
@@ -152,7 +250,6 @@ var Core = /*#__PURE__*/function () {
             continue;
           }
 
-          if (lev !== null && rec._level > lev) continue;
           lev = null;
           out.push(rec);
         }
@@ -169,33 +266,94 @@ var Core = /*#__PURE__*/function () {
      * **************************************************************** */
 
   }, {
-    key: "makeCSV",
-    value: function makeCSV() {
-      return {
-        headers: [{
-          label: "c1",
-          key: "firstname"
-        }, {
-          label: "c2",
-          key: "lastname"
-        }, {
-          label: "c3",
-          key: "email"
-        }],
-        data: [{
-          firstname: "AAA",
-          lastname: "BBB",
-          email: "CCC"
-        }, {
-          firstname: "AAA",
-          lastname: "BBB",
-          email: "CCC"
-        }, {
-          firstname: "AAA",
-          lastname: "BBB",
-          email: "CCC"
-        }]
-      };
+    key: "escapeCSVField",
+    value: function escapeCSVField(v) {
+      var s = v === null || v === undefined ? '' : String(v);
+      if (/[",\r\n]/.test(s)) return '"' + s.replace(/"/g, '""') + '"';
+      return s;
+    }
+  }, {
+    key: "toCSVString",
+    value: function toCSVString(headers, rows) {
+      var _this2 = this;
+
+      return [headers].concat(_toConsumableArray(rows)).map(function (row) {
+        return row.map(function (v) {
+          return _this2.escapeCSVField(v);
+        }).join(',');
+      }).join('\r\n');
+    }
+  }, {
+    key: "columnValue",
+    value: function columnValue(column, record) {
+      if (typeof column.value === 'function') return column.value(record);
+      if (column.key !== undefined && record[column.key] !== undefined) return record[column.key];
+      return record._id;
+    }
+  }, {
+    key: "makeCSVFlat",
+    value: function makeCSVFlat(columns, records) {
+      var _this3 = this;
+
+      var headers = columns.map(function (c) {
+        return c.label;
+      });
+      var rows = records.map(function (r) {
+        return columns.map(function (c) {
+          return _this3.columnValue(c, r);
+        });
+      });
+      return this.toCSVString(headers, rows);
+    }
+  }, {
+    key: "makeCSVHierarchy",
+    value: function makeCSVHierarchy(columns, records) {
+      var _this4 = this;
+
+      var headers = columns.map(function (c) {
+        return c.label;
+      });
+      var rows = records.map(function (r) {
+        return columns.map(function (c) {
+          var v = _this4.columnValue(c, r);
+
+          return c.leveling ? _this4.margin(r._level) + v : v;
+        });
+      });
+      return this.toCSVString(headers, rows);
+    }
+  }, {
+    key: "jsonStringifySafe",
+    value: function jsonStringifySafe(v) {
+      var seen = new WeakSet();
+      return JSON.stringify(v, function (key, val) {
+        if (val !== null && _typeof(val) === 'object') {
+          if (seen.has(val)) return '[Circular]';
+          seen.add(val);
+        }
+
+        return val;
+      });
+    }
+  }, {
+    key: "makeCSVData",
+    value: function makeCSVData(records) {
+      var _this5 = this;
+
+      var keys = records.reduce(function (set, r) {
+        Object.keys(r).forEach(function (k) {
+          return set.add(k);
+        });
+        return set;
+      }, new Set());
+      var headers = Array.from(keys);
+      var rows = records.map(function (r) {
+        return headers.map(function (k) {
+          var v = r[k];
+          return v !== null && _typeof(v) === 'object' ? _this5.jsonStringifySafe(v) : v;
+        });
+      });
+      return this.toCSVString(headers, rows);
     }
     /* **************************************************************** *
      *  utils                                                           *

package/dist/Supporter.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+/*
+ * Supporter
+ *
+ * 列定義の `contents` に渡す定型のセル描画関数をまとめたクラス。
+ * 利用側で毎回書いていたヘルパーをライブラリ側で提供する。
+ *
+ * ノード種別ごとのパスやリンクの描画方法はアプリ側の都合なので、
+ * コンストラクタのオプションで外から渡す。
+ *
+ *   const supporter = new Supporter({
+ *       paths: { DB_TABLE: 'database/tables', SCREEN: 'screens' },
+ *       defaultPath: 'wbs',
+ *       link: (to, label) => <Link to={to}>{label}</Link>,
+ *   });
+ *
+ *   const columns = [
+ *       { label: 'ID',   leveling: true, contents: supporter.cellID },
+ *       { label: 'Name', contents: supporter.cellLabel },
+ *       { label: 'Use',  contents: supporter.cellFlag('use') },
+ *   ];
+ */
+var Supporter = /*#__PURE__*/function () {
+  function Supporter(options) {
+    _classCallCheck(this, Supporter);
+
+    var opts = options || {};
+    this.indent = opts.indent !== undefined ? opts.indent : '　';
+    this.paths = opts.paths || {};
+    this.defaultPath = opts.defaultPath !== undefined ? opts.defaultPath : 'wbs';
+    this.link = typeof opts.link === 'function' ? opts.link : null;
+    this.marks = Object.assign({
+      "true": '○',
+      "false": '--'
+    }, opts.marks || {});
+    this.empty = opts.empty !== undefined ? opts.empty : ''; // contents にそのまま渡せるように this を束縛する。
+
+    this.cellID = this.cellID.bind(this);
+    this.cellIDNotLink = this.cellIDNotLink.bind(this);
+    this.cellLabel = this.cellLabel.bind(this);
+    this.cellDescription = this.cellDescription.bind(this);
+  }
+  /* **************************************************************** *
+   *  leveling                                                        *
+   * **************************************************************** */
+
+
+  _createClass(Supporter, [{
+    key: "margin",
+    value: function margin(level) {
+      var out = '';
+
+      for (var i = 0; i < level; i++) {
+        out += this.indent;
+      }
+
+      return out;
+    } // 任意の contents 関数を、階層レベル分インデントして返すように包む。
+
+  }, {
+    key: "withMargin",
+    value: function withMargin(contents) {
+      var _this = this;
+
+      return function (column, data, key) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, _this.margin(data._level || 0)), /*#__PURE__*/_react["default"].createElement("span", null, contents(column, data, key)));
+      };
+    }
+    /* **************************************************************** *
+     *  link                                                            *
+     * **************************************************************** */
+
+  }, {
+    key: "nodeType",
+    value: function nodeType(data) {
+      return data._node_type !== undefined ? data._node_type : data._class;
+    }
+  }, {
+    key: "path",
+    value: function path(data) {
+      var p = this.paths[this.nodeType(data)];
+      return p !== undefined ? p : this.defaultPath;
+    }
+  }, {
+    key: "to",
+    value: function to(data) {
+      return "/".concat(this.path(data), "/").concat(data._id);
+    }
+    /* **************************************************************** *
+     *  cells                                                           *
+     * **************************************************************** */
+
+  }, {
+    key: "cellID",
+    value: function cellID(column, data) {
+      if (!this.link) return this.cellIDNotLink(column, data);
+      return this.link(this.to(data), data._id, data);
+    }
+  }, {
+    key: "cellIDNotLink",
+    value: function cellIDNotLink(column, data) {
+      return data._id;
+    }
+  }, {
+    key: "cellLabel",
+    value: function cellLabel(column, data) {
+      return this.valueOrEmpty(data.label);
+    }
+  }, {
+    key: "cellDescription",
+    value: function cellDescription(column, data) {
+      return this.valueOrEmpty(data.description);
+    }
+    /* **************************************************************** *
+     *  cell factories                                                  *
+     * **************************************************************** */
+    // data[key] をそのまま返す contents 関数を作る。
+
+  }, {
+    key: "cellValue",
+    value: function cellValue(key) {
+      var _this2 = this;
+
+      return function (column, data) {
+        return _this2.valueOrEmpty(data[key]);
+      };
+    } // data._core[key] をそのまま返す contents 関数を作る。
+
+  }, {
+    key: "cellCoreValue",
+    value: function cellCoreValue(key) {
+      var _this3 = this;
+
+      return function (column, data) {
+        return _this3.valueOrEmpty(data._core ? data._core[key] : undefined);
+      };
+    } // 真偽値を marks（既定は ○ と --）で表示する contents 関数を作る。
+
+  }, {
+    key: "cellFlag",
+    value: function cellFlag(key, marks) {
+      var m = Object.assign({}, this.marks, marks || {});
+      return function (column, data) {
+        var v = data[key] !== undefined ? data[key] : data._core ? data._core[key] : undefined;
+        return v === true ? m["true"] : m["false"];
+      };
+    } // ノード種別ごとに contents 関数を切り替える。該当がなければ fallback を使う。
+
+  }, {
+    key: "cellByType",
+    value: function cellByType(table, fallback) {
+      var _this4 = this;
+
+      var fb = fallback || this.cellLabel;
+      return function (column, data, key) {
+        var f = table[_this4.nodeType(data)];
+
+        return (typeof f === 'function' ? f : fb)(column, data, key);
+      };
+    }
+    /* **************************************************************** *
+     *  utils                                                           *
+     * **************************************************************** */
+
+  }, {
+    key: "valueOrEmpty",
+    value: function valueOrEmpty(v) {
+      return v === null || v === undefined ? this.empty : v;
+    }
+  }]);
+
+  return Supporter;
+}();
+
+exports["default"] = Supporter;

package/dist/WBSTable.js

@@ -39,6 +39,21 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var core = new _Core["default"]();
 var colon = new _wnqiBig["default"]();
+var BOM = '';
+
+function downloadCSV(filename, csv) {
+  var blob = new Blob([BOM + csv], {
+    type: 'text/csv;charset=utf-8;'
+  });
+  var url = URL.createObjectURL(blob);
+  var a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
 
 function WBSTable(props) {
   var _useState = (0, _react.useState)(core.makeColumns(props.columns)),
@@ -76,11 +91,24 @@ function WBSTable(props) {
       bilding = _useState14[0],
       setBilding = _useState14[1];
 
+  var _useState15 = (0, _react.useState)({}),
+      _useState16 = _slicedToArray(_useState15, 2),
+      selected_inner = _useState16[0],
+      setSelectedInner = _useState16[1];
+
   var data = props.source;
   var options = props.options;
   var start_id = props.start_id;
-  var _download = props.download;
-  var style = props.style || {};
+  var download = props.download;
+  var style = props.style || {}; // 行の選択。selection は 'single' | 'multiple' | false(既定)。
+  // selected が渡されたときは controlled として扱い、内部状態は使わない。
+
+  var selection = props.selection === true ? 'single' : props.selection || false;
+  var controlled = Array.isArray(props.selected);
+  var selected = controlled ? props.selected.reduce(function (o, id) {
+    o[id] = true;
+    return o;
+  }, {}) : selected_inner;
   (0, _react.useEffect)(function () {
     _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -124,7 +152,15 @@ function WBSTable(props) {
       row: {
         visible: function visible(number, v) {
           return setColumns(core.changeColumnsVisible(number, v, columns));
-        }
+        },
+        width: function width(number, key, v) {
+          return setColumns(core.changeColumnWidth(number, key, v, columns));
+        },
+        select: selection ? function (record) {
+          var next = core.toggleSelected(record._id, selected, selection);
+          if (!controlled) setSelectedInner(next);
+          if (props.onSelect) props.onSelect(core.selectedRecords(next, records), core.selectedIds(next), record);
+        } : null
       },
       wbs: {
         "switch": function _switch(action, _id) {
@@ -137,8 +173,18 @@ function WBSTable(props) {
         return setFilterWp(v);
       }
     },
-    download: function download() {
-      if (_download) _download();
+    download: download ? function () {
+      return download();
+    } : {
+      hierarchy: function hierarchy() {
+        return downloadCSV('wbs-hierarchy.csv', core.makeCSVHierarchy(columns_filterd, records));
+      },
+      flat: function flat() {
+        return downloadCSV('wbs-flat.csv', core.makeCSVFlat(columns_filterd, records));
+      },
+      data: function data() {
+        return downloadCSV('wbs-data.csv', core.makeCSVData(records));
+      }
     }
   };
   var style_loading = {
@@ -152,8 +198,7 @@ function WBSTable(props) {
     open: chooser_column,
     visible_wp: visible_wp,
     filter_wp: filter_wp,
-    callbacks: callbacks,
-    csv: core.makeCSV()
+    callbacks: callbacks
   }), chooser_column && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       marginBottom: 11
@@ -169,7 +214,7 @@ function WBSTable(props) {
       color: '#888'
     }
   }, "Waiting for ........")), !bilding && /*#__PURE__*/_react["default"].createElement("table", {
-    className: "table is-fullwidth is-striped is-narrow is-hoverable",
+    className: 'table is-striped is-narrow is-hoverable' + (core.fitsFullWidth(columns_filterd) ? ' is-fullwidth' : ''),
     style: style
   }, /*#__PURE__*/_react["default"].createElement(Comps.THead, {
     columns: columns_filterd,
@@ -182,6 +227,8 @@ function WBSTable(props) {
     callbacks: callbacks,
     visible_wp: visible_wp,
     closed_wbs: closed_wbs,
+    selected: selected,
+    style_selected: style.selected,
     filter_wp: filter_wp,
     style: style.body
   })));