fix: add @click on row instead on cell

packages/hoppscotch-common/src/components.d.ts

@@ -5,218 +5,218 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
+    AppActionHandler: typeof import("./components/app/ActionHandler.vue")["default"]
-    AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
+    AppAnnouncement: typeof import("./components/app/Announcement.vue")["default"]
-    AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
+    AppContextMenu: typeof import("./components/app/ContextMenu.vue")["default"]
-    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
+    AppDeveloperOptions: typeof import("./components/app/DeveloperOptions.vue")["default"]
-    AppFooter: typeof import('./components/app/Footer.vue')['default']
+    AppFooter: typeof import("./components/app/Footer.vue")["default"]
-    AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
+    AppGitHubStarButton: typeof import("./components/app/GitHubStarButton.vue")["default"]
-    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppHeader: typeof import("./components/app/Header.vue")["default"]
-    AppInspection: typeof import('./components/app/Inspection.vue')['default']
+    AppInspection: typeof import("./components/app/Inspection.vue")["default"]
-    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
+    AppInterceptor: typeof import("./components/app/Interceptor.vue")["default"]
-    AppLogo: typeof import('./components/app/Logo.vue')['default']
+    AppLogo: typeof import("./components/app/Logo.vue")["default"]
-    AppOptions: typeof import('./components/app/Options.vue')['default']
+    AppOptions: typeof import("./components/app/Options.vue")["default"]
-    AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
+    AppPaneLayout: typeof import("./components/app/PaneLayout.vue")["default"]
-    AppShare: typeof import('./components/app/Share.vue')['default']
+    AppShare: typeof import("./components/app/Share.vue")["default"]
-    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
+    AppShortcuts: typeof import("./components/app/Shortcuts.vue")["default"]
-    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
+    AppShortcutsEntry: typeof import("./components/app/ShortcutsEntry.vue")["default"]
-    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
+    AppShortcutsPrompt: typeof import("./components/app/ShortcutsPrompt.vue")["default"]
-    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
+    AppSidenav: typeof import("./components/app/Sidenav.vue")["default"]
-    AppSocial: typeof import('./components/app/Social.vue')['default']
+    AppSocial: typeof import("./components/app/Social.vue")["default"]
-    AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default']
+    AppSpotlight: typeof import("./components/app/spotlight/index.vue")["default"]
-    AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
+    AppSpotlightEntry: typeof import("./components/app/spotlight/Entry.vue")["default"]
-    AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
+    AppSpotlightEntryGQLHistory: typeof import("./components/app/spotlight/entry/GQLHistory.vue")["default"]
-    AppSpotlightEntryGQLRequest: typeof import('./components/app/spotlight/entry/GQLRequest.vue')['default']
+    AppSpotlightEntryGQLRequest: typeof import("./components/app/spotlight/entry/GQLRequest.vue")["default"]
-    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
+    AppSpotlightEntryRESTHistory: typeof import("./components/app/spotlight/entry/RESTHistory.vue")["default"]
-    AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default']
+    AppSpotlightEntryRESTRequest: typeof import("./components/app/spotlight/entry/RESTRequest.vue")["default"]
-    AppSupport: typeof import('./components/app/Support.vue')['default']
+    AppSupport: typeof import("./components/app/Support.vue")["default"]
-    ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
+    ButtonPrimary: typeof import("./../../hoppscotch-ui/src/components/button/Primary.vue")["default"]
-    ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
+    ButtonSecondary: typeof import("./../../hoppscotch-ui/src/components/button/Secondary.vue")["default"]
-    Collections: typeof import('./components/collections/index.vue')['default']
+    Collections: typeof import("./components/collections/index.vue")["default"]
-    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
+    CollectionsAdd: typeof import("./components/collections/Add.vue")["default"]
-    CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
+    CollectionsAddFolder: typeof import("./components/collections/AddFolder.vue")["default"]
-    CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default']
+    CollectionsAddRequest: typeof import("./components/collections/AddRequest.vue")["default"]
-    CollectionsCollection: typeof import('./components/collections/Collection.vue')['default']
+    CollectionsCollection: typeof import("./components/collections/Collection.vue")["default"]
-    CollectionsEdit: typeof import('./components/collections/Edit.vue')['default']
+    CollectionsEdit: typeof import("./components/collections/Edit.vue")["default"]
-    CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default']
+    CollectionsEditFolder: typeof import("./components/collections/EditFolder.vue")["default"]
-    CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default']
+    CollectionsEditRequest: typeof import("./components/collections/EditRequest.vue")["default"]
-    CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default']
+    CollectionsGraphql: typeof import("./components/collections/graphql/index.vue")["default"]
-    CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default']
+    CollectionsGraphqlAdd: typeof import("./components/collections/graphql/Add.vue")["default"]
-    CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default']
+    CollectionsGraphqlAddFolder: typeof import("./components/collections/graphql/AddFolder.vue")["default"]
-    CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default']
+    CollectionsGraphqlAddRequest: typeof import("./components/collections/graphql/AddRequest.vue")["default"]
-    CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default']
+    CollectionsGraphqlCollection: typeof import("./components/collections/graphql/Collection.vue")["default"]
-    CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default']
+    CollectionsGraphqlEdit: typeof import("./components/collections/graphql/Edit.vue")["default"]
-    CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default']
+    CollectionsGraphqlEditFolder: typeof import("./components/collections/graphql/EditFolder.vue")["default"]
-    CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default']
+    CollectionsGraphqlEditRequest: typeof import("./components/collections/graphql/EditRequest.vue")["default"]
-    CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default']
+    CollectionsGraphqlFolder: typeof import("./components/collections/graphql/Folder.vue")["default"]
-    CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default']
+    CollectionsGraphqlImportExport: typeof import("./components/collections/graphql/ImportExport.vue")["default"]
-    CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
+    CollectionsGraphqlRequest: typeof import("./components/collections/graphql/Request.vue")["default"]
-    CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
+    CollectionsImportExport: typeof import("./components/collections/ImportExport.vue")["default"]
-    CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
+    CollectionsMyCollections: typeof import("./components/collections/MyCollections.vue")["default"]
-    CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
+    CollectionsRequest: typeof import("./components/collections/Request.vue")["default"]
-    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
+    CollectionsSaveRequest: typeof import("./components/collections/SaveRequest.vue")["default"]
-    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
+    CollectionsTeamCollections: typeof import("./components/collections/TeamCollections.vue")["default"]
-    Environments: typeof import('./components/environments/index.vue')['default']
+    Environments: typeof import("./components/environments/index.vue")["default"]
-    EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
+    EnvironmentsAdd: typeof import("./components/environments/Add.vue")["default"]
-    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
+    EnvironmentsImportExport: typeof import("./components/environments/ImportExport.vue")["default"]
-    EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
+    EnvironmentsMy: typeof import("./components/environments/my/index.vue")["default"]
-    EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
+    EnvironmentsMyDetails: typeof import("./components/environments/my/Details.vue")["default"]
-    EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
+    EnvironmentsMyEnvironment: typeof import("./components/environments/my/Environment.vue")["default"]
-    EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default']
+    EnvironmentsSelector: typeof import("./components/environments/Selector.vue")["default"]
-    EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
+    EnvironmentsTeams: typeof import("./components/environments/teams/index.vue")["default"]
-    EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
+    EnvironmentsTeamsDetails: typeof import("./components/environments/teams/Details.vue")["default"]
-    EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
+    EnvironmentsTeamsEnvironment: typeof import("./components/environments/teams/Environment.vue")["default"]
-    FirebaseLogin: typeof import('./components/firebase/Login.vue')['default']
+    FirebaseLogin: typeof import("./components/firebase/Login.vue")["default"]
-    FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
+    FirebaseLogout: typeof import("./components/firebase/Logout.vue")["default"]
-    GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
+    GraphqlAuthorization: typeof import("./components/graphql/Authorization.vue")["default"]
-    GraphqlField: typeof import('./components/graphql/Field.vue')['default']
+    GraphqlField: typeof import("./components/graphql/Field.vue")["default"]
-    GraphqlHeaders: typeof import('./components/graphql/Headers.vue')['default']
+    GraphqlHeaders: typeof import("./components/graphql/Headers.vue")["default"]
-    GraphqlQuery: typeof import('./components/graphql/Query.vue')['default']
+    GraphqlQuery: typeof import("./components/graphql/Query.vue")["default"]
-    GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
+    GraphqlRequest: typeof import("./components/graphql/Request.vue")["default"]
-    GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
+    GraphqlRequestOptions: typeof import("./components/graphql/RequestOptions.vue")["default"]
-    GraphqlRequestTab: typeof import('./components/graphql/RequestTab.vue')['default']
+    GraphqlRequestTab: typeof import("./components/graphql/RequestTab.vue")["default"]
-    GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
+    GraphqlResponse: typeof import("./components/graphql/Response.vue")["default"]
-    GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
+    GraphqlSidebar: typeof import("./components/graphql/Sidebar.vue")["default"]
-    GraphqlSubscriptionLog: typeof import('./components/graphql/SubscriptionLog.vue')['default']
+    GraphqlSubscriptionLog: typeof import("./components/graphql/SubscriptionLog.vue")["default"]
-    GraphqlType: typeof import('./components/graphql/Type.vue')['default']
+    GraphqlType: typeof import("./components/graphql/Type.vue")["default"]
-    GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
+    GraphqlTypeLink: typeof import("./components/graphql/TypeLink.vue")["default"]
-    GraphqlVariable: typeof import('./components/graphql/Variable.vue')['default']
+    GraphqlVariable: typeof import("./components/graphql/Variable.vue")["default"]
-    History: typeof import('./components/history/index.vue')['default']
+    History: typeof import("./components/history/index.vue")["default"]
-    HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
+    HistoryGraphqlCard: typeof import("./components/history/graphql/Card.vue")["default"]
-    HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
+    HistoryRestCard: typeof import("./components/history/rest/Card.vue")["default"]
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonPrimary: typeof import("@hoppscotch/ui")["HoppButtonPrimary"]
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppButtonSecondary: typeof import("@hoppscotch/ui")["HoppButtonSecondary"]
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAnchor: typeof import("@hoppscotch/ui")["HoppSmartAnchor"]
     HoppSmartAutoComplete: typeof import("@hoppscotch/ui")["HoppSmartAutoComplete"]
