btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: updated the table story book component

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-08-13 22:32:30 +05:30
parent c683a5471c
commit 14a3dad013
2 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/hoppscotch-ui/src/components/smart/Table.vue
View File

@@ -55,9 +55,9 @@ defineProps<{
/** Whether to show the vertical border between columns */ /** Whether to show the vertical border between columns */
yBorder?: boolean yBorder?: boolean
/** The list of items to be displayed in the table */ /** The list of items to be displayed in the table */
list: Item[] list?: Item[]
/** The headings of the table */ /** The headings of the table */
headings: CellHeading[] headings?: CellHeading[]
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{

71
packages/hoppscotch-ui/src/stories/Table.story.vue
View File

@@ -1,29 +1,31 @@
<template> <template>
<Story title="Table"> <Story title="Table">
<Variant title="Basic"> <Variant title="General">
<HoppSmartTable <HoppSmartTable :list="list" :headings="headings" />
cell-styles="px-6 py-2"
:list="list"
:headings="headings"
/>
</Variant> </Variant>
<Variant title="Badges"> <Variant title="Custom">
<HoppSmartTable <HoppSmartTable>
cell-styles="px-6 py-2" <template #head>
:list="list" <th>ID</th>
:headings="headings" <th>Name</th>
badge-col-name="name" <th>Members</th>
badge-name="Admin" <th>Role</th>
:badge-row-indices="[0, 1]" </template>
/> <template #body>
</Variant> <tr>
<Variant title="Subtitles"> <td>123454</td>
<HoppSmartTable <td>Joel</td>
cell-styles="px-6 py-2" <td>10</td>
:list="list" <td>Frontend Engineer</td>
:headings="headings" </tr>
:subtitles="subtitles" <tr>
/> <td>123456</td>
<td>Anwar</td>
<td>12</td>
<td>Frontend Engineer</td>
</tr>
</template>
</HoppSmartTable>
</Variant> </Variant>
</Story> </Story>
</template> </template>
@@ -31,27 +33,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { HoppSmartTable } from "../components/smart" import { HoppSmartTable } from "../components/smart"
const headings = ["UID", "Name", "Email", "Role"] // Table Headings
const headings = [
{ key: "id", label: "ID" },
{ key: "name", label: "Name" },
{ key: "members", label: "Members" },
{ key: "role", label: "Role" },
]
const list = [ const list = [
{ {
uid: "123455", id: "123455",
name: "Joel", name: "Joel",
email: "joel@gmail.com", members: 10,
role: "Frontend Engineer", role: "Frontend Engineer",
}, },
{ {
uid: "123456", id: "123456",
name: "Anwar", name: "Anwar",
email: "anwar@gmail.com", members: 12,
role: "Frontend Engineer", role: "Frontend Engineer",
}, },
] ]
const subtitles = [
{
colName: "role",
subtitle: "FE",
},
]
</script> </script>