Rest
A rest api datasource for the datatable or other components
import { Rest } from "@schukai/monster/source/components/datatable/datasource/rest.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Introduction
The REST API Datasource Component is a powerful tool for enabling seamless integration with server-side RESTful APIs within your web applications. Designed as a foundational building block for data-driven components like tables, this component ensures robust, efficient, and intuitive data handling.
By bridging the gap between client-side interactivity and server-side data management, this component simplifies the process of fetching, manipulating, and displaying data in your application. Whether you're creating a lightweight web app or an enterprise-grade solution, the REST API Datasource Component enhances your application's responsiveness and user experience.
Key Features
- Seamless Data Integration: Automatically fetches and synchronizes data with REST APIs, providing real-time updates for your application.
- Customizable Query Parameters: Flexibly configure filters, sorting, pagination, and more to match your application's requirements.
- Event-Driven Architecture: Built-in support for custom events like data fetching, error handling, and success notifications, ensuring smooth user interactions.
- Intersection Observer Support: Optimized for lazy loading, fetching data dynamically as elements come into view.
- Auto-Initialization: Streamlines the setup process with configurable automatic initialization options.
- Reusable and Modular: Easily integrates into various components, such as data tables, ensuring consistency and reusability across your application.
Enhancing Development Efficiency
The modular design of the REST API Datasource Component simplifies its integration into any web project. It supports standard web technologies and adheres to modern development practices, reducing the time and complexity involved in managing data-centric features.
Developers benefit from programmatic control over core functionalities like data reading and writing, as well as the ability to customize behaviors through options and configurations. This flexibility accelerates the development process and ensures compatibility with existing tools and workflows.
The REST API Datasource Component is an indispensable resource for developers aiming to build modern, data-driven web applications with a focus on efficiency, scalability, and maintainability.
Simple Rest Datasource
As you can see, there's nothing to see. This isn't surprising, as this component doesn't have any visible elements and only provides data, for example, for the data table.
In the code tab, you can see how the tags are structured. There, you'll notice that the monster-datasource-rest tag has one attribute: data-monster-option-read-url. This attribute is used to specify the URL from which the data should be fetched.
Javascript
import '@schukai/monster/source/components/datatable/datasource/rest.mjs';HTML
<!--
Data source for the datatable
You can use the monster-datasource-rest component to fetch data from a REST API and populate
a datatable with it. In this example, we use only the data-monster-option-read-url attribute to
specify the URL from which the data should be fetched.
-->
<monster-datasource-rest
data-monster-option-read-url="/assets/examples/countries.json">
</monster-datasource-rest>Stylesheet
/** no additional stylesheet is defined **/Auto Init
In this example, too, you can't really see much. But we have still included a text. However, this is only decorative. Look at the code tab to understand the example.
Javascript
import '@schukai/monster/source/components/datatable/datasource/rest.mjs';HTML
<!--
Data source for the datatable with auto init
You can use the monster-datasource-rest attribute
data-monster-option-features-autoInit to automatically initialize
the data source when the component is created. In this example,
we use the data-monster-option-read-url attribute to specify
the URL from which the data should be fetched.
The Autoinit feature offers two additional configuration options:
1. data-monster-option-autoinit-intersectionObserver
This attribute allows you to control whether loading
should only occur when the data source is within the visible viewport.
2. data-monster-option-autoinit-onetime:
This attribute determines whether loading should happen once or multiple times.
Important: For multiple loads, intersectionObserver must be set to true.
-->
<monster-datasource-rest style="display: flex;"
data-monster-option-features-autoinit="true"
data-monster-option-read-url="/assets/examples/countries.json">
This is a slotted content
</monster-datasource-rest>Stylesheet
/** no additional stylesheet is defined **/Rest Datasource With Fetch
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.
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)
})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 **/HTML Structure
<monster-rest></monster-rest>JavaScript Initialization
const element = document.createElement('monster-rest');
document.body.appendChild(element);Exported
RestDerived from
DatasourceOptions
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 Datasource.
- 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 Datasource.
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 Datasource.
Constructor
constructor()Behavioral methods
fetch()deprecated since 2024-12-24- {Promise
|*}
read instead.read()- {Promise}
monster-datasource-fetchmonster-datasource-fetchedmonster-datasource-error
reload()deprecated since 2023-06-25- {Promise
|*}
read instead.write()- {Promise}
Structural methods
setParameters()undefined{string}: page
- {Rest}
Static methods
[instanceSymbol]()- {symbol}
instanceof operator.getCSSStyleSheet()- {CSSStyleSheet[]}
getTag()- {string}
Lifecycle methods
Lifecycle methods are called by the environment and are usually not intended to be called directly.
[assembleMethodSymbol]()- {void}
connectedCallback()disconnectedCallback()Other methods
initIntersectionObserver()- {Rest}
autoInit.intersectionObserver must be set to false.Events
The component emits the following events:
monster-datasource-fetchmonster-datasource-fetchedmonster-datasource-error
For more information on how to handle events, see the mdn documentation.