-    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
+    HoppSmartCheckbox: typeof import("@hoppscotch/ui")["HoppSmartCheckbox"]
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartConfirmModal: typeof import("@hoppscotch/ui")["HoppSmartConfirmModal"]
-    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
+    HoppSmartExpand: typeof import("@hoppscotch/ui")["HoppSmartExpand"]
-    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
+    HoppSmartFileChip: typeof import("@hoppscotch/ui")["HoppSmartFileChip"]
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartInput: typeof import("@hoppscotch/ui")["HoppSmartInput"]
-    HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection']
+    HoppSmartIntersection: typeof import("@hoppscotch/ui")["HoppSmartIntersection"]
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartItem: typeof import("@hoppscotch/ui")["HoppSmartItem"]
-    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartLink: typeof import("@hoppscotch/ui")["HoppSmartLink"]
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartModal: typeof import("@hoppscotch/ui")["HoppSmartModal"]
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartPicture: typeof import("@hoppscotch/ui")["HoppSmartPicture"]
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
+    HoppSmartPlaceholder: typeof import("@hoppscotch/ui")["HoppSmartPlaceholder"]
-    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
+    HoppSmartProgressRing: typeof import("@hoppscotch/ui")["HoppSmartProgressRing"]
-    HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
+    HoppSmartRadio: typeof import("@hoppscotch/ui")["HoppSmartRadio"]
-    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
+    HoppSmartRadioGroup: typeof import("@hoppscotch/ui")["HoppSmartRadioGroup"]
-    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
+    HoppSmartSlideOver: typeof import("@hoppscotch/ui")["HoppSmartSlideOver"]
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartSpinner: typeof import("@hoppscotch/ui")["HoppSmartSpinner"]
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    HoppSmartTab: typeof import("@hoppscotch/ui")["HoppSmartTab"]
-    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartTabs: typeof import("@hoppscotch/ui")["HoppSmartTabs"]
-    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
+    HoppSmartToggle: typeof import("@hoppscotch/ui")["HoppSmartToggle"]
-    HoppSmartTree: typeof import('@hoppscotch/ui')['HoppSmartTree']
+    HoppSmartTree: typeof import("@hoppscotch/ui")["HoppSmartTree"]
-    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
+    HoppSmartWindow: typeof import("@hoppscotch/ui")["HoppSmartWindow"]
-    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
+    HoppSmartWindows: typeof import("@hoppscotch/ui")["HoppSmartWindows"]
-    HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
+    HttpAuthorization: typeof import("./components/http/Authorization.vue")["default"]
-    HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
+    HttpAuthorizationApiKey: typeof import("./components/http/authorization/ApiKey.vue")["default"]
-    HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
+    HttpAuthorizationBasic: typeof import("./components/http/authorization/Basic.vue")["default"]
-    HttpBody: typeof import('./components/http/Body.vue')['default']
+    HttpBody: typeof import("./components/http/Body.vue")["default"]
-    HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
+    HttpBodyParameters: typeof import("./components/http/BodyParameters.vue")["default"]
-    HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
+    HttpCodegenModal: typeof import("./components/http/CodegenModal.vue")["default"]
-    HttpHeaders: typeof import('./components/http/Headers.vue')['default']
+    HttpHeaders: typeof import("./components/http/Headers.vue")["default"]
-    HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
+    HttpImportCurl: typeof import("./components/http/ImportCurl.vue")["default"]
-    HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
+    HttpOAuth2Authorization: typeof import("./components/http/OAuth2Authorization.vue")["default"]
-    HttpParameters: typeof import('./components/http/Parameters.vue')['default']
+    HttpParameters: typeof import("./components/http/Parameters.vue")["default"]
-    HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']
+    HttpPreRequestScript: typeof import("./components/http/PreRequestScript.vue")["default"]
-    HttpRawBody: typeof import('./components/http/RawBody.vue')['default']
+    HttpRawBody: typeof import("./components/http/RawBody.vue")["default"]
-    HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default']
+    HttpReqChangeConfirmModal: typeof import("./components/http/ReqChangeConfirmModal.vue")["default"]
-    HttpRequest: typeof import('./components/http/Request.vue')['default']
+    HttpRequest: typeof import("./components/http/Request.vue")["default"]
-    HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default']
+    HttpRequestOptions: typeof import("./components/http/RequestOptions.vue")["default"]
-    HttpRequestTab: typeof import('./components/http/RequestTab.vue')['default']
+    HttpRequestTab: typeof import("./components/http/RequestTab.vue")["default"]
-    HttpResponse: typeof import('./components/http/Response.vue')['default']
+    HttpResponse: typeof import("./components/http/Response.vue")["default"]
-    HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
+    HttpResponseMeta: typeof import("./components/http/ResponseMeta.vue")["default"]
-    HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
+    HttpSidebar: typeof import("./components/http/Sidebar.vue")["default"]
-    HttpTabHead: typeof import('./components/http/TabHead.vue')['default']
+    HttpTabHead: typeof import("./components/http/TabHead.vue")["default"]
-    HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
+    HttpTestResult: typeof import("./components/http/TestResult.vue")["default"]
-    HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
+    HttpTestResultEntry: typeof import("./components/http/TestResultEntry.vue")["default"]
-    HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
+    HttpTestResultEnv: typeof import("./components/http/TestResultEnv.vue")["default"]
-    HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
+    HttpTestResultReport: typeof import("./components/http/TestResultReport.vue")["default"]
-    HttpTests: typeof import('./components/http/Tests.vue')['default']
+    HttpTests: typeof import("./components/http/Tests.vue")["default"]
-    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
+    HttpURLEncodedParams: typeof import("./components/http/URLEncodedParams.vue")["default"]
-    IconLucideActivity: typeof import('~icons/lucide/activity')['default']
+    IconLucideActivity: typeof import("~icons/lucide/activity")["default"]
-    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
+    IconLucideAlertTriangle: typeof import("~icons/lucide/alert-triangle")["default"]
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideArrowLeft: typeof import("~icons/lucide/arrow-left")["default"]
-    IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
+    IconLucideArrowUpRight: typeof import("~icons/lucide/arrow-up-right")["default"]
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
+    IconLucideCheckCircle: typeof import("~icons/lucide/check-circle")["default"]
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideChevronRight: typeof import("~icons/lucide/chevron-right")["default"]
-    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
+    IconLucideGlobe: typeof import("~icons/lucide/globe")["default"]
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
+    IconLucideHelpCircle: typeof import("~icons/lucide/help-circle")["default"]
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideInbox: typeof import("~icons/lucide/inbox")["default"]
-    IconLucideInfo: typeof import('~icons/lucide/info')['default']
+    IconLucideInfo: typeof import("~icons/lucide/info")["default"]
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
+    IconLucideLayers: typeof import("~icons/lucide/layers")["default"]
-    IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
+    IconLucideListEnd: typeof import("~icons/lucide/list-end")["default"]
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideMinus: typeof import("~icons/lucide/minus")["default"]
-    IconLucideSearch: typeof import('~icons/lucide/search')['default']
+    IconLucideSearch: typeof import("~icons/lucide/search")["default"]
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideUsers: typeof import("~icons/lucide/users")["default"]
-    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
+    IconLucideVerified: typeof import("~icons/lucide/verified")["default"]
-    InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
+    InterceptorsExtensionSubtitle: typeof import("./components/interceptors/ExtensionSubtitle.vue")["default"]
-    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
+    LensesHeadersRenderer: typeof import("./components/lenses/HeadersRenderer.vue")["default"]
-    LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
+    LensesHeadersRendererEntry: typeof import("./components/lenses/HeadersRendererEntry.vue")["default"]
-    LensesRenderersAudioLensRenderer: typeof import('./components/lenses/renderers/AudioLensRenderer.vue')['default']
+    LensesRenderersAudioLensRenderer: typeof import("./components/lenses/renderers/AudioLensRenderer.vue")["default"]
-    LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
+    LensesRenderersHTMLLensRenderer: typeof import("./components/lenses/renderers/HTMLLensRenderer.vue")["default"]
-    LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default']
+    LensesRenderersImageLensRenderer: typeof import("./components/lenses/renderers/ImageLensRenderer.vue")["default"]
-    LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default']
+    LensesRenderersJSONLensRenderer: typeof import("./components/lenses/renderers/JSONLensRenderer.vue")["default"]
-    LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default']
+    LensesRenderersPDFLensRenderer: typeof import("./components/lenses/renderers/PDFLensRenderer.vue")["default"]
-    LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
+    LensesRenderersRawLensRenderer: typeof import("./components/lenses/renderers/RawLensRenderer.vue")["default"]
-    LensesRenderersVideoLensRenderer: typeof import('./components/lenses/renderers/VideoLensRenderer.vue')['default']
+    LensesRenderersVideoLensRenderer: typeof import("./components/lenses/renderers/VideoLensRenderer.vue")["default"]
-    LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
+    LensesRenderersXMLLensRenderer: typeof import("./components/lenses/renderers/XMLLensRenderer.vue")["default"]
-    LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
+    LensesResponseBodyRenderer: typeof import("./components/lenses/ResponseBodyRenderer.vue")["default"]
-    ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
+    ProfileShortcode: typeof import("./components/profile/Shortcode.vue")["default"]
-    ProfileShortcodes: typeof import('./components/profile/Shortcodes.vue')['default']
+    ProfileShortcodes: typeof import("./components/profile/Shortcodes.vue")["default"]
-    ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default']
+    ProfileUserDelete: typeof import("./components/profile/UserDelete.vue")["default"]
-    RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default']
+    RealtimeCommunication: typeof import("./components/realtime/Communication.vue")["default"]
-    RealtimeConnectionConfig: typeof import('./components/realtime/ConnectionConfig.vue')['default']
+    RealtimeConnectionConfig: typeof import("./components/realtime/ConnectionConfig.vue")["default"]
-    RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
+    RealtimeLog: typeof import("./components/realtime/Log.vue")["default"]
-    RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
+    RealtimeLogEntry: typeof import("./components/realtime/LogEntry.vue")["default"]
-    RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
+    RealtimeSubscription: typeof import("./components/realtime/Subscription.vue")["default"]
-    SettingsExtension: typeof import('./components/settings/Extension.vue')['default']
+    SettingsExtension: typeof import("./components/settings/Extension.vue")["default"]
-    SettingsProxy: typeof import('./components/settings/Proxy.vue')['default']
+    SettingsProxy: typeof import("./components/settings/Proxy.vue")["default"]
-    SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
+    SmartAccentModePicker: typeof import("./components/smart/AccentModePicker.vue")["default"]
-    SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
+    SmartAnchor: typeof import("./../../hoppscotch-ui/src/components/smart/Anchor.vue")["default"]
-    SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
+    SmartAutoComplete: typeof import("./../../hoppscotch-ui/src/components/smart/AutoComplete.vue")["default"]
-    SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default']
+    SmartChangeLanguage: typeof import("./components/smart/ChangeLanguage.vue")["default"]
-    SmartCheckbox: typeof import('./../../hoppscotch-ui/src/components/smart/Checkbox.vue')['default']
+    SmartCheckbox: typeof import("./../../hoppscotch-ui/src/components/smart/Checkbox.vue")["default"]
-    SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default']
+    SmartColorModePicker: typeof import("./components/smart/ColorModePicker.vue")["default"]
-    SmartConfirmModal: typeof import('./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue')['default']
+    SmartConfirmModal: typeof import("./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue")["default"]
-    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
+    SmartEnvInput: typeof import("./components/smart/EnvInput.vue")["default"]
-    SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
+    SmartExpand: typeof import("./../../hoppscotch-ui/src/components/smart/Expand.vue")["default"]
-    SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
+    SmartFileChip: typeof import("./../../hoppscotch-ui/src/components/smart/FileChip.vue")["default"]
-    SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
+    SmartFontSizePicker: typeof import("./components/smart/FontSizePicker.vue")["default"]
-    SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default']
+    SmartInput: typeof import("./../../hoppscotch-ui/src/components/smart/Input.vue")["default"]
-    SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
+    SmartIntersection: typeof import("./../../hoppscotch-ui/src/components/smart/Intersection.vue")["default"]
-    SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
+    SmartItem: typeof import("./../../hoppscotch-ui/src/components/smart/Item.vue")["default"]
-    SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
+    SmartLink: typeof import("./../../hoppscotch-ui/src/components/smart/Link.vue")["default"]
-    SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
+    SmartModal: typeof import("./../../hoppscotch-ui/src/components/smart/Modal.vue")["default"]
-    SmartPicture: typeof import('./../../hoppscotch-ui/src/components/smart/Picture.vue')['default']
+    SmartPicture: typeof import("./../../hoppscotch-ui/src/components/smart/Picture.vue")["default"]
-    SmartPlaceholder: typeof import('./../../hoppscotch-ui/src/components/smart/Placeholder.vue')['default']
+    SmartPlaceholder: typeof import("./../../hoppscotch-ui/src/components/smart/Placeholder.vue")["default"]
-    SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
+    SmartProgressRing: typeof import("./../../hoppscotch-ui/src/components/smart/ProgressRing.vue")["default"]
-    SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
+    SmartRadio: typeof import("./../../hoppscotch-ui/src/components/smart/Radio.vue")["default"]
-    SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']
+    SmartRadioGroup: typeof import("./../../hoppscotch-ui/src/components/smart/RadioGroup.vue")["default"]
-    SmartSlideOver: typeof import('./../../hoppscotch-ui/src/components/smart/SlideOver.vue')['default']
+    SmartSlideOver: typeof import("./../../hoppscotch-ui/src/components/smart/SlideOver.vue")["default"]
-    SmartSpinner: typeof import('./../../hoppscotch-ui/src/components/smart/Spinner.vue')['default']
+    SmartSpinner: typeof import("./../../hoppscotch-ui/src/components/smart/Spinner.vue")["default"]
-    SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
+    SmartTab: typeof import("./../../hoppscotch-ui/src/components/smart/Tab.vue")["default"]
-    SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default']
+    SmartTabs: typeof import("./../../hoppscotch-ui/src/components/smart/Tabs.vue")["default"]
-    SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default']
+    SmartToggle: typeof import("./../../hoppscotch-ui/src/components/smart/Toggle.vue")["default"]
-    SmartTree: typeof import('./../../hoppscotch-ui/src/components/smart/Tree.vue')['default']
+    SmartTree: typeof import("./../../hoppscotch-ui/src/components/smart/Tree.vue")["default"]
-    SmartTreeBranch: typeof import('./../../hoppscotch-ui/src/components/smart/TreeBranch.vue')['default']
+    SmartTreeBranch: typeof import("./../../hoppscotch-ui/src/components/smart/TreeBranch.vue")["default"]
-    SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
+    SmartWindow: typeof import("./../../hoppscotch-ui/src/components/smart/Window.vue")["default"]
-    SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
+    SmartWindows: typeof import("./../../hoppscotch-ui/src/components/smart/Windows.vue")["default"]
-    TabPrimary: typeof import('./components/tab/Primary.vue')['default']
+    TabPrimary: typeof import("./components/tab/Primary.vue")["default"]
-    TabSecondary: typeof import('./components/tab/Secondary.vue')['default']
+    TabSecondary: typeof import("./components/tab/Secondary.vue")["default"]
-    Teams: typeof import('./components/teams/index.vue')['default']
+    Teams: typeof import("./components/teams/index.vue")["default"]
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    TeamsAdd: typeof import("./components/teams/Add.vue")["default"]
-    TeamsEdit: typeof import('./components/teams/Edit.vue')['default']
+    TeamsEdit: typeof import("./components/teams/Edit.vue")["default"]
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
+    TeamsInvite: typeof import("./components/teams/Invite.vue")["default"]
-    TeamsMemberStack: typeof import('./components/teams/MemberStack.vue')['default']
+    TeamsMemberStack: typeof import("./components/teams/MemberStack.vue")["default"]
-    TeamsModal: typeof import('./components/teams/Modal.vue')['default']
+    TeamsModal: typeof import("./components/teams/Modal.vue")["default"]
-    TeamsTeam: typeof import('./components/teams/Team.vue')['default']
+    TeamsTeam: typeof import("./components/teams/Team.vue")["default"]
-    Tippy: typeof import('vue-tippy')['Tippy']
+    Tippy: typeof import("vue-tippy")["Tippy"]
-    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
+    WorkspaceCurrent: typeof import("./components/workspace/Current.vue")["default"]
-    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
+    WorkspaceSelector: typeof import("./components/workspace/Selector.vue")["default"]
   }
 }

packages/hoppscotch-sh-admin/locales/en.json

@@ -96,9 +96,10 @@
     "load_info_error": "Unable to load team info",
     "load_list_error": "Unable to Load Teams List",
     "members": "Number of members",
-    "name": "Team name",
+    "name": "Team Name",
     "no_members": "No members in this team. Add members to this team to collaborate",
     "no_pending_invites": "No pending invites",
+    "no_teams": "No teams found",
     "pending_invites": "Pending invites",
     "remove": "Remove",
     "rename": "Rename",
@@ -110,6 +111,7 @@
     "team_members_tab": "Team members",
     "teams": "Teams",
     "uid": "UID",
+    "unnamed": "(Unnamed Team)",
     "valid_name": "Please enter a valid team name",
     "valid_owner_email": "Please enter a valid owner email"
   },
@@ -123,6 +125,7 @@
     "created_on": "Created On",
     "date": "Date",
     "delete": "Delete",
+    "delete_user": "Delete User",
     "email": "Email",
     "email_address": "Email Address",
     "id": "User ID",

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -1,43 +1,44 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AppHeader: typeof import('./components/app/Header.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppLogin: typeof import('./components/app/Login.vue')['default'];
+    AppLogin: typeof import('./components/app/Login.vue')['default']
-    AppLogout: typeof import('./components/app/Logout.vue')['default'];
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
-    AppModal: typeof import('./components/app/Modal.vue')['default'];
+    AppModal: typeof import('./components/app/Modal.vue')['default']
-    AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
-    AppToast: typeof import('./components/app/Toast.vue')['default'];
+    AppToast: typeof import('./components/app/Toast.vue')['default']
-    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
+    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'];
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'];
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
-    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
+    HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default'];
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideUser: typeof import('~icons/lucide/user')['default'];
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
-    TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
-    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
-    TeamsTable: typeof import('./components/teams/Table.vue')['default'];
+    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
-    Tippy: typeof import('vue-tippy')['Tippy'];
+    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
-    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
+    Tippy: typeof import('vue-tippy')['Tippy']
-    UsersTable: typeof import('./components/users/Table.vue')['default'];
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
   }
+
 }

packages/hoppscotch-sh-admin/src/components/teams/Table.vue

@@ -1,102 +0,0 @@
-<template>
-  <table class="w-full">
-    <thead>
-      <tr class="text-secondary border-b border-dividerDark text-sm text-left">
-        <th class="px-3 pb-3">Team ID</th>
-        <th class="px-3 pb-3">Team Name</th>
-        <th class="px-3 pb-3">Number of Members</th>
-        <th class="px-3 pb-3"></th>
-      </tr>
-    </thead>
-
-    <tbody class="divide-y divide-divider">
-      <tr v-if="teamList.length === 0">
-        <div class="py-6 px-3">No teams found ...</div>
-      </tr>
-      <tr
-        v-else
-        v-for="team in teamList"
-        :key="team.id"
-        class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
-      >
-        <td
-          @click="$emit('go-to-team-details', team.id)"
-          class="py-4 px-3 max-w-50"
-        >
-          <div class="flex">
-            <span class="truncate">
-              {{ team.id }}
-            </span>
-          </div>
-        </td>
-
-        <td
-          @click="$emit('go-to-team-details', team.id)"
-          class="py-4 px-3 min-w-80"
-        >
-          <span v-if="team.name" class="flex items-center ml-4 truncate">
-            {{ team.name }}
-          </span>
-          <span v-else class="flex items-center ml-4"> (Unnamed team) </span>
-        </td>
-
-        <td @click="$emit('go-to-team-details', team.id)" class="py-4 px-3">
-          <span class="ml-7">
-            {{ team.members?.length }}
-          </span>
-        </td>
-
-        <td>
-          <div class="relative">
-            <tippy interactive trigger="click" theme="popover">
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :icon="IconMoreHorizontal"
-              />
-              <template #content="{ hide }">
-                <div
-                  ref="tippyActions"
-                  class="flex flex-col focus:outline-none"
-                  tabindex="0"
-                  @keyup.escape="hide()"
-                >
-                  <HoppSmartItem
-                    :icon="IconTrash"
-                    :label="'Delete Team'"
-                    class="!hover:bg-red-600 w-full"
-                    @click="
-                      () => {
-                        $emit('delete-team', team.id);
-                        hide();
-                      }
-                    "
-                  />
-                </div>
-              </template>
-            </tippy>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script setup lang="ts">
-import { TippyComponent } from 'vue-tippy';
-import { ref } from 'vue';
-import IconTrash from '~icons/lucide/trash';
-import IconMoreHorizontal from '~icons/lucide/more-horizontal';
-import { TeamListQuery } from '~/helpers/backend/graphql';
-
-// Template refs
-const tippyActions = ref<TippyComponent | null>(null);
-
-defineProps<{
-  teamList: TeamListQuery['admin']['allTeams'];
-}>();
-
-defineEmits<{
-  (event: 'go-to-team-details', teamID: string): void;
-  (event: 'delete-team', teamID: string): void;
-}>();
-</script>

