DatasourceStatus

A datasource status indicator for loading, empty, error and ready states in table workflows.

Import

import { DatasourceStatus } from "@schukai/monster/source/components/datatable/status.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Introduction

The Datasource Status component surfaces the current state of a datasource, including loading indicators and error feedback. It is typically placed near forms or tables to provide immediate UX feedback while data is read or written.

Typical Usage

<monster-datasource-rest id="ds-user"></monster-datasource-rest>

<monster-datasource-status
  data-monster-option-datasource-selector="#ds-user"
></monster-datasource-status>

Error Messaging

When validation or transport errors occur, the datasource status displays the configured message and can be customized through callbacks or timeouts. Pair it with form validation to provide both field-level and global feedback.

Simple Dataset Status

This example demonstrates the loading spinner and error state of monster-datasource-status against a mocked REST datasource.

Javascript

import "@schukai/monster/source/components/datatable/datasource/rest.mjs";
import "@schukai/monster/source/components/datatable/status.mjs";

const datasource = document.getElementById("datasource-status-demo");
const successButton = document.getElementById("datasource-status-demo-success");
const errorButton = document.getElementById("datasource-status-demo-error");
const originalFetch = window.fetch.bind(window);
let shouldFail = false;

window.fetch = (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url;

  if (url === "/mock/datasource-status") {
    if (shouldFail) {
      return Promise.resolve(
        new Response(JSON.stringify({ message: "Request failed" }), {
          status: 500,
          headers: { "content-type": "application/json" },
        }),
      );
    }

    return Promise.resolve(
      new Response(JSON.stringify({ dataset: [{ id: 1, ok: true }] }), {
        status: 200,
        headers: { "content-type": "application/json" },
      }),
    );
  }

  return originalFetch(input, init);
};

successButton.addEventListener("click", () => {
  shouldFail = false;
  datasource.read();
});

errorButton.addEventListener("click", () => {
  shouldFail = true;
  datasource.read();
});<script type="module">import "@schukai/monster/source/components/datatable/datasource/rest.mjs";
import "@schukai/monster/source/components/datatable/status.mjs";

const datasource = document.getElementById("datasource-status-demo-run");
const successButton = document.getElementById("datasource-status-demo-run-success");
const errorButton = document.getElementById("datasource-status-demo-run-error");
const originalFetch = window.fetch.bind(window);
let shouldFail = false;

window.fetch = (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url;

  if (url === "/mock/datasource-status") {
    if (shouldFail) {
      return Promise.resolve(
        new Response(JSON.stringify({ message: "Request failed" }), {
          status: 500,
          headers: { "content-type": "application/json" },
        }),
      );
    }

    return Promise.resolve(
      new Response(JSON.stringify({ dataset: [{ id: 1, ok: true }] }), {
        status: 200,
        headers: { "content-type": "application/json" },
      }),
    );
  }

  return originalFetch(input, init);
};

successButton.addEventListener("click", () => {
  shouldFail = false;
  datasource.read();
});

errorButton.addEventListener("click", () => {
  shouldFail = true;
  datasource.read();
});</script>

HTML

<div style="display:grid;gap:1rem;">
  <monster-datasource-rest
    id="datasource-status-demo"
    data-monster-option-read-url="/mock/datasource-status"
  ></monster-datasource-rest>

  <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
    <button id="datasource-status-demo-success">Load success</button>
    <button id="datasource-status-demo-error">Load error</button>
    <monster-datasource-status
      data-monster-option-datasource-selector="#datasource-status-demo"
    ></monster-datasource-status>
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Datasource Request Status

This example demonstrates how to manually work with the DataSource. Since we are not using Auto-Init, data must be explicitly fetched by calling the read method.

The method uses the URL defined in the read configuration to query the data. The URL can include various placeholders, such as:

filter: For specific query criteria.
orderBy: For sorting the results.
page: For specifying the page number.

These placeholders must be inserted into the URL, e.g., for the page: ${page}.

Further settings and details can be found in the REST Datasource documentation.

This is a slotted content

Result

Javascript

import '@schukai/monster/source/components/datatable/datasource/rest.mjs';

const restAPI = document.getElementById("Re9Oo")
const codeOutput = document.getElementById("Ui0Ee")


// here we set the page to 4, in this example the page is hardcoded and has no effect
restAPI.setOption('read.parameters.page', "4")


// here we read the data from the API and display it in the codeOutput element
restAPI.read().then((response) => {

    // here we display the data in the codeOutput element
    codeOutput.innerHTML = JSON.stringify(restAPI.data, null, 4)

}).catch((error) => {

    // if there is an error, we log it to the console
    console.error(error)
})<script type="module">import '@schukai/monster/source/components/datatable/datasource/rest.mjs';

const restAPI = document.getElementById("Re9Oo")
const codeOutput = document.getElementById("Ui0Ee")

restAPI.setOption('read.parameters.page', "4")



restAPI.read().then((response) => {
    codeOutput.innerHTML = JSON.stringify(restAPI.data, null, 4)

}).catch((error) => {
    console.error(error)
})</script>

HTML

<monster-datasource-rest style="display: flex;" id="Re9Oo"
                         data-monster-option-read-url="/assets/examples/countries.json?page=${page}">
    This is a slotted content
</monster-datasource-rest>

<strong>Result</strong>

<pre><code id="Ui0Ee"></code></pre>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

monster-datasource-status translates datasource activity into a compact, readable status surface.

Accessibility

Keep state text understandable without color alone. The outer control part provides the stable styling boundary for placement beside a table or toolbar.

HTML Structure

<monster-datasource-status></monster-datasource-status>

JavaScript Initialization

const element = document.createElement('monster-datasource-status');
document.body.appendChild(element);

Exported

DatasourceStatus

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

datasource

object

Datasource configuration

datasource.selector

string

The selector of the datasource

callbacks

object

Callbacks

callbacks.onError

function

Callback function for error handling <code>function(message: string, event: Event): string</code>

timeouts

object

Timeouts

timeouts.message

number

4000

Timeout for the message

state

object

State

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Constructor

constructor()

No description available.

Structural methods

setErrorMessage(message,timeout)

Parameters

message: message
timeout: timeout

Returns

{DatasourceStatus}

No description available.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

[CSSStyleSheet]

No description available.

getTag()

Returns

{string}

No description available.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

No description available.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.