Use ListJS for items in item_list

[igorsimb]

https://listjs.com/

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

Real world example: https://www.ez2task.com/manage_users/

[igorsimb]

What are the pros and cons of using ListJS vs HTMX with filters? (https://www.youtube.com/watch?v=wD7VB17fLK4)

[igorsimb]

ListJS vs. HTMX for Filtering: Pros and Cons (Gemini)

ListJS:

Pros:

• Lightweight: Easy to include and has a small footprint, making it ideal for smaller projects.
• Simple: Easy to learn and use, with a straightforward API.
• Flexibility: Can be used with various HTML elements like lists, tables, and custom elements.
• Offline functionality: Works without relying on an internet connection.

Cons:

• Limited functionality: Primarily focused on search, sort, and filtering functionalities.
• Manual DOM manipulation: Requires additional JavaScript code to manipulate the DOM after filtering.
• Server-side integration: Can be complex to integrate with server-side logic for dynamic updates.

HTMX:

Pros:

• Server-driven updates: Leverages server-side logic for dynamic updates, reducing client-side code complexity.
• Minimal JavaScript: Requires minimal client-side JavaScript code, relying on server responses for updates.
• Built-in features: Offers additional features like form submissions and websockets.
• Interactive experience: Creates a more interactive and responsive user experience.

Cons:

• Learning curve: Requires understanding of HTMX's syntax and conventions, which might be new for some developers.
• Server-side dependency: Requires a server-side framework compatible with HTMX for full functionality.
• Larger footprint: May add a slight overhead compared to ListJS due to server-side processing and potential libraries for HTMX.

Choosing between ListJS and HTMX:

• For simple filtering needs with offline functionality and minimal complexity, ListJS might be a good choice.
• For projects requiring server-side integration, interactive updates, and additional features beyond filtering, HTMX is a better option.
• Ultimately, the best choice depends on your specific project requirements and your development preferences.

Behavior of Filters on Refresh: HTMX vs. ListJS

Both HTMX and ListJS filters will not stay applied when you refresh the page. This is because:

• HTTP Refresh: Refreshing the page triggers a new HTTP request to the server, typically retrieving the initial state of the page without any filters applied.
• Client-side state: Both HTMX and ListJS primarily manage filtering state on the client-side (browser). This state is lost when the page reloads.

Here's a breakdown of their specific behavior:

HTMX:

• HTMX filters rely on server-side responses to update the displayed content. Refreshing the page bypasses the HTMX interaction and fetches the initial HTML without any filters applied.
• However, HTMX allows saving filters in URL parameters or browser storage. You can implement mechanisms to retrieve these stored values and re-apply filters after a refresh. This requires additional development effort and depends on your specific framework and preferences.

ListJS:

• ListJS filters operate entirely within the browser without any server interaction. When you refresh, the browser loses the state managed by ListJS, resetting the filters to their default state.
• ListJS doesn't offer functionalities like URL parameters or persistent storage for filter information. It's solely focused on client-side filtering within the current page session.

Alternative Solutions for Persistent Filters:

• Server-side filtering: Implement filtering logic on the server and store the selected filters in the server session or database. The server can then return the filtered data on subsequent requests, even after a refresh.
• URL parameters: Encode filter selections as URL parameters in the address bar. You can then parse these parameters and re-apply filters on subsequent page loads.
• Client-side storage: Utilize browser storage mechanisms like Local Storage or Session Storage to persist filter selections even across page refreshes. However, this approach can lead to inconsistencies if users clear their browser storage.

Remember, the best approach for persistent filters depends on your specific requirements and framework.