https://github.com/devdogukan/vue-data-table
https://github.com/devdogukan/vue-data-table
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devdogukan/vue-data-table
- Owner: devdogukan
- Created: 2023-04-22T10:10:36.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-17T12:36:54.000Z (about 1 year ago)
- Last Synced: 2025-04-18T03:12:57.386Z (about 1 year ago)
- Language: Vue
- Size: 46.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-data-table
A comprehensive Vue 3 data table component with all the features you need for data management.
## Features
### Completed Features
- ✅ Search - Full text search across all columns
- ✅ Sortable - Click on column headers to sort
- ✅ Delete - Delete individual rows or bulk delete
- ✅ Pagination - Navigate through pages of data
- ✅ Filter - Filter data using predefined filters
- ✅ Edit - Edit existing records inline
- ✅ Add - Add new records to the table
- ✅ Select - Select individual or all rows for bulk operations
## Usage
```vue
{{ item.name }}
import { defineComponent, ref } from 'vue';
import DataTable from './components/DataTable.vue';
export default defineComponent({
components: { DataTable },
setup() {
const columns = ref([
{ key: 'id', label: 'ID' },
{ key: 'name', label: 'Name' },
{ key: 'email', label: 'Email' }
]);
const users = ref([
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
]);
const filters = ref([
{
label: 'Active Users',
value: 'active',
predicate: (item) => item.status === 'Active'
}
]);
return { columns, users, filters };
}
});
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | Array | required | Array of objects to display in the table |
| columns | Array | required | Column definitions with key and label properties |
| itemsPerPage | Number | 10 | Number of items to display per page |
| editable | Boolean | true | Enable inline editing of rows |
| deletable | Boolean | true | Enable row deletion |
| selectable | Boolean | true | Enable row selection |
| filters | Array | [] | Predefined filters for the data |
## Events
| Event | Payload | Description |
|-------|---------|-------------|
| update:data | Array | Emitted when data changes (for v-model binding) |
| row-deleted | Object/Array | Emitted when a row or rows are deleted |
| row-edited | Object | Emitted when a row is edited with both original and edited row |
| row-added | Object | Emitted when a new row is added |
## Slots
You can customize column rendering using named slots that match the column key.
```vue
{{ item.name }}
```
## Styling
The component comes with default styling but can be easily customized using CSS.