d-naive
is a Vue library designed to enhance Naive UI components with additional functionalities for complex data handling and user input management. It includes a robust DDataTable
component and a versatile DInput
component, making it suitable for a wide range of applications.
Install d-naive
with npm:
npm install d-naive
The DataTable
component provides advanced features such as sorting, pagination, filtering, and cell editing.
- data: Array of data objects.
- columns: Definitions of the table columns.
- pagination: Configuration options for pagination.
- editable: Boolean to enable editing directly in the table.
- scrollX: Horizontal scrolling setting.
- update:expanded: Emitted when the expanded rows are updated.
- put: Emitted after confirming data modifications.
- delete: Emitted when an item is deleted.
- resetFilters(): Clears all applied filters.
- scrollTo(value): Scrolls to the specified row.
- getData(): Returns the current data displayed in the table.
The DInput
component manages various types of inputs including text, select, number, date, and checkbox, with options for validation and custom formatting.
- modelValue: The input's bound value.
- type: The type of input (e.g., text, select, date).
- options: Options for select inputs, if applicable.
- update:modelValue: Emitted when the input value changes.
Formats a value based on the specified field's type.
Retrieves a value from an object based on a dot-notated key string.
Here is an example of using the DDataTable
component in a Vue application:
<template>
<d-data-table :data="users" :columns="columns" />
</template>
<script>
export default {
data() {
return {
users: [{ id: 1, name: 'John Doe', age: 30 }],
columns: [
{ title: 'ID', key: 'id' },
{ title: 'Name', key: 'name' },
{ title: 'Age', key: 'age', sortable: true }
]
};
}
}
</script>