-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c9835d5
commit 03b91fe
Showing
17 changed files
with
689 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,9 @@ | ||
# CHANGELOG | ||
|
||
## v2.0.49 | ||
|
||
- Adds the `DataTable` component | ||
|
||
## v2.0.48 | ||
|
||
- Add new icons for the `Icon` component | ||
|
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
import { Canvas } from '@storybook/addon-docs'; | ||
import { Primary } from './DataTable.stories'; | ||
|
||
# DataTable | ||
|
||
<Canvas of={Primary} /> | ||
|
||
## How to Use | ||
|
||
### Basic | ||
|
||
```html | ||
<template> | ||
<DataTable :data="[{ id: 'test', name: 'John Smith' }]" data-key="id"> | ||
<Column field="id" header="ID" /> | ||
<Column field="name" header="Full Name" /> | ||
</DataTable> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { Column, DataTable } from '@lob/ui-components'; | ||
</script> | ||
``` | ||
|
||
### With Async Data | ||
|
||
#### Without Pagination | ||
|
||
```html | ||
<template> | ||
<DataTable async :data data-key="id" :error="errorMessage" :loading :total> | ||
<Column field="id" header="ID" /> | ||
<Column field="name" header="Full Name" /> | ||
</DataTable> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { Column, DataTable } from '@lob/ui-components'; | ||
const loading = ref(false); | ||
const data = ref<{ id: number; name: string }>([]); | ||
const total = ref<number>(); | ||
const errorMessage = ref<string>(); | ||
const fetchData = async () => { | ||
isLoading.value = true; | ||
try { | ||
const response = await fetch('...'); | ||
data.value = response.data; | ||
total.value = response.total; | ||
} catch (e) { | ||
errorMessage.value = e.message; | ||
} | ||
isLoading.value = false; | ||
}; | ||
</script> | ||
``` | ||
|
||
#### With Pagination | ||
|
||
Pagination state is handled by the component | ||
|
||
There is also support for `next`/ `previous` pagination with the `list` prop | ||
using the props `next` and `previous` for button state and the events `@next` | ||
and `@previous`. | ||
|
||
```html | ||
<template> | ||
<DataTable | ||
async | ||
:data | ||
data-key="id" | ||
:error="errorMessage" | ||
:loading | ||
:total | ||
@paginate="fetchData" | ||
> | ||
<Column field="id" header="ID" /> | ||
<Column field="name" header="Full Name" /> | ||
</DataTable> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { Column, DataTable } from '@lob/ui-components'; | ||
const loading = ref(false); | ||
const data = ref<{ id: number; name: string }>([]); | ||
const total = ref<number>([]); | ||
const errorMessage = ref<string>(); | ||
const fetchData = async (paginationData) => { | ||
isLoading.value = true; | ||
try { | ||
const response = await fetch('...'); | ||
data.value = response.data; | ||
total.value = response.total; | ||
} catch (e) { | ||
errorMessage.value = e.message; | ||
} | ||
isLoading.value = false; | ||
}; | ||
</script> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
import { Meta, StoryObj } from '@storybook/vue3'; | ||
import Column from 'primevue/column'; | ||
import DataTable from './DataTable.vue'; | ||
import mdx from './DataTable.mdx'; | ||
|
||
const meta: Meta<typeof DataTable> = { | ||
title: 'Components/DataTable', | ||
component: DataTable, | ||
parameters: { | ||
docs: { | ||
page: mdx | ||
} | ||
} | ||
}; | ||
|
||
export default meta; | ||
|
||
export const Primary: StoryObj<typeof DataTable> = { | ||
render: (args) => ({ | ||
components: { Column, DataTable }, | ||
setup: () => ({ args }), | ||
template: ` | ||
<DataTable v-bind="args"> | ||
<Column field="firstName" header="First Name" /> | ||
<Column field="lastName" header="Last Name" /> | ||
<Column field="favoriteColor" header="Favorite Color" /> | ||
</DataTable> | ||
` | ||
}), | ||
args: { | ||
dataKey: 'id', | ||
data: [ | ||
{ | ||
id: 1, | ||
firstName: 'John', | ||
lastName: 'Doe', | ||
favoriteColor: 'Blue' | ||
}, | ||
{ | ||
id: 2, | ||
firstName: 'Jane', | ||
lastName: 'Doe', | ||
favoriteColor: 'Green' | ||
}, | ||
{ | ||
id: 3, | ||
firstName: 'Jack', | ||
lastName: 'Doe', | ||
favoriteColor: 'Red' | ||
}, | ||
{ | ||
id: 4, | ||
firstName: 'Jill', | ||
lastName: 'Doe', | ||
favoriteColor: 'Yellow' | ||
}, | ||
{ | ||
id: 5, | ||
firstName: 'Jim', | ||
lastName: 'Doe', | ||
favoriteColor: 'Purple' | ||
}, | ||
{ | ||
id: 6, | ||
firstName: 'Jenny', | ||
lastName: 'Doe', | ||
favoriteColor: 'Orange' | ||
}, | ||
{ | ||
id: 7, | ||
firstName: 'Joe', | ||
lastName: 'Doe', | ||
favoriteColor: 'Black' | ||
}, | ||
{ | ||
id: 8, | ||
firstName: 'Jill', | ||
lastName: 'Doe', | ||
favoriteColor: 'White' | ||
}, | ||
{ | ||
id: 9, | ||
firstName: 'Jack', | ||
lastName: 'Doe', | ||
favoriteColor: 'Gray' | ||
}, | ||
{ | ||
id: 10, | ||
firstName: 'Jill', | ||
lastName: 'Doe', | ||
favoriteColor: 'Brown' | ||
}, | ||
{ | ||
id: 11, | ||
firstName: 'Jill', | ||
lastName: 'Doe', | ||
favoriteColor: 'Pink' | ||
} | ||
] | ||
} | ||
}; |
Oops, something went wrong.