packages/hoppscotch-sh-admin/src/components/users/Table.vue

@@ -1,168 +0,0 @@
-<template>
-  <table class="w-full">
-    <thead>
-      <tr class="text-secondary border-b border-dividerDark text-sm text-left">
-        <th class="px-3 pb-3">{{ t('users.id') }}</th>
-        <th class="px-3 pb-3">{{ t('users.name') }}</th>
-        <th class="px-3 pb-3">{{ t('users.email') }}</th>
-        <th class="px-3 pb-3">{{ t('users.date') }}</th>
-        <th class="px-3 pb-3"></th>
-      </tr>
-    </thead>
-
-    <tbody class="divide-y divide-divider">
-      <tr
-        v-for="user in usersList"
-        :key="user.uid"
-        class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
-      >
-        <td
-          @click="$emit('goToUserDetails', user.uid)"
-          class="py-2 px-3 max-w-30"
-        >
-          <div class="flex">
-            <span class="truncate">
-              {{ user.uid }}
-            </span>
-          </div>
-        </td>
-
-        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-          <div v-if="user.displayName" class="flex items-center space-x-3">
-            <span>
-              {{ user.displayName }}
-            </span>
-            <span
-              v-if="user.isAdmin"
-              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-            >
-              {{ t('users.admin') }}
-            </span>
-          </div>
-          <div v-else class="flex items-center space-x-3">
-            <span> {{ t('users.unnamed') }} </span>
-            <span
-              v-if="user.isAdmin"
-              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-            >
-              {{ t('users.admin') }}
-            </span>
-          </div>
-        </td>
-
-        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-          <span>
-            {{ user.email }}
-          </span>
-        </td>
-
-        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-          <div class="flex items-center">
-            <div class="flex flex-col">
-              {{ getCreatedDate(user.createdOn) }}
-              <div class="text-gray-400 text-tiny">
-                {{ getCreatedTime(user.createdOn) }}
-              </div>
-            </div>
-          </div>
-        </td>
-
-        <td>
-          <div class="relative">
-            <span>
-              <tippy interactive trigger="click" theme="popover">
-                <HoppButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :icon="IconMoreHorizontal"
-                />
-                <template #content="{ hide }">
-                  <div
-                    ref="tippyActions"
-                    class="flex flex-col focus:outline-none"
-                    tabindex="0"
-                    @keyup.escape="hide()"
-                  >
-                    <HoppSmartItem
-                      v-if="!user.isAdmin"
-                      :icon="IconUserCheck"
-                      :label="'Make Admin'"
-                      class="!hover:bg-emerald-600"
-                      @click="
-                        () => {
-                          $emit('makeUserAdmin', user.uid);
-                          hide();
-                        }
-                      "
-                    />
-                    <HoppSmartItem
-                      v-else
-                      :icon="IconUserMinus"
-                      :label="'Remove Admin Status'"
-                      class="!hover:bg-emerald-600"
-                      @click="
-                        () => {
-                          $emit('makeAdminToUser', user.uid);
-                          hide();
-                        }
-                      "
-                    />
-                    <HoppSmartItem
-                      v-if="!user.isAdmin"
-                      :icon="IconTrash"
-                      :label="'Delete User'"
-                      class="!hover:bg-red-600"
-                      @click="
-                        () => {
-                          $emit('deleteUser', user.uid);
-                          hide();
-                        }
-                      "
-                    />
-                  </div>
-                </template>
-              </tippy>
-            </span>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script lang="ts" setup>
-import { format } from 'date-fns';
-import { ref } from 'vue';
-import IconTrash from '~icons/lucide/trash';
-import IconUserMinus from '~icons/lucide/user-minus';
-import IconUserCheck from '~icons/lucide/user-check';
-import IconMoreHorizontal from '~icons/lucide/more-horizontal';
-import { UsersListQuery } from '~/helpers/backend/graphql';
-import { TippyComponent } from 'vue-tippy';
-import { useI18n } from '~/composables/i18n';
-
-const t = useI18n();
-
-defineProps<{
-  usersList: UsersListQuery['admin']['allUsers'];
-}>();
-
-defineEmits<{
-  (event: 'goToUserDetails', uid: string): void;
-  (event: 'makeUserAdmin', uid: string): void;
-  (event: 'makeAdminToUser', uid: string): void;
-  (event: 'deleteUser', uid: string): void;
-}>();
-
-// Get Proper Date Formats
-const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
-const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
-
-// Template refs
-const tippyActions = ref<TippyComponent | null>(null);
-</script>
-
-<style scoped>
-.tippy-box[data-theme~='popover'] .tippy-content {
-  padding: 0;
-}
-</style>

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -13,7 +13,7 @@
 
       <div class="overflow-x-auto">
         <div
