Y7K Component: Grouped List

This component groups its children DOM elements based on a given key. It detects, when new DOM elements are inserted into the tree and rearranges them aswell. This makes it very handy to use it together with Filterable List.

It is based on Vue 2, MaintainableCSS and the Y7K Style Plate. Detailed information in the Y7K Showroom.

Installation

Install npm package

npm install @y7k/component-grouped-list --save

Include in your project

import grouped-list from '@y7k/component-grouped-list';

Variant 1: Register components globally:

import grouped-list from '@y7k/component-grouped-list';
groupedList.registerGlobally();

Variant 2: Use components directly:

import { GroupedList } from '@y7k/component-grouped-list';

// Vue component example
export default {

    components: {
        GroupedList,
    },
}

Include styles

In your main.scss file

@import '@y7k/grouped-list/src/scss/grouped-list';

// If you don't set "node_modules" as a webpack include path:
@import '../[path]/../node_modules/@y7k/component-grouped-list/src/scss/groupedList';

Documentation

Please have a look at the usage documentation in the Y7K Showroom.