Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atif0075/lite-table-docs
A simple and lightweight data table component for Vue.js 3. Features sorting, paging, row check, dynamic data rendering, supported TypeScript, and more.
https://github.com/atif0075/lite-table-docs
Last synced: 29 days ago
JSON representation
A simple and lightweight data table component for Vue.js 3. Features sorting, paging, row check, dynamic data rendering, supported TypeScript, and more.
- Host: GitHub
- URL: https://github.com/atif0075/lite-table-docs
- Owner: atif0075
- Created: 2022-06-02T09:06:51.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-11T17:45:09.000Z (about 2 months ago)
- Last Synced: 2024-11-11T18:35:50.538Z (about 2 months ago)
- Language: Vue
- Homepage: https://vue3-lite-table.vercel.app
- Size: 1.77 MB
- Stars: 0
- Watchers: 2
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue 3 Lite Table
**A simple and lightweight data table component for Vue.js 3**
**Features**
- Sorting
- Paging
- Row check
- Dynamic data rendering
- Supported TypeScript
- And more!
**Installation**
**NPM**
```sh
npm install vue3-table-lite --save
```
## Usage
**JavaScript**
```js
import VueTableLite from "vue3-table-lite";
```
**TypeScript**
```ts
import VueTableLite from "vue3-table-lite/ts";
```
**Default Mode**
```js
import VueTableLite from 'vue3-table-lite'
export default {
name: 'App',
components: {
VueTableLite,
},
data() {
return {
tableData: [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Carol', age: 35 },
],
}
},
}
```
```vue
ID
Name
Age
{{ item.id }}
{{ item.name }}
{{ item.age }}
```
**V-slot Mode**
```js
import VueTableLite from 'vue3-table-lite'
export default {
name: 'App',
components: {
VueTableLite,
},
data() {
return {
tableData: [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Carol', age: 35 },
],
}
},
}
```
```vue
ID
Name
Age
{{ item.id }}
{{ item.name }}
{{ item.age }}
```
**Static Mode**
```js
import VueTableLite from 'vue3-table-lite'
export default {
name: 'App',
components: {
VueTableLite,
},
data() {
return {
tableData: [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Carol', age: 35 },
],
}
},
}
```
```vue
ID
Name
Age
{{ item.id }}
{{ item.name }}
{{ item.age }}
```
**API Reference**
For more information on the API, please see the documentation: https://github.com/linmasahiro/vue3-table-lite.
**Contributing**
If you have any suggestions or bug reports, please feel free to open an issue on GitHub: https://github.com/linmasahiro/vue3-table-lite.
**License**
Vue 3 Lite Table is licensed under the MIT license.