This content originally appeared on DEV Community and was authored by Giannis Koutsaftakis
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 withdebounce
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 ofvue-dataset's
built-in components.
Checkout vue-dataset
You can view demos and read the documentation of vue-dataset here.
Have fun creating lists!
This content originally appeared on DEV Community and was authored by Giannis Koutsaftakis
Giannis Koutsaftakis | Sciencx (2021-02-07T14:49:19+00:00) Filtering, sorting, and pagination in lists with vue-dataset. Retrieved from https://www.scien.cx/2021/02/07/filtering-sorting-and-pagination-in-lists-with-vue-dataset/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.