Skip to content

Add a Search Bar to Filter Templates in the Table #433

@teja-pola

Description

@teja-pola

Feature Request 🛍️

Currently, the template table in the index.njk file lists all templates but lacks a search functionality. A search bar should be added to allow users to quickly find a specific template by name.

Use Case

-Users should be able to search for templates within the table using a search bar.
-The table should dynamically filter the rows as users type.
-If no matching results are found, a "No results found" message should be displayed.

Possible Solution

-Add an input field () above the table with a placeholder "SEARCH FOR TEMPLATE".
-Use JavaScript to filter the table rows based on user input.
-Hide non-matching rows dynamically while typing.
-Show a "No results found" message if no matches are found.
-Ensure UI consistency with existing styles (Bulma CSS).

BEFORE

Image

AFTER

Image

Context

-Currently, users manually scroll through the list to find templates, which is inefficient.
-A search bar will improve user experience by making navigation faster and easier.
-This will make the template library more accessible for contributors and users.

Detailed Description

While going through the youtube documentation of accord project about (Smart Legal Contracts Using The Accord Project And Hyperledger Fabric) by John Carpenter, I came across this issue where he finds it difficult to search for the template. (you can find the video below, skip to the timeline 2:20 - 3:05)

https://www.youtube.com/live/LYEnVLAZONw?si=LdFtOo7HUxc6iym2

This feature will modify the index.njk file by:
✅ Adding a search input field above the table.
✅ Using JavaScript to dynamically filter the templates.
✅ Showing "No results found" when no templates match the query.
✅ Keeping the existing styling to match the current UI.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions