@gitlab/ui/dist/components/base/sorting/sorting.documentation.js

GitLab UI Components

var description = "## Usage\n\nThe sorting component allows the user to select the field on which they would like to sort a list\nand whether to sort in ascending or descending order.\n\nThe dropdown part of the sorting component is a standard `gl-dropdown` component, with the items\nexposed as a slot. Inside the `gl-sorting` component, you should add a list of `gl-sorting-item`\ncomponents to construct your sorting options. The check icon will be displayed when a\n`gl-sorting-item` has its `active` prop set to `true`.\n\nThe `gl-sorting` component expects its parent component to manage the `text` and `is-ascending`\nprops. It does not track these using internal state.\n\nA sort update should be triggered by clicking a `gl-sorting-item` component (and therefore should\nhave a `@click` event bound or a `href` prop in the case of navigation) or by clicking the direction\nbutton. You should bind a function to the `sortDirectionChange` event to receive the new\n`is-ascending` value and re-order your data appropriately.\n\nA complete implementation example might look like:\n\n```html\n<template>\n  <gl-sorting\n    :text=\"dropdownText\"\n    :is-ascending=\"isAscending\"\n    @sortDirectionChange=\"onDirectionChange\"\n  >\n    <gl-sorting-item @click=\"onSortItemClick('Item 1')\">Item 1</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 2')\">Item 2</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 3')\">Item 3</gl-sorting-item>\n  </gl-sorting>\n</template>\n\n<script>\nimport { GlSorting, GlSortingItem } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlSorting,\n    GlSortingItem,\n  },\n  data() {\n    return {\n      isAscending: false,\n      dropdownText: 'Sort...'\n    }\n  },\n  methods: {\n    onSortItemClick(sortByItem) {\n      this.dropdownText = sortByItem;\n      this.sortMyData(sortByItem, this.isAscending);\n    },\n    onDirectionChange(isAscending) {\n      this.isAscending = isAscending;\n      this.sortMyData(this.dropdownText, this.isAscending);\n    },\n    sortMyData(sortBy, isAscending) {\n      // Use sortBy and direction to sort your data\n    },\n  }\n}\n</script>\n```\n";

var sorting_documentation = {
  description
};

export default sorting_documentation;