Skip to content

✨ feat: add EmptyState, EmptyResults and ErrorState to VirtualizedTable - #716

Open
futjesus wants to merge 1 commit into
mainfrom
feat/table-empty-states
Open

futjesus wants to merge 1 commit into
mainfrom
feat/table-empty-states

Conversation

@futjesus

@futjesus futjesus commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Every microfrontend ships its own TableEmptyResults, TableErrorState and TableEmptyState (dns, kubernetes, teams, volumes, vpc; NoResults in compute, settings and billing) to feed the emptyState / errorState slots, all with the same layout and copy. This adds them to the library as sub-components:

  • VirtualizedTable.EmptyState: base layout with image, title, description, action.
  • VirtualizedTable.EmptyResults: the filtered-to-nothing state. Reads the table id from context and sends the reset-filters event on its own; onResetFilters takes over when provided. Copy (title, description, resetLabel) and image are overridable.
  • VirtualizedTable.ErrorState: the fetch-failure state. Sends the refresh event for its table by default; onRetry, title, description, retryLabel, icon are overridable. Works with the errorState={(error) => ...} callback form to show error.message.

tableId is now exposed in the table context so sub-components rendered inside the table can target it.

Nothing renders by default when emptyState / errorState are not passed, so existing tables keep their behaviour.

Test plan

  • npx vitest run lib/components/VirtualizedTable (81 tests, 15 new)
  • npm run lint, npm run check:types, prettier
  • Storybook: VirtualizedTable/Light and DarkErrorState and the new EmptyResults stories

Every microfrontend ships its own TableEmptyResults, TableErrorState and
TableEmptyState (dns, kubernetes, teams, volumes, vpc; NoResults in
compute, settings and billing) to feed the `emptyState` and `errorState`
slots, all with the same layout and copy.

`VirtualizedTable.EmptyState` is the base layout (image, title,
description, action). `VirtualizedTable.EmptyResults` is the
filtered-to-nothing variant and `VirtualizedTable.ErrorState` the fetch
failure variant; both read the table id from the new `tableId` context
value and send the reset-filters / refresh event on their own, so
consumers no longer need to thread `sendResetFiltersEvent(tableId)` or a
refresh handler through. `onResetFilters` and `onRetry` take over when
provided.

Nothing is rendered by default when `emptyState` / `errorState` are not
passed, so existing tables keep their current behaviour.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant