kdutify 0.16.9-rc.0 → 2.6.1

package/es5/components/KDataTable/KDataTable.js

@@ -1,347 +1,706 @@
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+"use strict";
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-require('../../../src/stylus/components/_tables.styl');
-require('../../../src/stylus/components/_data-table.styl');
+require("..\\..\\..\\src\\components\\KDataTable\\KDataTable.sass");
 
-import KBtn from '../KBtn';
-import KIcon from '../KIcon';
-import KProgressLinear from '../KProgressLinear';
-import KSelect from '../KSelect';
+var _KData = require("../KData");
 
-import Filterable from '../../mixins/filterable';
-import Themeable from '../../mixins/themeable';
-import Loadable from '../../mixins/loadable';
-import Head from './mixins/head';
-import Body from './mixins/body';
-import Foot from './mixins/foot';
-import Progress from './mixins/progress';
+var _KDataIterator = require("../KDataIterator");
 
-import { createSimpleFunctional, getObjectValueByPath } from '../../util/helpers';
+var _KBtn = _interopRequireDefault(require("../KBtn"));
 
-export default {
-  name: 'k-data-table',
+var _KDataTableHeader = _interopRequireDefault(require("./KDataTableHeader"));
 
-  components: {
-    KBtn: KBtn,
-    KIcon: KIcon,
-    KProgressLinear: KProgressLinear,
-    KSelect: KSelect,
-    // Importing does not work properly
-    'k-table-overflow': createSimpleFunctional('table__overflow')
-  },
+var _KIcon = _interopRequireDefault(require("../KIcon"));
 
-  data: function data() {
-    return {
-      all: false,
-      searchLength: 0,
-      defaultPagination: {
-        descending: false,
-        page: 1,
-        rowsPerPage: 5,
-        sortBy: null,
-        totalItems: 0
-      },
-      expanded: {}
-    };
-  },
+var _Row = _interopRequireDefault(require("./Row"));
 
+var _RowGroup = _interopRequireDefault(require("./RowGroup"));
 
-  mixins: [Head, Body, Filterable, Foot, Loadable, Progress, Themeable],
+var _KSimpleCheckbox = _interopRequireDefault(require("../KCheckbox/KSimpleCheckbox"));
 
-  props: {
-    expand: {
-      type: Boolean
-    },
-    headers: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    headerText: {
-      type: String,
-      default: 'text'
-    },
-    hideActions: Boolean,
-    hideHeaders: Boolean,
-    mustSort: Boolean,
-    noResultsText: {
-      type: String,
-      default: 'No matching records found'
-    },
-    rowsPerPageItems: {
-      type: Array,
-      default: function _default() {
-        return [5, 10, 25, { text: 'All', value: -1 }];
-      }
-    },
-    rowsPerPageText: {
-      type: String,
-      default: 'Rows per page:'
-    },
-    selectAll: [Boolean, String],
-    search: {
-      required: false
-    },
-    filter: {
-      type: Function,
-      default: function _default(val, search) {
-        return val !== null && ['undefined', 'boolean'].indexOf(typeof val === 'undefined' ? 'undefined' : _typeof(val)) === -1 && val.toString().toLowerCase().indexOf(search) !== -1;
-      }
-    },
-    customFilter: {
-      type: Function,
-      default: function _default(items, search, filter) {
-        search = search.toString().toLowerCase();
-        return items.filter(function (i) {
-          return Object.keys(i).some(function (j) {
-            return filter(i[j], search);
-          });
-        });
-      }
-    },
-    customSort: {
-      type: Function,
-      default: function _default(items, index, isDescending) {
-        if (index === null) return items;
+var _KSimpleTable = _interopRequireDefault(require("./KSimpleTable"));
 
-        return items.sort(function (a, b) {
-          var sortA = getObjectValueByPath(a, index);
-          var sortB = getObjectValueByPath(b, index);
+var _MobileRow = _interopRequireDefault(require("./MobileRow"));
 
-          if (isDescending) {
-            var _ref = [sortB, sortA];
-            sortA = _ref[0];
-            sortB = _ref[1];
-          }
+var _loadable = _interopRequireDefault(require("../../mixins/loadable"));
 
-          // Check if both are numbers
-          if (!isNaN(sortA) && !isNaN(sortB)) {
-            return sortA - sortB;
-          }
+var _ripple = _interopRequireDefault(require("../../directives/ripple"));
 
-          // Check if both cannot be evaluated
-          if (sortA === null && sortB === null) {
-            return 0;
-          }
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
 
-          var _map = [sortA, sortB].map(function (s) {
-            return (s || '').toString().toLocaleLowerCase();
-          });
+var _helpers = require("../../util/helpers");
 
-          var _map2 = _slicedToArray(_map, 2);
+var _console = require("../../util/console");
 
-          sortA = _map2[0];
-          sortB = _map2[1];
+var _mergeData = require("../../util/mergeData");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-          if (sortA > sortB) return 1;
-          if (sortA < sortB) return -1;
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-          return 0;
-        });
-      }
-    },
-    value: {
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function filterFn(item, search, filter) {
+  return function (header) {
+    var value = (0, _helpers.getObjectValueByPath)(item, header.value);
+    return header.filter ? header.filter(value, search, item) : filter(value, search, item);
+  };
+}
+
+function searchTableItems(items, search, headersWithCustomFilters, headersWithoutCustomFilters, customFilter) {
+  search = typeof search === 'string' ? search.trim() : null;
+  return items.filter(function (item) {
+    // Headers with custom filters are evaluated whether or not a search term has been provided.
+    // We need to match every filter to be included in the results.
+    var matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, _helpers.defaultFilter)); // Headers without custom filters are only filtered by the `search` property if it is defined.
+    // We only need a single column to match the search term to be included in the results.
+
+    var matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter));
+    return matchesColumnFilters && matchesSearchTerm;
+  });
+}
+/* @kdujs/component */
+
+
+var _default2 = (0, _mixins.default)(_KDataIterator.KDataIterator, _loadable.default).extend({
+  name: 'k-data-table',
+  directives: {
+    ripple: _ripple.default
+  },
+  props: {
+    headers: {
       type: Array,
       default: function _default() {
         return [];
       }
     },
-    items: {
-      type: Array,
-      required: true,
-      default: function _default() {
-        return [];
-      }
+    showSelect: Boolean,
+    checkboxColor: String,
+    showExpand: Boolean,
+    showGroupBy: Boolean,
+    // TODO: Fix
+    // virtualRows: Boolean,
+    height: [Number, String],
+    hideDefaultHeader: Boolean,
+    caption: String,
+    dense: Boolean,
+    headerProps: Object,
+    calculateWidths: Boolean,
+    fixedHeader: Boolean,
+    headersLength: Number,
+    expandIcon: {
+      type: String,
+      default: '$expand'
     },
-    totalItems: {
-      type: Number,
-      default: null
+    customFilter: {
+      type: Function,
+      default: _helpers.defaultFilter
     },
-    itemKey: {
-      type: String,
-      default: 'id'
+    itemClass: {
+      type: [String, Function],
+      default: function _default() {
+        return '';
+      }
     },
-    pagination: {
-      type: Object,
-      default: function _default() {}
+    loaderHeight: {
+      type: [Number, String],
+      default: 4
     }
   },
-
+  data: function data() {
+    return {
+      internalGroupBy: [],
+      openCache: {},
+      widths: []
+    };
+  },
   computed: {
-    classes: function classes() {
-      return {
-        'datatable table': true,
-        'datatable--select-all': this.selectAll !== false,
-        'theme--dark': this.dark,
-        'theme--light': this.light
+    computedHeaders: function computedHeaders() {
+      var _this = this;
+
+      if (!this.headers) return [];
+      var headers = this.headers.filter(function (h) {
+        return h.value === undefined || !_this.internalGroupBy.find(function (v) {
+          return v === h.value;
+        });
+      });
+      var defaultHeader = {
+        text: '',
+        sortable: false,
+        width: '1px'
       };
-    },
-    computedPagination: function computedPagination() {
-      return this.hasPagination ? this.pagination : this.defaultPagination;
-    },
-    hasPagination: function hasPagination() {
-      var pagination = this.pagination || {};
 
-      return Object.keys(pagination).length > 0;
-    },
-    hasSelectAll: function hasSelectAll() {
-      return this.selectAll !== undefined && this.selectAll !== false;
+      if (this.showSelect) {
+        var index = headers.findIndex(function (h) {
+          return h.value === 'data-table-select';
+        });
+        if (index < 0) headers.unshift(_objectSpread(_objectSpread({}, defaultHeader), {}, {
+          value: 'data-table-select'
+        }));else headers.splice(index, 1, _objectSpread(_objectSpread({}, defaultHeader), headers[index]));
+      }
+
+      if (this.showExpand) {
+        var _index = headers.findIndex(function (h) {
+          return h.value === 'data-table-expand';
+        });
+
+        if (_index < 0) headers.unshift(_objectSpread(_objectSpread({}, defaultHeader), {}, {
+          value: 'data-table-expand'
+        }));else headers.splice(_index, 1, _objectSpread(_objectSpread({}, defaultHeader), headers[_index]));
+      }
+
+      return headers;
     },
-    itemsLength: function itemsLength() {
-      if (this.search) return this.searchLength;
-      return this.totalItems || this.items.length;
+    colspanAttrs: function colspanAttrs() {
+      return this.isMobile ? undefined : {
+        colspan: this.headersLength || this.computedHeaders.length
+      };
     },
-    indeterminate: function indeterminate() {
-      return this.hasSelectAll && this.someItems && !this.everyItem;
+    columnSorters: function columnSorters() {
+      return this.computedHeaders.reduce(function (acc, header) {
+        if (header.sort) acc[header.value] = header.sort;
+        return acc;
+      }, {});
     },
-    everyItem: function everyItem() {
-      var _this = this;
-
-      return this.filteredItems.length && this.filteredItems.every(function (i) {
-        return _this.isSelected(i);
+    headersWithCustomFilters: function headersWithCustomFilters() {
+      return this.headers.filter(function (header) {
+        return header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true);
       });
     },
-    someItems: function someItems() {
-      var _this2 = this;
-
-      return this.filteredItems.some(function (i) {
-        return _this2.isSelected(i);
+    headersWithoutCustomFilters: function headersWithoutCustomFilters() {
+      return this.headers.filter(function (header) {
+        return !header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true);
       });
     },
-    getPage: function getPage() {
-      var rowsPerPage = this.computedPagination.rowsPerPage;
-
-
-      return rowsPerPage === Object(rowsPerPage) ? rowsPerPage.value : rowsPerPage;
-    },
-    pageStart: function pageStart() {
-      return this.getPage === -1 ? 0 : (this.computedPagination.page - 1) * this.getPage;
-    },
-    pageStop: function pageStop() {
-      return this.getPage === -1 ? this.itemsLength : this.computedPagination.page * this.getPage;
+    sanitizedHeaderProps: function sanitizedHeaderProps() {
+      return (0, _helpers.camelizeObjectKeys)(this.headerProps);
     },
-    filteredItems: function filteredItems() {
-      if (this.totalItems) return this.items;
+    computedItemsPerPage: function computedItemsPerPage() {
+      var itemsPerPage = this.options && this.options.itemsPerPage ? this.options.itemsPerPage : this.itemsPerPage;
+      var itemsPerPageOptions = this.sanitizedFooterProps.itemsPerPageOptions;
 
-      var items = this.items.slice();
-      var hasSearch = typeof this.search !== 'undefined' && this.search !== null;
-
-      if (hasSearch) {
-        items = this.customFilter(items, this.search, this.filter);
-        this.searchLength = items.length;
+      if (itemsPerPageOptions && !itemsPerPageOptions.find(function (item) {
+        return typeof item === 'number' ? item === itemsPerPage : item.value === itemsPerPage;
+      })) {
+        var firstOption = itemsPerPageOptions[0];
+        return _typeof(firstOption) === 'object' ? firstOption.value : firstOption;
       }
 
-      items = this.customSort(items, this.computedPagination.sortBy, this.computedPagination.descending);
+      return itemsPerPage;
+    }
+  },
+  created: function created() {
+    var _this2 = this;
 
-      return this.hideActions && !this.hasPagination ? items : items.slice(this.pageStart, this.pageStop);
-    },
-    selected: function selected() {
-      var _this3 = this;
+    var breakingProps = [['sort-icon', 'header-props.sort-icon'], ['hide-headers', 'hide-default-header'], ['select-all', 'show-select']];
+    /* istanbul ignore next */
 
-      var selected = {};
-      this.value.forEach(function (i) {
-        return selected[i[_this3.itemKey]] = true;
-      });
-      return selected;
+    breakingProps.forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          original = _ref2[0],
+          replacement = _ref2[1];
+
+      if (_this2.$attrs.hasOwnProperty(original)) (0, _console.breaking)(original, replacement, _this2);
+    });
+  },
+  mounted: function mounted() {
+    // if ((!this.sortBy || !this.sortBy.length) && (!this.options.sortBy || !this.options.sortBy.length)) {
+    //   const firstSortable = this.headers.find(h => !('sortable' in h) || !!h.sortable)
+    //   if (firstSortable) this.updateOptions({ sortBy: [firstSortable.value], sortDesc: [false] })
+    // }
+    if (this.calculateWidths) {
+      window.addEventListener('resize', this.calcWidths);
+      this.calcWidths();
     }
   },
-
-  watch: {
-    indeterminate: function indeterminate(val) {
-      if (val) this.all = true;
+  beforeDestroy: function beforeDestroy() {
+    if (this.calculateWidths) {
+      window.removeEventListener('resize', this.calcWidths);
+    }
+  },
+  methods: {
+    calcWidths: function calcWidths() {
+      this.widths = Array.from(this.$el.querySelectorAll('th')).map(function (e) {
+        return e.clientWidth;
+      });
     },
-    someItems: function someItems(val) {
-      if (!val) this.all = false;
+    customFilterWithColumns: function customFilterWithColumns(items, search) {
+      return searchTableItems(items, search, this.headersWithCustomFilters, this.headersWithoutCustomFilters, this.customFilter);
     },
-    search: function search() {
-      this.updatePagination({ page: 1, totalItems: this.itemsLength });
+    customSortWithHeaders: function customSortWithHeaders(items, sortBy, sortDesc, locale) {
+      return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters);
     },
-    everyItem: function everyItem(val) {
-      if (val) this.all = true;
-    }
-  },
+    createItemProps: function createItemProps(item, index) {
+      var props = _KDataIterator.KDataIterator.options.methods.createItemProps.call(this, item, index);
 
-  methods: {
-    updatePagination: function updatePagination(val) {
-      var pagination = this.hasPagination ? this.pagination : this.defaultPagination;
-      var updatedPagination = Object.assign({}, pagination, val);
-      this.$emit('update:pagination', updatedPagination);
+      return Object.assign(props, {
+        headers: this.computedHeaders
+      });
+    },
+    genCaption: function genCaption(props) {
+      if (this.caption) return [this.$createElement('caption', [this.caption])];
+      return (0, _helpers.getSlot)(this, 'caption', props, true);
+    },
+    genColgroup: function genColgroup(props) {
+      var _this3 = this;
 
-      if (!this.hasPagination) {
-        this.defaultPagination = updatedPagination;
+      return this.$createElement('colgroup', this.computedHeaders.map(function (header) {
+        return _this3.$createElement('col', {
+          class: {
+            divider: header.divider
+          }
+        });
+      }));
+    },
+    genLoading: function genLoading() {
+      var th = this.$createElement('th', {
+        staticClass: 'column',
+        attrs: this.colspanAttrs
+      }, [this.genProgress()]);
+      var tr = this.$createElement('tr', {
+        staticClass: 'k-data-table__progress'
+      }, [th]);
+      return this.$createElement('thead', [tr]);
+    },
+    genHeaders: function genHeaders(props) {
+      var data = {
+        props: _objectSpread(_objectSpread({}, this.sanitizedHeaderProps), {}, {
+          headers: this.computedHeaders,
+          options: props.options,
+          mobile: this.isMobile,
+          showGroupBy: this.showGroupBy,
+          checkboxColor: this.checkboxColor,
+          someItems: this.someItems,
+          everyItem: this.everyItem,
+          singleSelect: this.singleSelect,
+          disableSort: this.disableSort
+        }),
+        on: {
+          sort: props.sort,
+          group: props.group,
+          'toggle-select-all': this.toggleSelectAll
+        }
+      }; // TODO: rename to 'head'? (thead, tbody, tfoot)
+
+      var children = [(0, _helpers.getSlot)(this, 'header', _objectSpread(_objectSpread({}, data), {}, {
+        isMobile: this.isMobile
+      }))];
+
+      if (!this.hideDefaultHeader) {
+        var scopedSlots = (0, _helpers.getPrefixedScopedSlots)('header.', this.$scopedSlots);
+        children.push(this.$createElement(_KDataTableHeader.default, _objectSpread(_objectSpread({}, data), {}, {
+          scopedSlots: scopedSlots
+        })));
       }
+
+      if (this.loading) children.push(this.genLoading());
+      return children;
     },
-    isSelected: function isSelected(item) {
-      return this.selected[item[this.itemKey]];
+    genEmptyWrapper: function genEmptyWrapper(content) {
+      return this.$createElement('tr', {
+        staticClass: 'k-data-table__empty-wrapper'
+      }, [this.$createElement('td', {
+        attrs: this.colspanAttrs
+      }, content)]);
     },
-    isExpanded: function isExpanded(item) {
-      return this.expanded[item[this.itemKey]];
+    genItems: function genItems(items, props) {
+      var empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength);
+      if (empty) return [empty];
+      return props.groupedItems ? this.genGroupedRows(props.groupedItems, props) : this.genRows(items, props);
+    },
+    genGroupedRows: function genGroupedRows(groupedItems, props) {
+      var _this4 = this;
+
+      return groupedItems.map(function (group) {
+        if (!_this4.openCache.hasOwnProperty(group.name)) _this4.$set(_this4.openCache, group.name, true);
+
+        if (_this4.$scopedSlots.group) {
+          return _this4.$scopedSlots.group({
+            group: group.name,
+            options: props.options,
+            isMobile: _this4.isMobile,
+            items: group.items,
+            headers: _this4.computedHeaders
+          });
+        } else {
+          return _this4.genDefaultGroupedRow(group.name, group.items, props);
+        }
+      });
     },
-    sort: function sort(index) {
-      var _computedPagination = this.computedPagination,
-          sortBy = _computedPagination.sortBy,
-          descending = _computedPagination.descending;
-
-      if (sortBy === null) {
-        this.updatePagination({ sortBy: index, descending: false });
-      } else if (sortBy === index && !descending) {
-        this.updatePagination({ descending: true });
-      } else if (sortBy !== index) {
-        this.updatePagination({ sortBy: index, descending: false });
-      } else if (!this.mustSort) {
-        this.updatePagination({ sortBy: null, descending: null });
+    genDefaultGroupedRow: function genDefaultGroupedRow(group, items, props) {
+      var _this5 = this;
+
+      var isOpen = !!this.openCache[group];
+      var children = [this.$createElement('template', {
+        slot: 'row.content'
+      }, this.genRows(items, props))];
+
+      var toggleFn = function toggleFn() {
+        return _this5.$set(_this5.openCache, group, !_this5.openCache[group]);
+      };
+
+      var removeFn = function removeFn() {
+        return props.updateOptions({
+          groupBy: [],
+          groupDesc: []
+        });
+      };
+
+      if (this.$scopedSlots['group.header']) {
+        children.unshift(this.$createElement('template', {
+          slot: 'column.header'
+        }, [this.$scopedSlots['group.header']({
+          group: group,
+          groupBy: props.options.groupBy,
+          isMobile: this.isMobile,
+          items: items,
+          headers: this.computedHeaders,
+          isOpen: isOpen,
+          toggle: toggleFn,
+          remove: removeFn
+        })]));
       } else {
-        this.updatePagination({ sortBy: index, descending: false });
+        var toggle = this.$createElement(_KBtn.default, {
+          staticClass: 'ma-0',
+          props: {
+            icon: true,
+            small: true
+          },
+          on: {
+            click: toggleFn
+          }
+        }, [this.$createElement(_KIcon.default, [isOpen ? '$minus' : '$plus'])]);
+        var remove = this.$createElement(_KBtn.default, {
+          staticClass: 'ma-0',
+          props: {
+            icon: true,
+            small: true
+          },
+          on: {
+            click: removeFn
+          }
+        }, [this.$createElement(_KIcon.default, ['$close'])]);
+        var column = this.$createElement('td', {
+          staticClass: 'text-start',
+          attrs: this.colspanAttrs
+        }, [toggle, "".concat(props.options.groupBy[0], ": ").concat(group), remove]);
+        children.unshift(this.$createElement('template', {
+          slot: 'column.header'
+        }, [column]));
+      }
+
+      if (this.$scopedSlots['group.summary']) {
+        children.push(this.$createElement('template', {
+          slot: 'column.summary'
+        }, [this.$scopedSlots['group.summary']({
+          group: group,
+          groupBy: props.options.groupBy,
+          isMobile: this.isMobile,
+          items: items,
+          headers: this.computedHeaders,
+          isOpen: isOpen,
+          toggle: toggleFn
+        })]));
+      }
+
+      return this.$createElement(_RowGroup.default, {
+        key: group,
+        props: {
+          value: isOpen
+        }
+      }, children);
+    },
+    genRows: function genRows(items, props) {
+      return this.$scopedSlots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props);
+    },
+    genScopedRows: function genScopedRows(items, props) {
+      var rows = [];
+
+      for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        rows.push(this.$scopedSlots.item(_objectSpread(_objectSpread({}, this.createItemProps(item, i)), {}, {
+          isMobile: this.isMobile
+        })));
+
+        if (this.isExpanded(item)) {
+          rows.push(this.$scopedSlots['expanded-item']({
+            headers: this.computedHeaders,
+            isMobile: this.isMobile,
+            index: i,
+            item: item
+          }));
+        }
       }
+
+      return rows;
     },
-    needsTR: function needsTR(row) {
-      return row.length && row.find(function (c) {
-        return c.tag === 'td';
+    genDefaultRows: function genDefaultRows(items, props) {
+      var _this6 = this;
+
+      return this.$scopedSlots['expanded-item'] ? items.map(function (item, index) {
+        return _this6.genDefaultExpandedRow(item, index);
+      }) : items.map(function (item, index) {
+        return _this6.genDefaultSimpleRow(item, index);
       });
     },
-    genTR: function genTR(children) {
-      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    genDefaultExpandedRow: function genDefaultExpandedRow(item, index) {
+      var isExpanded = this.isExpanded(item);
+      var classes = {
+        'k-data-table__expanded k-data-table__expanded__row': isExpanded
+      };
+      var headerRow = this.genDefaultSimpleRow(item, index, classes);
+      var expandedRow = this.$createElement('tr', {
+        staticClass: 'k-data-table__expanded k-data-table__expanded__content'
+      }, [this.$scopedSlots['expanded-item']({
+        headers: this.computedHeaders,
+        isMobile: this.isMobile,
+        item: item
+      })]);
+      return this.$createElement(_RowGroup.default, {
+        props: {
+          value: isExpanded
+        }
+      }, [this.$createElement('template', {
+        slot: 'row.header'
+      }, [headerRow]), this.$createElement('template', {
+        slot: 'row.content'
+      }, [expandedRow])]);
+    },
+    genDefaultSimpleRow: function genDefaultSimpleRow(item, index) {
+      var _this7 = this;
+
+      var classes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var scopedSlots = (0, _helpers.getPrefixedScopedSlots)('item.', this.$scopedSlots);
+      var data = this.createItemProps(item, index);
+
+      if (this.showSelect) {
+        var slot = scopedSlots['data-table-select'];
+        scopedSlots['data-table-select'] = slot ? function () {
+          return slot(_objectSpread(_objectSpread({}, data), {}, {
+            isMobile: _this7.isMobile
+          }));
+        } : function () {
+          var _this7$checkboxColor;
+
+          return _this7.$createElement(_KSimpleCheckbox.default, {
+            staticClass: 'k-data-table__checkbox',
+            props: {
+              value: data.isSelected,
+              disabled: !_this7.isSelectable(item),
+              color: (_this7$checkboxColor = _this7.checkboxColor) != null ? _this7$checkboxColor : ''
+            },
+            on: {
+              input: function input(val) {
+                return data.select(val);
+              }
+            }
+          });
+        };
+      }
 
-      return this.$createElement('tr', data, children);
-    },
-    toggle: function toggle(value) {
-      var _this4 = this;
+      if (this.showExpand) {
+        var _slot = scopedSlots['data-table-expand'];
+        scopedSlots['data-table-expand'] = _slot ? function () {
+          return _slot(data);
+        } : function () {
+          return _this7.$createElement(_KIcon.default, {
+            staticClass: 'k-data-table__expand-icon',
+            class: {
+              'k-data-table__expand-icon--active': data.isExpanded
+            },
+            on: {
+              click: function click(e) {
+                e.stopPropagation();
+                data.expand(!data.isExpanded);
+              }
+            }
+          }, [_this7.expandIcon]);
+        };
+      }
 
-      var selected = Object.assign({}, this.selected);
-      this.filteredItems.forEach(function (i) {
-        return selected[i[_this4.itemKey]] = value;
+      return this.$createElement(this.isMobile ? _MobileRow.default : _Row.default, {
+        key: (0, _helpers.getObjectValueByPath)(item, this.itemKey),
+        class: (0, _mergeData.mergeClasses)(_objectSpread(_objectSpread({}, classes), {}, {
+          'k-data-table__selected': data.isSelected
+        }), (0, _helpers.getPropertyFromItem)(item, this.itemClass)),
+        props: {
+          headers: this.computedHeaders,
+          hideDefaultHeader: this.hideDefaultHeader,
+          index: index,
+          item: item,
+          rtl: this.$kdutify.rtl
+        },
+        scopedSlots: scopedSlots,
+        on: {
+          // TODO: for click, the first argument should be the event, and the second argument should be data,
+          // but this is a breaking change so it's for v3
+          click: function click() {
+            return _this7.$emit('click:row', item, data);
+          },
+          contextmenu: function contextmenu(event) {
+            return _this7.$emit('contextmenu:row', event, data);
+          },
+          dblclick: function dblclick(event) {
+            return _this7.$emit('dblclick:row', event, data);
+          }
+        }
+      });
+    },
+    genBody: function genBody(props) {
+      var data = _objectSpread(_objectSpread({}, props), {}, {
+        expand: this.expand,
+        headers: this.computedHeaders,
+        isExpanded: this.isExpanded,
+        isMobile: this.isMobile,
+        isSelected: this.isSelected,
+        select: this.select
       });
 
-      this.$emit('input', this.items.filter(function (i) {
-        return selected[i[_this4.itemKey]];
-      }));
-    }
-  },
-
-  created: function created() {
-    var firstSortable = this.headers.find(function (h) {
-      return !('sortable' in h) || h.sortable;
-    });
+      if (this.$scopedSlots.body) {
+        return this.$scopedSlots.body(data);
+      }
 
-    this.defaultPagination.sortBy = firstSortable ? firstSortable.value : null;
+      return this.$createElement('tbody', [(0, _helpers.getSlot)(this, 'body.prepend', data, true), this.genItems(props.items, props), (0, _helpers.getSlot)(this, 'body.append', data, true)]);
+    },
+    genFoot: function genFoot(props) {
+      var _this$$scopedSlots$fo, _this$$scopedSlots;
 
-    if (!this.rowsPerPageItems.length) {
-      console.warn('The prop \'rows-per-page-items\' in k-data-table can not be empty.');
-    } else {
-      this.defaultPagination.rowsPerPage = this.rowsPerPageItems[0];
-    }
+      return (_this$$scopedSlots$fo = (_this$$scopedSlots = this.$scopedSlots).foot) == null ? void 0 : _this$$scopedSlots$fo.call(_this$$scopedSlots, props);
+    },
+    genFooters: function genFooters(props) {
+      var data = {
+        props: _objectSpread({
+          options: props.options,
+          pagination: props.pagination,
+          itemsPerPageText: '$kdutify.dataTable.itemsPerPageText'
+        }, this.sanitizedFooterProps),
+        on: {
+          'update:options': function updateOptions(value) {
+            return props.updateOptions(value);
+          }
+        },
+        widths: this.widths,
+        headers: this.computedHeaders
+      };
+      var children = [(0, _helpers.getSlot)(this, 'footer', data, true)];
 
-    this.defaultPagination.totalItems = this.itemsLength;
+      if (!this.hideDefaultFooter) {
+        children.push(this.$createElement(_KDataIterator.KDataFooter, _objectSpread(_objectSpread({}, data), {}, {
+          scopedSlots: (0, _helpers.getPrefixedScopedSlots)('footer.', this.$scopedSlots)
+        })));
+      }
 
-    this.updatePagination(Object.assign({}, this.defaultPagination, this.pagination));
+      return children;
+    },
+    genDefaultScopedSlot: function genDefaultScopedSlot(props) {
+      var simpleProps = {
+        height: this.height,
+        fixedHeader: this.fixedHeader,
+        dense: this.dense
+      }; // if (this.virtualRows) {
+      //   return this.$createElement(KVirtualTable, {
+      //     props: Object.assign(simpleProps, {
+      //       items: props.items,
+      //       height: this.height,
+      //       rowHeight: this.dense ? 24 : 48,
+      //       headerHeight: this.dense ? 32 : 48,
+      //       // TODO: expose rest of props from virtual table?
+      //     }),
+      //     scopedSlots: {
+      //       items: ({ items }) => this.genItems(items, props) as any,
+      //     },
+      //   }, [
+      //     this.proxySlot('body.before', [this.genCaption(props), this.genHeaders(props)]),
+      //     this.proxySlot('bottom', this.genFooters(props)),
+      //   ])
+      // }
+
+      return this.$createElement(_KSimpleTable.default, {
+        props: simpleProps,
+        class: {
+          'k-data-table--mobile': this.isMobile
+        }
+      }, [this.proxySlot('top', (0, _helpers.getSlot)(this, 'top', _objectSpread(_objectSpread({}, props), {}, {
+        isMobile: this.isMobile
+      }), true)), this.genCaption(props), this.genColgroup(props), this.genHeaders(props), this.genBody(props), this.genFoot(props), this.proxySlot('bottom', this.genFooters(props))]);
+    },
+    proxySlot: function proxySlot(slot, content) {
+      return this.$createElement('template', {
+        slot: slot
+      }, content);
+    }
   },
-  render: function render(h) {
-    return h('k-table-overflow', {}, [h('table', {
-      'class': this.classes
-    }, [this.genTHead(), this.genTProgress(), this.genTBody(), this.genTFoot()])]);
+  render: function render() {
+    var _this8 = this;
+
+    return this.$createElement(_KData.KData, {
+      props: _objectSpread(_objectSpread({}, this.$props), {}, {
+        customFilter: this.customFilterWithColumns,
+        customSort: this.customSortWithHeaders,
+        itemsPerPage: this.computedItemsPerPage
+      }),
+      on: {
+        'update:options': function updateOptions(v, old) {
+          _this8.internalGroupBy = v.groupBy || [];
+          !(0, _helpers.deepEqual)(v, old) && _this8.$emit('update:options', v);
+        },
+        'update:page': function updatePage(v) {
+          return _this8.$emit('update:page', v);
+        },
+        'update:items-per-page': function updateItemsPerPage(v) {
+          return _this8.$emit('update:items-per-page', v);
+        },
+        'update:sort-by': function updateSortBy(v) {
+          return _this8.$emit('update:sort-by', v);
+        },
+        'update:sort-desc': function updateSortDesc(v) {
+          return _this8.$emit('update:sort-desc', v);
+        },
+        'update:group-by': function updateGroupBy(v) {
+          return _this8.$emit('update:group-by', v);
+        },
+        'update:group-desc': function updateGroupDesc(v) {
+          return _this8.$emit('update:group-desc', v);
+        },
+        pagination: function pagination(v, old) {
+          return !(0, _helpers.deepEqual)(v, old) && _this8.$emit('pagination', v);
+        },
+        'current-items': function currentItems(v) {
+          _this8.internalCurrentItems = v;
+
+          _this8.$emit('current-items', v);
+        },
+        'page-count': function pageCount(v) {
+          return _this8.$emit('page-count', v);
+        }
+      },
+      scopedSlots: {
+        default: this.genDefaultScopedSlot
+      }
+    });
   }
-};
+});
+
+exports.default = _default2;
+//# sourceMappingURL=KDataTable.js.map