jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #114 from assasin0076/feat_table

Browse Source 
feat: added table component
This commit is contained in:
Ilya Artamonov
2022-12-18 13:42:40 +03:00
committed by GitHub
parent 5d9fa64b3d 060fa3a620
commit f8e84fa3f9
16 changed files with 506 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.ts
View File

@@ -47,6 +47,7 @@ function getComponents() {
{ text: 'Progress', link: 'components/progress' },
{ text: 'Rating', link: 'components/rating' },
{ text: 'Spinner', link: '/components/spinner' },
{ text: 'Table', link: 'components/table' },
{ text: 'Tabs', link: '/components/tabs' },
{ text: 'ListGroup', link: 'components/list-group' },
{ text: 'Toast', link: 'components/toast' },
@@ -57,7 +58,6 @@ function getComponents() {
{ text: '- Footer', link: 'components/footer' },
{ text: '- Pagination', link: 'components/pagination' },
{ text: '- Sidebar', link: 'components/sidebar' },
{ text: '- Table', link: 'components/table' },
{ text: '- Timeline', link: 'components/timeline' },
]
}

222
docs/components/table.md
View File

@@ -1,15 +1,219 @@
<script setup>
import TableExample from './table/examples/TableExample.vue'
import TableExample from './table/examples/TableExample.vue';
import TableStripedExample from './table/examples/TableStripedExample.vue';
import TableStripedColumnsExample from './table/examples/TableStripedColumnsExample.vue';
import TableHoverableExample from './table/examples/TableHoverableExample.vue';
</script>
# Vue Table Component - Flowbite
```vue
<script setup>
import { Table } from 'flowbite-vue'
</script>
<template>
<Table></Table>
</template>
```
#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
---
:::tip
Original reference: [https://flowbite.com/docs/components/tables/](https://flowbite.com/docs/components/tables/)
:::
## Basic example
<TableExample />
```vue
<template>
<Table>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
```
## Striped example
<TableStripedExample />
```vue
<template>
<Table striped>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
```
## Striped columns example
<TableStripedColumnsExample />
```vue
<template>
<Table striped-columns>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
```
## Hoverable example
<TableHoverableExample />
```vue
<template>
<Table hoverable>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
```

43
docs/components/table/examples/TableExample.vue
View File

@@ -1,8 +1,43 @@
<template>
<div class="vp-raw flex flex-col">
<Table></Table>
</div>
<Table>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table } from '../../../../src/index'
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
</script>

43
docs/components/table/examples/TableHoverableExample.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<Table hoverable>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
</script>

43
docs/components/table/examples/TableStripedColumnsExample.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<Table striped-columns>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
</script>

43
docs/components/table/examples/TableStripedExample.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<Table striped>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
</script>

93
src/components/Table/Table.vue
View File

@@ -1,104 +1,29 @@
<template>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Product name
</th>
<th scope="col" class="px-6 py-3">
Color
</th>
<th scope="col" class="px-6 py-3">
Category
</th>
<th scope="col" class="px-6 py-3">
Price
</th>
<th scope="col" class="px-6 py-3">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
Apple MacBook Pro 17"
</th>
<td class="px-6 py-4">
Sliver
</td>
<td class="px-6 py-4">
Laptop
</td>
<td class="px-6 py-4">
$2999
</td>
<td class="px-6 py-4 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
Microsoft Surface Pro
</th>
<td class="px-6 py-4">
White
</td>
<td class="px-6 py-4">
Laptop PC
</td>
<td class="px-6 py-4">
$1999
</td>
<td class="px-6 py-4 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
Magic Mouse 2
</th>
<td class="px-6 py-4">
Black
</td>
<td class="px-6 py-4">
Accessories
</td>
<td class="px-6 py-4">
$99
</td>
<td class="px-6 py-4 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
<slot></slot>
</table>
</div>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import type { PropType } from 'vue'
import { provide } from 'vue'
const props = defineProps({
children: {
type: Array,
default() {
return []
},
},
striped: {
type: Boolean,
default: false,
},
stripedColumns: {
type: Boolean,
default: false,
},
hoverable: {
type: Boolean,
default: false,
},
className: {
type: String,
default: '',
},
})
provide('striped', props.striped)
provide('hoverable', props.hoverable)
provide('stripedColumns', props.stripedColumns)
</script>

7
src/components/Table/TableBody.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<tbody>
<slot></slot>
</tbody>
</template>
<script lang="ts" setup>
</script>

11
src/components/Table/TableCell.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<td :class="tableCellClasses">
<slot></slot>
</td>
</template>
<script lang="ts" setup>
import { useTableCellClasses } from '@/components/Table/composables/useTableCellClasses'
const { tableCellClasses } = useTableCellClasses()
</script>

9
src/components/Table/TableHead.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<slot></slot>
</tr>
</thead>
</template>
<script lang="ts" setup>
</script>

10
src/components/Table/TableHeadCell.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<th scope="col" :class="tableHeadCellClasses">
<slot></slot>
</th>
</template>
<script lang="ts" setup>
import { useTableHeadCellClasses } from '@/components/Table/composables/useTableHeadCellClasses'
const { tableHeadCellClasses } = useTableHeadCellClasses()
</script>

10
src/components/Table/TableRow.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<tr :class="tableRowClasses">
<slot></slot>
</tr>
</template>
<script lang="ts" setup>
import { useTableRowClasses } from '@/components/Table/composables/useTableRowClasses'
const { tableRowClasses } = useTableRowClasses()
</script>

20
src/components/Table/composables/useTableCellClasses.ts Normal file
View File

@@ -0,0 +1,20 @@
import { computed, inject } from 'vue'
import type { Ref } from 'vue'
import classNames from 'classnames'
const baseClasses = 'px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right'
const stripedCellClasses = 'even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
export function useTableCellClasses(): { tableCellClasses: Ref<string> } {
const isColumnsStriped = inject('stripedColumns')
const tableCellClasses = computed(() => {
return classNames(baseClasses, {
[stripedCellClasses]: isColumnsStriped,
})
})
return {
tableCellClasses,
}
}

20
src/components/Table/composables/useTableHeadCellClasses.ts Normal file
View File

@@ -0,0 +1,20 @@
import { computed, inject } from 'vue'
import type { Ref } from 'vue'
import classNames from 'classnames'
const baseClasses = 'px-6 py-3 text-xs uppercase'
const stripedHeadCellClasses = 'even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
export function useTableHeadCellClasses(): { tableHeadCellClasses: Ref<string> } {
const isColumnsStriped = inject('stripedColumns')
const tableHeadCellClasses = computed(() => {
return classNames(baseClasses, {
[stripedHeadCellClasses]: isColumnsStriped,
})
})
return {
tableHeadCellClasses,
}
}

23
src/components/Table/composables/useTableRowClasses.ts Normal file
View File

@@ -0,0 +1,23 @@
import { computed, inject } from 'vue'
import type { Ref } from 'vue'
import classNames from 'classnames'
const baseClasses = 'bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700'
const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700'
const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600'
export function useTableRowClasses(): { tableRowClasses: Ref<string> } {
const isStriped = inject('striped')
const isHoverable = inject('hoverable')
const tableRowClasses = computed(() => {
return classNames(baseClasses, {
[stripedClasses]: isStriped,
[hoverableClasses]: isHoverable,
})
})
return {
tableRowClasses,
}
}

5
src/index.ts
View File

@@ -32,6 +32,11 @@ export { default as Progress } from './components/Progress/Progress.vue'
export { default as Rating } from './components/Rating/Rating.vue'
export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
export { default as Table } from './components/Table/Table.vue'
export { default as TableHead } from './components/Table/TableHead.vue'
export { default as TableBody } from './components/Table/TableBody.vue'
export { default as TableHeadCell } from './components/Table/TableHeadCell.vue'
export { default as TableRow } from './components/Table/TableRow.vue'
export { default as TableCell } from './components/Table/TableCell.vue'
export { default as Timeline } from './components/Timeline/Timeline.vue'
export { default as Toast } from './components/Toast/Toast.vue'
export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'