{"id":2305,"date":"2026-06-08T13:12:27","date_gmt":"2026-06-08T13:12:27","guid":{"rendered":"https:\/\/www.rajeshkumar.xyz\/blog\/?p=2305"},"modified":"2026-06-08T13:12:27","modified_gmt":"2026-06-08T13:12:27","slug":"plan-your-web-applications-design-mandatory-listing-page-features-for-web-applications","status":"publish","type":"post","link":"https:\/\/www.rajeshkumar.xyz\/blog\/plan-your-web-applications-design-mandatory-listing-page-features-for-web-applications\/","title":{"rendered":"Plan your Web Applications Design – Mandatory Listing Page Features for Web Applications"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

for any listing page<\/strong>, these should be treated as mandatory standard options<\/strong>.<\/p>\n\n\n\n

Mandatory Options for Every Listing Page<\/h1>\n\n\n\n
#<\/th>Mandatory Option<\/th>Purpose<\/th><\/tr><\/thead>
1<\/td>Page Title<\/strong><\/td>Clearly show what data is listed<\/td><\/tr>
2<\/td>Search<\/strong><\/td>Search records quickly by keyword<\/td><\/tr>
3<\/td>Filter<\/strong><\/td>Narrow records by status, category, date, type, etc.<\/td><\/tr>
4<\/td>Sort<\/strong><\/td>Arrange records by newest, oldest, name, status, etc.<\/td><\/tr>
5<\/td>Pagination<\/strong><\/td>Load data page by page instead of all at once<\/td><\/tr>
6<\/td>Rows Per Page<\/strong><\/td>Allow user to choose 10, 25, 50, 100 records<\/td><\/tr>
7<\/td>Total Records Count<\/strong><\/td>Show total records and current range<\/td><\/tr>
8<\/td>Status Badge<\/strong><\/td>Show clear status like Active, Pending, Approved<\/td><\/tr>
9<\/td>Row Actions<\/strong><\/td>View, Edit, Delete, Approve, etc.<\/td><\/tr>
10<\/td>Bulk Selection<\/strong><\/td>Select multiple records using checkboxes<\/td><\/tr>
11<\/td>Bulk Actions<\/strong><\/td>Delete, export, approve, assign multiple records<\/td><\/tr>
12<\/td>Add\/Create Button<\/strong><\/td>Add new record from the listing page<\/td><\/tr>
13<\/td>Refresh Button<\/strong><\/td>Reload latest data<\/td><\/tr>
14<\/td>Export Option<\/strong><\/td>Export data as CSV\/Excel\/PDF<\/td><\/tr>
15<\/td>Loading State<\/strong><\/td>Show loader\/skeleton while data is loading<\/td><\/tr>
16<\/td>Empty State<\/strong><\/td>Show proper message when no data is found<\/td><\/tr>
17<\/td>Error State<\/strong><\/td>Show retry option when API\/data loading fails<\/td><\/tr>
18<\/td>Mobile Responsive View<\/strong><\/td>Listing should work properly on mobile<\/td><\/tr>
19<\/td>Column\/Header Labels<\/strong><\/td>Clear column names for table\/list data<\/td><\/tr>
20<\/td>Date\/Time Formatting<\/strong><\/td>Display dates in readable format<\/td><\/tr>
21<\/td>Search\/Filter Reset<\/strong><\/td>Clear all applied search and filters<\/td><\/tr>
22<\/td>Confirmation Modal<\/strong><\/td>Confirm before delete or destructive action<\/td><\/tr>
23<\/td>Permission-Based Actions<\/strong><\/td>Show\/hide actions based on user role<\/td><\/tr>
24<\/td>URL Query Persistence<\/strong><\/td>Keep search\/filter\/page\/sort in URL<\/td><\/tr>
25<\/td>Server-Side Search\/Filter\/Sort\/Pagination<\/strong><\/td>Required for large data performance<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Prompt for Claude<\/h1>\n\n\n
You are working as<\/span> a senior full-stack web application developer.\n\nFor every listing page, table page, admin list page, data grid page, management page, or CRUD index page in<\/span> this<\/span> application, you MUST follow the mandatory listing page standard below.\n\nDo not create any listing page without these required features. If any feature is missing in<\/span> the existing code, identify it and implement it. Keep the UI consistent across all modules.\n\nMandatory Listing Page Features:\n\n1.<\/span> Page Title\n- Clearly show what data is listed.\n- Example: Users, Hospitals, Doctors, Orders, Products, Tasks, Bookings.\n\n2.<\/span> Search\n- Add keyword search to quickly find records.\n- Search should support common fields like name, email, phone, title, ID, or relevant searchable fields.\n\n3.<\/span> Filter\n- Add filters to narrow records by status, category, date, type, role, location, or module<\/span>-specific fields.\n- Filters should be easy to reset.\n\n4.<\/span> Sort\n- Allow records to be sorted by common fields.\n- Examples: newest, oldest, name A-Z, status, priority, created date, updated date.\n\n5.<\/span> Pagination\n- Do not load all records at once.\n- Load records page by page.\n\n6.<\/span> Rows Per Page\n- Allow users to choose page size.\n- Standard options: 10<\/span>, 25<\/span>, 50<\/span>, 100.<\/span>\n\n7.<\/span> Total Records Count\n- Show current range and total count.\n- Example: Showing 1<\/span>\u201325<\/span> of<\/span> 1<\/span>,240<\/span> records.\n\n8.<\/span> Status Badge\n- Display status using clear badges.\n- Examples: Active, Inactive, Pending, Approved, Rejected, Draft, Published, Suspended.\n\n9.<\/span> Row Actions\n- Each row must have relevant actions.\n- Examples: View, Edit, Delete, Approve, Reject, Activate, Deactivate.\n\n10.<\/span> Bulk Selection\n- Add checkbox selection for<\/span> multiple records.\n- Include select one, select all on current page, and clear selection.\n\n11.<\/span> Bulk Actions\n- Allow actions on selected records where applicable.\n- Examples: Delete, Export, Approve, Reject, Assign, Activate, Deactivate.\n\n12.<\/span> Add\/Create Button\n- Provide a clear button to add a new<\/span> record.\n- Example: Add User, Add Hospital, Create Product.\n\n13.<\/span> Refresh Button\n- Add a refresh\/reload button to fetch the latest data.\n\n14.<\/span> Export Option\n- Add export<\/span> functionality where applicable.\n- Standard formats: CSV, Excel, PDF.\n\n15.<\/span> Loading State\n- Show a proper loading state while<\/span> records are being fetched.\n- Prefer skeleton loader over only spinner.\n\n16.<\/span> Empty State\n- Show a meaningful empty state when no records exist.\n- Example: No records found. Try changing your search or filters.\n\n17.<\/span> Error<\/span> State\n- Show a proper error message when API\/data loading fails.\n- Include a Retry button.\n\n18.<\/span> Mobile Responsive View\n- Listing page must work properly on mobile, tablet, and desktop.\n- On mobile, use responsive table, card layout, or horizontal scroll where needed.\n\n19.<\/span> Column\/Header Labels\n- Every column must have clear and human-readable labels.\n- Avoid unclear database-style names in<\/span> UI.\n\n20.<\/span> Date<\/span>\/Time Formatting\n- Display dates and times in<\/span> readable format.\n- Example: 08<\/span> Jun 2026<\/span>, 07<\/span>:30<\/span> PM.\n- Do not show raw timestamps unless required.\n\n21.<\/span> Search\/Filter Reset\n- Provide a Clear All or Reset Filters button.\n- It should reset search, filters, sort, and page when required.\n\n22.<\/span> Confirmation Modal\n- Any destructive action must show confirmation.\n- Examples: Delete, bulk delete<\/span>, deactivate, archive.\n- Do not perform destructive actions directly without confirmation.\n\n23.<\/span> Permission-Based Actions\n- Show or hide actions based on user role\/permission.\n- Example: Admin can delete<\/span>; viewer can only view.\n\n24.<\/span> URL Query Persistence\n- Search, filter, sort, page, and rows-per-page state must be stored in<\/span> URL query parameters.\n- This allows refresh, browser back, bookmark, and sharing of<\/span> filtered listing pages.\n\n25.<\/span> Server-Side Search\/Filter\/Sort\/Pagination\n- For performance, listing pages must use server-side search, filtering, sorting, and pagination.\n- Do not fetch thousands of<\/span> records and process everything only on the frontend.\n\nStandard UI Layout:\n\nPage Title + Description                       [Add\/Create Button]\n\nSearch Bar     [Filter] [Sort] [Export] [Refresh]\n\nQuick Filter Chips \/ Status Tabs\n\nShowing 1<\/span>\u201325<\/span> of<\/span> 1<\/span>,240<\/span> records        Rows per page: 25<\/span>\n\nTable\/List\/Card Data\n\nBulk Action Bar, visible only when records are selected\n\nPagination<\/span>: Previous  1<\/span> 2<\/span> 3<\/span>  Next\n\nStandard API Query Pattern:\n\nGET \/api\/{module<\/span>}\n?page=1<\/span>\n&per_page=25<\/span>\n&search=keyword\n&status=active\n&sort_by=created_at\n&sort_order=desc\n\nImplementation Rules:\n\n- Keep this<\/span> standard reusable across all listing pages.\n- Create reusable components where possible:\n  - ListingHeader\n  - SearchBar\n  - FilterPanel\n  - SortDropdown\n  - DataTable\n  - StatusBadge\n  - Pagination\n  - BulkActionBar\n  - EmptyState\n  - ErrorState\n  - LoadingSkeleton\n  - ConfirmationModal\n\n- Do not duplicate listing logic unnecessarily.\n- Keep UI consistent across all modules.\n- Make the design clean, modern, responsive, and user-friendly.\n- Ensure backend\/API supports the required query parameters.\n- Ensure frontend state syncs with<\/span> URL query parameters.\n- Ensure role-based permissions are respected before showing actions.\n- Ensure destructive actions require<\/span> confirmation.\n- Ensure large datasets are handled efficiently using server-side logic.\n\nBefore finalizing any listing page, verify this<\/span> checklist:\n\n[ ] Page Title\n[ ] Search\n[ ] Filter\n[ ] Sort\n[ ] Pagination\n[ ] Rows Per Page\n[ ] Total Records Count\n[ ] Status Badge\n[ ] Row Actions\n[ ] Bulk Selection\n[ ] Bulk Actions\n[ ] Add\/Create Button\n[ ] Refresh Button\n[ ] Export Option\n[ ] Loading State\n[ ] Empty State\n[ ] Error<\/span> State\n[ ] Mobile Responsive View\n[ ] Column\/Header Labels\n[ ] Date<\/span>\/Time Formatting\n[ ] Search\/Filter Reset\n[ ] Confirmation Modal\n[ ] Permission-Based Actions\n[ ] URL Query Persistence\n[ ] Server-Side Search\/Filter\/Sort\/Pagination\n\nYour task:\nReview the current listing page implementation and update it to fully comply with<\/span> this<\/span> mandatory listing page standard. If this<\/span> is a new<\/span> page, build it using this<\/span> standard from<\/span> the beginning.<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Minimum Mandatory UI Structure<\/h1>\n\n\n\n
<\/p>\n\n\n
Page Title                         [Add New<\/span>]\n\nSearch Bar                         [Filter] [Sort] [Export] [Refresh]\n\nStatus \/ Quick Filters\n\nShowing 1<\/span>\u201325<\/span> of 1<\/span>,240<\/span> records\n\nTable \/ List<\/span> \/ Card Data\n\nBulk Action Bar\n\nRows per page: 25<\/span>     Previous  1<\/span> 2<\/span> 3<\/span>  Next\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Minimum Mandatory API Parameters<\/h1>\n\n\n
?page=1\n&per_page=25\n&search=keyword\n&filter_status=active\n&sort_by=created_at\n&sort_order=desc\n<\/code><\/span><\/pre>\n\n\n
Final Mandatory Checklist<\/h1>\n\n\n
Search\nFilter\nSort\nPagination\nRows per page\nTotal count\nAdd button\nRefresh\nExport\nStatus badge\nRow actions\nBulk selection\nBulk actions\nLoading state\nEmpty state\nError<\/span> state\nReset filters\nConfirmation modal\nPermission-based actions\nMobile responsive layout\nServer-side data handling\nURL query persistence\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This should be your fixed mandatory listing-page standard<\/strong> for all websites and applications.<\/p>\n\n\n\n
Absolutely, Rajesh. For any listing page<\/strong> in a web application \u2014 users list, products list, hospitals list, doctors list, bookings list, tasks list, orders list, blogs list, etc. \u2014 you should standardize one common template.<\/p>\n\n\n\n
A good name for this is:<\/p>\n\n\n\n
Standard Listing Page \/ Data Grid Template<\/h1>\n\n\n\n
This template should define all common features required to display, search, filter, sort, manage, and navigate large amounts of data consistently.<\/p>\n\n\n\n
\n\n\n\n
1. Page Header Options<\/h2>\n\n\n\n
Every listing page should have a consistent top section.<\/p>\n\n\n\n
Common items:<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Page Title<\/td>Example: Users, Hospitals, Doctors, Bookings<\/td><\/tr>
Page Description<\/td>Small explanation of what this page is for<\/td><\/tr>
Breadcrumb<\/td>Dashboard > Users > All Users<\/td><\/tr>
Primary Action Button<\/td>Add User, Add Hospital, Create Booking<\/td><\/tr>
Secondary Actions<\/td>Import, Export, Refresh, Download<\/td><\/tr>
Help \/ Info Icon<\/td>Opens guide or tooltip<\/td><\/tr>
Last Updated Time<\/td>Shows when list was refreshed<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example:<\/p>\n\n\n
Users<\/span>\nManage<\/span> all<\/span> registered<\/span> users<\/span> and<\/span> their<\/span> account<\/span> status<\/span>.\n\n[Import]<\/span> [Export]<\/span> [Add User]<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
2. Search Options<\/h2>\n\n\n\n
Search is one of the most important parts of listing pages.<\/p>\n\n\n\n
Common search types:<\/p>\n\n\n\n
Search Type<\/th>Example<\/th><\/tr><\/thead>
Global Search<\/td>Search across name, email, phone, ID<\/td><\/tr>
Field-Specific Search<\/td>Search only by email or mobile<\/td><\/tr>
Keyword Search<\/td>Search by text<\/td><\/tr>
Exact Match Search<\/td>Search exact user ID or order ID<\/td><\/tr>
Partial Search<\/td>Search \u201craj\u201d and match \u201cRajesh\u201d<\/td><\/tr>
Advanced Search<\/td>Multiple fields combined<\/td><\/tr>
Search Suggestions<\/td>Auto-suggest while typing<\/td><\/tr>
Recent Searches<\/td>Show previously searched terms<\/td><\/tr>
Search Highlighting<\/td>Highlight matching words in result<\/td><\/tr>
Clear Search<\/td>Reset search box<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Recommended standard:<\/p>\n\n\n
Search by name, email, phone, ID...\n<\/code><\/span><\/pre>\n\n\n
Also keep a clear button:<\/p>\n\n\n
[X]<\/span> Clear<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
3. Filter Options<\/h2>\n\n\n\n
Filters help users narrow down records.<\/p>\n\n\n\n
Common filter types:<\/p>\n\n\n\n
Filter Type<\/th>Example<\/th><\/tr><\/thead>
Status Filter<\/td>Active, Inactive, Pending, Suspended<\/td><\/tr>
Category Filter<\/td>Premium, Free, Verified<\/td><\/tr>
Date Range Filter<\/td>Today, Last 7 Days, This Month<\/td><\/tr>
Custom Date Filter<\/td>From Date \/ To Date<\/td><\/tr>
Location Filter<\/td>Country, State, City<\/td><\/tr>
Role Filter<\/td>Admin, User, Manager<\/td><\/tr>
Type Filter<\/td>Hospital, Doctor, Patient<\/td><\/tr>
Price \/ Amount Filter<\/td>Min amount \/ Max amount<\/td><\/tr>
Rating Filter<\/td>1 star to 5 stars<\/td><\/tr>
Tag Filter<\/td>Featured, Popular, New<\/td><\/tr>
Owner \/ Assigned To Filter<\/td>Assigned user or manager<\/td><\/tr>
Boolean Filter<\/td>Yes \/ No, Verified \/ Not Verified<\/td><\/tr>
Multi-select Filter<\/td>Select multiple statuses<\/td><\/tr>
Dependent Filter<\/td>Country \u2192 State \u2192 City<\/td><\/tr>
Saved Filter<\/td>Save commonly used filter combinations<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example filters:<\/p>\n\n\n
Status: Active\nRole<\/span>: Admin\nCountry<\/span>: India\nCreated Date<\/span>: Last 30<\/span> Days\nVerification<\/span>: Verified\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
4. Sorting Options<\/h2>\n\n\n\n
Sorting helps users organize records.<\/p>\n\n\n\n
Common sorting options:<\/p>\n\n\n\n
Sort Option<\/th>Example<\/th><\/tr><\/thead>
Sort by Name<\/td>A-Z \/ Z-A<\/td><\/tr>
Sort by Created Date<\/td>Newest First \/ Oldest First<\/td><\/tr>
Sort by Updated Date<\/td>Recently Updated<\/td><\/tr>
Sort by Status<\/td>Active first<\/td><\/tr>
Sort by Price<\/td>Low to High \/ High to Low<\/td><\/tr>
Sort by Rating<\/td>Highest Rated<\/td><\/tr>
Sort by Popularity<\/td>Most viewed \/ most used<\/td><\/tr>
Sort by Priority<\/td>High priority first<\/td><\/tr>
Sort by Custom Order<\/td>Manual ordering<\/td><\/tr>
Multi-column Sort<\/td>Sort by status, then date<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Recommended UI:<\/p>\n\n\n
Sort By: Newest First\n<\/code><\/span><\/pre>\n\n\n
For table columns, allow clicking column headers:<\/p>\n\n\n
Name \u2191\nCreated Date<\/span> \u2193\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
5. Pagination Options<\/h2>\n\n\n\n
Pagination is required when data is large.<\/p>\n\n\n\n
Common pagination features:<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Page Numbers<\/td>1, 2, 3, 4<\/td><\/tr>
Previous \/ Next<\/td>Move one page<\/td><\/tr>
First \/ Last Page<\/td>Jump to start or end<\/td><\/tr>
Rows Per Page<\/td>10, 25, 50, 100<\/td><\/tr>
Total Records Count<\/td>Showing 1\u201325 of 2,340<\/td><\/tr>
Infinite Scroll<\/td>Load more while scrolling<\/td><\/tr>
Load More Button<\/td>Manual next batch<\/td><\/tr>
Cursor Pagination<\/td>Better for very large data<\/td><\/tr>
Server-side Pagination<\/td>Backend returns limited data<\/td><\/tr>
Client-side Pagination<\/td>Frontend paginates loaded data<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Recommended standard:<\/p>\n\n\n
Showing<\/span> 1\u201325 of<\/span> 2,340 records<\/span>\nRows<\/span> per<\/span> page<\/span>: 25\n[Previous]<\/span> 1 2 3 4 [Next]<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
For large systems, use server-side pagination<\/strong>.<\/p>\n\n\n\n
\n\n\n\n
6. Column Management<\/h2>\n\n\n\n
Very useful for admin panels and dashboards.<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Column Visibility<\/td>Show\/hide columns<\/td><\/tr>
Column Reordering<\/td>Drag columns left\/right<\/td><\/tr>
Column Resizing<\/td>Adjust width<\/td><\/tr>
Fixed Columns<\/td>Keep important columns sticky<\/td><\/tr>
Sticky Header<\/td>Header stays visible while scrolling<\/td><\/tr>
Column Alignment<\/td>Text left, numbers right<\/td><\/tr>
Column Formatting<\/td>Date, currency, status badges<\/td><\/tr>
Responsive Columns<\/td>Hide less important columns on mobile<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example:<\/p>\n\n\n
Columns: Name, Email, Phone, Status, Created Date<\/span>, Actions\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Add a button:<\/p>\n\n\n
[Customize Columns]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
7. View Options<\/h2>\n\n\n\n
Different users prefer different viewing styles.<\/p>\n\n\n\n
View Type<\/th>Meaning<\/th><\/tr><\/thead>
Table View<\/td>Best for admin data<\/td><\/tr>
Card View<\/td>Best for mobile or visual data<\/td><\/tr>
Grid View<\/td>Best for products, doctors, hospitals<\/td><\/tr>
List View<\/td>Compact vertical list<\/td><\/tr>
Kanban View<\/td>Status-based workflow<\/td><\/tr>
Calendar View<\/td>Bookings, appointments, events<\/td><\/tr>
Map View<\/td>Location-based listings<\/td><\/tr>
Timeline View<\/td>Activity\/history-based data<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example:<\/p>\n\n\n
[Table] [Grid] [Card] [Map]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
8. Bulk Actions<\/h2>\n\n\n\n
Bulk actions save time when managing many records.<\/p>\n\n\n\n
Bulk Action<\/th>Example<\/th><\/tr><\/thead>
Select One<\/td>Checkbox per row<\/td><\/tr>
Select All on Page<\/td>Select visible records<\/td><\/tr>
Select All Matching Filter<\/td>Select all 2,340 records<\/td><\/tr>
Bulk Delete<\/td>Delete selected records<\/td><\/tr>
Bulk Activate \/ Deactivate<\/td>Change status<\/td><\/tr>
Bulk Approve \/ Reject<\/td>Approve listings<\/td><\/tr>
Bulk Assign<\/td>Assign to manager<\/td><\/tr>
Bulk Export<\/td>Export selected records<\/td><\/tr>
Bulk Tag<\/td>Add tags<\/td><\/tr>
Bulk Move<\/td>Move to category<\/td><\/tr>
Bulk Email \/ Notify<\/td>Send notification<\/td><\/tr>
Bulk Archive<\/td>Archive records<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Standard message:<\/p>\n\n\n
25 records<\/span> selected<\/span>\n[Delete]<\/span> [Export]<\/span> [Change Status]<\/span> [Assign]<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
9. Row-Level Actions<\/h2>\n\n\n\n
Each row\/card usually needs actions.<\/p>\n\n\n\n
Common row actions:<\/p>\n\n\n\n
Action<\/th>Meaning<\/th><\/tr><\/thead>
View<\/td>Open detail page<\/td><\/tr>
Edit<\/td>Modify record<\/td><\/tr>
Delete<\/td>Remove record<\/td><\/tr>
Duplicate<\/td>Copy record<\/td><\/tr>
Archive<\/td>Soft remove<\/td><\/tr>
Restore<\/td>Restore deleted\/archived record<\/td><\/tr>
Approve<\/td>Approve pending record<\/td><\/tr>
Reject<\/td>Reject request<\/td><\/tr>
Activate<\/td>Enable record<\/td><\/tr>
Deactivate<\/td>Disable record<\/td><\/tr>
Verify<\/td>Mark as verified<\/td><\/tr>
Feature<\/td>Mark as featured<\/td><\/tr>
Assign<\/td>Assign to team member<\/td><\/tr>
More Actions<\/td>Dropdown menu<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Recommended:<\/p>\n\n\n
[View] [Edit] [More]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Inside More:<\/p>\n\n\n
Duplicate\nArchive\nDelete\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
10. Status Indicators<\/h2>\n\n\n\n
Status should be visually clear.<\/p>\n\n\n\n
Common status indicators:<\/p>\n\n\n\n
Status Type<\/th>Example<\/th><\/tr><\/thead>
Active \/ Inactive<\/td>User status<\/td><\/tr>
Pending<\/td>Waiting approval<\/td><\/tr>
Approved<\/td>Accepted<\/td><\/tr>
Rejected<\/td>Declined<\/td><\/tr>
Draft<\/td>Not published<\/td><\/tr>
Published<\/td>Live<\/td><\/tr>
Suspended<\/td>Blocked<\/td><\/tr>
Verified<\/td>Confirmed<\/td><\/tr>
Unverified<\/td>Not confirmed<\/td><\/tr>
Featured<\/td>Highlighted<\/td><\/tr>
Expired<\/td>Time over<\/td><\/tr>
Failed \/ Success<\/td>Job or payment status<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Use badges:<\/p>\n\n\n
Active\nPending\nVerified\nPremium\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
11. Data Display Formatting<\/h2>\n\n\n\n
Data should look consistent.<\/p>\n\n\n\n
Common formatting standards:<\/p>\n\n\n\n
Data Type<\/th>Format<\/th><\/tr><\/thead>
Date<\/td>08 Jun 2026<\/td><\/tr>
Date + Time<\/td>08 Jun 2026, 07:30 PM<\/td><\/tr>
Currency<\/td>\u20b94,999 \/ $100<\/td><\/tr>
Percentage<\/td>85%<\/td><\/tr>
Phone<\/td>+91 98765 43210<\/td><\/tr>
Boolean<\/td>Yes \/ No<\/td><\/tr>
Empty Value<\/td>\u2014<\/td><\/tr>
Long Text<\/td>Truncate with tooltip<\/td><\/tr>
URL<\/td>Clickable link<\/td><\/tr>
Email<\/td>Clickable mail link<\/td><\/tr>
Image<\/td>Thumbnail\/avatar<\/td><\/tr>
File<\/td>File icon + download<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Avoid showing raw values like:<\/p>\n\n\n
null<\/span>\nundefined<\/span>\n0000<\/span>-00<\/span>-00<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Use:<\/p>\n\n\n
\u2014\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
12. Empty State<\/h2>\n\n\n\n
When no data exists, show a helpful message.<\/p>\n\n\n\n
Types of empty states:<\/p>\n\n\n\n
Empty State<\/th>Example<\/th><\/tr><\/thead>
No Records Yet<\/td>No users have been added<\/td><\/tr>
No Search Results<\/td>No result found for \u201cRajesh\u201d<\/td><\/tr>
No Filter Results<\/td>No active users found<\/td><\/tr>
Error State<\/td>Could not load data<\/td><\/tr>
Permission State<\/td>You do not have access<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Good empty state:<\/p>\n\n\n
No hospitals found.\n\nTry<\/span> changing your filters or<\/span> add a new<\/span> hospital.\n\n[Add Hospital]\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
13. Loading State<\/h2>\n\n\n\n
Important for good UX.<\/p>\n\n\n\n
Common loading options:<\/p>\n\n\n\n
Loading Type<\/th>Meaning<\/th><\/tr><\/thead>
Spinner<\/td>Basic loading<\/td><\/tr>
Skeleton Loader<\/td>Better modern loading<\/td><\/tr>
Shimmer Effect<\/td>Premium loading UI<\/td><\/tr>
Button Loading<\/td>While submitting<\/td><\/tr>
Lazy Loading<\/td>Load only visible rows<\/td><\/tr>
Progressive Loading<\/td>Load important data first<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Recommended for listing page:<\/p>\n\n\n
Skeleton table rows while<\/span> data loads\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
14. Error Handling<\/h2>\n\n\n\n
Every listing page should handle errors cleanly.<\/p>\n\n\n\n
Common error states:<\/p>\n\n\n\n
Error<\/th>Message<\/th><\/tr><\/thead>
API Failed<\/td>Unable to load records<\/td><\/tr>
Network Error<\/td>Please check your internet connection<\/td><\/tr>
Permission Error<\/td>You do not have permission<\/td><\/tr>
Timeout<\/td>Request took too long<\/td><\/tr>
Server Error<\/td>Something went wrong<\/td><\/tr>
Invalid Filter<\/td>Please check selected filters<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Useful buttons:<\/p>\n\n\n
[Retry]\n[Refresh]\n[Contact Support]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
15. Refresh and Sync Options<\/h2>\n\n\n\n
Important for real-time or admin systems.<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Manual Refresh<\/td>Refresh button<\/td><\/tr>
Auto Refresh<\/td>Refresh every X seconds<\/td><\/tr>
Last Synced Time<\/td>Last updated 2 mins ago<\/td><\/tr>
Real-time Updates<\/td>WebSocket\/live updates<\/td><\/tr>
Pull to Refresh<\/td>Mobile-friendly<\/td><\/tr>
Sync Status<\/td>Synced \/ Sync Failed<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example:<\/p>\n\n\n
Last<\/span> updated<\/span>: 2 minutes<\/span> ago<\/span>\n[Refresh]<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
16. Export Options<\/h2>\n\n\n\n
Most admin listing pages need export.<\/p>\n\n\n\n
Common export formats:<\/p>\n\n\n\n
Export Type<\/th>Use<\/th><\/tr><\/thead>
CSV<\/td>Common data export<\/td><\/tr>
Excel<\/td>Business users<\/td><\/tr>
PDF<\/td>Reports<\/td><\/tr>
JSON<\/td>Developers\/API<\/td><\/tr>
Print<\/td>Printable list<\/td><\/tr>
Selected Rows Export<\/td>Export only selected<\/td><\/tr>
Filtered Export<\/td>Export current filtered result<\/td><\/tr>
Full Export<\/td>Export all records<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example:<\/p>\n\n\n
[Export CSV] [Export Excel] [Export PDF]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
17. Import Options<\/h2>\n\n\n\n
Useful for bulk data entry.<\/p>\n\n\n\n
Import Feature<\/th>Meaning<\/th><\/tr><\/thead>
Upload CSV<\/td>Bulk upload<\/td><\/tr>
Upload Excel<\/td>Bulk upload<\/td><\/tr>
Download Sample Template<\/td>Provide correct format<\/td><\/tr>
Import Validation<\/td>Check errors before saving<\/td><\/tr>
Import Preview<\/td>Show records before final import<\/td><\/tr>
Duplicate Handling<\/td>Skip\/update\/overwrite<\/td><\/tr>
Import History<\/td>Show past imports<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example:<\/p>\n\n\n
[Import Users]\n[Download Sample CSV]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
18. Saved Views<\/h2>\n\n\n\n
Very useful for admin dashboards.<\/p>\n\n\n\n
Saved views allow users to save search, filter, sort, and column settings.<\/p>\n\n\n\n
Examples:<\/p>\n\n\n
All Users\nActive Users\nPending Approval\nPremium Hospitals\nRecently Added\nMy Assigned Tasks\n<\/code><\/span><\/pre>\n\n\n
Features:<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Default View<\/td>System default<\/td><\/tr>
Personal View<\/td>User-specific<\/td><\/tr>
Shared View<\/td>Shared with team<\/td><\/tr>
Rename View<\/td>Change saved view name<\/td><\/tr>
Delete View<\/td>Remove saved view<\/td><\/tr>
Pin View<\/td>Keep favorite view first<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
19. Advanced Filter Panel<\/h2>\n\n\n\n
For complex pages, use a filter drawer\/sidebar.<\/p>\n\n\n\n
Common fields:<\/p>\n\n\n
Keyword\nStatus\nCategory\nCountry\nState\nCity\nCreated Date<\/span>\nUpdated Date<\/span>\nOwner\nPrice Range\nVerification Status\nTags\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Buttons:<\/p>\n\n\n
[Apply Filters]\n[Reset]\n[Save View]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
20. Quick Filter Chips<\/h2>\n\n\n\n
Useful for common filters.<\/p>\n\n\n\n
Example:<\/p>\n\n\n
[All] [Active] [Pending] [Verified] [Premium] [Expired]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Or:<\/p>\n\n\n
Today\nLast 7 Days\nThis Month\nThis Year\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
21. Record Count Summary<\/h2>\n\n\n\n
Always show useful counts.<\/p>\n\n\n\n
Examples:<\/p>\n\n\n
Total Users: 2,340\nActive: 1,920\nPending: 120\nSuspended: 35\n<\/code><\/span><\/pre>\n\n\n
For dashboards:<\/p>\n\n\n
All 2,340 | Active 1,920 | Pending 120 | Blocked 35\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
22. Permissions and Role-Based Visibility<\/h2>\n\n\n\n
Not every user should see every action.<\/p>\n\n\n\n
Examples:<\/p>\n\n\n\n
Role<\/th>Access<\/th><\/tr><\/thead>
Admin<\/td>View, Add, Edit, Delete, Export<\/td><\/tr>
Manager<\/td>View, Edit, Assign<\/td><\/tr>
Staff<\/td>View only<\/td><\/tr>
Viewer<\/td>Read-only<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Hide actions if the user lacks permission.<\/p>\n\n\n\n
Example:<\/p>\n\n\n
Admin sees Delete\nNormal user does not see Delete\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
23. Audit and Activity Options<\/h2>\n\n\n\n
For serious applications, track actions.<\/p>\n\n\n\n
Useful options:<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Created By<\/td>Who created record<\/td><\/tr>
Created At<\/td>When created<\/td><\/tr>
Updated By<\/td>Who last edited<\/td><\/tr>
Updated At<\/td>Last update time<\/td><\/tr>
Activity Log<\/td>Full change history<\/td><\/tr>
Version History<\/td>Previous versions<\/td><\/tr>
Deleted By<\/td>Who deleted<\/td><\/tr>
Restored By<\/td>Who restored<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
24. Mobile Responsiveness<\/h2>\n\n\n\n
Listing pages must work well on mobile.<\/p>\n\n\n\n
Mobile options:<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Card Layout<\/td>Better than wide table<\/td><\/tr>
Horizontal Scroll Table<\/td>For admin tables<\/td><\/tr>
Sticky Action Button<\/td>Add button fixed<\/td><\/tr>
Collapsible Filters<\/td>Filter drawer<\/td><\/tr>
Bottom Sheet Actions<\/td>Mobile-friendly row actions<\/td><\/tr>
Swipe Actions<\/td>Swipe to edit\/delete<\/td><\/tr>
Compact Pagination<\/td>Previous \/ Next only<\/td><\/tr>
Search on Top<\/td>Always visible<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
For mobile, prefer:<\/p>\n\n\n
Card View + Filter Drawer + Sort Dropdown\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
25. Performance Options for Large Data<\/h2>\n\n\n\n
Very important when records are large.<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Server-side Pagination<\/td>Load limited records<\/td><\/tr>
Server-side Search<\/td>Search from backend<\/td><\/tr>
Server-side Sorting<\/td>Sort in database<\/td><\/tr>
Server-side Filtering<\/td>Filter in database<\/td><\/tr>
Database Indexing<\/td>Fast query performance<\/td><\/tr>
Debounced Search<\/td>Wait before API call<\/td><\/tr>
Lazy Loading<\/td>Load only needed data<\/td><\/tr>
Virtual Scrolling<\/td>Render only visible rows<\/td><\/tr>
Caching<\/td>Store repeated results<\/td><\/tr>
API Query Params<\/td>Consistent backend queries<\/td><\/tr>
Cursor Pagination<\/td>Better for millions of records<\/td><\/tr>
Background Export<\/td>Export large data asynchronously<\/td><\/tr>
Optimized Count Query<\/td>Avoid slow total count<\/td><\/tr>
CDN for Images<\/td>Faster thumbnails<\/td><\/tr>
Thumbnail Images<\/td>Avoid loading full images<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example API:<\/p>\n\n\n
GET \/api\/users?page=1&per_page=25&search=rajesh&status=active&sort=created_at&order=desc\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
26. Accessibility Options<\/h2>\n\n\n\n
Good listing pages should be usable by everyone.<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Keyboard Navigation<\/td>Tab through controls<\/td><\/tr>
Screen Reader Labels<\/td>Proper aria labels<\/td><\/tr>
Proper Contrast<\/td>Readable text<\/td><\/tr>
Focus State<\/td>Visible selected field<\/td><\/tr>
Sort Announcements<\/td>Tell user sort changed<\/td><\/tr>
Button Labels<\/td>Avoid icon-only buttons<\/td><\/tr>
Table Headers<\/td>Proper semantic table<\/td><\/tr>
Error Messages<\/td>Clear and readable<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
27. Confirmation and Safety<\/h2>\n\n\n\n
For destructive actions, add confirmation.<\/p>\n\n\n\n
Examples:<\/p>\n\n\n
Are you sure you want to delete<\/span> this<\/span> user?\nThis action cannot be undone.\n[Cancel] [Delete]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
For bulk delete:<\/p>\n\n\n
You are about to delete<\/span> 25<\/span> records.\nType DELETE to confirm.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Useful safety options:<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Soft Delete<\/td>Move to trash instead of permanent delete<\/td><\/tr>
Restore<\/td>Bring deleted data back<\/td><\/tr>
Confirmation Modal<\/td>Prevent accidental delete<\/td><\/tr>
Undo Action<\/td>Undo recent action<\/td><\/tr>
Permission Check<\/td>Only authorized users can delete<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
28. Notifications and Feedback<\/h2>\n\n\n\n
After every action, show feedback.<\/p>\n\n\n\n
Examples:<\/p>\n\n\n
User updated successfully.\n25<\/span> records exported successfully.\nUnable to delete<\/span> record. Please try<\/span> again.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Types:<\/p>\n\n\n\n
Type<\/th>Example<\/th><\/tr><\/thead>
Success Toast<\/td>Saved successfully<\/td><\/tr>
Error Toast<\/td>Failed to save<\/td><\/tr>
Warning Toast<\/td>Some records skipped<\/td><\/tr>
Info Toast<\/td>Export is being prepared<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
29. Detail Preview Options<\/h2>\n\n\n\n
Instead of opening a new page every time, you can show quick preview.<\/p>\n\n\n\n
Feature<\/th>Meaning<\/th><\/tr><\/thead>
Side Drawer Preview<\/td>Opens details on right<\/td><\/tr>
Expand Row<\/td>Show extra row details<\/td><\/tr>
Modal Preview<\/td>Quick popup<\/td><\/tr>
Hover Preview<\/td>Small tooltip preview<\/td><\/tr>
Quick View<\/td>View without leaving list<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Example:<\/p>\n\n\n
Click row \u2192 open side panel with<\/span> details\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
30. Selection and Checkbox Behavior<\/h2>\n\n\n\n
Important for bulk operations.<\/p>\n\n\n\n
Standard options:<\/p>\n\n\n
Checkbox per row\nSelect all visible records\nSelect all matching filter\nClear selection\nShow selected count\n<\/code><\/span><\/pre>\n\n\n
Example:<\/p>\n\n\n
25<\/span> selected on this<\/span> page.\nSelect all 2<\/span>,340<\/span> matching records?\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
31. Tabs and Segmentation<\/h2>\n\n\n\n
Tabs are useful when data has clear groups.<\/p>\n\n\n\n
Examples:<\/p>\n\n\n
All\nActive\nPending\nRejected\nArchived\n<\/code><\/span><\/pre>\n\n\n
Or:<\/p>\n\n\n
Hospitals\nDoctors\nPatients\nAppointments\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
32. Search + Filter + Sort URL Persistence<\/h2>\n\n\n\n
Very important for professional apps.<\/p>\n\n\n\n
When user applies filters, URL should update:<\/p>\n\n\n
\/users?search=rajesh&status=active&page=2&sort=created_at&order=desc\n<\/code><\/span><\/pre>\n\n\n
Benefits:<\/p>\n\n\n\n
Benefit<\/th>Meaning<\/th><\/tr><\/thead>
Shareable URL<\/td>User can share filtered view<\/td><\/tr>
Browser Back Works<\/td>Back button behaves properly<\/td><\/tr>
Refresh Safe<\/td>Filter does not disappear<\/td><\/tr>
Bookmarkable<\/td>User can save view<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
33. Default Values<\/h2>\n\n\n\n
Every listing page should define defaults.<\/p>\n\n\n\n
Example:<\/p>\n\n\n
Default<\/span> Sort: Created Date DESC\nDefault<\/span> Page Size: 25<\/span>\nDefault<\/span> View: Table\nDefault<\/span> Filter: Active Records\nDefault<\/span> Columns: Name, Email, Status, Created Date, Actions\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
34. Admin-Specific Listing Features<\/h2>\n\n\n\n
For admin panels, include:<\/p>\n\n\n
Search\nAdvanced Filter\nSort\nPagination\nBulk Action\nExport\nImport\nStatus Change\nRole-Based Actions\nAudit Log\nTrash\/Restore\nColumn Customization\nSaved Views\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
35. User-Friendly Microcopy<\/h2>\n\n\n\n
Use clear text everywhere.<\/p>\n\n\n\n
Instead of:<\/p>\n\n\n
No data\n<\/code><\/span><\/pre>\n\n\n
Use:<\/p>\n\n\n
No records found. Try<\/span> adjusting your search or<\/span> filters.\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Instead of:<\/p>\n\n\n
Submit\n<\/code><\/span><\/pre>\n\n\n
Use:<\/p>\n\n\n
Apply Filters\n<\/code><\/span><\/pre>\n\n\n
Instead of:<\/p>\n\n\n
Reset\n<\/code><\/span><\/pre>\n\n\n
Use:<\/p>\n\n\n
Clear All Filters\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
Final Master Checklist for Listing Pages<\/h1>\n\n\n\n
Use this checklist for every website\/application listing page:<\/p>\n\n\n
1.<\/span> Page title\n2.<\/span> Page description\n3.<\/span> Breadcrumb\n4.<\/span> Add\/Create button\n5.<\/span> Global search\n6.<\/span> Advanced search\n7.<\/span> Filters\n8.<\/span> Quick filter chips\n9.<\/span> Sort dropdown\n10.<\/span> Column sorting\n11.<\/span> Pagination\n12.<\/span> Rows per page\n13.<\/span> Total record count\n14.<\/span> Table view\n15.<\/span> Card\/grid view\n16.<\/span> Column show\/hide\n17.<\/span> Column resize\/reorder\n18.<\/span> Sticky header\n19.<\/span> Row actions\n20.<\/span> Bulk selection\n21.<\/span> Bulk actions\n22.<\/span> Status badges\n23.<\/span> Date<\/span>\/currency formatting\n24.<\/span> Empty state\n25.<\/span> Loading skeleton\n26.<\/span> Error<\/span> state\n27.<\/span> Retry button\n28.<\/span> Refresh button\n29.<\/span> Last updated time\n30.<\/span> Export CSV\/Excel\/PDF\n31.<\/span> Import CSV\/Excel\n32.<\/span> Saved views\n33.<\/span> Filter persistence in<\/span> URL\n34.<\/span> Role-based permissions\n35.<\/span> Audit fields\n36.<\/span> Activity log\n37.<\/span> Detail preview drawer\n38.<\/span> Confirmation modal\n39.<\/span> Toast notifications\n40.<\/span> Soft delete<\/span>\/trash\n41.<\/span> Restore option\n42.<\/span> Mobile responsive layout\n43.<\/span> Accessibility support\n44.<\/span> Server-side pagination\n45.<\/span> Server-side search\n46.<\/span> Server-side filtering\n47.<\/span> Server-side sorting\n48.<\/span> Debounced search\n49.<\/span> Database indexing\n50.<\/span> API query standard\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
Best Standard Template Name<\/h1>\n\n\n\n
You can call this internally:<\/p>\n\n\n
Universal Listing Page Template\n<\/code><\/span><\/pre>\n\n\n
or<\/p>\n\n\n
Standard Data Listing \/ Data Grid Framework\n<\/code><\/span><\/pre>\n\n\n
or<\/p>\n\n\n
CRUD Listing Page UI Standard\n<\/code><\/span><\/pre>\n\n\n
My recommended name:<\/p>\n\n\n
Universal Data Listing Page Standard\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
Recommended Standard Layout<\/h1>\n\n\n
------------------------------------------------\nBreadcrumb\nPage Title + Description              [Add New<\/span>]\n------------------------------------------------\nSearch Bar                            [Export]\nQuick Filters                         [Import]\nAdvanced Filter Button                [Columns]\n------------------------------------------------\nSummary Counts\nAll | Active | Pending | Archived\n------------------------------------------------\nTable \/ Card \/ Grid Data\n------------------------------------------------\nBulk Actions Bar\n------------------------------------------------\nPagination + Rows Per Page + Total Count\n------------------------------------------------\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
Best Common API Pattern<\/h1>\n\n\n\n
Use the same backend query style everywhere:<\/p>\n\n\n
GET \/api\/{module<\/span>}\n    ?page=1<\/span>\n    &per_page=25<\/span>\n    &search=keyword\n    &status=active\n    &sort_by=created_at\n    &sort_order=desc\n    &from_date=2026<\/span>-01<\/span>-01<\/span>\n    &to_date=2026<\/span>-06<\/span>-08<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Example:<\/p>\n\n\n
GET \/api\/hospitals?page=1&per_page=25&search=apollo&status=active&sort_by=created_at&sort_order=desc\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
Minimum Features Every Listing Page Must Have<\/h1>\n\n\n\n
At minimum, every listing page should include:<\/p>\n\n\n
Search\nFilter\nSort\nPagination\nRows per page\nTotal count\nStatus badge\nView\/Edit\/Delete actions\nBulk selection\nExport\nRefresh\nEmpty state\nLoading state\nError<\/span> state\nMobile responsive layout\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
For professional admin systems, also include:<\/p>\n\n\n
Saved views\nColumn customization\nAdvanced filters\nAudit log\nRole-based actions\nURL persistence\nServer-side performance optimization\n<\/code><\/span><\/pre>\n\n\n
This standard will make all your website listing pages consistent, scalable, and much easier for users to understand.<\/p>\n\n\n\n
    \n
  • Standard Listing Page Requirements for Web Applications<\/li>\n\n\n\n
  • Essential Features Every Listing Page Must Have<\/li>\n\n\n\n
  • Universal Listing Page Standard for Web Developers<\/li>\n\n\n\n
  • Mandatory Data Listing Page Checklist<\/li>\n\n\n\n
  • Common Listing Page Features for Admin Panels and Web Apps<\/li>\n\n\n\n
  • Standard Data Grid and Listing Page Guidelines<\/li>\n\n\n\n
  • Listing Page UI\/UX Standards for Web Applications<\/li>\n\n\n\n
  • Essential Search, Filter, Sort, and Pagination Standards<\/li>\n\n\n\n
  • Reusable Listing Page Template for Web Applications<\/li>\n\n\n\n
  • Web Application Listing Page Best Practices<\/li>\n<\/ul>\n\n\n\n
    Rajesh, for your stack \u2014 Laravel + Node + Alpine.js + Tailwind CSS<\/strong> \u2014 the best implementation is:<\/p>\n\n\n\n
    Build One Universal Server-Side Listing Framework<\/h1>\n\n\n\n
    Do not<\/strong> create search, filter, sort, pagination, export, bulk action, etc. separately for every page.<\/p>\n\n\n\n
    Instead, create one reusable listing system and use it everywhere.<\/p>\n\n\n\n
    Example:<\/p>\n\n\n
    Users Listing\nHospitals Listing\nDoctors Listing\nProducts Listing\nBlogs Listing\nTasks Listing\nOrders Listing\nPayments Listing\n<\/code><\/span><\/pre>\n\n\n
    All should use the same common framework.<\/p>\n\n\n\n
    \n\n\n\n
    Best Architecture for Your Stack<\/h1>\n\n\n
    Tailwind CSS\n    \u2193\nCommon UI Components\n\nAlpine.js\n    \u2193\nSearch, filters, sort, pagination, URL query sync\n\nLaravel\n    \u2193\nMain listing API, database query, pagination, permissions\n\nNode.js\n    \u2193\nOptional: heavy exports, background jobs, realtime updates, external APIs\n\nDatabase\n    \u2193\nIndexed search\/filter\/sort columns\n<\/code><\/span><\/pre>\n\n\n
    Best division:<\/p>\n\n\n\n
    Layer<\/th>Responsibility<\/th><\/tr><\/thead>
    Laravel<\/strong><\/td>Main backend listing logic<\/td><\/tr>
    Alpine.js<\/strong><\/td>Frontend interactivity<\/td><\/tr>
    Tailwind CSS<\/strong><\/td>Common listing UI design<\/td><\/tr>
    Node.js<\/strong><\/td>Optional heavy processing \/ realtime \/ workers<\/td><\/tr>
    Database<\/strong><\/td>Indexed server-side search\/filter\/sort<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    Most Important Rule<\/h1>\n\n\n\n
    Never do this:<\/p>\n\n\n
    Load 50,000 records in browser\nThen search\/filter\/sort using JavaScript\n<\/code><\/span><\/pre>\n\n\n
    Always do this:<\/p>\n\n\n
    Load only 10<\/span>\/25<\/span>\/50<\/span>\/100<\/span> records\nSearch\/filter\/sort\/paginate on server side\nReturn<\/span> only required records\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    This is the main secret for performance.<\/p>\n\n\n\n
    \n\n\n\n
    Standard Query Pattern for Every Listing Page<\/h1>\n\n\n\n
    Use the same URL\/query parameters everywhere:<\/p>\n\n\n
    \/users?page=1&per_page=25&search=rajesh&status=active&sort_by=created_at&sort_order=desc\n<\/code><\/span><\/pre>\n\n\n
    Same pattern for hospitals:<\/p>\n\n\n
    \/hospitals?page=1&per_page=25&search=apollo&status=verified&sort_by=name&sort_order=asc\n<\/code><\/span><\/pre>\n\n\n
    Same pattern for blogs:<\/p>\n\n\n
    \/blogs?page=1&per_page=25&search=laravel&status=published&sort_by=created_at&sort_order=desc\n<\/code><\/span><\/pre>\n\n\n
    \n\n\n\n
    Recommended Folder Structure in Laravel<\/h1>\n\n\n
    app\/\n \u251c\u2500\u2500 Support\/\n \u2502    \u2514\u2500\u2500 Listing\/\n \u2502         \u251c\u2500\u2500 ListingQuery.php\n \u2502         \u2514\u2500\u2500 ListingConfig.php\n \u2502\n \u251c\u2500\u2500 Http\/\n \u2502    \u251c\u2500\u2500 Requests\/\n \u2502    \u2502    \u2514\u2500\u2500 ListingRequest.php\n \u2502    \u2514\u2500\u2500 Controllers\/\n \u2502         \u251c\u2500\u2500 UserController.php\n \u2502         \u251c\u2500\u2500 HospitalController.php\n \u2502         \u2514\u2500\u2500 BlogController.php\n\nresources\/\n \u251c\u2500\u2500 views\/\n \u2502    \u251c\u2500\u2500 components\/\n \u2502    \u2502    \u2514\u2500\u2500 listing\/\n \u2502    \u2502         \u251c\u2500\u2500 layout.blade.php\n \u2502    \u2502         \u251c\u2500\u2500 search.blade.php\n \u2502    \u2502         \u251c\u2500\u2500 filters.blade.php\n \u2502    \u2502         \u251c\u2500\u2500 table.blade.php\n \u2502    \u2502         \u251c\u2500\u2500 pagination.blade.php\n \u2502    \u2502         \u251c\u2500\u2500 bulk-actions.blade.php\n \u2502    \u2502         \u251c\u2500\u2500 empty<\/span>-state.blade.php\n \u2502    \u2502         \u251c\u2500\u2500 error-state.blade.php\n \u2502    \u2502         \u2514\u2500\u2500 loading-skeleton.blade.php\n \u2502    \u2502\n \u2502    \u2514\u2500\u2500 admin\/\n \u2502         \u251c\u2500\u2500 users\/index.blade.php\n \u2502         \u251c\u2500\u2500 hospitals\/index.blade.php\n \u2502         \u2514\u2500\u2500 blogs\/index.blade.php\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Step 1: Create Common Listing Request<\/h1>\n\n\n
    <?php<\/span>\n\nnamespace<\/span> App<\/span>\\Http<\/span>\\Requests<\/span>;\n\nuse<\/span> Illuminate<\/span>\\Foundation<\/span>\\Http<\/span>\\FormRequest<\/span>;\n\nclass<\/span> ListingRequest<\/span> extends<\/span> FormRequest<\/span>\n<\/span>{\n    public<\/span> function<\/span> authorize<\/span>()<\/span>: bool<\/span>\n    <\/span>{\n        return<\/span> true<\/span>;\n    }\n\n    public<\/span> function<\/span> rules<\/span>()<\/span>: array<\/span>\n    <\/span>{\n        return<\/span> [\n            'search'<\/span> => ['nullable'<\/span>, 'string'<\/span>, 'max:100'<\/span>],\n            'page'<\/span> => ['nullable'<\/span>, 'integer'<\/span>, 'min:1'<\/span>],\n            'per_page'<\/span> => ['nullable'<\/span>, 'integer'<\/span>, 'in:10,25,50,100'<\/span>],\n            'sort_by'<\/span> => ['nullable'<\/span>, 'string'<\/span>, 'max:50'<\/span>],\n            'sort_order'<\/span> => ['nullable'<\/span>, 'in:asc,desc'<\/span>],\n\n            \/\/ common optional filters<\/span>\n            'status'<\/span> => ['nullable'<\/span>, 'string'<\/span>, 'max:50'<\/span>],\n            'type'<\/span> => ['nullable'<\/span>, 'string'<\/span>, 'max:50'<\/span>],\n            'role'<\/span> => ['nullable'<\/span>, 'string'<\/span>, 'max:50'<\/span>],\n            'from_date'<\/span> => ['nullable'<\/span>, 'date'<\/span>],\n            'to_date'<\/span> => ['nullable'<\/span>, 'date'<\/span>],\n        ];\n    }\n\n    public<\/span> function<\/span> perPage<\/span>()<\/span>: int<\/span>\n    <\/span>{\n        return<\/span> (int) $this<\/span>->input('per_page'<\/span>, 25<\/span>);\n    }\n\n    public<\/span> function<\/span> sortOrder<\/span>()<\/span>: string<\/span>\n    <\/span>{\n        return<\/span> $this<\/span>->input('sort_order'<\/span>, 'desc'<\/span>) === 'asc'<\/span> ? 'asc'<\/span> : 'desc'<\/span>;\n    }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Step 2: Create Reusable Laravel Listing Query Service<\/h1>\n\n\n
    <?php<\/span>\n\nnamespace<\/span> App<\/span>\\Support<\/span>\\Listing<\/span>;\n\nuse<\/span> Illuminate<\/span>\\Database<\/span>\\Eloquent<\/span>\\Builder<\/span>;\nuse<\/span> Illuminate<\/span>\\Http<\/span>\\Request<\/span>;\n\nclass<\/span> ListingQuery<\/span>\n<\/span>{\n    public<\/span> static<\/span> function<\/span> apply<\/span>(\n        Builder $query,\n        Request $request,\n        array $config\n    )<\/span> <\/span>{\n        $searchable = $config['searchable'<\/span>] ?? [];\n        $filterable = $config['filterable'<\/span>] ?? [];\n        $sortable = $config['sortable'<\/span>] ?? [];\n        $defaultSort = $config['default_sort'<\/span>] ?? 'created_at'<\/span>;\n        $defaultOrder = $config['default_order'<\/span>] ?? 'desc'<\/span>;\n\n        \/**\n         * Search\n         *\/<\/span>\n        if<\/span> ($request->filled('search'<\/span>) && count($searchable) > 0<\/span>) {\n            $search = trim($request->input('search'<\/span>));\n\n            $query->where(function<\/span> ($q)<\/span> use<\/span> ($searchable, $search)<\/span> <\/span>{\n                foreach<\/span> ($searchable as<\/span> $column) {\n                    $q->orWhere($column, 'LIKE'<\/span>, $search . '%'<\/span>);\n                }\n            });\n        }\n\n        \/**\n         * Filters\n         *\/<\/span>\n        foreach<\/span> ($filterable as<\/span> $filter => $column) {\n            if<\/span> ($request->filled($filter)) {\n                $query->where($column, $request->input($filter));\n            }\n        }\n\n        \/**\n         * Date filters\n         *\/<\/span>\n        if<\/span> ($request->filled('from_date'<\/span>)) {\n            $query->whereDate('created_at'<\/span>, '>='<\/span>, $request->input('from_date'<\/span>));\n        }\n\n        if<\/span> ($request->filled('to_date'<\/span>)) {\n            $query->whereDate('created_at'<\/span>, '<='<\/span>, $request->input('to_date'<\/span>));\n        }\n\n        \/**\n         * Sorting with whitelist\n         *\/<\/span>\n        $sortBy = $request->input('sort_by'<\/span>, $defaultSort);\n        $sortOrder = $request->input('sort_order'<\/span>, $defaultOrder);\n\n        if<\/span> (! in_array($sortBy, $sortable)) {\n            $sortBy = $defaultSort;\n        }\n\n        if<\/span> (! in_array($sortOrder, ['asc'<\/span>, 'desc'<\/span>])) {\n            $sortOrder = $defaultOrder;\n        }\n\n        $query->orderBy($sortBy, $sortOrder);\n\n        \/**\n         * Pagination\n         *\/<\/span>\n        $perPage = (int) $request->input('per_page'<\/span>, 25<\/span>);\n\n        if<\/span> (! in_array($perPage, [10<\/span>, 25<\/span>, 50<\/span>, 100<\/span>])) {\n            $perPage = 25<\/span>;\n        }\n\n        return<\/span> $query->paginate($perPage)->withQueryString();\n    }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Step 3: Use It in Every Controller<\/h1>\n\n\n\n
    Example: UserController.php<\/code><\/p>\n\n\n
    <?php<\/span>\n\nnamespace<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>;\n\nuse<\/span> App<\/span>\\Models<\/span>\\User<\/span>;\nuse<\/span> App<\/span>\\Http<\/span>\\Requests<\/span>\\ListingRequest<\/span>;\nuse<\/span> App<\/span>\\Support<\/span>\\Listing<\/span>\\ListingQuery<\/span>;\n\nclass<\/span> UserController<\/span> extends<\/span> Controller<\/span>\n<\/span>{\n    public<\/span> function<\/span> index<\/span>(ListingRequest $request)<\/span>\n    <\/span>{\n        $query = User::query()\n            ->select([\n                'id'<\/span>,\n                'name'<\/span>,\n                'email'<\/span>,\n                'phone'<\/span>,\n                'role'<\/span>,\n                'status'<\/span>,\n                'created_at'<\/span>,\n            ]);\n\n        $users = ListingQuery::apply($query, $request, [\n            'searchable'<\/span> => ['name'<\/span>, 'email'<\/span>, 'phone'<\/span>],\n            'filterable'<\/span> => [\n                'status'<\/span> => 'status'<\/span>,\n                'role'<\/span> => 'role'<\/span>,\n            ],\n            'sortable'<\/span> => [\n                'name'<\/span>,\n                'email'<\/span>,\n                'status'<\/span>,\n                'role'<\/span>,\n                'created_at'<\/span>,\n                'updated_at'<\/span>,\n            ],\n            'default_sort'<\/span> => 'created_at'<\/span>,\n            'default_order'<\/span> => 'desc'<\/span>,\n        ]);\n\n        return<\/span> view('admin.users.index'<\/span>, [\n            'records'<\/span> => $users,\n            'filters'<\/span> => $request->validated(),\n        ]);\n    }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now for hospitals:<\/p>\n\n\n
    $hospitals = ListingQuery::apply($query, $request, [\n    'searchable'<\/span> => ['name'<\/span>, 'email'<\/span>, 'phone'<\/span>, 'city'<\/span>],\n    'filterable'<\/span> => [\n        'status'<\/span> => 'status'<\/span>,\n        'city'<\/span> => 'city'<\/span>,\n        'type'<\/span> => 'type'<\/span>,\n    ],\n    'sortable'<\/span> => ['name'<\/span>, 'status'<\/span>, 'city'<\/span>, 'created_at'<\/span>],\n    'default_sort'<\/span> => 'created_at'<\/span>,\n    'default_order'<\/span> => 'desc'<\/span>,\n]);\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Same framework. Only config changes. Beautiful.<\/p>\n\n\n\n
    \n\n\n\n
    Step 4: Create Common Blade Listing Layout<\/h1>\n\n\n\n
    Example:<\/p>\n\n\n
    {{-- resources\/views\/components\/listing\/layout.blade.php --}}\n\n<div<\/span> \n    x-data<\/span>=\"listingPage()\"<\/span> \n    class<\/span>=\"space-y-4\"<\/span>\n><\/span>\n    <div<\/span> class<\/span>=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\"<\/span>><\/span>\n        <div<\/span>><\/span>\n            <h1<\/span> class<\/span>=\"text-2xl font-bold text-gray-900\"<\/span>><\/span>\n                {{ $title }}\n            <\/h1<\/span>><\/span>\n\n            @isset($description)\n                <p<\/span> class<\/span>=\"text-sm text-gray-500\"<\/span>><\/span>\n                    {{ $description }}\n                <\/p<\/span>><\/span>\n            @endisset\n        <\/div<\/span>><\/span>\n\n        <div<\/span> class<\/span>=\"flex gap-2\"<\/span>><\/span>\n            {{ $actions ?? '' }}\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n    <div<\/span> class<\/span>=\"rounded-xl border bg-white p-4 shadow-sm\"<\/span>><\/span>\n        {{ $toolbar ?? '' }}\n\n        <div<\/span> class<\/span>=\"mt-4\"<\/span>><\/span>\n            {{ $slot }}\n        <\/div<\/span>><\/span>\n\n        <div<\/span> class<\/span>=\"mt-4\"<\/span>><\/span>\n            {{ $pagination ?? '' }}\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Step 5: Example Users Listing Page<\/h1>\n\n\n
    <x-listing.layout<\/span> \n    title<\/span>=\"Users\"<\/span> \n    description<\/span>=\"Manage all registered users\"<\/span>\n><\/span>\n    <x-slot:actions<\/span>><\/span>\n        <a<\/span> href<\/span>=\"{{ route('users.create') }}\"<\/span>\n           class<\/span>=\"rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700\"<\/span>><\/span>\n            Add User\n        <\/a<\/span>><\/span>\n    <\/x-slot:actions<\/span>><\/span>\n\n    <x-slot:toolbar<\/span>><\/span>\n        <form<\/span> method<\/span>=\"GET\"<\/span> class<\/span>=\"grid grid-cols-1 gap-3 md:grid-cols-5\"<\/span>><\/span>\n            <input<\/span> \n                type<\/span>=\"text\"<\/span>\n                name<\/span>=\"search\"<\/span>\n                value<\/span>=\"{{ request('search') }}\"<\/span>\n                placeholder<\/span>=\"Search by name, email, phone...\"<\/span>\n                class<\/span>=\"rounded-lg border-gray-300 md:col-span-2\"<\/span>\n            ><\/span>\n\n            <select<\/span> name<\/span>=\"status\"<\/span> class<\/span>=\"rounded-lg border-gray-300\"<\/span>><\/span>\n                <option<\/span> value<\/span>=\"\"<\/span>><\/span>All Status<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"active\"<\/span> @selected<\/span>(request<\/span>('status<\/span>') === 'active'<\/span>)><\/span>Active<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"inactive\"<\/span> @selected<\/span>(request<\/span>('status<\/span>') === 'inactive'<\/span>)><\/span>Inactive<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"pending\"<\/span> @selected<\/span>(request<\/span>('status<\/span>') === 'pending'<\/span>)><\/span>Pending<\/option<\/span>><\/span>\n            <\/select<\/span>><\/span>\n\n            <select<\/span> name<\/span>=\"sort_by\"<\/span> class<\/span>=\"rounded-lg border-gray-300\"<\/span>><\/span>\n                <option<\/span> value<\/span>=\"created_at\"<\/span> @selected<\/span>(request<\/span>('sort_by<\/span>') === 'created_at'<\/span>)><\/span>Created Date<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"name\"<\/span> @selected<\/span>(request<\/span>('sort_by<\/span>') === 'name'<\/span>)><\/span>Name<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"status\"<\/span> @selected<\/span>(request<\/span>('sort_by<\/span>') === 'status'<\/span>)><\/span>Status<\/option<\/span>><\/span>\n            <\/select<\/span>><\/span>\n\n            <div<\/span> class<\/span>=\"flex gap-2\"<\/span>><\/span>\n                <button<\/span> class<\/span>=\"rounded-lg bg-gray-900 px-4 py-2 text-white\"<\/span>><\/span>\n                    Apply\n                <\/button<\/span>><\/span>\n\n                <a<\/span> href<\/span>=\"{{ route('users.index') }}\"<\/span>\n                   class<\/span>=\"rounded-lg border px-4 py-2\"<\/span>><\/span>\n                    Reset\n                <\/a<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/form<\/span>><\/span>\n    <\/x-slot:toolbar<\/span>><\/span>\n\n    <div<\/span> class<\/span>=\"mb-3 flex items-center justify-between text-sm text-gray-600\"<\/span>><\/span>\n        <div<\/span>><\/span>\n            Showing {{ $records->firstItem() }} to {{ $records->lastItem() }}\n            of {{ $records->total() }} records\n        <\/div<\/span>><\/span>\n\n        <form<\/span> method<\/span>=\"GET\"<\/span>><\/span>\n            @foreach(request()->except('per_page', 'page') as $key => $value)\n                <input<\/span> type<\/span>=\"hidden\"<\/span> name<\/span>=\"{{ $key }}\"<\/span> value<\/span>=\"{{ $value }}\"<\/span>><\/span>\n            @endforeach\n\n            <select<\/span> name<\/span>=\"per_page\"<\/span> onchange<\/span>=\"this.form.submit()\"<\/span> class<\/span>=\"rounded-lg border-gray-300\"<\/span>><\/span>\n                <option<\/span> value<\/span>=\"10\"<\/span> @selected<\/span>(request<\/span>('per_page<\/span>', 25<\/span>) == 10)<\/span>><\/span>10<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"25\"<\/span> @selected<\/span>(request<\/span>('per_page<\/span>', 25<\/span>) == 25)<\/span>><\/span>25<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"50\"<\/span> @selected<\/span>(request<\/span>('per_page<\/span>', 25<\/span>) == 50)<\/span>><\/span>50<\/option<\/span>><\/span>\n                <option<\/span> value<\/span>=\"100\"<\/span> @selected<\/span>(request<\/span>('per_page<\/span>', 25<\/span>) == 100)<\/span>><\/span>100<\/option<\/span>><\/span>\n            <\/select<\/span>><\/span>\n        <\/form<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n    <div<\/span> class<\/span>=\"overflow-x-auto\"<\/span>><\/span>\n        <table<\/span> class<\/span>=\"min-w-full divide-y divide-gray-200 text-sm\"<\/span>><\/span>\n            <thead<\/span> class<\/span>=\"bg-gray-50\"<\/span>><\/span>\n                <tr<\/span>><\/span>\n                    <th<\/span> class<\/span>=\"px-4 py-3 text-left\"<\/span>><\/span>\n                        <input<\/span> type<\/span>=\"checkbox\"<\/span>><\/span>\n                    <\/th<\/span>><\/span>\n                    <th<\/span> class<\/span>=\"px-4 py-3 text-left\"<\/span>><\/span>Name<\/th<\/span>><\/span>\n                    <th<\/span> class<\/span>=\"px-4 py-3 text-left\"<\/span>><\/span>Email<\/th<\/span>><\/span>\n                    <th<\/span> class<\/span>=\"px-4 py-3 text-left\"<\/span>><\/span>Role<\/th<\/span>><\/span>\n                    <th<\/span> class<\/span>=\"px-4 py-3 text-left\"<\/span>><\/span>Status<\/th<\/span>><\/span>\n                    <th<\/span> class<\/span>=\"px-4 py-3 text-left\"<\/span>><\/span>Created At<\/th<\/span>><\/span>\n                    <th<\/span> class<\/span>=\"px-4 py-3 text-right\"<\/span>><\/span>Actions<\/th<\/span>><\/span>\n                <\/tr<\/span>><\/span>\n            <\/thead<\/span>><\/span>\n\n            <tbody<\/span> class<\/span>=\"divide-y divide-gray-100 bg-white\"<\/span>><\/span>\n                @forelse($records as $user)\n                    <tr<\/span>><\/span>\n                        <td<\/span> class<\/span>=\"px-4 py-3\"<\/span>><\/span>\n                            <input<\/span> type<\/span>=\"checkbox\"<\/span> value<\/span>=\"{{ $user->id }}\"<\/span>><\/span>\n                        <\/td<\/span>><\/span>\n\n                        <td<\/span> class<\/span>=\"px-4 py-3 font-medium\"<\/span>><\/span>\n                            {{ $user->name }}\n                        <\/td<\/span>><\/span>\n\n                        <td<\/span> class<\/span>=\"px-4 py-3\"<\/span>><\/span>\n                            {{ $user->email }}\n                        <\/td<\/span>><\/span>\n\n                        <td<\/span> class<\/span>=\"px-4 py-3\"<\/span>><\/span>\n                            {{ ucfirst($user->role) }}\n                        <\/td<\/span>><\/span>\n\n                        <td<\/span> class<\/span>=\"px-4 py-3\"<\/span>><\/span>\n                            <span<\/span> class<\/span>=\"rounded-full px-2 py-1 text-xs font-medium\n                                {{ $user->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}\"<\/span>><\/span>\n                                {{ ucfirst($user->status) }}\n                            <\/span<\/span>><\/span>\n                        <\/td<\/span>><\/span>\n\n                        <td<\/span> class<\/span>=\"px-4 py-3\"<\/span>><\/span>\n                            {{ $user->created_at->format('d M Y, h:i A') }}\n                        <\/td<\/span>><\/span>\n\n                        <td<\/span> class<\/span>=\"px-4 py-3 text-right\"<\/span>><\/span>\n                            <a<\/span> href<\/span>=\"{{ route('users.show', $user) }}\"<\/span> class<\/span>=\"text-blue-600\"<\/span>><\/span>\n                                View\n                            <\/a<\/span>><\/span>\n\n                            <a<\/span> href<\/span>=\"{{ route('users.edit', $user) }}\"<\/span> class<\/span>=\"ml-3 text-indigo-600\"<\/span>><\/span>\n                                Edit\n                            <\/a<\/span>><\/span>\n\n                            @can('delete', $user)\n                                <button<\/span> \n                                    type<\/span>=\"button\"<\/span>\n                                    class<\/span>=\"ml-3 text-red-600\"<\/span>\n                                    onclick<\/span>=\"confirm('Are you sure?')\"<\/span>><\/span>\n                                    Delete\n                                <\/button<\/span>><\/span>\n                            @endcan\n                        <\/td<\/span>><\/span>\n                    <\/tr<\/span>><\/span>\n                @empty\n                    <tr<\/span>><\/span>\n                        <td<\/span> colspan<\/span>=\"7\"<\/span> class<\/span>=\"px-4 py-10 text-center text-gray-500\"<\/span>><\/span>\n                            No records found. Try changing your search or filters.\n                        <\/td<\/span>><\/span>\n                    <\/tr<\/span>><\/span>\n                @endforelse\n            <\/tbody<\/span>><\/span>\n        <\/table<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n    <x-slot:pagination<\/span>><\/span>\n        {{ $records->links() }}\n    <\/x-slot:pagination<\/span>><\/span>\n<\/x-listing.layout<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Step 6: Add Alpine.js for Better Search UX<\/h1>\n\n\n\n
    Use Alpine.js for debounce search and URL sync.<\/p>\n\n\n
    <script<\/span>><\/span>\nfunction<\/span> listingPage<\/span>(<\/span>) <\/span>{\n    return<\/span> {\n        search<\/span>: new<\/span> URLSearchParams(window<\/span>.location.search).get('search'<\/span>) || ''<\/span>,\n        timeout<\/span>: null<\/span>,\n\n        updateSearch() {\n            clearTimeout(this<\/span>.timeout);\n\n            this<\/span>.timeout = setTimeout(()<\/span> =><\/span> {\n                const<\/span> params = new<\/span> URLSearchParams(window<\/span>.location.search);\n\n                if<\/span> (this<\/span>.search.length >= 2<\/span>) {\n                    params.set('search'<\/span>, this<\/span>.search);\n                } else<\/span> {\n                    params.delete('search'<\/span>);\n                }\n\n                params.set('page'<\/span>, 1<\/span>);\n\n                window<\/span>.location.search = params.toString();\n            }, 400<\/span>);\n        }\n    }\n}\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Use it:<\/p>\n\n\n
    <input\n    type=\"text\"<\/span>\n    x-model=\"search\"<\/span>\n    x-on:input=\"updateSearch\"<\/span>\n    placeholder=\"Search...\"<\/span>\n    class<\/span><\/span>=\"rounded-lg border-gray-300\"<\/span>\n\/>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This prevents API\/database hits on every keypress.<\/p>\n\n\n\n
    \n\n\n\n
    Step 7: Database Indexes Are Mandatory<\/h1>\n\n\n\n
    For performance, add indexes on columns used in search, filter, and sort.<\/p>\n\n\n\n
    Example for users:<\/p>\n\n\n
    Schema::table('users'<\/span>, function<\/span> (Blueprint $table)<\/span> <\/span>{\n    $table->index('status'<\/span>);\n    $table->index('role'<\/span>);\n    $table->index('created_at'<\/span>);\n    $table->index(['status'<\/span>, 'created_at'<\/span>]);\n    $table->index('email'<\/span>);\n});\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    For hospitals:<\/p>\n\n\n
    Schema::table('hospitals'<\/span>, function<\/span> (Blueprint $table)<\/span> <\/span>{\n    $table->index('status'<\/span>);\n    $table->index('city'<\/span>);\n    $table->index('country'<\/span>);\n    $table->index('created_at'<\/span>);\n    $table->index(['status'<\/span>, 'city'<\/span>]);\n});\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Without indexes, server-side filtering can still become slow.<\/p>\n\n\n\n
    \n\n\n\n
    Step 8: Do Not Use SELECT *<\/code><\/h1>\n\n\n\n
    Bad:<\/p>\n\n\n
    User::query()->paginate(25<\/span>);\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Better:<\/p>\n\n\n
    User::query()\n    ->select(['id'<\/span>, 'name'<\/span>, 'email'<\/span>, 'status'<\/span>, 'created_at'<\/span>])\n    ->paginate(25<\/span>);\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Only return the fields required for the listing page.<\/p>\n\n\n\n
    \n\n\n\n
    Step 9: Export Should Not Load Huge Data in Browser<\/h1>\n\n\n\n
    For small export:<\/p>\n\n\n
    Export current filtered result directly from<\/span> Laravel\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    For large export:<\/p>\n\n\n
    Create background export<\/span> job\nGenerate CSV\/Excel\nStore file\nShow download link\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Good pattern:<\/p>\n\n\n
    User clicks Export\n    \u2193\nLaravel creates export<\/span> job\n    \u2193\nQueue worker generates file\n    \u2193\nUser downloads file\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Node.js can also handle heavy export jobs, but Laravel queues are enough for most applications.<\/p>\n\n\n\n
    \n\n\n\n
    Step 10: Bulk Action Best Practice<\/h1>\n\n\n\n
    Do not send full records.<\/p>\n\n\n\n
    Bad:<\/p>\n\n\n
    {\n  \"records\"<\/span>: [\n    {\"id\"<\/span>: 1<\/span>, \"name\"<\/span>: \"Rajesh\"<\/span>},\n    {\"id\"<\/span>: 2<\/span>, \"name\"<\/span>: \"Amit\"<\/span>}\n  ]\n}\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    Good:<\/p>\n\n\n
    {\n  \"ids\"<\/span>: [1<\/span>, 2<\/span>, 3<\/span>],\n  \"action\"<\/span>: \"activate\"<\/span>\n}\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    For \u201cselect all matching filters\u201d:<\/p>\n\n\n
    {\n  \"select_all_matching\"<\/span>: true<\/span>,\n  \"filters\"<\/span>: {\n    \"status\"<\/span>: \"pending\"<\/span>,\n    \"search\"<\/span>: \"doctor\"<\/span>\n  },\n  \"action\"<\/span>: \"approve\"<\/span>\n}\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Where Node.js Fits<\/h1>\n\n\n\n
    Since you are also using Node.js, use it only where it adds value.<\/p>\n\n\n\n
    Use Node.js for:<\/p>\n\n\n
    Realtime notifications\nWebSocket updates\nHeavy export<\/span> workers\nExternal API sync\nBackground processing\nActivity stream\nSearch microservice\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Do not use Node.js just to duplicate Laravel listing APIs. That creates unnecessary complexity.<\/p>\n\n\n\n
    Best approach:<\/p>\n\n\n
    Laravel = primary listing backend\nNode.js = optional async<\/span>\/realtime services\nAlpine.js = frontend interaction\nTailwind CSS = UI design\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Best Implementation Strategy for Entire Application<\/h1>\n\n\n\n
    Phase 1: Create Common Foundation<\/h2>\n\n\n\n
    Build these once:<\/p>\n\n\n
    ListingRequest\nListingQuery service\nListing Blade components\nStatusBadge component\nPagination component\nSearch\/filter toolbar\nBulk action component\nEmpty<\/span>\/loading\/error states\nConfirmation modal\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Phase 2: Define Standard Per Module<\/h2>\n\n\n\n
    For every module, define only this:<\/p>\n\n\n
    [\n    'title'<\/span> => 'Users'<\/span>,\n    'searchable'<\/span> => ['name'<\/span>, 'email'<\/span>, 'phone'<\/span>],\n    'filterable'<\/span> => [\n        'status'<\/span> => 'status'<\/span>,\n        'role'<\/span> => 'role'<\/span>,\n    ],\n    'sortable'<\/span> => ['name'<\/span>, 'status'<\/span>, 'created_at'<\/span>],\n    'columns'<\/span> => ['name'<\/span>, 'email'<\/span>, 'status'<\/span>, 'created_at'<\/span>],\n    'actions'<\/span> => ['view'<\/span>, 'edit'<\/span>, 'delete'<\/span>],\n]\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Phase 3: Apply to Every Listing Page<\/h2>\n\n\n\n
    Convert pages one by one:<\/p>\n\n\n
    Users\nHospitals\nDoctors\nProducts\nOrders\nBookings\nBlogs\nTasks\nPayments\nReports\n<\/code><\/span><\/pre>\n\n\n
    Phase 4: Optimize Database<\/h2>\n\n\n\n
    For every listing table, add indexes for:<\/p>\n\n\n
    Search fields\nFilter fields\nSort fields\nForeign keys\nCreated date\nStatus\n<\/code><\/span><\/pre>\n\n\n
    \n\n\n\n
    Final Mandatory Performance Rules<\/h1>\n\n\n\n
    Use this as your internal rule:<\/p>\n\n\n
    1.<\/span> All listing pages must use<\/span> server<\/span>-side<\/span> pagination<\/span>.\n2. All<\/span> search<\/span> must<\/span> be<\/span> handled<\/span> by<\/span> backend<\/span>\/database<\/span>.\n3. All<\/span> filters<\/span> must<\/span> be<\/span> handled<\/span> by<\/span> backend<\/span>\/database<\/span>.\n4. All<\/span> sorting<\/span> must<\/span> be<\/span> handled<\/span> by<\/span> backend<\/span>\/database<\/span>.\n5. Frontend<\/span> should<\/span> never<\/span> load<\/span> all<\/span> records<\/span>.\n6. Search<\/span> input<\/span> must<\/span> be<\/span> debounced<\/span> by<\/span> 300\u2013500ms<\/span>.\n7. Only<\/span> whitelisted<\/span> fields<\/span> can<\/span> be<\/span> sorted<\/span> or<\/span> filtered<\/span>.\n8. Only<\/span> required<\/span> columns<\/span> should<\/span> be<\/span> selected<\/span>.\n9. Database<\/span> indexes<\/span> must<\/span> exist<\/span> for<\/span> common<\/span> filters<\/span>\/sorts<\/span>.\n10. Large<\/span> exports<\/span> must<\/span> run<\/span> in<\/span> background<\/span> jobs<\/span>.\n11. Permission<\/span> checks<\/span> must<\/span> exist<\/span> on<\/span> frontend<\/span> and<\/span> backend<\/span>.\n12. URL<\/span> query<\/span> parameters<\/span> must<\/span> store<\/span> search<\/span>\/filter<\/span>\/sort<\/span>\/page<\/span> state<\/span>.\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    Best Final Recommendation<\/h1>\n\n\n\n
    For your application, implement this:<\/p>\n\n\n\n
    Universal Laravel Listing Framework with Alpine.js and Tailwind CSS<\/strong><\/h1>\n\n\n\n
    Use:<\/p>\n\n\n
    Laravel ListingQuery service\nLaravel FormRequest validation\nReusable Blade listing components\nAlpine.js URL\/search\/filter interactivity\nTailwind CSS responsive UI\nLaravel queues or Node workers for heavy exports\nDatabase indexes for all listing fields\n<\/code><\/span><\/pre>\n\n\n
    This gives you:<\/p>\n\n\n
    Consistent UI\nFast performance\nReusable code\nEasy maintenance\nMobile-friendly pages\nSecure permissions\nScalable listing pages\n<\/code><\/span><\/pre>\n\n\n
    This is the best and safest way to apply the same mandatory listing standard across your entire web application.<\/p>\n","protected":false},"excerpt":{"rendered":"
    for any listing page, these should be treated as mandatory standard options. Mandatory Options for Every Listing Page # Mandatory… <\/p>\n","protected":false},"author":1,"featured_media":2306,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"series":[],"class_list":["post-2305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/posts\/2305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/comments?post=2305"}],"version-history":[{"count":1,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/posts\/2305\/revisions"}],"predecessor-version":[{"id":2307,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/posts\/2305\/revisions\/2307"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/media\/2306"}],"wp:attachment":[{"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/media?parent=2305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/categories?post=2305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/tags?post=2305"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.rajeshkumar.xyz\/blog\/wp-json\/wp\/v2\/series?post=2305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}