website·Indexed 29 days ago
https://next--vue-dataset-demo.netlify.app/A Vue component library for managing datasets, featuring a provider component for data and methods, support for module bundlers like Webpack, and layouts for data tables and cards with custom filters.
<dataset> component acts as a provider for all data and methods required by vue-dataset. It uses Vue's provide/inject mechanism to make data accessible to nested components. It accepts the original data object and configuration options for filtering, searching, and sorting.<dataset
v-slot="{ ds }"
:ds-data="users"
:ds-filter-fields="{ firstName: 'John', lastName: startsWithD }"
:ds-sortby="['lastName']"
:ds-search-in="['firstName', 'lastName']"
:ds-search-as="{ birthDate: searchAsEuroDate }"
:ds-sort-as="{ birthDate: sortAsDate }"
>
<!-- Child components go here -->
</dataset>vue-dataset.umd.js file (found in the dist folder) via a script tag to expose a global VueDataset object. This object contains all components which can then be registered globally in a Vue application.<script type="text/javascript" src="vue-dataset.umd.js"></script>const app = Vue.createApp({...})
app.component('Dataset', VueDataset.Dataset)
app.component('DatasetItem', VueDataset.DatasetItem)
app.component('DatasetInfo', VueDataset.DatasetInfo)
app.component('DatasetPager', VueDataset.DatasetPager)
app.component('DatasetSearch', VueDataset.DatasetSearch)
app.component('DatasetShow', VueDataset.DatasetShow)vue-dataset with a module bundler like Webpack, install the @next version via npm and use the import statement to include the necessary components in your project bundle.npm install vue-dataset@next --saveimport { Dataset, DatasetItem, DatasetInfo, DatasetPager, DatasetSearch, DatasetShow } from 'vue-dataset'<dataset> component provides reactive data and methods that can be accessed in child components using Vue's inject API. This allows for the creation of custom child components that react to the dataset's state.<template>
<div>{{ dsRows }} - {{ dsPages }}</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup(props) {
const dsRows = inject('dsRows')
const dsPages = inject('dsPages')
return { dsRows, dsPages }
}
}
</script><dataset> component emits the update:dsData event whenever the internal computed results change. This event emits the current filtered array of data objects.<dataset> component and are available via inject or the ds scoped slot object.| Property | Type | Description |
|---|---|---|
dsData | Array of Objects | All data objects |
dsIndexes | Array | Indexes of filtered rows (ignoring paging) |
dsRows | Array | Indexes of rows on the current page |
dsPages | Array | Array for pagination links |
dsResultsNumber | Number | Number of rows currently displaying |
dsPagecount | Number | Total number of pagination pages |
dsFrom | Number | Start index of current page |
dsTo | Number | End index of current page |
dsPage | Number | Current page number |
dsShowEntries | Number | Items per page |
datasetI18n | Object | Translation strings |
| Method | Params | Description |
|---|---|---|
search | String | Perform a search with the given value |
showEntries | Number | Change number of items per page |
setActive | Number | Set the active pagination page |
The <dataset> component uses several props to control how data is processed:
ds-data (Array of Objects): The source data to operate on.ds-filter-fields (Object): Defines filtering rules. Keys are data properties; values are either a literal value or a predicate function (value, row) => boolean.ds-sortby (Array): Properties to sort by. Prefix a property with - for descending order (e.g., ['lastName']).ds-search-in (Array): Restricts search to specific properties. If empty, all properties are searched.ds-search-as (Object): Custom search logic. Keys are properties; values are predicate functions (value, searchString, rowData) => boolean.ds-sort-as (Object): Custom sort conversion. Keys are properties; values are functions that convert the value into a sortable format (e.g., converting an ISO string to a Date object).// Example predicate for ds-filter-fields
startsWithD (value, row) {
return value.toLowerCase().startsWith('d')
}
// Example predicate for ds-search-as
searchAsEuroDate: function (value, searchString, rowData) {
const parts = searchString.split('.')
const isoDate = `${parts[2]}-${parts[1]}-${parts[0]}`
return isoDate === value
}
// Example converter for ds-sort-as
sortAsDate: function (isoDate) {
return new Date(isoDate)
}<dataset-item> component is used to display individual rows of a dataset. It must be nested inside a <dataset> component. It is a dynamic component that can be rendered as any HTML tag (e.g., div, li, tr). It provides a scoped slot containing the row's data and index, and a separate slot for customizing the "no data found" message.The dataset-show component provides a select dropdown to control how many items are displayed simultaneously.
Props:
ds-show-entries (Number): The number of items to show. Defaults to 10.ds-show-entries-lovs (Array of Objects): The list of options for the select element. Defaults to a list of values: 5, 10, 25, 50, 100.<dataset-show />vue-dataset package provides six primary components to manage and display data lists:The following components are available in the vue-dataset library:
dataset: The wrapper/data provider responsible for distributing data and methods to child components.dataset-item: Used to render the individual items within the dataset.dataset-info: Displays paging information (e.g., 'Showing 1 to 5 of 5000 entries').dataset-pager: Renders the pagination navigation buttons.dataset-search: Renders the search input field for filtering data.dataset-show: Renders the dropdown selector to define the number of items per page.