https://github.com/phalbert/alpinejs-table
Fetching data with alpine.js; with pagination
https://github.com/phalbert/alpinejs-table
alpinejs html-css html5 paginated-tables pagination table
Last synced: 3 months ago
JSON representation
Fetching data with alpine.js; with pagination
- Host: GitHub
- URL: https://github.com/phalbert/alpinejs-table
- Owner: phalbert
- Created: 2020-05-19T22:50:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-30T10:30:05.000Z (almost 2 years ago)
- Last Synced: 2025-01-23T07:29:54.691Z (about 1 year ago)
- Topics: alpinejs, html-css, html5, paginated-tables, pagination, table
- Language: HTML
- Homepage: https://phalbert.github.io/alpinejs-table/
- Size: 7.81 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Alpine.js Table Demo
This repository provides a simple demonstration of how [Alpine.js](https://alpinejs.dev/) can be used to create interactive, dynamic tables with features like:
- **Search:** Filters table data based on user input.
- **Threshold Selection:** Allows users to control filtering using a customizable threshold.
- **Pagination:** Handles navigation through large datasets.
- **Data Fetching:** Simulates retrieving data from an external API.
## Key Alpine.js Concepts
- **x-data:** Declares the component's reactive data state.
- **x-model:** Creates two-way bindings for inputs (search field, select menu).
- **x-for:** Iterates over data to dynamically generate table rows.
- **@click:** Handles button clicks and calls functions.
- **x-text:** Dynamically updates text content within table cells.
- **x-if:** Conditionally displays elements (in this case, the table).
- **Conditional Classes:** (`class="[ ... ]"`) Enables the button's loading state styling.
## Setup
1. Clone this repository.
2. Open the `index.html` file in a web browser.
## Dependencies
- **Alpine.js** (included via CDN)
- **Bulma CSS** (included via CDN, for basic styling)
## Explanation
The JavaScript code (within the `` tag) defines an Alpine.js component using the `getData()` function. Here's a breakdown of its properties and behavior:
- **options:** Provides values for the threshold dropdown.
- **searchValue:** Stores the text entered into the search field.
- **page, limit, total:** Manages pagination state.
- **events:** Stores the array of events fetched from the API.
- **isLoading:** Tracks loading state for the button.
- **previousPage, nextPage, lastPage:** Pagination variables.
- **fetchData():**
- Fetches data from a mock API (`https://5d6516c05b26ae001489eb85.mockapi.io/api/v1/events`).
- Updates the events array and pagination state based on the response.
## Notes
- The API call simulates fetching data from a real backend. In a production app you'd replace this with your actual data source.
- This example keeps the styling minimal (via [Bulma](https://bulma.io/)) to focus on the Alpine.js functionality.