10 Ful Tables

📊 <ful-table>

It allows you to display and interact with paginated, sortable, and filterable data

⚙️ Attributes

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).

---

🧩 Structure

• <schema> — defines the columns and how data is rendered. Each <column> can have:
  • title: Column header label
  • sorter: Field name for sorting
  • order: Initial order (asc or desc)

💡 Example

<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

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"]

---

✨ Available Filters

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

---

💡 Example

<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>

⚙️ Filter Attributes

Attribute	Type	Description
name	string	Parameter name sent with the request
value	array (JSON)	Sets an initial operator and value.

---