Introduce reusable GTable component #21635
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Introduces a new reusable table component that extends BTable with: - Loading state with customizable message - Empty state with customizable message and variant - Type definitions for props and events - Proper TypeScript interfaces for type safety
Updates DatasetList component to use the new GTable component: - Replace BTable with GTable for consistent loading/empty states - Remove LoadingSpan and BAlert components in favor of GTable states - Add explicit field labels to table configuration - Pass loading state and messages as props to GTable - Simplify template by removing duplicate state handling
Make ListHeader more flexible by accepting dynamic sort and column options via props. Add dropdown support for column visibility, emit events for sort and column changes, and keep default sort behavior for backward compatibility.
Introduce separate loading states for table interactions and pagination. Add support for an overlay loader during sorting/filtering and a bottom "load more" indicator for infinite scroll or pagination, using BOverlay and new configurable props and messages to improve UX clarity.
Refactors dataset deletion to support both soft delete and purge via a configurable deleteDataset function. Keeps purgeDataset as a wrapper for backward compatibility while enabling non-purge deletes through the same API call.
Enhance the dataset list with selectable rows, single and bulk delete functionality, and a confirmation modal. Introduce a configurable list header with column visibility, contextual actions, loading states, and improved feedback to make dataset management clearer and more efficient.
Refactor GTable layout to rely on Bootstrap utility classes instead of custom CSS, simplifying markup and styles while preserving behavior. Remove unused container and wrapper styles, adjust table classes for full-width rendering, and clean up selection header markup. Also clean up DatasetList by removing an unused ListHeader ref and adding DelayedInput for improved dataset search handling.
Update GTable to use explicit slots and props for actions and selection, removing the legacy actions toolbar and scoped slot checks. Introduce a dedicated head-select slot, adjust actions header naming, and clarify row selection tooltip text to better support bulk
Refactor the dataset list to use GTable’s actions API instead of a custom dropdown, adding copy, show, and delete actions with icons. Make dataset names clickable links to show them in the history panel and simplify footer styling for better consistency and usability.
Add size, routing, and link-related properties to TableAction and update the handler signature to receive item and index. This enables richer actions (navigation, external links, sizing) and provides more context to action handlers, at the cost of a breaking type change.
Deletes the DatasetName Vue component and its associated test file as they are no longer used in the codebase.
Refactor GTable local sorting to use clearer sortBy/sortDesc state with sensible defaults. Simplify the sort-changed event signature to emit primitive values instead of an object, and update all sorting logic and UI bindings to align with the new state for more predictable behavior.
Clean up unused sorting logic by removing header sort options and consolidating sort handling, simplifying the component API. Also fix a bug where `query` was treated as a plain value instead of a ref to ensure empty-state logic works correctly.
Remove the unused `noSortReset` prop and `SortChangeEvent` import, and standardize JSDoc-style comments across GTable props and emits to improve clarity and maintainability without changing runtime behavior.
Reorder and group GTable props and default values for better clarity and consistency without changing behavior. Improves readability and maintainability of the component’s public API.
Removes the internal computed sorting logic and replaces it with a simple localItems reference to props.items. This ensures the table renders data in the order provided by the parent, avoiding duplicate or conflicting sorting when sorting is handled externally (e.g. server-side or higher-level components).
Reorganized reactive refs and moved the `fields` computed property after its dependencies to improve readability and avoid referencing state before declaration. Also removed redundant inline comments to clean up the component logic.
Creates a reusable composable that encapsulates all dataset table operations, including copying, displaying, deleting, and purging datasets. This extraction improves code organization by centralizing dataset manipulation logic and makes it easier to share these actions across different components. The composable handles user confirmations, error messaging, and history store updates consistently.
Move dataset table action definitions and handlers into a dedicated useDatasetTableActions composable. This simplifies DatasetList.vue, removes unused imports and state, and improves reuse and maintainability of table action logic.
Introduces a breadcrumb heading component to the dataset list page for improved navigation and user orientation.
Introduce built-in select-all support in GTable with proper disabled, indeterminate, and all-selected states, and emit a new select-all event for bulk actions. Update the header slot to render a default checkbox when enabled. Also refresh the row actions menu by switching to an ellipsis icon and larger trigger size, and remove redundant show-select-all usage from DatasetList.
Introduce a new loadDatasets API helper that supports pagination, sorting, and text search. The helper returns summarized dataset records along with a total match count parsed from response headers, enabling more efficient dataset listing and UI pagination.
Replace infinite scroll with pagination using BPagination and a dedicated loadDatasets API. Track total dataset count, adjust page size, reset selections on query/sort changes, and simplify loading state handling for clearer UX and maintainable data fetching.
Refactor dataset bulk deletion to use the shared confirm dialog composable instead of a dedicated modal. This simplifies state management, removes unused modal-related logic, and provides a consistent confirmation UX while keeping deletion feedback and error handling intact.
Remove local alert state and error handler in DatasetList and use Toast notifications instead to surface load, history switch, and tag update errors consistently across the UI.
Update the list header column selector to use a cog icon button without a caret, and group options under a clear header. This creates a cleaner, more compact UI and improves clarity when showing or hiding columns.
Introduce a RowIcon interface to support configurable row status icons, including size, tooltip, and loading state. Remove the unused TableField `html` flag.
Introduce a `statusIcon` prop to render an inline FontAwesome icon in the first data column of each row.
Display contextual status icons for datasets (purged, deleted, successful, or in-progress) in the dataset list. This improves visual feedback and makes it easier for users to quickly understand dataset state at a glance.
Remove the clickable dataset name that applied history filters and clean up unused history store imports and logic.
Pass a refresh callback into useDatasetTableActions and invoke it after copy, delete, or purge operations so the dataset list stays in sync with backend changes and reflects updates immediately.
Update the history switch link text to better explain that it switches to the selected history and displays the dataset, improving clarity for users who own the history.
Adjust sort option handling to reliably fall back to the default sort when no custom options are provided. This prevents undefined initial sort values and ensures consistent list behavior.
Adds a reset columns control to the list header dropdown that appears when any column is hidden. This allows users to quickly restore the default column visibility, improving usability when managing column settings.
Add an `onResetColumns` handler to restore all dataset columns to their default visibility and wire it to the table’s `reset-columns` event, allowing users to quickly revert column customizations.
Update the first-column v-if condition to call getStatusIcon(item, index) directly instead of relying on a shared statusIcon value, ensuring the correct icon is evaluated and rendered for each row.
Update SwitchToHistoryLink tests to reflect the new tooltip label "Switch to history and view dataset" when switching histories with filters applied, ensuring assertions match current UI behavior and intent.
Update Selenium test selectors to use correct selectors, ensuring tests correctly locate and interact with sort controls after label changes.
itisAliRH
force-pushed
the
init-g-table-component
branch
from
340c9c1 to
5b74186
Compare
itisAliRH
changed the title
davelopez
approved these changes
Jan 29, 2026
Contributor
davelopez
left a comment
davelopez
left a comment
There was a problem hiding this comment.
I love it! It works pretty well on my local testing, and I'm looking forward to using it instead of BTable.
Contributor
|
I'll get this in so we can start replacing other existing tables and see what other features we need to support for GTable. I will also follow up with the small refactoring mentioned here #21635 (comment) |
4 tasks
Member
Author
@davelopez, thanks! I’ve approved the refactor PR✌🏻 |
46 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces the first iteration of
GTablecomponent as the first step toward replacing Bootstrap Vue'sBTableacross the UI. TheDataset Listserves as the first migration target, demonstrating the component's capabilities.Ref: #20787 #21338
Show/hide columns
What's New
GTableComponentgeneric="T"), item types flow through to all slots and event payloads.TableField[]with sorting, alignment, width, and responsive visibility (hideOnSmall)TableAction[](label, icon, handler, visibility, disabled state, routing)statusIconfunction propListHeaderEnhancementssortOptionspropDataset List Migration
BTabletoGTablewith server-side sorting and paginationuseDatasetTableActionscomposable (copy, show in history, delete, purge)loadDatasetsAPI helper with pagination, sorting, and search supportHow to test the changes?
(Select all options that apply)
License