-          v-if="fetching && !error && teamList.length === 0"
+          v-if="fetching && !error && teamsList.length === 0"
           class="flex justify-center"
         >
           <HoppSmartSpinner />
@@ -21,16 +21,94 @@
 
         <div v-else-if="error">{{ t('teams.load_list_error') }}</div>
 
-        <TeamsTable
+        <div v-else-if="teamsList.length == 0" class="px-2">
-          v-else
+          <p class="text-lg">
-          :teamList="teamList"
+            {{ t('teams.no_teams') }}
-          @goToTeamDetails="goToTeamDetails"
+          </p>
-          @deleteTeam="deleteTeam"
+        </div>
-          class=""
+
-        />
+        <div v-else>
+          <HoppSmartTable :list="teamsList">
+            <template #head>
+              <tr
+                class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
+              >
+                <th class="px-6 py-2">{{ t('teams.id') }}</th>
+                <th class="px-6 py-3">{{ t('teams.name') }}</th>
+                <th class="px-6 py-2">{{ t('teams.members') }}</th>
+                <th class="px-6 py-2"></th>
+              </tr>
+            </template>
+            <template #body="{ list }">
+              <tr
+                v-for="team in list"
+                :key="team.id"
+                class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+                @click="goToTeamDetails(team.id)"
+              >
+                <td class="py-4 px-3 max-w-50">
+                  <div class="flex">
+                    <span class="truncate">
+                      {{ team.id }}
+                    </span>
+                  </div>
+                </td>
+
+                <td class="py-4 px-3 min-w-80">
+                  <span
+                    v-if="team.name"
+                    class="flex items-center ml-4 truncate"
+                  >
+                    {{ team.name }}
+                  </span>
+                  <span v-else class="flex items-center ml-4">
+                    {{ t('teams.unnamed') }}
+                  </span>
+                </td>
+
+                <td class="py-4 px-3">
+                  <span class="ml-7">
+                    {{ team.members?.length }}
+                  </span>
+                </td>
+
+                <td @click.stop>
+                  <div class="relative">
+                    <tippy interactive trigger="click" theme="popover">
+                      <HoppButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :icon="IconMoreHorizontal"
+                      />
+                      <template #content="{ hide }">
+                        <div
+                          ref="tippyActions"
+                          class="flex flex-col focus:outline-none"
+                          tabindex="0"
+                          @keyup.escape="hide()"
+                        >
+                          <HoppSmartItem
+                            :icon="IconTrash"
+                            :label="t('teams.delete_team')"
+                            class="!hover:bg-red-600 w-full"
+                            @click="
+                              () => {
+                                deleteTeam(team.id);
+                                hide();
+                              }
+                            "
+                          />
+                        </div>
+                      </template>
+                    </tippy>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </HoppSmartTable>
+        </div>
 
         <div
-          v-if="hasNextPage && teamList.length >= teamsPerPage"
+          v-if="hasNextPage && teamsList.length >= teamsPerPage"
           class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark"
           @click="fetchNextTeams"
         >
@@ -66,10 +144,12 @@ import {
   UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '~/composables/usePagedQuery';
-import { ref, watch, computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useMutation, useQuery } from '@urql/vue';
 import { useToast } from '~/composables/toast';
 import IconAddUsers from '~icons/lucide/plus';
+import IconTrash from '~icons/lucide/trash';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 import { useI18n } from '~/composables/i18n';
 
 const t = useI18n();
@@ -96,7 +176,7 @@ const {
   error,
   goToNextPage: fetchNextTeams,
   refetch,
-  list: teamList,
+  list: teamsList,
   hasNextPage,
 } = usePagedQuery(
   TeamListDocument,
@@ -143,9 +223,7 @@ const createTeam = async (newTeamName: string, ownerEmail: string) => {
 
 // Go To Individual Team Details Page
 const router = useRouter();
-const goToTeamDetails = (teamId: string) => {
+const goToTeamDetails = (teamId: string) => router.push('/teams/' + teamId);
-  router.push('/teams/' + teamId);
-};
 
 // Reload Teams Page when routed back to the teams page
 const route = useRoute();
@@ -175,7 +253,7 @@ const deleteTeamMutation = async (id: string | null) => {
     if (result.error) {
       toast.error(`${t('state.delete_team_failure')}`);
     } else {
-      teamList.value = teamList.value.filter((team) => team.id !== id);
+      teamsList.value = teamsList.value.filter((team) => team.id !== id);
       toast.success(`${t('state.delete_team_success')}`);
     }
   });

packages/hoppscotch-sh-admin/src/pages/users/_id.vue

@@ -37,7 +37,7 @@
             t('users.uid')
           }}</label>
           <div
-            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
           >
             {{ user.uid }}
           </div>
@@ -47,7 +47,7 @@
             t('users.name')
           }}</label>
           <div
-            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
           >
             <span v-if="user.displayName">
               {{ user.displayName }}
@@ -60,7 +60,7 @@
             t('users.email')
           }}</label>
           <div
-            class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            class="w-full p-3 mt-2 bg-divider border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
           >
             {{ user.email }}
           </div>
@@ -70,7 +70,7 @@
             t('users.created_on')
           }}</label>
           <div
-            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
           >
             {{ getCreatedDateAndTime(user.createdOn) }}
           </div>

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -31,16 +31,139 @@
 
         <div v-else-if="error">{{ t('users.load_list_error') }}</div>
 
-        <UsersTable
+        <div v-else-if="usersList.length > 0">
-          v-else-if="usersList.length >= 1"
+          <HoppSmartTable :list="usersList">
-          :usersList="usersList"
+            <template #head>
-          :fetching="fetching"
+              <tr
-          :error="error"
+                class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
-          @goToUserDetails="goToUserDetails"
+              >
-          @makeUserAdmin="makeUserAdmin"
+                <th class="px-6 py-2">{{ t('users.id') }}</th>
-          @makeAdminToUser="makeAdminToUser"
+                <th class="px-6 py-2">{{ t('users.name') }}</th>
-          @deleteUser="deleteUser"
+                <th class="px-6 py-2">{{ t('users.email') }}</th>
-        />
+                <th class="px-6 py-2">{{ t('users.date') }}</th>
+                <th class="px-6 py-2"></th>
+              </tr>
+            </template>
+
+            <template #body="{ list }">
+              <tr
+                v-for="user in list"
+                :key="user.uid"
+                class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+                @click="goToUserDetails(user.uid)"
+              >
+                <td class="py-2 px-3 max-w-30">
+                  <div class="flex">
+                    <span class="truncate">
+                      {{ user.uid }}
+                    </span>
+                  </div>
+                </td>
+
+                <td class="py-2 px-3">
+                  <div
+                    v-if="user.displayName"
+                    class="flex items-center space-x-3"
+                  >
+                    <span>
+                      {{ user.displayName }}
+                    </span>
+                    <span
+                      v-if="user.isAdmin"
+                      class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+                    >
+                      {{ t('users.admin') }}
+                    </span>
+                  </div>
+                  <div v-else class="flex items-center space-x-3">
+                    <span> {{ t('users.unnamed') }} </span>
+                    <span
+                      v-if="user.isAdmin"
+                      class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+                    >
+                      {{ t('users.admin') }}
+                    </span>
+                  </div>
+                </td>
+
+                <td class="py-2 px-3">
+                  <span>
+                    {{ user.email }}
+                  </span>
+                </td>
+
+                <td class="py-2 px-3">
+                  <div class="flex items-center">
+                    <div class="flex flex-col">
+                      {{ getCreatedDate(user.createdOn) }}
+                      <div class="text-gray-400 text-tiny">
+                        {{ getCreatedTime(user.createdOn) }}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+
+                <td @click.stop>
+                  <div class="relative">
+                    <span>
+                      <tippy interactive trigger="click" theme="popover">
+                        <HoppButtonSecondary
+                          v-tippy="{ theme: 'tooltip' }"
+                          :icon="IconMoreHorizontal"
+                        />
+                        <template #content="{ hide }">
+                          <div
+                            ref="tippyActions"
+                            class="flex flex-col focus:outline-none"
+                            tabindex="0"
+                            @keyup.escape="hide()"
+                          >
+                            <HoppSmartItem
+                              v-if="!user.isAdmin"
+                              :icon="IconUserCheck"
+                              :label="t('users.make_admin')"
+                              class="!hover:bg-emerald-600"
+                              @click="
+                                () => {
+                                  makeUserAdmin(user.uid);
+                                  hide();
+                                }
+                              "
+                            />
+                            <HoppSmartItem
+                              v-else
+                              :icon="IconUserMinus"
+                              :label="t('users.remove_admin_status')"
+                              class="!hover:bg-emerald-600"
+                              @click="
+                                () => {
+                                  makeAdminToUser(user.uid);
+                                  hide();
+                                }
+                              "
+                            />
+                            <HoppSmartItem
+                              v-if="!user.isAdmin"
+                              :icon="IconTrash"
+                              :label="t('users.delete_user')"
+                              class="!hover:bg-red-600"
+                              @click="
+                                () => {
+                                  deleteUser(user.uid);
+                                  hide();
+                                }
+                              "
+                            />
+                          </div>
+                        </template>
+                      </tippy>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </HoppSmartTable>
+        </div>
 
         <div v-else class="flex justify-center">{{ t('users.no_users') }}</div>
 
@@ -82,6 +205,7 @@
 </template>
 
 <script setup lang="ts">
+import { format } from 'date-fns';
 import { ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
@@ -96,8 +220,16 @@ import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '~/composables/toast';
 import { HoppButtonSecondary } from '@hoppscotch/ui';
 import IconAddUser from '~icons/lucide/user-plus';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
+import IconUserCheck from '~icons/lucide/user-check';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 import { useI18n } from '~/composables/i18n';
 
+// Get Proper Date Formats
+const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
+const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
+
 const t = useI18n();
 
 const toast = useToast();
@@ -141,9 +273,7 @@ const sendInvite = async (email: string) => {
 // Go to Individual User Details Page
 const route = useRoute();
 const router = useRouter();
-const goToUserDetails = (uid: string) => {
+const goToUserDetails = (uid: string) => router.push('/users/' + uid);
-  router.push('/users/' + uid);
-};
 
 watch(
   () => route.params.id,

packages/hoppscotch-sh-admin/src/pages/users/invited.vue

@@ -16,64 +16,36 @@
           <div v-if="fetching" class="flex justify-center">
             <HoppSmartSpinner />
           </div>
-          <div v-else-if="error || invitedUsers === undefined">
+          <div
+            v-else-if="
+              error || invitedUsers === undefined || invitedUsers.length === 0
+            "
+          >
             <p class="text-xl">{{ t('users.no_invite') }}</p>
           </div>
 
-          <table v-else class="w-full text-left">
+          <div v-else>
-            <thead>
+            <HoppSmartTable :list="newInvitedUsersList" :headings="headings">
-              <tr
+              <template #invitedOn="{ item }">
-                class="text-secondary border-b border-dividerDark text-sm text-left"
+                <div class="flex flex-col truncate">
-              >
+                  <span v-if="item" class="truncate">
-                <th class="px-3 pb-3">{{ t('users.admin_id') }}</th>
+                    {{ getCreatedDate(item.invitedOn) }}
-                <th class="px-3 pb-3">{{ t('users.admin_email') }}</th>
+                  </span>
-                <th class="px-3 pb-3">{{ t('users.invitee_email') }}</th>
+                  <span v-else> - </span>
-                <th class="px-3 pb-3">{{ t('users.invited_on') }}</th>
+
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-divider">
-              <tr
-                v-if="invitedUsers.length === 0"
-                class="text-secondaryDark py-4"
-              >
-                <div class="py-6 px-3">{{ t('users.no_invite') }}</div>
-              </tr>
-              <tr
-                v-else
-                v-for="(user, index) in invitedUsers"
-                :key="index"
-                class="text-secondaryDark hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
-              >
-                <td class="py-2 px-3 max-w-30">
                   <div>
-                    <span class="truncate">
+                    <div class="text-gray-400 text-tiny">
-                      {{ user?.adminUid }}
+                      <span>
-                    </span>
+                        <span>
-                  </div>
+                          {{ getCreatedTime(item.invitedOn) }}
-                </td>
+                        </span>
-                <td class="py-2 px-3">
+                      </span>
-                  <span class="flex items-center">
-                    {{ user?.adminEmail }}
-                  </span>
-                </td>
-                <td class="py-2 px-3">
-                  <span>
-                    {{ user?.inviteeEmail }}
-                  </span>
-                </td>
-                <td class="py-2 px-3">
-                  <div class="flex items-center">
-                    <div class="flex flex-col">
-                      {{ getCreatedDate(user?.invitedOn) }}
-                      <div class="text-gray-400 text-xs">
-                        {{ getCreatedTime(user?.invitedOn) }}
-                      </div>
                     </div>
                   </div>
-                </td>
+                </div>
-              </tr>
+              </template>
-            </tbody>
+            </HoppSmartTable>
-          </table>
+          </div>
         </div>
       </div>
     </div>
@@ -100,4 +72,24 @@ const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
 // Get Invited Users
 const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
 const invitedUsers = computed(() => data?.value?.admin.invitedUsers);
+
+// The new invited users list that is used in the table
+const newInvitedUsersList = computed(() => {
+  return invitedUsers.value?.map((user) => {
+    return {
+      adminUid: user.adminUid,
+      adminEmail: user.adminEmail,
+      inviteeEmail: user.inviteeEmail,
+      invitedOn: user.invitedOn,
+    };
+  });
+});
+
+// Table Headings
+const headings = [
+  { key: 'adminUid', label: t('users.admin_id') },
+  { key: 'adminEmail', label: t('users.admin_email') },
+  { key: 'inviteeEmail', label: t('users.invitee_email') },
+  { key: 'invitedOn', label: t('users.invited_on') },
+];
 </script>

packages/hoppscotch-ui/src/components/smart/Table.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
+    <table class="w-full">
+      <thead>
+        <slot name="head">
+          <tr
+            class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
+          >
+            <th v-for="th in headings" scope="col" class="px-6 py-3">
+              {{ th.label ?? th.key }}
+            </th>
+          </tr>
+        </slot>
+      </thead>
+
+      <tbody class="divide-y divide-divider">
+        <slot name="body" :list="list">
+          <tr
+            v-for="(rowData, rowIndex) in list"
+            :key="rowIndex"
+            class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+            :class="yBorder ? 'divide-x divide-divider' : ''"
+          >
+            <td
+              v-for="cellHeading in headings"
+              :key="cellHeading.key"
+              @click="!cellHeading.preventClick && onRowClicked(rowData)"
+              class="max-w-40 pl-6 py-1"
+            >
+              <!-- Dynamic column slot -->
+              <slot :name="cellHeading.key" :item="rowData">
+                <!-- Generic implementation of the column -->
+                <div class="flex flex-col truncate">
+                  <span class="truncate">
+                    {{ rowData[cellHeading.key] ?? "-" }}
+                  </span>
+                </div>
+              </slot>
+            </td>
+          </tr>
+        </slot>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup generic="Item extends Record<string, unknown>">
+export type CellHeading = {
+  key: string
+  label?: string
+  preventClick?: boolean
+}
+
+defineProps<{
+  /** Whether to show the vertical border between columns */
+  yBorder?: boolean
+  /**  The list of items to be displayed in the table */
+  list?: Item[]
+  /** The headings of the table */
+  headings?: CellHeading[]
+}>()
+
+const emit = defineEmits<{
+  (event: "onRowClicked", item: Item): void
+}>()
+
+const onRowClicked = (item: Item) => emit("onRowClicked", item)
+</script>

packages/hoppscotch-ui/src/components/smart/index.ts

@@ -16,6 +16,7 @@ export { default as HoppSmartSlideOver } from "./SlideOver.vue"
 export { default as HoppSmartSpinner } from "./Spinner.vue"
 export { default as HoppSmartTab } from "./Tab.vue"
 export { default as HoppSmartTabs } from "./Tabs.vue"
+export { default as HoppSmartTable } from "./Table.vue"
 export { default as HoppSmartToggle } from "./Toggle.vue"
 export { default as HoppSmartWindow } from "./Window.vue"
 export { default as HoppSmartWindows } from "./Windows.vue"

packages/hoppscotch-ui/src/stories/Table.story.vue

@@ -0,0 +1,58 @@
+<template>
+  <Story title="Table">
+    <Variant title="General">
+      <HoppSmartTable :list="list" :headings="headings" />
+    </Variant>
+    <Variant title="Custom">
+      <HoppSmartTable>
+        <template #head>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Members</th>
+          <th>Role</th>
+        </template>
+        <template #body>
+          <tr>
+            <td>123454</td>
+            <td>Joel</td>
+            <td>10</td>
+            <td>Frontend Engineer</td>
+          </tr>
+          <tr>
+            <td>123456</td>
+            <td>Anwar</td>
+            <td>12</td>
+            <td>Frontend Engineer</td>
+          </tr>
+        </template>
+      </HoppSmartTable>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppSmartTable } from "../components/smart"
+
+// Table Headings
+const headings = [
+  { key: "id", label: "ID" },
+  { key: "name", label: "Name" },
+  { key: "members", label: "Members" },
+  { key: "role", label: "Role" },
+]
+
+const list = [
+  {
+    id: "123455",
+    name: "Joel",
+    members: 10,
+    role: "Frontend Engineer",
+  },
+  {
+    id: "123456",
+    name: "Anwar",
+    members: 12,
+    role: "Frontend Engineer",
+  },
+]
+</script>