Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Table component #237

Merged
merged 16 commits into from
May 30, 2023
+1,087 −6
Merged

feat: add Table component #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
45d7dbd
feat: add `Table` component
benjamincanac May 28, 2023
63fcf4c
chore(Checkbox): add `checked` + `indeterminate` props + value as `Ob…
benjamincanac May 28, 2023
5315299
docs: add `data/table` page
benjamincanac May 28, 2023
e08edd2
docs: remove `sort` field from columns
benjamincanac May 28, 2023
09ccdb8
chore: update
benjamincanac May 29, 2023
342b583
Merge branch 'dev' into feat/table
benjamincanac May 29, 2023
a673024
docs: improve
benjamincanac May 29, 2023
aaab5a5
chore: handle sortable
benjamincanac May 29, 2023
845eea9
Merge branch 'dev' into feat/table
benjamincanac May 29, 2023
425eff4
chore: update table
benjamincanac May 29, 2023
a18f384
Merge branch 'dev' into feat/table
benjamincanac May 29, 2023
99e1da3
fix typecheck
benjamincanac May 29, 2023
5c1e9fc
fix default negative margin on sort button
benjamincanac May 30, 2023
1cf8bd1
docs: example on how to customize sort button
benjamincanac May 30, 2023
364114b
up
benjamincanac May 30, 2023
f3de8fd
up
benjamincanac May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/content/ComponentExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="[&>div>pre]:!rounded-t-none">
<div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass]">
<div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md overflow-x-auto" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass]">
<ContentSlot v-if="$slots.default" :use="$slots.default" />
</div>

Expand Down
43 changes: 43 additions & 0 deletions docs/components/content/examples/TableExampleBasic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<script setup>
const people = [{
id: 1,
name: 'Lindsay Walton',
title: 'Front-end Developer',
email: '[email protected]',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: '[email protected]',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: '[email protected]',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: '[email protected]',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: '[email protected]',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: '[email protected]',
role: 'Member'
}]
</script>

<template>
<UTable :rows="people" />
</template>
59 changes: 59 additions & 0 deletions docs/components/content/examples/TableExampleColumns.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<script setup>
const columns = [{
key: 'id',
label: 'ID'
}, {
key: 'name',
label: 'User name'
}, {
key: 'title',
label: 'Job position'
}, {
key: 'email',
label: 'Email'
}, {
key: 'role'
}]

const people = [{
id: 1,
name: 'Lindsay Walton',
title: 'Front-end Developer',
email: '[email protected]',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: '[email protected]',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: '[email protected]',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: '[email protected]',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: '[email protected]',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: '[email protected]',
role: 'Member'
}]
</script>

<template>
<UTable :columns="columns" :rows="people" />
</template>
68 changes: 68 additions & 0 deletions docs/components/content/examples/TableExampleColumnsSelectable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<script setup>
const columns = [{
key: 'id',
label: 'ID'
}, {
key: 'name',
label: 'Name'
}, {
key: 'title',
label: 'Title'
}, {
key: 'email',
label: 'Email'
}, {
key: 'role',
label: 'Role'
}]

const selectedColumns = ref([...columns])

const people = [{
id: 1,
name: 'Lindsay Walton',
title: 'Front-end Developer',
email: '[email protected]',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: '[email protected]',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: '[email protected]',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: '[email protected]',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: '[email protected]',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: '[email protected]',
role: 'Member'
}]
</script>

<template>
<div>
<div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
<USelectMenu v-model="selectedColumns" :options="columns" multiple placeholder="Columns" />
</div>

<UTable :columns="selectedColumns" :rows="people" />
</div>
</template>
63 changes: 63 additions & 0 deletions docs/components/content/examples/TableExampleColumnsSortable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<script setup>
const columns = [{
key: 'id',
label: 'ID'
}, {
key: 'name',
label: 'Name',
sortable: true
}, {
key: 'title',
label: 'Title',
sortable: true
}, {
key: 'email',
label: 'Email',
sortable: true
}, {
key: 'role',
label: 'Role'
}]

const people = [{
id: 1,
name: 'Lindsay Walton',
title: 'Front-end Developer',
email: '[email protected]',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: '[email protected]',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: '[email protected]',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: '[email protected]',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: '[email protected]',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: '[email protected]',
role: 'Member'
}]
</script>

<template>
<UTable :columns="columns" :rows="people" />
</template>
63 changes: 63 additions & 0 deletions docs/components/content/examples/TableExampleSearchable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<script setup>
const people = [{
id: 1,
name: 'Lindsay Walton',
title: 'Front-end Developer',
email: '[email protected]',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: '[email protected]',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: '[email protected]',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: '[email protected]',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: '[email protected]',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: '[email protected]',
role: 'Member'
}]

const q = ref('')

const filteredRows = computed(() => {
if (!q.value) {
return people
}

return people.filter((person) => {
return Object.values(person).some((value) => {
return String(value).toLowerCase().includes(q.value.toLowerCase())
})
})
})
</script>

<template>
<div>
<div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
<UInput v-model="q" placeholder="Filter people..." />
</div>

<UTable :rows="filteredRows" />
</div>
</template>
45 changes: 45 additions & 0 deletions docs/components/content/examples/TableExampleSelectable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<script setup>
const people = [{
id: 1,
name: 'Lindsay Walton',
title: 'Front-end Developer',
email: '[email protected]',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: '[email protected]',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: '[email protected]',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: '[email protected]',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: '[email protected]',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: '[email protected]',
role: 'Member'
}]

const selected = ref([people[1]])
</script>

<template>
<UTable v-model="selected" :rows="people" />
</template>
Loading