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 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.
vue-dataset contains 6 components
||Responsible for distributing data/methods to children (wrapper/data provider)|
||Renders the dataset items|
||Renders the paging information|
||Renders the paging buttons|
||Renders the search input field|
||Renders the "items per page" dropdown select|
You can use any HTML structure to present your data. The
dataset-itemcomponent 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.
You can define "external" filters for your data (i.e how certain properties of the data will be filtered).
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.
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.
Useful in situations when you have values that can't be sorted natively such as currency or dates in certain formats.
Sort the dataset by multiple attributes simultaneously.
The dataset data is paginated by default,
vue-datasetcomes with "items per page", "pagination", and "pagination information" components.
dataset-searchcomponent comes with
debouncecapability 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.
vue-dataset main wrapper
datasetcomponent 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
You can view demos and read the documentation of vue-dataset here.
Have fun creating lists!