File tree Expand file tree Collapse file tree 5 files changed +22
-11
lines changed Expand file tree Collapse file tree 5 files changed +22
-11
lines changed Original file line number Diff line number Diff line change 11# Tailwind Vue Data Table
22
3+ Simple DataTable with slots, class and style modification for tr and td, sortable by columns (only graphics with click event).
4+
35<img src =" https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/tvdatatable.jpg " />
46
7+ ### Install
8+ ```
9+ npm i @bitthecat/tailwind-vue-data-table
10+ ```
11+
512### Use in Vue
613``` js
7- import { TVDataTable } from ' @bitthecat/tailwind-vue-data-table'
14+ import { TVTable } from ' @bitthecat/tailwind-vue-data-table'
815```
916
1017### Next additions
18+ - Pagination (can be disabled)
1119- Select row column (with checkbox)
1220- Row detail
1321- ...
Original file line number Diff line number Diff line change 11<template >
22 <div class =" grid gap-4" >
33 <span class =" text-xs" > Simple </span >
4- <TVDataTable
4+ <TVTable
55 :items =" items"
66 :fields =" fieldsSimple"
77 >
8- </TVDataTable >
8+ </TVTable >
99
1010 <hr >
1111
1212 <span class =" text-xs" >With Props</span >
13- <TVDataTable
13+ <TVTable
1414 :items =" items"
1515 :fields =" fields"
1616 multiple-sortable
1717 >
1818 <template #cell :username =" { item } " >
1919 {{ item.emoji }} - {{ item.username }}
2020 </template >
21- </TVDataTable >
21+ </TVTable >
2222
2323
2424 </div >
2525</template >
2626
2727<script setup>
2828import { defineComponent , ref } from ' vue' ;
29- import TVDataTable from ' ../src/components/TVDataTable .vue' ;
29+ import TVTable from ' ../src/components/TVTable .vue' ;
3030
3131defineComponent ({
3232 name: ' Table' ,
Original file line number Diff line number Diff line change 11{
22 "name" : " @bitthecat/tailwind-vue-data-table" ,
3- "version" : " 0.0.1 " ,
3+ "version" : " 0.1.0 " ,
44 "keywords" : [
55 " tailwindcss" ,
66 " vue" ,
77 " datatable" ,
88 " table" ,
9- " sortable"
9+ " sortable" ,
10+ " data" ,
11+ " vue3"
1012 ],
13+ "homepage" : " https://github.com/BitTheCat/tailwind-vue-data-table" ,
1114 "main" : " dist/library.js" ,
1215 "module" : " dist/library.mjs" ,
1316 "files" : [
Original file line number Diff line number Diff line change 6767import {defineComponent , ref } from ' vue' ;
6868
6969defineComponent ({
70- name: ' TVDataTable '
70+ name: ' TVTable '
7171})
7272
7373const props = defineProps ({
Original file line number Diff line number Diff line change 1- import TVDataTable from './components/TVDataTable .vue'
1+ import TVTable from './components/TVTable .vue'
22
3- export { TVDataTable }
3+ export { TVTable }
You can’t perform that action at this time.
0 commit comments