@kineticdata/react 5.1.2 → 6.0.1

package/lib/components/table/Table.js

@@ -1,19 +1,27 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { Component } from 'react';
-import { compose, lifecycle } from 'recompose';
-import { List, Map, mergeDeep } from 'immutable';
-import { ComponentConfigContext } from '../common/ComponentConfigContext';
-import { connect, dispatch } from '../../store';
-import { configureTable, filterFormKey, isClientSide, mountTable, unmountTable } from './Table.redux';
-import { generateKey } from '../../helpers';
-import { generateForm } from '../form/Form';
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _recompose = require("recompose");
+var _immutable = require("immutable");
+var _ComponentConfigContext = require("../common/ComponentConfigContext");
+var _store = require("../../store");
+var _Table = require("./Table.redux");
+var _helpers = require("../../helpers");
+var _Form = require("../form/Form");
+var _excluded = ["components", "tableKey"];
 var fromColumnSet = function fromColumnSet(columns, columnSet) {
   return columnSet.map(function (cs) {
     return columns.find(function (c) {
@@ -21,26 +29,27 @@ var fromColumnSet = function fromColumnSet(columns, columnSet) {
     });
   });
 };
-
 var KeyWrapper = function KeyWrapper(_ref) {
   var children = _ref.children;
   return children;
 };
-
 var TableComponent = function TableComponent(props) {
   if (props.configured) {
     var children = props.children,
-        loading = props.loading,
-        initializing = props.initializing,
-        rows = props.rows,
-        error = props.error,
-        appliedFilters = props.appliedFilters,
-        components = props.components,
-        tableKey = props.tableKey,
-        _filterFormKey = props.filterFormKey,
-        count = props.count,
-        extraData = props.extraData;
-    var table = buildTable(props);
+      loading = props.loading,
+      initializing = props.initializing,
+      rows = props.rows,
+      error = props.error,
+      appliedFilters = props.appliedFilters,
+      components = props.components,
+      tableKey = props.tableKey,
+      _filterFormKey = props.filterFormKey,
+      count = props.count,
+      extraData = props.extraData;
+    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({
@@ -50,6 +59,7 @@ var TableComponent = function TableComponent(props) {
       filter: filter,
       appliedFilters: appliedFilters,
       pagination: pagination,
+      columnControl: columnControl,
       initializing: initializing,
       loading: loading,
       rows: rows,
@@ -58,41 +68,36 @@ var TableComponent = function TableComponent(props) {
       extraData: extraData
     });
   }
-
   return null;
 };
-
 var filterComponentByType = function filterComponentByType(components) {
   var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
   return type === 'boolean' ? components.BooleanFilter : components.TextFilter;
 };
-
 var buildField = function buildField(_ref2) {
   var filter = _ref2.filter,
-      filters = _ref2.filters,
-      components = _ref2.components,
-      columnComponents = _ref2.columnComponents,
-      tableKey = _ref2.tableKey,
-      tableOptions = _ref2.tableOptions,
-      renderOptions = _ref2.renderOptions;
+    filters = _ref2.filters,
+    components = _ref2.components,
+    columnComponents = _ref2.columnComponents,
+    tableKey = _ref2.tableKey,
+    tableOptions = _ref2.tableOptions,
+    renderOptions = _ref2.renderOptions;
   var value = filter.get('value');
   var name = filter.getIn(['column', 'value']);
   var title = filter.getIn(['column', 'title']);
   var options = filter.getIn(['column', 'options'], function () {
     return [];
   })(tableOptions, renderOptions);
-
   var onChange = function onChange(value) {
     var filterName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : name;
-    dispatch('SET_FILTER', {
+    (0, _store.dispatch)('SET_FILTER', {
       tableKey: tableKey,
       filter: filterName,
       value: value
     });
   };
-
   var Filter = columnComponents.getIn([name, 'Filter'], filterComponentByType(components, filter.getIn(['column', 'type'])));
-  return /*#__PURE__*/React.createElement(Filter, {
+  return /*#__PURE__*/_react["default"].createElement(Filter, {
     value: value,
     name: name,
     title: title,
@@ -103,15 +108,16 @@ var buildField = function buildField(_ref2) {
     visible: true
   });
 };
-
 var filtersToFields = function filtersToFields(components) {
-  return Map({
+  return (0, _immutable.Map)({
     FormButtons: components.FilterFormButtons,
     FormError: components.FilterFormError,
     FormLayout: components.FilterFormLayout,
     AttributesField: components.AttributesFilter,
     CheckboxField: components.CheckboxFilter,
     CodeField: components.CodeFilter,
+    DateField: components.DateFilter,
+    DatetimeField: components.DatetimeFilter,
     FormField: components.FormFilter,
     FormMultiField: components.FormMultiFilter,
     PasswordField: components.PasswordFilter,
@@ -122,6 +128,7 @@ var filtersToFields = function filtersToFields(components) {
     SelectMultiField: components.SelectMultiFilter,
     TextField: components.TextFilter,
     TextMultiField: components.TextMultiFilter,
+    TimeField: components.TimeFilter,
     UserField: components.UserFilter,
     UserMultiField: components.UserMultiFilter,
     TableField: components.TableFilter
@@ -129,34 +136,33 @@ var filtersToFields = function filtersToFields(components) {
     return !!c;
   });
 };
-
 var buildFilterForm = function buildFilterForm(props) {
-  var FilterForm = props.components.FilterForm; // Build the form filter components.
-
+  var FilterForm = props.components.FilterForm;
+  // Build the form filter components.
   var components = filtersToFields(props.components);
-  return /*#__PURE__*/React.createElement(FilterForm, Object.assign({}, props.tableOptions, {
+  return /*#__PURE__*/_react["default"].createElement(FilterForm, Object.assign({}, props.tableOptions, {
     formKey: props.filterFormKey,
     tableKey: props.tableKey,
     components: components,
     alterFields: props.alterFilters,
     fieldSet: props.filterSet,
     onSave: props.onSearch,
-    appliedFilters: props.appliedFilters
+    appliedFilters: props.appliedFilters,
+    autoFocus: props.filterAutoFocus
   }));
 };
-
 var buildFilterLayout = function buildFilterLayout(_ref3) {
   var components = _ref3.components,
-      columnComponents = _ref3.columnComponents,
-      filters = _ref3.filters,
-      appliedFilters = _ref3.appliedFilters,
-      validFilters = _ref3.validFilters,
-      tableKey = _ref3.tableKey,
-      columnSet = _ref3.columnSet,
-      loading = _ref3.loading,
-      initializing = _ref3.initializing,
-      tableOptions = _ref3.tableOptions,
-      renderOptions = _ref3.renderOptions;
+    columnComponents = _ref3.columnComponents,
+    filters = _ref3.filters,
+    appliedFilters = _ref3.appliedFilters,
+    validFilters = _ref3.validFilters,
+    tableKey = _ref3.tableKey,
+    columnSet = _ref3.columnSet,
+    loading = _ref3.loading,
+    initializing = _ref3.initializing,
+    tableOptions = _ref3.tableOptions,
+    renderOptions = _ref3.renderOptions;
   // Add an onChange to each filter and convert it to a list for looping.
   var f = filters.map(function (filter) {
     return buildField({
@@ -170,44 +176,38 @@ var buildFilterLayout = function buildFilterLayout(_ref3) {
       renderOptions: renderOptions
     });
   });
-
   var onSearch = function onSearch(e) {
     if (e) {
       e.preventDefault();
     }
-
-    dispatch('APPLY_FILTERS', {
+    (0, _store.dispatch)('APPLY_FILTERS', {
       tableKey: tableKey
     });
   };
-
   var onReset = function onReset(e) {
     e.preventDefault();
-    dispatch('CLEAR_TABLE_FILTERS', {
+    (0, _store.dispatch)('CLEAR_TABLE_FILTERS', {
       tableKey: tableKey
     });
-    dispatch('APPLY_FILTERS', {
+    (0, _store.dispatch)('APPLY_FILTERS', {
       tableKey: tableKey
     });
   };
-
   var onClear = function onClear(e) {
     e.preventDefault();
-    dispatch('CLEAR_SELECTED_FILTERS', {
+    (0, _store.dispatch)('CLEAR_SELECTED_FILTERS', {
       tableKey: tableKey
     });
   };
-
   var onChangeFilter = function onChangeFilter(value, filterName) {
-    dispatch('SET_FILTER', {
+    (0, _store.dispatch)('SET_FILTER', {
       tableKey: tableKey,
       filter: filterName,
       value: value
     });
   };
-
   var FilterLayout = components.FilterLayout;
-  return /*#__PURE__*/React.createElement(FilterLayout, {
+  return /*#__PURE__*/_react["default"].createElement(FilterLayout, {
     filters: f,
     appliedFilters: appliedFilters,
     validFilters: validFilters,
@@ -223,25 +223,22 @@ var buildFilterLayout = function buildFilterLayout(_ref3) {
     tableKey: tableKey
   });
 };
-
 var hasPrevPage = function hasPrevPage(data, dataSource, tableOptions, pageTokens, pageOffset) {
-  return isClientSide(Map({
+  return (0, _Table.isClientSide)((0, _immutable.Map)({
     data: data,
     dataSource: dataSource,
     tableOptions: tableOptions
   })) ? pageOffset > 0 : pageTokens.size !== 0;
 };
-
 var hasNextPage = function hasNextPage(data, dataSource, tableOptions, pageOffset, pageSize, currentPageToken, rows) {
-  return isClientSide(Map({
+  return (0, _Table.isClientSide)((0, _immutable.Map)({
     data: data,
     dataSource: dataSource,
     tableOptions: tableOptions
   })) ? rows.size === pageSize ? data ? pageOffset + pageSize < data.size : false : !!currentPageToken : !!currentPageToken;
 };
-
 var getIndexes = function getIndexes(data, rows, dataSource, tableOptions, pageOffset, pageSize, pageTokens) {
-  return isClientSide(Map({
+  return (0, _Table.isClientSide)((0, _immutable.Map)({
     data: data,
     dataSource: dataSource,
     tableOptions: tableOptions
@@ -253,32 +250,29 @@ var getIndexes = function getIndexes(data, rows, dataSource, tableOptions, pageO
     endIndex: pageTokens.size * pageSize + rows.size
   };
 };
-
 var buildPaginationControl = function buildPaginationControl(props) {
   var tableKey = props.tableKey,
-      filterFormKey = props.filterFormKey,
-      data = props.data,
-      rows = props.rows,
-      dataSource = props.dataSource,
-      tableOptions = props.tableOptions,
-      pageTokens = props.pageTokens,
-      pageSize = props.pageSize,
-      pageOffset = props.pageOffset,
-      currentPageToken = props.currentPageToken,
-      count = props.count,
-      components = props.components,
-      loading = props.loading,
-      renderOptions = props.renderOptions,
-      extraData = props.extraData;
+    filterFormKey = props.filterFormKey,
+    data = props.data,
+    rows = props.rows,
+    dataSource = props.dataSource,
+    tableOptions = props.tableOptions,
+    pageTokens = props.pageTokens,
+    pageSize = props.pageSize,
+    pageOffset = props.pageOffset,
+    currentPageToken = props.currentPageToken,
+    count = props.count,
+    components = props.components,
+    loading = props.loading,
+    renderOptions = props.renderOptions,
+    extraData = props.extraData;
   var PaginationControl = components.PaginationControl;
   var prevPage = hasPrevPage(data, dataSource, tableOptions, pageTokens, pageOffset) ? onPrevPage(tableKey) : null;
   var nextPage = hasNextPage(data, dataSource, tableOptions, pageOffset, pageSize, currentPageToken, rows) ? onNextPage(tableKey) : null;
-
   var _getIndexes = getIndexes(data, rows, dataSource, tableOptions, pageOffset, pageSize, pageTokens),
-      startIndex = _getIndexes.startIndex,
-      endIndex = _getIndexes.endIndex;
-
-  return /*#__PURE__*/React.createElement(PaginationControl, {
+    startIndex = _getIndexes.startIndex,
+    endIndex = _getIndexes.endIndex;
+  return /*#__PURE__*/_react["default"].createElement(PaginationControl, {
     tableKey: tableKey,
     filterFormKey: filterFormKey,
     prevPage: prevPage,
@@ -293,13 +287,50 @@ var buildPaginationControl = function buildPaginationControl(props) {
     extraData: extraData
   });
 };
-
-export var buildTable = function buildTable(props) {
+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);
   var body = buildTableBody(props);
   var footer = buildTableFooter(props);
-  return /*#__PURE__*/React.createElement(TableLayout, {
+  return /*#__PURE__*/_react["default"].createElement(TableLayout, {
     tableKey: props.tableKey,
     filterFormKey: props.filterFormKey,
     header: header,
@@ -314,10 +345,11 @@ export var buildTable = function buildTable(props) {
     extraData: props.extraData
   });
 };
-export var buildTableHeader = function buildTableHeader(props) {
+exports.buildTable = buildTable;
+var buildTableHeader = function buildTableHeader(props) {
   var Header = props.components.Header;
   var headerRow = buildTableHeaderRow(props);
-  return props.omitHeader ? null : /*#__PURE__*/React.createElement(Header, {
+  return props.omitHeader ? null : /*#__PURE__*/_react["default"].createElement(Header, {
     sortable: props.sortable,
     headerRow: headerRow,
     renderOptions: props.renderOptions,
@@ -325,34 +357,38 @@ export var buildTableHeader = function buildTableHeader(props) {
     tableOptions: props.tableOptions
   });
 };
-export var buildTableHeaderRow = function buildTableHeaderRow(props) {
+exports.buildTableHeader = buildTableHeader;
+var buildTableHeaderRow = function buildTableHeaderRow(props) {
   var components = props.components,
-      rows = props.rows,
-      columns = props.columns,
-      columnSet = props.columnSet;
+    rows = props.rows,
+    columns = props.columns,
+    columnSet = props.columnSet;
   var HeaderRow = components.HeaderRow;
   var columnHeaders = fromColumnSet(columns, columnSet).map(buildTableHeaderCell(props));
-  return /*#__PURE__*/React.createElement(HeaderRow, {
+  return /*#__PURE__*/_react["default"].createElement(HeaderRow, {
     columnHeaders: columnHeaders,
     renderOptions: props.renderOptions,
     rows: rows,
     tableOptions: props.tableOptions
   });
 };
-export var buildTableHeaderCell = function buildTableHeaderCell(props) {
+exports.buildTableHeaderRow = buildTableHeaderRow;
+var buildTableHeaderCell = function buildTableHeaderCell(props) {
   return function (column, index) {
     var tableKey = props.tableKey,
-        components = props.components,
-        columnComponents = props.columnComponents,
-        renderOptions = props.renderOptions,
-        tableOptions = props.tableOptions,
-        appliedFilters = props.appliedFilters;
+      components = props.components,
+      columnComponents = props.columnComponents,
+      renderOptions = props.renderOptions,
+      tableOptions = props.tableOptions,
+      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.createElement(KeyWrapper, {
+    return /*#__PURE__*/_react["default"].createElement(KeyWrapper, {
       key: "column-".concat(index)
-    }, /*#__PURE__*/React.createElement(HeaderCell, {
+    }, /*#__PURE__*/_react["default"].createElement(HeaderCell, {
+      columnControl: columnControl,
       onSortColumn: onSortColumn(tableKey, column),
       title: column.get('title'),
       renderOptions: renderOptions,
@@ -363,10 +399,11 @@ export var buildTableHeaderCell = function buildTableHeaderCell(props) {
     }));
   };
 };
-export var buildTableBody = function buildTableBody(props) {
+exports.buildTableHeaderCell = buildTableHeaderCell;
+var buildTableBody = function buildTableBody(props) {
   var Body = props.components.Body;
   var tableRows = buildTableBodyRows(props);
-  return /*#__PURE__*/React.createElement(Body, {
+  return /*#__PURE__*/_react["default"].createElement(Body, {
     loading: props.loading,
     initializing: props.initializing,
     renderOptions: props.renderOptions,
@@ -376,21 +413,22 @@ export var buildTableBody = function buildTableBody(props) {
     empty: props.rows.isEmpty()
   });
 };
-export var buildTableBodyRows = function buildTableBodyRows(props) {
+exports.buildTableBody = buildTableBody;
+var buildTableBodyRows = function buildTableBodyRows(props) {
   var components = props.components,
-      rows = props.rows,
-      columns = props.columns,
-      columnSet = props.columnSet,
-      appliedFilters = props.appliedFilters,
-      renderOptions = props.renderOptions,
-      tableOptions = props.tableOptions;
+    rows = props.rows,
+    columns = props.columns,
+    columnSet = props.columnSet,
+    appliedFilters = props.appliedFilters,
+    renderOptions = props.renderOptions,
+    tableOptions = props.tableOptions;
   var BodyRow = components.BodyRow;
   var EmptyBodyRow = components.EmptyBodyRow;
   return rows.size > 0 ? rows.map(function (row, index) {
     var cells = buildTableBodyCells(props, row, index);
-    return /*#__PURE__*/React.createElement(KeyWrapper, {
+    return /*#__PURE__*/_react["default"].createElement(KeyWrapper, {
       key: "row-".concat(index)
-    }, /*#__PURE__*/React.createElement(BodyRow, {
+    }, /*#__PURE__*/_react["default"].createElement(BodyRow, {
       cells: cells,
       columns: columns,
       row: row,
@@ -398,7 +436,7 @@ export var buildTableBodyRows = function buildTableBodyRows(props) {
       renderOptions: renderOptions,
       tableOptions: tableOptions
     }));
-  }) : /*#__PURE__*/React.createElement(EmptyBodyRow, {
+  }) : /*#__PURE__*/_react["default"].createElement(EmptyBodyRow, {
     colSpan: columnSet.size,
     initializing: props.initializing,
     loading: props.loading,
@@ -408,23 +446,24 @@ export var buildTableBodyRows = function buildTableBodyRows(props) {
     error: props.error
   });
 };
-export var buildTableBodyCells = function buildTableBodyCells(props, row, rowIndex) {
+exports.buildTableBodyRows = buildTableBodyRows;
+var buildTableBodyCells = function buildTableBodyCells(props, row, rowIndex) {
   var tableKey = props.tableKey,
-      components = props.components,
-      rows = props.rows,
-      columns = props.columns,
-      columnSet = props.columnSet,
-      columnComponents = props.columnComponents,
-      appliedFilters = props.appliedFilters,
-      renderOptions = props.renderOptions,
-      tableOptions = props.tableOptions,
-      extraData = props.extraData;
+    components = props.components,
+    rows = props.rows,
+    columns = props.columns,
+    columnSet = props.columnSet,
+    columnComponents = props.columnComponents,
+    appliedFilters = props.appliedFilters,
+    renderOptions = props.renderOptions,
+    tableOptions = props.tableOptions,
+    extraData = props.extraData;
   return fromColumnSet(columns, columnSet).map(function (column, index) {
     var BodyCell = columnComponents.getIn([column.get('value'), 'BodyCell'], components.BodyCell);
     var value = row.get(column.get('value'));
-    return /*#__PURE__*/React.createElement(KeyWrapper, {
+    return /*#__PURE__*/_react["default"].createElement(KeyWrapper, {
       key: "column-".concat(index)
-    }, /*#__PURE__*/React.createElement(BodyCell, {
+    }, /*#__PURE__*/_react["default"].createElement(BodyCell, {
       tableKey: tableKey,
       row: row,
       rowIndex: rowIndex,
@@ -439,16 +478,17 @@ export var buildTableBodyCells = function buildTableBodyCells(props, row, rowInd
     }));
   });
 };
-export var buildTableFooter = function buildTableFooter(props) {
+exports.buildTableBodyCells = buildTableBodyCells;
+var buildTableFooter = function buildTableFooter(props) {
   var components = props.components,
-      columnSet = props.columnSet,
-      renderOptions = props.renderOptions,
-      rows = props.rows,
-      tableOptions = props.tableOptions,
-      includeFooter = props.includeFooter;
+    columnSet = props.columnSet,
+    renderOptions = props.renderOptions,
+    rows = props.rows,
+    tableOptions = props.tableOptions,
+    includeFooter = props.includeFooter;
   var footerRow = buildTableFooterRow(props);
   var Footer = components.Footer;
-  return includeFooter ? /*#__PURE__*/React.createElement(Footer, {
+  return includeFooter ? /*#__PURE__*/_react["default"].createElement(Footer, {
     rows: rows,
     footerRow: footerRow,
     colSpan: columnSet.size,
@@ -456,139 +496,173 @@ export var buildTableFooter = function buildTableFooter(props) {
     tableOptions: tableOptions
   }) : null;
 };
-export var buildTableFooterRow = function buildTableFooterRow(props) {
+exports.buildTableFooter = buildTableFooter;
+var buildTableFooterRow = function buildTableFooterRow(props) {
   var components = props.components,
-      renderOptions = props.renderOptions,
-      tableOptions = props.tableOptions;
+    renderOptions = props.renderOptions,
+    tableOptions = props.tableOptions;
   var cells = buildTableFooterCells(props);
   var FooterRow = components.FooterRow;
-  return /*#__PURE__*/React.createElement(FooterRow, {
+  return /*#__PURE__*/_react["default"].createElement(FooterRow, {
     cells: cells,
     renderOptions: renderOptions,
     tableOptions: tableOptions
   });
 };
-export var buildTableFooterCells = function buildTableFooterCells(props) {
+exports.buildTableFooterRow = buildTableFooterRow;
+var buildTableFooterCells = function buildTableFooterCells(props) {
   var components = props.components,
-      columns = props.columns,
-      columnSet = props.columnSet,
-      columnComponents = props.columnComponents,
-      renderOptions = props.renderOptions,
-      tableOptions = props.tableOptions;
+    columns = props.columns,
+    columnSet = props.columnSet,
+    columnComponents = props.columnComponents,
+    renderOptions = props.renderOptions,
+    tableOptions = props.tableOptions;
   return fromColumnSet(columns, columnSet).map(function (column, index) {
     var FooterCell = columnComponents.getIn([column.get('value'), 'FooterCell'], components.FooterCell);
-    return /*#__PURE__*/React.createElement(KeyWrapper, {
+    return /*#__PURE__*/_react["default"].createElement(KeyWrapper, {
       key: "column-".concat(index)
-    }, /*#__PURE__*/React.createElement(FooterCell, {
+    }, /*#__PURE__*/_react["default"].createElement(FooterCell, {
       column: column,
       renderOptions: renderOptions,
       tableOptions: tableOptions
     }));
   });
 };
-
+exports.buildTableFooterCells = buildTableFooterCells;
 var onNextPage = function onNextPage(tableKey) {
   return function () {
-    return dispatch('NEXT_PAGE', {
+    return (0, _store.dispatch)('NEXT_PAGE', {
       tableKey: tableKey
     });
   };
 };
-
 var onPrevPage = function onPrevPage(tableKey) {
   return function () {
-    return dispatch('PREV_PAGE', {
+    return (0, _store.dispatch)('PREV_PAGE', {
       tableKey: tableKey
     });
   };
 };
-
 var onGotoPage = function onGotoPage(tableKey) {
   return function (pageNumber) {
     return function () {
-      return dispatch('GOTO_PAGE', {
+      return (0, _store.dispatch)('GOTO_PAGE', {
         tableKey: tableKey,
         pageNumber: pageNumber
       });
     };
   };
 };
-
 var onSortColumn = function onSortColumn(tableKey, column) {
   return function () {
-    return dispatch('SORT_COLUMN', {
+    return (0, _store.dispatch)('SORT_COLUMN', {
+      tableKey: tableKey,
+      column: 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], Map()).toObject();
+    return state.getIn(['tables', props.tableKey], (0, _immutable.Map)()).toObject();
   };
 };
+
 /**
  * @component
  */
-
-
-var TableImpl = compose(connect(mapStateToProps), lifecycle({
+var TableImpl = (0, _recompose.compose)((0, _store.connect)(mapStateToProps), (0, _recompose.lifecycle)({
   componentDidMount: function componentDidMount() {
     if (this.props.mounted && !this.props.configured) {
-      configureTable(this.props);
+      (0, _Table.configureTable)(this.props);
     }
   },
   componentDidUpdate: function componentDidUpdate() {
     if (this.props.mounted && !this.props.configured) {
-      configureTable(this.props);
+      (0, _Table.configureTable)(this.props);
     }
   }
 }))(TableComponent);
-export var generateColumns = function generateColumns(columns) {
+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 List(addColumns).concat(columns).map(function (c) {
-    return Map(_objectSpread(_objectSpread(_objectSpread({}, c), alterColumns[c.value]), {}, {
+  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
     }));
   });
 };
-export var extractColumnComponents = function extractColumnComponents(columns) {
+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');
   }).reduce(function (result, current) {
     return result.set(current.get('value'), current.get('components'));
-  }, Map());
+  }, (0, _immutable.Map)());
 };
-export var generateTable = function generateTable(_ref4) {
+exports.extractColumnComponents = extractColumnComponents;
+var generateTable = function generateTable(_ref4) {
   var _ref4$tableOptions = _ref4.tableOptions,
-      tableOptions = _ref4$tableOptions === void 0 ? [] : _ref4$tableOptions,
-      _ref4$filterDataSourc = _ref4.filterDataSources,
-      filterDataSources = _ref4$filterDataSourc === void 0 ? function () {
-    return {};
-  } : _ref4$filterDataSourc,
-      filters = _ref4.filters,
-      columns = _ref4.columns,
-      dataSource = _ref4.dataSource,
-      sortable = _ref4.sortable,
-      onValidateFilters = _ref4.onValidateFilters;
+    tableOptions = _ref4$tableOptions === void 0 ? [] : _ref4$tableOptions,
+    _ref4$filterDataSourc = _ref4.filterDataSources,
+    filterDataSources = _ref4$filterDataSourc === void 0 ? function () {
+      return {};
+    } : _ref4$filterDataSourc,
+    filters = _ref4.filters,
+    columns = _ref4.columns,
+    dataSource = _ref4.dataSource,
+    sortable = _ref4.sortable,
+    onValidateFilters = _ref4.onValidateFilters;
   return function (props) {
     var tableOptionProps = tableOptions ? tableOptions.reduce(function (to, opt) {
       to[opt] = props[opt];
       return to;
     }, {}) : {};
     var FilterForm;
-
     if (filters) {
-      FilterForm = generateForm({
+      FilterForm = (0, _Form.generateForm)({
         dataSources: filterDataSources,
         fields: filters,
-        formOptions: ['tableKey'].concat(_toConsumableArray(tableOptions)),
+        formOptions: ['tableKey'].concat((0, _toConsumableArray2["default"])(tableOptions)),
         handleSubmit: function handleSubmit(_ref5) {
           var tableKey = _ref5.tableKey;
           return function (values) {
-            dispatch('APPLY_FILTER_FORM', {
+            (0, _store.dispatch)('APPLY_FILTER_FORM', {
               tableKey: tableKey,
               appliedFilters: values
             });
@@ -599,32 +673,33 @@ export var generateTable = function generateTable(_ref4) {
         }
       });
     }
-
     var setProps = {
       // Passed in to `generateTable`
       columns: columns,
       dataSource: dataSource,
       onValidateFilters: onValidateFilters,
       // Calculated from props and tableOptions.
-      tableOptions: _objectSpread({}, tableOptionProps),
+      tableOptions: (0, _objectSpread2["default"])({}, tableOptionProps),
       // Add FilterForm to the components that are passed.
-      components: _objectSpread(_objectSpread({}, props.components), {}, {
+      components: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props.components), {}, {
         FilterForm: FilterForm
       }),
       // Sortable can be enabled or disabled for an entire table.
       sortable: typeof sortable !== 'undefined' ? sortable : props.sortable,
       // Explicitly allowed props.
       tableKey: props.tableKey,
-      filterFormKey: filterFormKey(props.tableKey),
+      filterFormKey: (0, _Table.filterFormKey)(props.tableKey),
       addColumns: props.addColumns,
       alterColumns: props.alterColumns,
-      alterFilters: mergeDeep(props.alterFilters || {}, Map(props.initialFilterValues).map(function (initialValue) {
+      alterFilters: (0, _immutable.mergeDeep)(props.alterFilters || {}, (0, _immutable.Map)(props.initialFilterValues).map(function (initialValue) {
         return {
           initialValue: initialValue
         };
       }).toObject()),
       filterSet: props.filterSet,
+      filterAutoFocus: props.filterAutoFocus,
       columnSet: props.columnSet,
+      columnSetOrder: props.columnSetOrder,
       pageSize: props.pageSize,
       defaultSortColumn: props.defaultSortColumn,
       defaultSortDirection: props.defaultSortDirection,
@@ -640,79 +715,72 @@ export var generateTable = function generateTable(_ref4) {
       onSearch: props.onSearch,
       onFetch: props.onFetch
     };
-    return /*#__PURE__*/React.createElement(Table, setProps, props.children);
+    return /*#__PURE__*/_react["default"].createElement(Table, setProps, props.children);
   };
 };
-export var Table = /*#__PURE__*/function (_Component) {
-  _inherits(Table, _Component);
-
-  var _super = _createSuper(Table);
-
+exports.generateTable = generateTable;
+var Table = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Table, _Component);
+  var _super = (0, _createSuper2["default"])(Table);
   function Table(props) {
     var _this;
-
-    _classCallCheck(this, Table);
-
+    (0, _classCallCheck2["default"])(this, Table);
     _this = _super.call(this, props);
-
     var components = props.components,
-        tableKey = props.tableKey,
-        config = _objectWithoutProperties(props, ["components", "tableKey"]);
-
+      tableKey = props.tableKey,
+      config = (0, _objectWithoutProperties2["default"])(props, _excluded);
     _this.components = components;
     _this.config = config;
     _this.auto = !tableKey || props.uncontrolled;
-    _this.tableKey = tableKey || generateKey();
+    _this.tableKey = tableKey || (0, _helpers.generateKey)();
     return _this;
   }
-
-  _createClass(Table, [{
+  (0, _createClass2["default"])(Table, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.auto) {
-        mountTable(this.tableKey);
+        (0, _Table.mountTable)(this.tableKey);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (this.auto) {
-        unmountTable(this.tableKey);
+        (0, _Table.unmountTable)(this.tableKey);
       }
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var columns = generateColumns(this.props.columns, this.props.addColumns, this.props.alterColumns);
       var allColumns = columns.map(function (c) {
         return c.get('value');
       });
-      var columnSet = 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;
         });
       });
       var columnComponents = extractColumnComponents(columns);
-      return /*#__PURE__*/React.createElement(ComponentConfigContext.Consumer, null, function (componentConfig) {
-        return /*#__PURE__*/React.createElement(TableImpl, Object.assign({}, _this2.props, {
+      return /*#__PURE__*/_react["default"].createElement(_ComponentConfigContext.ComponentConfigContext.Consumer, null, function (componentConfig) {
+        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);
       });
     }
   }]);
-
   return Table;
-}(Component);
+}(_react.Component);
+exports.Table = Table;
 var defaultProps = {
   components: {},
-  rows: List([]),
+  rows: (0, _immutable.List)([]),
   columns: [],
   addColumns: [],
   alterColumns: {},
@@ -722,4 +790,4 @@ var defaultProps = {
   includeFooter: false
 };
 Table.defaultProps = defaultProps;
-Table.configure = configureTable;
+Table.configure = _Table.configureTable;