Confirm?

Are you sure you want to proceed?
d
dominik siler

Inventory Table Design

Clone & Customize via AI

The Blazor Evidence Table displays selectable evidence items in a responsive table. Includes InputText search binding and row selection via InputCheckbox for quick item selection.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Header with app name, search InputText, notification/theme icons and user info. - Data table with selectable rows, header select-all checkbox, striped rows, and column action icons (filter/sort icons present in UI). - Row click selection with visual highlight and per-row InputCheckbox binding. ## Key components - InputText (search input) and InputCheckbox (row and header checkboxes) - Plain HTML <table> with <thead>/<tbody> populated via @foreach - @bind-Value on searchText and EvidenceItemModel.IsSelected - @onclick handler for row selection (OnRowClick) and selectedRowIndex tracking - EvidenceItemModel data model with Quantity, Execution, Storage, LocationDescription, SerialNumber, IsSelected ## How it works - items is initialized in OnInitialized with a list of EvidenceItemModel and bound into the table via @foreach. - InputText binds to searchText; the page currently does not apply searchText to filter items (filter logic missing). - InputCheckbox binds each item's IsSelected; the header checkbox is bound to selectAll but no propagation logic is implemented. - Clicking a row sets selectedRowIndex and toggles the CSS class row-selected for visual emphasis. ## Styling - Uses scoped CSS with CSS variables for palette and a media query for max-width:768px to hide the centered title on small screens. - No Tailwind, Bootstrap, or MudBlazor detected; icons are Font Awesome-based in markup. - Table layout uses nowrap cells, overflow-x:auto for horizontal scrolling, fixed padding and min-width on wide columns for responsiveness. ## Reuse steps 1. Add EvidencePage.razor and EvidenceItemModel.cs into a Blazor WebAssembly or Server project. 2. Ensure Microsoft.AspNetCore.Components.Forms is available (InputText/InputCheckbox are Blazor primitives). 3. Include Font Awesome or replace icons with SVGs; import the icon CSS in index.html or _Host.cshtml. 4. Replace the hard-coded items list with an injected data service (register service in Program.cs) and implement server-side paging/filtering. 5. Implement select-all behavior, apply searchText to filter items (LINQ), and add sorting/paging handlers. 6. Add ARIA attributes, keyboard navigation, and unit tests before production use. ## Limitations & next steps - searchText binding exists but filtering logic is not implemented; add live or debounced filtering. - selectAll is bound but does not update each item's IsSelected; add two-way propagation in code-behind. - No server integration, paging, sorting, or persistent storage is included. - Accessibility improvements needed (ARIA labels for icons, focus states, keyboard support) and localization if required. - Consider converting to a reusable component or integrating a data grid library for large datasets.