Filtering, sorting, and pagination in lists with vue-dataset
Tags: vue, javascript, datatable, webdev
Published: 2021-02-07 14:49:19

Displaying a collection of items is probably the most common thing we implement in our day to day work as frontend developers. We display collections as tables, list groups, cards, paragraphs, or anything really.

Often times -even in the simpler of cases- we need to have features like filtering, sorting and pagination for our lists. But implementing the same functionalities over and over again is not the way to go. We want to keep our codebase `DRY` and  **reuse** stuff, but without being restricted by the HTML layout.

### vue-dataset to the rescue
[vue-dataset](https://github.com/kouts/vue-dataset) is a set of Vue.js components that consists of a main provider (wrapper) component: `dataset`, an item component: `dataset-item` and additional components for handling searching and pagination. Combining these, you can create virtually any layout for displaying your lists while still reusing the same functionality.

Since all data and methods are provided by the `dataset` component to its wrapped children, it's also super easy to create your own additional components to replace the defaults for pagination, items per page, etc.

### Components
`vue-dataset` contains 6 components

| Component      | Description |
| ----------- | ----------- |
| `dataset`      | Responsible for distributing data/methods to children (wrapper/data provider)       |
| `dataset-item`   | Renders the dataset items        |
| `dataset-info`   | Renders the paging information        |
| `dataset-pager`   | Renders the paging buttons        |
| `dataset-search`   | Renders the search input field        |
| `dataset-show`   | Renders the "items per page" dropdown select        |

### Features at a glance
- #### Highly customizable DOM structure
You can use any HTML structure to present your data. The `dataset-item` component used to display the item rows of the dataset, leverages a dynamic component so that it can take the form of any tag like div, li, tr, etc.

- #### Custom filtering based on the row values from all or specific data keys
You can define "external" filters for your data (i.e how certain properties of the data will be filtered).

- #### "Search as" feature allows for searching using a custom search method
Useful in situations when you have e.g dates in YYYY-mm-dd format inside your dataset but you are displaying the formatted value (e.g in dd.mm.YYYY format). In that case, you want the user to be able to search the dates with the same format as it appears on-screen. This feature also allows searching the data using an external library such as e.g [fuse.js](https://fusejs.io/).

- #### Multi "column" searching, search data keys are configurable  
The "Search in" feature allows the definition of which properties of the data should be searchable. Useful when sometimes you want to restrict searching only to properties that get displayed on the screen.

- #### "Sort as" feature allows for sorting using a custom sorting method  
Useful in situations when you have values that can't be sorted natively such as currency or dates in certain formats.

- #### Multi "column" sorting, sortable data keys are configurable  
Sort the dataset by multiple attributes simultaneously.

- #### Pagination
The dataset data is paginated by default, `vue-dataset` comes with "items per page", "pagination", and "pagination information" components.

- #### Global search with debounce setting
The default `dataset-search` component comes with `debounce` capability with a customizable timeout time. Useful you have a lot of items and you want to wait until the user stops typing before executing the filter logic.

- #### Easy to extend with custom components
[vue-dataset](https://github.com/kouts/vue-dataset) main wrapper `dataset` component uses [provide/inject](https://vuejs.org/v2/api/#provide-inject) and also [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) to distribute data and methods to its children. Whichever method you choose, it's very easy to create totally custom versions of `vue-dataset's` built-in components.

### Checkout [vue-dataset](https://github.com/kouts/vue-dataset)
You can view demos and read the documentation of vue-dataset [here](https://vue-dataset-demo.netlify.app/).
Have fun creating lists!