Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kellsworks/vue-datatable-x
Vue 3 Datatable Component
https://github.com/kellsworks/vue-datatable-x
datatable vue vue-3-datatable vue3 vuedatatable
Last synced: about 1 month ago
JSON representation
Vue 3 Datatable Component
- Host: GitHub
- URL: https://github.com/kellsworks/vue-datatable-x
- Owner: KellsWorks
- Created: 2024-09-12T07:35:04.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-26T20:10:32.000Z (about 2 months ago)
- Last Synced: 2024-09-29T11:45:35.314Z (about 2 months ago)
- Topics: datatable, vue, vue-3-datatable, vue3, vuedatatable
- Language: Vue
- Homepage:
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue 3 Datatable X
A highly customizable and feature-rich table component for Vue 3 applications
## Features
- Sortable columns
- Pagination
- Custom styling options
- Striped rows
- Loading state with customizable loaders
- Search functionality
- Responsive design with optional scrollbars
- Cell click events
- Customizable item display count
## Installation
```bash
npm install vue3-datatable-x
```
## Nuxt 3
```ts
import Vue3EasyDataTable from 'vue3-datatable-x'
import 'vue3-datatable-x/dist/style.css'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('EasyDataTable', Vue3EasyDataTable)
})
```
## Usage
```vue
{{ item.name }}
import { ref } from 'vue';
import { Vue3DatatableX } from 'vue3-datatable-x';
const headers = [
{ text: 'Name', value: 'name', position: 'left', style: { bold: true } },
{ text: 'Age', value: 'age', position: 'center' },
{ text: 'Email', value: 'email', position: 'right' },
];
const items = ref([
{ name: 'John Doe', age: 30, email: '[email protected]' },
{ name: 'Jane Smith', age: 25, email: '[email protected]' },
// ... more items
]);
const isLoading = ref(false);
const searchField = 'name';
const searchQuery = ref('');
const tableStyle = {
borderColor: '#ddd',
borderWidth: 1,
borderRadius: 2,
};
const handlePageChange = (page) => {
console.log('Page changed:', page);
};
const handleItemsPerPageChange = (count) => {
console.log('Items per page changed:', count);
};
const handleCellClick = ({ item, data, index, event }) => {
console.log('Cell clicked:', { item, data, index, event });
};
```
## Props
| Prop Name | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| headers | Array | Yes | - | Array of header objects defining the table columns |
| items | Array | Yes | - | Array of data objects to be displayed in the table |
| color | String | No | - | Primary color for the table (e.g., for selected page) |
| loading | Boolean | No | false | Whether the table is in a loading state |
| search | String | No | - | The field to search in the items array |
| searchValue | String | No | - | The value to search for |
| loader | String | No | 'md-loop' | Type of loader to display ('dots', 'bubbles', 'alt-loop', 'md-loop', 'twotone-loop') |
| loaderStyle | LoaderStyle (see types) | No | { height: 50, width: 50 } | Custom styles for the loader |
| showHorizontalScrollbar | Boolean | No | false | Whether to show a horizontal scrollbar |
| showVerticalScrollbar | Boolean | No | false | Whether to show a vertical scrollbar |
| style | TableStyle (see types) | No | - | Custom styles for the table |
| striped | Object | No | - | Configuration for striped rows |
| totalItems | Number | No | - | Total number of items (for pagination) |
| itemsPerPage | Number | No | 10 | Number of items to display per page |
| currentPage | Number | No | 1 | Current active page |
### Events
| **Event** | **Description** |
|------------------------|---------------------------------------------------------------------|
| `update:page` | Emitted when the current page changes. |
| `update:itemsPerPage` | Emitted when the number of items per page changes. |
| `cell-click` | Emitted when a cell is clicked, providing details about the clicked item. |
### Slots
| **Slot** | **Description** |
|------------------------|---------------------------------------------------------------------|
| `#[header.value]` | Slot for custom content in a specific column, identified by `header.value`. |
| `#loader` | Slot for a custom loader component. |
## Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by providing a `style` prop or overriding the default classes.
| **Type** | **Description** | **Properties** |
|----------------|---------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **HeaderStyle** | Defines the style of table headers. | `uppercase?: boolean`
`bold?: boolean`
`italic?: boolean`
`underline?: boolean`
`color?: string`
`padding?: number`
`cellStyle?: ItemStyle` |
| **HeaderPosition** | Specifies the position of the header text. | Can be one of: `'left'`, `'right'`, `'center'`. |
| **Header** | Represents a table header with various options. | `text: string`
`value: string`
`sort?: boolean`
`sortBy?: string`
`style?: HeaderStyle`
`position?: HeaderPosition`
`rowSpan?: number`
`colSpan?: number` |
| **TableStyle** | Defines the overall style of the table. | `backgroundColor?: string`
`borderColor?: string`
`borderStyle?: string`
`borderWidth?: number`
`borderRadius?: number` |
| **ItemStyle** | Describes the style of individual items (cells) in the table. | `backgroundColor?: string`
`textColor?: string`
`fontSize?: number`
`fontWeight?: number`
`fontFamily?: string`
`textAlign?: 'left' \| 'center' \| 'right'`
`padding?: number`
`margin?: number`
`borderRightWidth?: number`
`borderBottomWidth?: number`
`borderLeftWidth?: number`
`borderTopWidth?: number`
`borderColor?: string` |
| **Value** | Represents the value of a table item. | Can be one of: `string`, `number`, `boolean`, `Date`. |
| **TableItem** | Defines a table item (cell) and its properties. | `[key: string]: Value`
`isClickable?: boolean`
`onClick?: () => void`
`style?: ItemStyle` |
| **Striped** | Describes whether to show striped rows and their pattern. | `show?: boolean`
`position?: "skip-first" \| "show-first"` |
| **Loader** | Represents different loading animations. | Can be one of: `"dots"`, `"alt-loop"`, `"twotone-loop"`, `"md-loop"`, `"bubbles"`. |
| **LoaderStyle** | Defines the style of the loader animation. | `color?: string`
`width?: number`
`height?: number`
`position?: "center" \| "left" \| "right" \| "bottom"` |
This table summarizes the purpose and properties of each type or interface, providing an overview of their usage and fields.
## Contributing
Here's how you can help:
1. Fork the repository
2. Create a new branch for your feature or bug fix
3. Make your changes and commit them with a clear commit message
4. Push your changes to your fork
5. Submit a pull request to the main repository
Please ensure that your code follows the existing style and includes appropriate tests.
## Issues and Bug Reports
This package is still in progress. If you encounter any issues or want to request a new feature, please open an issue on our GitHub repository. When reporting bugs, please include:
1. A clear description of the issue
2. Steps to reproduce the problem
3. Expected behavior
4. Actual behavior
5. Any relevant code snippets or error messages
## License
[MIT License](LICENSE)