Filtering, sorting, and pagination in lists with vue-dataset

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 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.

• 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 main wrapper dataset component uses provide/inject and also 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

You can view demos and read the documentation of vue-dataset here.
Have fun creating lists!