- Import the lib via CDN:
<script src="https://cdn.jsdelivr.net/npm/@optionfactory/ful@{VERSION}/dist/ful.iife.min.js" integrity="sha384-{INTEGRITY}" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdn.jsdelivr.net/npm/@optionfactory/ful@{VERSION}/dist/ful-client-errors.iife.min.js" integrity="sha384-{INTEGRITY}" crossorigin="anonymous" referrerpolicy="no-referrer"></script>It allows you to display and interact with paginated, sortable, and filterable data
| Attribute | Type | Description |
|---|---|---|
src |
string |
The API endpoint to fetch data from. |
method |
string |
HTTP method to use . Default: GET. |
autoload |
boolean |
Automatically loads data when the component is mounted. |
page-size |
number |
Number of items per page. |
loader |
string |
Optional custom loader (default: loaders:table). |
<schema>— defines the columns and how data is rendered. Each<column>can have:title: Column header labelsorter: Field name for sortingorder: Initial order (ascordesc)
<ful-table src="/api/users/" autoload page-size="5">
<schema>
<column title="ID" sorter="id" order="asc">{{ id }}</column>
<column title="Name" sorter="name">{{ name }}</column>
<column title="Email">{{ email }}</column>
</schema>
</ful-table>- Loads user data from
/api/users/ - Displays a paginated, sortable table
- Allows searching by name via the filter input
- Requires no additional JavaScript
Filters are placed inside a container with the slot filters : <div slot="filters"> , and are sent automatically with the table request.
Each filter returns a structured value automatically :
| Filter | Example Value |
|---|---|
<ful-filter-text> |
["CONTAINS", "IGNORE_CASE", "mario"] |
<ful-filter-local-date> |
["BETWEEN", "2024-01-01", "2024-12-31"] |
<ful-filter-instant> |
["GTE", "2024-03-12T08:00:00.000Z"] |
| Filter Tag | Input Type | Operators | |
|---|---|---|---|
<ful-filter-text> |
text | CONTAINS, STARTS_WITH, ENDS_WITH, EQ |
|
<ful-filter-local-date> |
date | EQ, NEQ, LT, GT, LTE, GTE, BETWEEN |
|
<ful-filter-instant> |
datetime-local | same as LocalDate |
<ful-table src="/your_api/" autoload page-size="10">
<div slot="filters" class="row mb-3">
<ful-filter-text class="col" name="byName">Nome</ful-filter-text>
<ful-filter-instant class="col" name="byCreatedAt">Data</ful-filter-instant>
<div class="col-auto align-content-end">
<button type="submit" class="btn btn-primary">
<i class="bi bi-search"></i>
</button>
</div>
</div>
<schema>
<column title="Nome" sorter="byName">{{ name }}</column>
<column title="Email">{{ email }}</column>
<column title="Data">{{ createdAt }}</column>
</schema>
</ful-table>| Attribute | Type | Description |
|---|---|---|
name |
string |
Parameter name sent with the request |
value |
array (JSON) |
Sets an initial operator and value. |
Filters work seamlessly with the backend using
net.optionfactory.spring.data.jpa.filtering.filters.
📝 Note: Annotate the fields in your entity with the appropriate filter annotations (e.g.
@InstantCompare,@LocalDateCompare,@TextCompare). The values sent from<ful-table>are automatically matched and processed by the backend.