[PR #3178] [MERGED] feat: introducing a new smart table hoppscotch ui component #4268

New issue

Closed

opened 2026-03-17 01:49:12 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:49:12 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3178
Author: @joeljstephen
Created: 7/9/2023
Status: ✅ Merged
Merged: 11/6/2023
Merged by: @AndrewBastin

Base: release/2023.12.0 ← Head: feat/smart-table

📝 Commits (10+)

cdbc580 feat: introducing smart table to hopp ui
834efce feat: introducing badges and subtitle support for table
dfabf7e feat: added the ability to add subtitles in multiple columns
55c1913 refactor: replaced table with hoppsmarttable in invited users page and code cleanup
a087603 style: modified styles in different components of sh admin
0962718 chore: updated types
b0e29b2 feat: introduced table component in storybook
c19a8be refactor: replaced text with i18n strings
fb234cb refactor: introduced variants to table in storybook
c0ee3d0 chore: updated types

📊 Changes

11 files changed (+440 additions, -400 deletions)

View changed files

📝 packages/hoppscotch-common/src/components.d.ts (+1 -1)
📝 packages/hoppscotch-sh-admin/locales/en.json (+5 -1)
📝 packages/hoppscotch-sh-admin/src/components.d.ts (+62 -35)
➖ packages/hoppscotch-sh-admin/src/components/teams/Table.vue (+0 -102)
➖ packages/hoppscotch-sh-admin/src/components/users/Table.vue (+0 -162)
📝 packages/hoppscotch-sh-admin/src/pages/teams/index.vue (+83 -18)
📝 packages/hoppscotch-sh-admin/src/pages/users/index.vue (+116 -18)
📝 packages/hoppscotch-sh-admin/src/pages/users/invited.vue (+34 -63)
➕ packages/hoppscotch-ui/src/components/smart/Table.vue (+69 -0)
📝 packages/hoppscotch-ui/src/components/smart/index.ts (+1 -0)
➕ packages/hoppscotch-ui/src/stories/Table.story.vue (+69 -0)

📄 Description

Issue Number

Closes HFE-130

Description

This PR introduces a new Smart Table component in hoppscotch-ui. This component can be used to create a table with any number of rows and columns. Parent components can control various aspects of the table including content, border, styles and can provide their own implementation for the action button at the end of each row of the table. It also provides the ability to insert badges and subtitles in any row and column of the table.

This PR replaces all the tables used in the hoppscotch-sh-admin repo with the HoppSmartTable component

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/3178 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 7/9/2023 **Status:** ✅ Merged **Merged:** 11/6/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.12.0` ← **Head:** `feat/smart-table` --- ### 📝 Commits (10+) - [`cdbc580`](https://github.com/hoppscotch/hoppscotch/commit/cdbc580adab553bc8fc44e55b4d2d4302f4839a0) feat: introducing smart table to hopp ui - [`834efce`](https://github.com/hoppscotch/hoppscotch/commit/834efce1c27fcf198e166072ff88533b03f467ea) feat: introducing badges and subtitle support for table - [`dfabf7e`](https://github.com/hoppscotch/hoppscotch/commit/dfabf7e8bc9fb15e82ce4f967a5e1b32621b852d) feat: added the ability to add subtitles in multiple columns - [`55c1913`](https://github.com/hoppscotch/hoppscotch/commit/55c191305cbd5d93c08788c69684d572938385df) refactor: replaced table with hoppsmarttable in invited users page and code cleanup - [`a087603`](https://github.com/hoppscotch/hoppscotch/commit/a08760351daec1ec8e919c0090e4eae93bbdde73) style: modified styles in different components of sh admin - [`0962718`](https://github.com/hoppscotch/hoppscotch/commit/0962718b0ce164af52ae377bfb741d31272c05f7) chore: updated types - [`b0e29b2`](https://github.com/hoppscotch/hoppscotch/commit/b0e29b2e6c6b24720f5c141cabab9546b8aee88e) feat: introduced table component in storybook - [`c19a8be`](https://github.com/hoppscotch/hoppscotch/commit/c19a8be6e9f51440424835373b7446dbd293a81b) refactor: replaced text with i18n strings - [`fb234cb`](https://github.com/hoppscotch/hoppscotch/commit/fb234cbf7e51f10cc7ddfb40919addfd09263166) refactor: introduced variants to table in storybook - [`c0ee3d0`](https://github.com/hoppscotch/hoppscotch/commit/c0ee3d02ae170f774a876fe66aa71713c63059ad) chore: updated types ### 📊 Changes **11 files changed** (+440 additions, -400 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components.d.ts` (+1 -1) 📝 `packages/hoppscotch-sh-admin/locales/en.json` (+5 -1) 📝 `packages/hoppscotch-sh-admin/src/components.d.ts` (+62 -35) ➖ `packages/hoppscotch-sh-admin/src/components/teams/Table.vue` (+0 -102) ➖ `packages/hoppscotch-sh-admin/src/components/users/Table.vue` (+0 -162) 📝 `packages/hoppscotch-sh-admin/src/pages/teams/index.vue` (+83 -18) 📝 `packages/hoppscotch-sh-admin/src/pages/users/index.vue` (+116 -18) 📝 `packages/hoppscotch-sh-admin/src/pages/users/invited.vue` (+34 -63) ➕ `packages/hoppscotch-ui/src/components/smart/Table.vue` (+69 -0) 📝 `packages/hoppscotch-ui/src/components/smart/index.ts` (+1 -0) ➕ `packages/hoppscotch-ui/src/stories/Table.story.vue` (+69 -0) </details> ### 📄 Description ### Issue Number Closes HFE-130 ### Description This PR introduces a new Smart Table component in `hoppscotch-ui`. This component can be used to create a table with any number of rows and columns. Parent components can control various aspects of the table including content, border, styles and can provide their own implementation for the action button at the end of each row of the table. It also provides the ability to insert badges and subtitles in any row and column of the table. This PR replaces all the tables used in the `hoppscotch-sh-admin` repo with the `HoppSmartTable` component  ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>