@gitlab/ui/dist/components/base/sorting/examples/sorting.default.example.js

GitLab UI Components

import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'DefaultExample',
  data: function data() {
    var sortOptions = [{
      id: 1,
      label: 'Repository',
      sortProp: 'repository'
    }, {
      id: 2,
      label: 'Id',
      sortProp: 'id'
    }, {
      id: 3,
      label: 'Last Updated',
      sortProp: 'lastUpdated'
    }];
    return {
      isAscending: false,
      dropdownText: 'Repository',
      activeOpt: sortOptions[0],
      sortOptions: sortOptions
    };
  },
  computed: {
    exampleData: function exampleData() {
      var exampleDate = new Date().valueOf();
      return [{
        repository: 'GitLab UI',
        id: 'c',
        lastUpdated: new Date(exampleDate - 2000000)
      }, {
        repository: 'GitLab EE',
        id: 'a',
        lastUpdated: new Date(exampleDate)
      }, {
        repository: 'GitLab CE',
        id: 'b',
        lastUpdated: new Date(exampleDate - 10000000)
      }];
    }
  },
  methods: {
    onSortItemClick: function onSortItemClick(sortByOpt) {
      this.dropdownText = sortByOpt.label;
      this.activeOpt = sortByOpt;
      this.sortMyData(this.activeOpt, this.isAscending);
    },
    onDirectionChange: function onDirectionChange(isAscending) {
      this.isAscending = isAscending;
      this.sortMyData(this.activeOpt, this.isAscending);
    },
    sortMyData: function sortMyData(sortByOpt, isAscending) {
      var sortProp = sortByOpt.sortProp;
      this.exampleData.sort(function (a, b) {
        if (a[sortProp] < b[sortProp]) {
          return isAscending ? -1 : 1;
        }

        if (a[sortProp] > b[sortProp]) {
          return isAscending ? 1 : -1;
        }

        return 0;
      });
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-sorting',{staticClass:"mb-3",attrs:{"text":_vm.dropdownText,"is-ascending":_vm.isAscending},on:{"sortDirectionChange":_vm.onDirectionChange}},_vm._l((_vm.sortOptions),function(opt){return _c('gl-sorting-item',{key:opt.id,attrs:{"active":opt.id === _vm.activeOpt.id},on:{"click":function($event){return _vm.onSortItemClick(opt)}}},[_vm._v("\n      "+_vm._s(opt.label)+"\n    ")])}),1),_vm._v(" "),_c('div',{staticClass:"example-table"},[_c('table',{staticClass:"table b-table table-striped table-sm"},[_vm._m(0),_vm._v(" "),_c('tbody',_vm._l((_vm.exampleData),function(item){return _c('tr',{key:item.id},[_c('td',[_vm._v(_vm._s(item.repository))]),_vm._v(" "),_c('td',[_vm._v(_vm._s(item.id))]),_vm._v(" "),_c('td',[_vm._v(_vm._s(item.lastUpdated))])])}),0)])])],1)};
var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('thead',[_c('th',[_vm._v("Repository")]),_vm._v(" "),_c('th',[_vm._v("Id")]),_vm._v(" "),_c('th',[_vm._v("Last Updated")])])}];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;