@kineticdata/react 6.0.0 → 6.0.1

package/lib/components/table/Table.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateTable = exports.generateColumns = exports.extractColumnComponents = exports.buildTableHeaderRow = exports.buildTableHeaderCell = exports.buildTableHeader = exports.buildTableFooterRow = exports.buildTableFooterCells = exports.buildTableFooter = exports.buildTableBodyRows = exports.buildTableBodyCells = exports.buildTableBody = exports.buildTable = exports.Table = void 0;
+exports.sortColumns = exports.getToggleableColumns = exports.generateTable = exports.generateColumns = exports.extractColumnComponents = exports.buildTableHeaderRow = exports.buildTableHeaderCell = exports.buildTableHeader = exports.buildTableFooterRow = exports.buildTableFooterCells = exports.buildTableFooter = exports.buildTableBodyRows = exports.buildTableBodyCells = exports.buildTableBody = exports.buildTable = exports.Table = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
@@ -46,7 +46,10 @@ var TableComponent = function TableComponent(props) {
       _filterFormKey = props.filterFormKey,
       count = props.count,
       extraData = props.extraData;
-    var table = buildTable(props);
+    var columnControl = buildColumnControl(props);
+    var table = buildTable((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+      columnControl: columnControl
+    }));
     var filter = components.FilterForm ? buildFilterForm(props) : buildFilterLayout(props);
     var pagination = buildPaginationControl(props);
     return children({
@@ -56,6 +59,7 @@ var TableComponent = function TableComponent(props) {
       filter: filter,
       appliedFilters: appliedFilters,
       pagination: pagination,
+      columnControl: columnControl,
       initializing: initializing,
       loading: loading,
       rows: rows,
@@ -283,6 +287,44 @@ var buildPaginationControl = function buildPaginationControl(props) {
     extraData: extraData
   });
 };
+var getToggleableColumns = function getToggleableColumns(columns, columnSet, tableKey) {
+  return columns.reduce(function (list, column) {
+    var label = column.get('columnLabel') && column.get('columnLabel').trim() || column.get('title') && column.get('title').trim();
+    // Include all columns that have a columnLabel or title, and are toggleable
+    // or are in the initial columnSet
+    if (label && (column.get('toggleable') || columnSet.includes(column.get('value')))) {
+      return list.push((0, _immutable.Map)({
+        value: column.get('value'),
+        label: label,
+        checked: columnSet.includes(column.get('value')),
+        // Only enable the column toggle if it's toggleable, so that any
+        // non-toggleable columns that are in the initial column set will be
+        // shown but disabled in the control
+        enabled: !!column.get('toggleable'),
+        toggle: !!column.get('toggleable') ? onToggleColumn(tableKey, column.get('value')) : undefined
+      }));
+    }
+    return list;
+  }, (0, _immutable.List)());
+};
+exports.getToggleableColumns = getToggleableColumns;
+var buildColumnControl = function buildColumnControl(props) {
+  var tableKey = props.tableKey,
+    columns = props.columns,
+    columnSet = props.columnSet,
+    components = props.components,
+    renderOptions = props.renderOptions,
+    tableOptions = props.tableOptions,
+    extraData = props.extraData;
+  var ColumnControl = components.ColumnControl;
+  return /*#__PURE__*/_react["default"].createElement(ColumnControl, {
+    tableKey: tableKey,
+    columns: getToggleableColumns(columns, columnSet, tableKey),
+    renderOptions: renderOptions,
+    tableOptions: tableOptions,
+    extraData: extraData
+  });
+};
 var buildTable = function buildTable(props) {
   var TableLayout = props.components.TableLayout;
   var header = buildTableHeader(props);
@@ -338,13 +380,15 @@ var buildTableHeaderCell = function buildTableHeaderCell(props) {
       columnComponents = props.columnComponents,
       renderOptions = props.renderOptions,
       tableOptions = props.tableOptions,
-      appliedFilters = props.appliedFilters;
+      appliedFilters = props.appliedFilters,
+      columnControl = props.columnControl;
     var HeaderCell = columnComponents.getIn([column.get('value'), 'HeaderCell'], components.HeaderCell);
     var sorting = column === props.sortColumn && props.sortDirection;
     var sortable = props.sortable && column.get('sortable');
     return /*#__PURE__*/_react["default"].createElement(KeyWrapper, {
       key: "column-".concat(index)
     }, /*#__PURE__*/_react["default"].createElement(HeaderCell, {
+      columnControl: columnControl,
       onSortColumn: onSortColumn(tableKey, column),
       title: column.get('title'),
       renderOptions: renderOptions,
@@ -517,6 +561,14 @@ var onSortColumn = function onSortColumn(tableKey, column) {
     });
   };
 };
+var onToggleColumn = function onToggleColumn(tableKey, column) {
+  return function () {
+    return (0, _store.dispatch)('TOGGLE_COLUMN', {
+      tableKey: tableKey,
+      column: column
+    });
+  };
+};
 var mapStateToProps = function mapStateToProps() {
   return function (state, props) {
     return state.getIn(['tables', props.tableKey], (0, _immutable.Map)()).toObject();
@@ -541,13 +593,41 @@ var TableImpl = (0, _recompose.compose)((0, _store.connect)(mapStateToProps), (0
 var generateColumns = function generateColumns(columns) {
   var addColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var alterColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return (0, _immutable.List)(addColumns).concat(columns).map(function (c) {
+  return (0, _immutable.List)(columns).concat(addColumns).map(function (c) {
     return (0, _immutable.Map)((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, c), alterColumns[c.value]), {}, {
       value: c.value
     }));
   });
 };
 exports.generateColumns = generateColumns;
+var sortColumns = function sortColumns(columns, columnSet) {
+  return columns
+  // First sort columns by the columnOrder value if provided
+  .sortBy(function (column) {
+    return column.get('columnOrder') === 'first' ? -1 : column.get('columnOrder') === 'last' ? 1 : 0;
+  })
+  // Next reduce the columns list into a list of groups, starting a new group
+  // each time we get to a column that's in the columnSet. This will result in
+  // each group having at most one columnSet column, and that column will be
+  // the first one in the group.
+  .reduce(function (list, column) {
+    return columnSet.includes(column.get('value')) ? list.push((0, _immutable.List)([column])) : list.update(-1, function (group) {
+      return group ? group.push(column) : (0, _immutable.List)([column]);
+    });
+  }, (0, _immutable.List)())
+  // Then sort the groups, taking the first column from each group, finding
+  // its index in the column set, and using that index as a sort value. Any
+  // groups without a columnSet column will be sorted to the end.
+  .sortBy(function (group) {
+    var columnSetIndex = columnSet.findIndex(function (c) {
+      return c === group.getIn([0, 'value']);
+    });
+    return columnSetIndex >= 0 ? columnSetIndex : columnSet.size + 1;
+  })
+  // Lastly flatten the groups back to a list of columns
+  .flatten(true);
+};
+exports.sortColumns = sortColumns;
 var extractColumnComponents = function extractColumnComponents(columns) {
   return columns.filter(function (c) {
     return c.has('components');
@@ -619,6 +699,7 @@ var generateTable = function generateTable(_ref4) {
       filterSet: props.filterSet,
       filterAutoFocus: props.filterAutoFocus,
       columnSet: props.columnSet,
+      columnSetOrder: props.columnSetOrder,
       pageSize: props.pageSize,
       defaultSortColumn: props.defaultSortColumn,
       defaultSortDirection: props.defaultSortDirection,
@@ -676,7 +757,7 @@ var Table = /*#__PURE__*/function (_Component) {
       var allColumns = columns.map(function (c) {
         return c.get('value');
       });
-      var columnSet = (0, _immutable.List)(this.props.columnSet ? typeof this.props.columnSet === 'function' ? this.props.columnSet(allColumns) : this.props.columnSet : allColumns).filter(function (c) {
+      var initialColumnSet = (0, _immutable.List)(this.props.columnSet ? typeof this.props.columnSet === 'function' ? this.props.columnSet(allColumns) : this.props.columnSet : allColumns).filter(function (c) {
         return columns.find(function (c2) {
           return c2.get('value') === c;
         });
@@ -686,8 +767,8 @@ var Table = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(TableImpl, Object.assign({}, _this2.props, {
           components: componentConfig.merge(_this2.props.components).toJS(),
           columnComponents: columnComponents,
-          columns: columns,
-          columnSet: columnSet,
+          columns: sortColumns(columns, initialColumnSet),
+          columnSet: initialColumnSet,
           tableKey: _this2.tableKey,
           auto: _this2.auto
         }), _this2.props.children);

package/lib/components/table/Table.redux.js

@@ -118,6 +118,7 @@ exports.generateInitialSortColumn = generateInitialSortColumn;
       data = _ref3$payload.data,
       dataSource = _ref3$payload.dataSource,
       columns = _ref3$payload.columns,
+      columnSet = _ref3$payload.columnSet,
       _ref3$payload$pageSiz = _ref3$payload.pageSize,
       pageSize = _ref3$payload$pageSiz === void 0 ? 25 : _ref3$payload$pageSiz,
       _ref3$payload$default = _ref3$payload.defaultSortColumn,
@@ -135,6 +136,7 @@ exports.generateInitialSortColumn = generateInitialSortColumn;
       tableOptions: tableOptions,
       columns: columns,
       rows: (0, _immutable.List)(),
+      columnSet: columnSet,
       initializing: true,
       loading: true,
       pageSize: pageSize,
@@ -158,45 +160,64 @@ exports.generateInitialSortColumn = generateInitialSortColumn;
       initialize: true
     }));
   },
-  SET_ROWS: function SET_ROWS(state, _ref4) {
+  TOGGLE_COLUMN: function TOGGLE_COLUMN(state, _ref4) {
     var _ref4$payload = _ref4.payload,
       tableKey = _ref4$payload.tableKey,
-      rows = _ref4$payload.rows,
-      data = _ref4$payload.data,
-      _ref4$payload$extraDa = _ref4$payload.extraData,
-      extraData = _ref4$payload$extraDa === void 0 ? null : _ref4$payload$extraDa,
-      nextPageToken = _ref4$payload.nextPageToken,
-      count = _ref4$payload.count,
-      _ref4$payload$error = _ref4$payload.error,
-      error = _ref4$payload$error === void 0 ? null : _ref4$payload$error;
+      column = _ref4$payload.column;
+    return state.updateIn(['tables', tableKey, 'columnSet'], function (columnSet) {
+      return state
+      // Get all columns
+      .getIn(['tables', tableKey, 'columns'])
+      // Filter to only columns that are toggleable or in the current
+      // columnSet, while toggling the current column if it's toggleable
+      .filter(function (c) {
+        return !c.get('toggleable') ? columnSet.includes(c.get('value')) : columnSet.includes(c.get('value')) ? c.get('value') !== column : c.get('value') === column;
+      })
+      // Map to columns values to get the new columnSet
+      .map(function (c) {
+        return c.get('value');
+      });
+    });
+  },
+  SET_ROWS: function SET_ROWS(state, _ref5) {
+    var _ref5$payload = _ref5.payload,
+      tableKey = _ref5$payload.tableKey,
+      rows = _ref5$payload.rows,
+      data = _ref5$payload.data,
+      _ref5$payload$extraDa = _ref5$payload.extraData,
+      extraData = _ref5$payload$extraDa === void 0 ? null : _ref5$payload$extraDa,
+      nextPageToken = _ref5$payload.nextPageToken,
+      count = _ref5$payload.count,
+      _ref5$payload$error = _ref5$payload.error,
+      error = _ref5$payload$error === void 0 ? null : _ref5$payload$error;
     return state.updateIn(['tables', tableKey], function (table) {
       return table && table.set('rows', rows).set('data', data).set('extraData', extraData).set('currentPageToken', nextPageToken).set('nextPageToken', null).set('count', count).set('error', error).set('initializing', false).set('loading', false);
     });
   },
-  NEXT_PAGE: function NEXT_PAGE(state, _ref5) {
-    var tableKey = _ref5.payload.tableKey;
+  NEXT_PAGE: function NEXT_PAGE(state, _ref6) {
+    var tableKey = _ref6.payload.tableKey;
     return state.updateIn(['tables', tableKey], function (tableData) {
       return isClientSide(tableData) ? clientSideNextPage(tableData) : serverSideNextPage(tableData);
     }).setIn(['tables', tableKey, 'error'], null);
   },
-  PREV_PAGE: function PREV_PAGE(state, _ref6) {
-    var tableKey = _ref6.payload.tableKey;
+  PREV_PAGE: function PREV_PAGE(state, _ref7) {
+    var tableKey = _ref7.payload.tableKey;
     return state.updateIn(['tables', tableKey], function (tableData) {
       return isClientSide(tableData) ? clientSidePrevPage(tableData) : serverSidePrevPage(tableData);
     }).setIn(['tables', tableKey, 'error'], null);
   },
-  GOTO_PAGE: function GOTO_PAGE(state, _ref7) {
-    var _ref7$payload = _ref7.payload,
-      tableKey = _ref7$payload.tableKey,
-      pageNumber = _ref7$payload.pageNumber;
+  GOTO_PAGE: function GOTO_PAGE(state, _ref8) {
+    var _ref8$payload = _ref8.payload,
+      tableKey = _ref8$payload.tableKey,
+      pageNumber = _ref8$payload.pageNumber;
     return state.updateIn(['tables', tableKey], function (tableData) {
       return isClientSide(tableData) ? clientSideGotoPage(tableData, pageNumber) : serverSideGotoPage(tableData, pageNumber);
     }).setIn(['tables', tableKey, 'error'], null);
   },
-  SORT_COLUMN: function SORT_COLUMN(state, _ref8) {
-    var _ref8$payload = _ref8.payload,
-      tableKey = _ref8$payload.tableKey,
-      column = _ref8$payload.column;
+  SORT_COLUMN: function SORT_COLUMN(state, _ref9) {
+    var _ref9$payload = _ref9.payload,
+      tableKey = _ref9$payload.tableKey,
+      column = _ref9$payload.column;
     return state.updateIn(['tables', tableKey], function (t) {
       var sortColumn = t.get('sortColumn');
       var sortDirection = t.get('sortDirection');
@@ -207,46 +228,46 @@ exports.generateInitialSortColumn = generateInitialSortColumn;
       .set('sortDirection', sortColumn === column ? sortDirection === 'asc' ? 'desc' : 'asc' : 'asc').set('sortColumn', column).set('error', null);
     });
   },
-  SET_FILTER: function SET_FILTER(state, _ref9) {
-    var _ref9$payload = _ref9.payload,
-      tableKey = _ref9$payload.tableKey,
-      filter = _ref9$payload.filter,
-      value = _ref9$payload.value;
+  SET_FILTER: function SET_FILTER(state, _ref10) {
+    var _ref10$payload = _ref10.payload,
+      tableKey = _ref10$payload.tableKey,
+      filter = _ref10$payload.filter,
+      value = _ref10$payload.value;
     return state.updateIn(['tables', tableKey], function (table) {
       return table.setIn(['filters', filter, 'value'], value).set('validFilters', evaluateValidFilters(table));
     });
   },
-  APPLY_FILTERS: function APPLY_FILTERS(state, _ref10) {
-    var tableKey = _ref10.payload.tableKey;
+  APPLY_FILTERS: function APPLY_FILTERS(state, _ref11) {
+    var tableKey = _ref11.payload.tableKey;
     return state.updateIn(['tables', tableKey], function (table) {
       return table.set('loading', true).set('appliedFilters', state.getIn(['tables', tableKey, 'filters'])).set('pageOffset', 0).set('currentPageToken', null).set('nextPageToken', null).set('pageTokens', (0, _immutable.List)()).set('error', null);
     });
   },
-  APPLY_FILTER_FORM: function APPLY_FILTER_FORM(state, _ref11) {
-    var _ref11$payload = _ref11.payload,
-      tableKey = _ref11$payload.tableKey,
-      appliedFilters = _ref11$payload.appliedFilters;
+  APPLY_FILTER_FORM: function APPLY_FILTER_FORM(state, _ref12) {
+    var _ref12$payload = _ref12.payload,
+      tableKey = _ref12$payload.tableKey,
+      appliedFilters = _ref12$payload.appliedFilters;
     return state.updateIn(['tables', tableKey], function (table) {
       return table.set('loading', true).set('appliedFilters', appliedFilters).set('pageOffset', 0).set('currentPageToken', null).set('nextPageToken', null).set('pageTokens', (0, _immutable.List)()).set('error', null);
     });
   },
-  REFETCH_TABLE_DATA: function REFETCH_TABLE_DATA(state, _ref12) {
-    var tableKey = _ref12.payload.tableKey;
+  REFETCH_TABLE_DATA: function REFETCH_TABLE_DATA(state, _ref13) {
+    var tableKey = _ref13.payload.tableKey;
     return state.hasIn(['tables', tableKey]) ? state.updateIn(['tables', tableKey], function (tableData) {
       return tableData.get('dataSource') ? tableData.set('loading', true).set('pageOffset', 0).set('currentPageToken', null).set('nextPageToken', null).set('pageTokens', (0, _immutable.List)()).set('data', null).set('error', null) : tableData;
     }) : state;
   },
-  CLEAR_TABLE_FILTERS: function CLEAR_TABLE_FILTERS(state, _ref13) {
-    var tableKey = _ref13.payload.tableKey;
+  CLEAR_TABLE_FILTERS: function CLEAR_TABLE_FILTERS(state, _ref14) {
+    var tableKey = _ref14.payload.tableKey;
     return state.setIn(['tables', tableKey, 'filters'], generateFilters(tableKey, state.getIn(['tables', tableKey, 'columns'])));
   },
-  CLEAR_SELECTED_FILTERS: function CLEAR_SELECTED_FILTERS(state, _ref14) {
-    var tableKey = _ref14.payload.tableKey;
+  CLEAR_SELECTED_FILTERS: function CLEAR_SELECTED_FILTERS(state, _ref15) {
+    var tableKey = _ref15.payload.tableKey;
     return state.setIn(['tables', tableKey, 'filters'], state.getIn(['tables', tableKey, 'appliedFilters']));
   }
 });
-function calculateRowsTask(_ref15) {
-  var payload = _ref15.payload;
+function calculateRowsTask(_ref16) {
+  var payload = _ref16.payload;
   return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
     var tableKey, tableData, response, rows, data, nextPageToken, count, error, extraData, onFetch;
     return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
@@ -334,8 +355,8 @@ function calculateRowsTask(_ref15) {
     }, _callee, null, [[0, 24]]);
   })();
 }
-function configureTableTask(_ref16) {
-  var payload = _ref16.payload;
+function configureTableTask(_ref17) {
+  var payload = _ref17.payload;
   return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2() {
     var filterForm, tableKey, initialFilterValues;
     return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
@@ -391,8 +412,8 @@ function pollingTask(tableKey) {
     }
   }, _marked);
 }
-function startPollingTask(_ref17) {
-  var payload = _ref17.payload;
+function startPollingTask(_ref18) {
+  var payload = _ref18.payload;
   return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee3() {
     var refreshInterval, tableKey;
     return (0, _regeneratorRuntime2["default"])().wrap(function _callee3$(_context4) {
@@ -416,8 +437,8 @@ function startPollingTask(_ref17) {
     }, _callee3);
   })();
 }
-function stopPollingTask(_ref18) {
-  var payload = _ref18.payload;
+function stopPollingTask(_ref19) {
+  var payload = _ref19.payload;
   return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee4() {
     var tableKey;
     return (0, _regeneratorRuntime2["default"])().wrap(function _callee4$(_context5) {
@@ -592,7 +613,7 @@ var calculateRows = function calculateRows(tableData) {
     return Promise.resolve({
       rows: rows,
       data: data,
-      count: rows.size
+      count: data.size
     });
   } else if (dataSource) {
     var paramData = {

package/lib/components/table/Table.test.js

@@ -626,6 +626,45 @@ describe('<Table />', function () {
         expect(column).not.toBeUndefined();
       });
     });
+    describe('#sortColumns', function () {
+      test('sort columns returns expected sort order', function () {
+        var columns = (0, _immutable.List)([(0, _immutable.Map)({
+          value: 'a',
+          title: 'A'
+        }), (0, _immutable.Map)({
+          value: 'b',
+          title: 'B'
+        }), (0, _immutable.Map)({
+          value: 'c',
+          title: 'C'
+        })]);
+        var columnSet = (0, _immutable.List)(['b', 'a']);
+        expect((0, _Table.sortColumns)(columns, columnSet).toJS().map(function (c) {
+          return c.value;
+        }).join('')).toBe('bca');
+      });
+    });
+    describe('#getToggleableColumns', function () {
+      test('toggleable columns list is correct', function () {
+        var columns = (0, _immutable.List)([(0, _immutable.Map)({
+          value: 'a',
+          title: 'A',
+          toggleable: true
+        }), (0, _immutable.Map)({
+          value: 'b',
+          title: 'B'
+        }), (0, _immutable.Map)({
+          value: 'c',
+          title: 'C'
+        }), (0, _immutable.Map)({
+          value: 'd'
+        })]);
+        var columnSet = (0, _immutable.List)(['a', 'b', 'd']);
+        expect((0, _Table.getToggleableColumns)(columns, columnSet, 'table-key').toJS().map(function (c) {
+          return c.value;
+        }).join('')).toBe('ab');
+      });
+    });
     xdescribe('#extractColumnComponents', function () {
       var columns, addColumns, alterColumns;
       beforeEach(function () {

package/lib/components/table/defaults/ColumnControl.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var ColumnControl = function ColumnControl(_ref) {
+  var columns = _ref.columns;
+  return /*#__PURE__*/_react["default"].createElement("div", null, columns.map(function (column) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      type: "checkbox",
+      id: "column-".concat(column.get('value')),
+      checked: column.get('checked'),
+      disabled: !column.get('enabled'),
+      onChange: column.get('toggle')
+    }), /*#__PURE__*/_react["default"].createElement("label", {
+      htmlFor: "column-".concat(column.get('value'))
+    }, column.get('label')));
+  }));
+};
+var _default = ColumnControl;
+exports["default"] = _default;

package/lib/components/table/defaults/index.js

@@ -21,6 +21,7 @@ var _FilterLayout = _interopRequireDefault(require("./FilterLayout"));
 var _BooleanFilter = _interopRequireDefault(require("./BooleanFilter"));
 var _TextFilter = _interopRequireDefault(require("./TextFilter"));
 var _PaginationControl = _interopRequireDefault(require("./PaginationControl"));
+var _ColumnControl = _interopRequireDefault(require("./ColumnControl"));
 var DefaultTableConfig = (0, _immutable.Map)({
   TableLayout: _TableLayout["default"],
   Header: _Header["default"],
@@ -36,6 +37,7 @@ var DefaultTableConfig = (0, _immutable.Map)({
   FilterLayout: _FilterLayout["default"],
   TextFilter: _TextFilter["default"],
   BooleanFilter: _BooleanFilter["default"],
-  PaginationControl: _PaginationControl["default"]
+  PaginationControl: _PaginationControl["default"],
+  ColumnControl: _ColumnControl["default"]
 });
 exports.DefaultTableConfig = DefaultTableConfig;

package/lib/components/task/errors/RunErrorTable.js

@@ -88,45 +88,57 @@ var filters = function filters() {
   };
 };
 var columns = [{
+  // Note: This appears as 'Occured' in the columnControl
   value: 'createdAt',
   title: 'Created At',
-  sortable: true
+  sortable: true,
+  toggleable: true
 }, {
   value: 'createdBy',
   title: 'Created By',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'engineIdentification',
   title: 'Engine Identification',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'id',
   title: 'Error Id',
-  sortable: false
+  sortable: false,
+  toggleable: false,
+  columnOrder: 'first'
 }, {
   value: 'relatedItem1Id',
   title: 'Related Item 1 ID',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'relatedItem1Type',
   title: 'Related Item 1 Type',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'relatedItem2Id',
   title: 'Related Item 2 ID',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'relatedItem2Type',
   title: 'Related Item 2 Type',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'status',
   title: 'Status',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'sourceName',
   title: 'Source',
   sortable: false,
+  toggleable: true,
   valueTransform: function valueTransform(_value, row) {
     return (0, _immutable.getIn)(row, ['run', 'tree', 'sourceName'], '');
   }
@@ -134,6 +146,7 @@ var columns = [{
   value: 'sourceGroup',
   title: 'Group',
   sortable: false,
+  toggleable: true,
   valueTransform: function valueTransform(_value, row) {
     return (0, _immutable.getIn)(row, ['run', 'tree', 'sourceGroup'], '');
   }
@@ -141,29 +154,35 @@ var columns = [{
   value: 'treeName',
   title: 'Name',
   sortable: false,
+  toggleable: true,
   valueTransform: function valueTransform(_value, row) {
     return (0, _immutable.getIn)(row, ['run', 'tree', 'name'], '');
   }
 }, {
   value: 'Summary',
   title: 'Summary',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'text',
   title: 'Text',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'type',
   title: 'Type',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }, {
   value: 'updatedAt',
   title: 'Updated At',
-  sortable: true
+  sortable: true,
+  toggleable: true
 }, {
   value: 'updatedBy',
   title: 'Updated By',
-  sortable: false
+  sortable: false,
+  toggleable: true
 }];
 var RunErrorTable = (0, _Table.generateTable)({
   tableOptions: ['runId'],

package/lib/components/task/handlers/HandlerTable.js

@@ -62,37 +62,49 @@ var filters = function filters() {
 };
 var columns = [{
   title: 'ID',
-  value: 'id'
+  value: 'id',
+  toggleable: true
 }, {
   title: 'Name',
-  value: 'name'
+  value: 'name',
+  toggleable: false,
+  columnOrder: 'first'
 }, {
   title: 'Status',
-  value: 'status'
+  value: 'status',
+  toggleable: true
 }, {
   title: 'Definition ID',
-  value: 'definitionId'
+  value: 'definitionId',
+  toggleable: true
 }, {
   title: 'Definition Name',
-  value: 'definitionName'
+  value: 'definitionName',
+  toggleable: true
 }, {
   title: 'Definition Version',
-  value: 'definitionVersion'
+  value: 'definitionVersion',
+  toggleable: true
 }, {
   title: 'Description',
-  value: 'description'
+  value: 'description',
+  toggleable: true
 }, {
   title: 'Created',
-  value: 'createdAt'
+  value: 'createdAt',
+  toggleable: true
 }, {
   title: 'Created By',
-  value: 'createdBy'
+  value: 'createdBy',
+  toggleable: true
 }, {
   title: 'Updated',
-  value: 'updatedAt'
+  value: 'updatedAt',
+  toggleable: true
 }, {
   title: 'Updated By',
-  value: 'updatedBy'
+  value: 'updatedBy',
+  toggleable: true
 }];
 var HandlerTable = (0, _Table.generateTable)({
   columns: columns,