Table States

Table state feedback covers loading, empty, and load-error states.

These states are configured under table.states, not under feedback. Loading and empty text are read directly from table.states. Load-error copy is resolved through the message pipeline.

Default states

export const usersSchema = {
  resource: "users",
  table: {
    states: {
      loading: {
        text: "Loading users..."
      },
      empty: {
        text: "No users found."
      }
    }
  },
  messages: {
    defaults: {
      loadError: "Unable to load users."
    }
  }
} as const;

Loading state

When the loading prop or provider loading state is true, VibeFlui renders a loading state before the table.

<FluiKit schema={usersSchema} loading />

The default loading text is Loading....

Empty state

When the table has no rows, VibeFlui renders the empty state inside the table body.

<FluiKit schema={usersSchema} data={[]} />

The default empty text is No data available..

Load error state

When the error prop or provider error is present, VibeFlui keeps the table wrapper and headers visible, then renders the resolved load error message inside a full-width table body row.

<FluiKit schema={usersSchema} error={new Error("Network timeout")} />

The load-error text resolves in this priority order: a backend/caught error message first, then messages.defaults.loadError, then table.states.error.text, then the built-in default "Unable to load data.". So table.states.error.text does override the built-in default when no backend message and no messages.defaults.loadError are present — it only loses to those two higher-priority sources. Use messages.defaults.loadError instead when the same text should also apply outside the table (e.g. through a message resolver).

Styling

Table states use theme slots: